359 lines
23 KiB
HTML
359 lines
23 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="row mb-4 mb-xl-6 mb-xxl-4 gy-3 justify-content-between">
|
|
<div class="col-auto">
|
|
<h2 class="mb-0 text-body-emphasis">{{ dealer.get_local_name }}</h2>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="d-flex gap-3"><a class="btn btn-phoenix-primary" href="#!"><span class="fa-solid fa-plus me-2"></span>New Package</a><a class="btn btn-primary px-4 px-sm-11" href="#!"><span class="fa-regular fa-calendar-days me-2"></span>Book Now</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="row gx-3">
|
|
<div class="col-xxl-7">
|
|
<div class="row gx-7 pe-xxl-3">
|
|
<div class="col-12 col-xl-5 col-xxl-12">
|
|
<div class="row g-0">
|
|
<div class="col-6 col-xl-12 col-xxl-6 border-bottom border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
|
|
<h5 class="text-body mb-4">{% trans 'inventory'|capfirst %}</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="echart-booking-value order-1 order-sm-0 order-md-1" style="height:54px; width: 90px"></div>
|
|
<div class="mt-4 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">{{ total_cars }}</h3><span class="badge badge-phoenix badge-phoenix-primary me-2 fs-10"><span class="fa-solid fa-plus me-1"></span>23.35%</span><span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-12 col-xxl-6 border-bottom py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
|
|
<h5 class="text-body mb-4">{% trans 'inventory value'|capfirst %}</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1"><span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
|
|
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
|
|
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap">{% trans "Profits"|upper %}</p>
|
|
<h4 class="text-body-highlight mb-0">{{ total_profit }} {% trans 'SAR' %}</h4>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">{{ total_selling_price }} {% trans 'SAR' %}</h3><span class="badge badge-phoenix badge-phoenix-success me-2 fs-10"><span class="fa-solid fa-plus me-1"></span>3.98%</span><span class="fs-9 text-body-secondary text-nowrap d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-12 col-xxl-6 border-bottom-xl border-bottom-xxl-0 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
|
|
<h5 class="text-body mb-4">{% trans 'Commissions' %}</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="echart-commission order-sm-0 order-md-1" style="height: 54px; width: 54px"></div>
|
|
<div class="mt-3 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">$3,339.00</h3>
|
|
<span class="badge badge-phoenix badge-phoenix-danger me-2 fs-10">
|
|
<span class="fa-solid fa-minus me-1"></span>12.21%</span>
|
|
<span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-12 col-xxl-6 py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
|
|
<h5 class="text-body mb-4">Canceled Booking</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="chart-cancel-booking order-sm-0 order-md-1" style="height:54px; width:78px"></div>
|
|
<div class="mt-3 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">120.00</h3><span class="badge badge-phoenix badge-phoenix-danger me-2 fs-10"><span class="fa-solid fa-plus me-1"></span>5.76%</span><span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-7 col-xxl-12">
|
|
<div class="mt-5 mt-xl-0 mt-xxl-5 mb-5 mb-xxl-0">
|
|
<div class="row flex-between-end gy-3 gx-2">
|
|
<div class="col-auto">
|
|
<h3 class="text-body-highlight">Financial activities</h3>
|
|
<p class="mb-0 text-body-tertiary">Balance</p>
|
|
</div>
|
|
|
|
<div class="col-auto order-md-1 order-lg-0 order-xxl-1">
|
|
<!--<div class="dropdown">
|
|
<button class="btn btn-sm btn-phoenix-secondary bg-body-emphasis bg-body-hover action-btn" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h" data-fa-transform="shrink-2"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
|
|
</div>-->
|
|
</div>
|
|
<div class="col-12 col-md-auto col-lg-12 col-xxl-auto mx-auto order-1 order-sm-0">
|
|
<div class="d-flex justify-content-center gap-6 gap-xxl-4">
|
|
<button class="btn d-flex align-items-center p-0 shadow-none fw-semibold" id="profit"><span class="bg-primary-light me-2" style="width: 16px; height: 6px; border-radius: 1px" data-bs-theme="light"></span><span class="text-body-secondary">Profit</span></button>
|
|
<button class="btn d-flex align-items-center p-0 shadow-none fw-semibold" id="revenue"><span class="bg-success-light me-2" style="width: 16px; height: 6px; border-radius: 1px" data-bs-theme="light"></span><span class="text-body-secondary">Revenue</span></button>
|
|
<button class="btn d-flex align-items-center p-0 shadow-none fw-semibold" id="expanses"><span class="bg-info-light me-2" style="width: 16px; height: 6px; border-radius: 1px" data-bs-theme="light"></span><span class="text-body-secondary">Expanses</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echart-financial-Activities" data-options='{"optionOne":"profit","optionTwo":"revenue","optionThree":"expanses"}'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xxl-5">
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-6 col-xxl-12">
|
|
<div class="col-12">
|
|
<div class="card mb-3">
|
|
<div class="bg-holder bg-card" style="background-image:url({% static 'images/spot-illustrations/39.png' %});background-position: bottom right 0px; background-size: auto;">
|
|
</div>
|
|
|
|
<div class="card-body z-5">
|
|
<div>
|
|
<h3 class="text-body-highlight mb-3">{{ _("Leads") }}</h3>
|
|
<div class="col-6 col-md-6">
|
|
<div class="row align-items-center g-9">
|
|
<div class="col-4">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-stack" style="min-height: 46px;min-width: 46px;">
|
|
<span class="fa-solid fa-square fa-stack-2x dark__text-opacity-50 text-success-light" data-fa-transform="down-4 rotate--10 left-4"></span>
|
|
<span class="fa-solid fa-circle fa-stack-2x stack-circle text-stats-circle-success" data-fa-transform="up-4 right-3 grow-2"></span>
|
|
<span class="fa-stack-1x fa-solid fa-star text-success " data-fa-transform="shrink-2 up-8 right-6"></span>
|
|
</span>
|
|
<div class="ms-2">
|
|
<h4 class="mb-0">{{ new_leads }} </h4>
|
|
<p class="text-body-secondary fs-9 mb-0">{{ _("New")}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-stack" style="min-height: 46px;min-width: 46px;">
|
|
<span class="fa-solid fa-square fa-stack-2x dark__text-opacity-50 text-warning-light" data-fa-transform="down-4 rotate--10 left-4"></span>
|
|
<span class="fa-solid fa-circle fa-stack-2x stack-circle text-stats-circle-warning" data-fa-transform="up-4 right-3 grow-2"></span>
|
|
<span class="fa-stack-1x fa-solid fa-pause text-warning " data-fa-transform="shrink-2 up-8 right-6"></span>
|
|
</span>
|
|
<div class="ms-2">
|
|
<h4 class="mb-0">{{ pending_leads }}</h4>
|
|
<p class="text-body-secondary fs-9 mb-0">{{ _("Pending")}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-stack" style="min-height: 46px;min-width: 46px;">
|
|
<span class="fa-solid fa-square fa-stack-2x dark__text-opacity-50 text-danger-light" data-fa-transform="down-4 rotate--10 left-4"></span>
|
|
<span class="fa-solid fa-circle fa-stack-2x stack-circle text-stats-circle-danger" data-fa-transform="up-4 right-3 grow-2"></span>
|
|
<span class="fa-stack-1x fa-solid fa-xmark text-danger " data-fa-transform="shrink-2 up-8 right-6"></span>
|
|
</span>
|
|
<div class="ms-2">
|
|
<h4 class="mb-0">{{ canceled_leads }}</h4>
|
|
<p class="text-body-secondary fs-9 mb-0">{{ _("Canceled")}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card h-100" data-list='{"valueNames":["country","users","status"],"page":4}'>
|
|
<div class="card-header border-0 d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h3 class="text-body-highlight">Visitors</h3>
|
|
<p class="mb-0 text-body-tertiary">Users across countries</p>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-phoenix-secondary bg-body-emphasis bg-body-hover action-btn" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h" data-fa-transform="shrink-2"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body py-0">
|
|
<h4 class="d-flex align-items-center gap-2 text-body-highlight mb-3"><span class="real-time-user" data-countup='{"endValue":119}'>0</span><span class="fs-9 fw-normal">User per second</span></h4>
|
|
<div class="echart-country-wise-visitors" style="height: 43px; width: 100%"></div>
|
|
<div class="table-responsive scrollbar mt-3">
|
|
<table class="table fs-10 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="sort ps-0 align-middle" data-sort="country" style="min-width: 100px">COUNTRY NAME</th>
|
|
<th class="sort align-middle" data-sort="users" style="min-width: 115px">USERS</th>
|
|
<th class="sort text-end align-middle" data-sort="status">STATUS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="table-country-wise-visitors">
|
|
<tr>
|
|
<td class="py-2 white-space-nowrap ps-0 country"><a class="d-flex align-items-center text-primary py-md-1 py-xxl-0" href="#!"><img src="{% static 'images/country/india-2.png' %}" alt="" width="40" />
|
|
<p class="mb-0 ps-3 fw-bold fs-9">India</p>
|
|
</a></td>
|
|
<td class="py-2 align-middle users">
|
|
<h6>92,896<span class="text-body-tertiary fw-semibold ms-2">(41.6%)</span></h6>
|
|
</td>
|
|
<td class="py-2 align-middle text-end status"><span class="badge badge-phoenix fs-10 badge-phoenix-info"><span class="fa-solid fa-plus me-1"></span>15.21%</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 white-space-nowrap ps-0 country"><a class="d-flex align-items-center text-primary py-md-1 py-xxl-0" href="#!"><img src="{% static 'images/country/china-2.png' %}" alt="" width="40" />
|
|
<p class="mb-0 ps-3 fw-bold fs-9">China</p>
|
|
</a></td>
|
|
<td class="py-2 align-middle users">
|
|
<h6>50,496<span class="text-body-tertiary fw-semibold ms-2">(32.8%)</span></h6>
|
|
</td>
|
|
<td class="py-2 align-middle text-end status"><span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fa-solid fa-plus me-1"></span>05.21%</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 white-space-nowrap ps-0 country"><a class="d-flex align-items-center text-primary py-md-1 py-xxl-0" href="#!"><img src="{% static 'images/country/usa-2.png' %}" alt="" width="40" />
|
|
<p class="mb-0 ps-3 fw-bold fs-9">USA</p>
|
|
</a></td>
|
|
<td class="py-2 align-middle users">
|
|
<h6>45,679<span class="text-body-tertiary fw-semibold ms-2">(24.3%)</span></h6>
|
|
</td>
|
|
<td class="py-2 align-middle text-end status"><span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="fa-solid fa-plus me-1"></span>22.12%</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer pt-3 border-0">
|
|
<div class="d-flex align-items-center">
|
|
<div class="pagination d-none"></div>
|
|
<p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-bold fs-9 ms-auto" href="#!">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-xxl-12">
|
|
<div class="card h-100">
|
|
<div class="card-header border-0 pb-2 d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h3 class="text-body-highlight">Holidays</h3>
|
|
<p class="mb-sm-0 text-body-tertiary">Holidays next month</p>
|
|
</div><a class="btn btn-sm btn-phoenix-secondary d-flex align-items-center w-max-content" href="#!"><span class="text-nowrap">Calender</span><span class="fa-solid fa-chevron-right ms-2 fs-10"></span></a>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mb-5">
|
|
<div class="col-xl-5 col-xxl-7">
|
|
<div class="card h-xxl-100">
|
|
<div class="card-header pb-3">
|
|
<div class="row justify-content-between g-3">
|
|
<div class="col-auto">
|
|
<h3 class="text-body-highlight">Gross Profit</h3>
|
|
<p class="mb-0">Annual income according to the board</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<select class="form-select form-select-sm">
|
|
<option>Last Fiscal Year</option>
|
|
<option>Last Calendar year</option>
|
|
<option>Last Quarter</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row align-items-center h-100 gy-5">
|
|
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto order-md-1 order-xl-0 order-xxl-1 px-md-8 px-xl-6">
|
|
<div class="echart-gross-profit mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="width: 250px; height: 250px"></div>
|
|
</div>
|
|
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto flex-1 h-md-100">
|
|
<div class="d-flex flex-column justify-content-between h-md-100 h-xl-auto h-xxl-100">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-primary-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Flight</h6>
|
|
<h5 class="mb-0 text-body">$162,791,400</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-primary"><span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">15.50%</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-info-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Flight (Package)</h6>
|
|
<h5 class="mb-0 text-body">$135,659,500</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-danger"><span class="fw-bold" data-feather="trending-down" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">11.09%</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-warning-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel</h6>
|
|
<h5 class="mb-0 text-body">$271,319,000</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-warning"><span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">29.98%</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-success-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel (Package)</h6>
|
|
<h5 class="mb-0 text-body">$162,791,400</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-success"><span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">03.90%</p>
|
|
</div>
|
|
</div>
|
|
<hr class="d-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-7 col-xxl-5">
|
|
<div class="card h-100">
|
|
<div class="card-header pb-3 d-sm-flex d-xl-block d-xxl-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h3 class="text-body-highlight">Bookings</h3>
|
|
<p class="mb-0">Completed and canceled bookings</p>
|
|
</div>
|
|
<select class="form-select form-select-sm pe-9 w-auto mt-3 mt-sm-0 mt-xl-3 mt-xxl-0" data-booking-options="data-booking-options">
|
|
<option value="0">Hotel</option>
|
|
<option value="1">Flight</option>
|
|
<option value="2">Trip</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="echart-bookings" style="height: 100%;min-height: 322px; width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const profitData = [
|
|
[350000, 390000, 410700, 450000, 390000, 410700],
|
|
[245000, 310000, 420000, 480000, 530000, 580000],
|
|
[278450, 513220, 359890, 444567, 201345, 589000]
|
|
];
|
|
const revenueData = [
|
|
[-810000, -640000, -630000, -590000, -620000, -780000],
|
|
[-482310, -726590, -589120, -674832, -811245, -455678],
|
|
[-432567, -688921, -517389, -759234, -601876, -485112]
|
|
];
|
|
const expansesData = [
|
|
[-450000, -250000, -200000, -120000, -230000, -270000],
|
|
[-243567, -156789, -398234, -120456, -321890, -465678],
|
|
[-235678, -142345, -398765, -287456, -173890, -451234]
|
|
];
|
|
</script>
|
|
|
|
{% endblock %}
|