bert.hausmans/band-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial commit - Band Management application

Browse Source
This commit is contained in:
Bert Hausmans
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

641
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/logistics/templates/app_logistics_dashboard.html Normal file
View File

@@ -0,0 +1,641 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Dashboard - Logistics{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/app-logistics-dashboard.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-logistics-dashboard.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Card Border Shadow -->
<div class="col-lg-3 col-sm-6">
<div class="card card-border-shadow-primary h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<div class="avatar me-4">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-truck icon-28px"></i></span>
</div>
<h4 class="mb-0">42</h4>
</div>
<p class="mb-1">On route vehicles</p>
<p class="mb-0">
<span class="text-heading fw-medium me-2">+18.2%</span>
<small class="text-body-secondary">than last week</small>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card card-border-shadow-warning h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<div class="avatar me-4">
<span class="avatar-initial rounded bg-label-warning"><i class="icon-base ti tabler-alert-triangle icon-28px"></i></span>
</div>
<h4 class="mb-0">8</h4>
</div>
<p class="mb-1">Vehicles with errors</p>
<p class="mb-0">
<span class="text-heading fw-medium me-2">-8.7%</span>
<small class="text-body-secondary">than last week</small>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card card-border-shadow-danger h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<div class="avatar me-4">
<span class="avatar-initial rounded bg-label-danger"><i class="icon-base ti tabler-git-fork icon-28px"></i></span>
</div>
<h4 class="mb-0">27</h4>
</div>
<p class="mb-1">Deviated from route</p>
<p class="mb-0">
<span class="text-heading fw-medium me-2">+4.3%</span>
<small class="text-body-secondary">than last week</small>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card card-border-shadow-info h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<div class="avatar me-4">
<span class="avatar-initial rounded bg-label-info"><i class="icon-base ti tabler-clock icon-28px"></i></span>
</div>
<h4 class="mb-0">13</h4>
</div>
<p class="mb-1">Late vehicles</p>
<p class="mb-0">
<span class="text-heading fw-medium me-2">-2.5%</span>
<small class="text-body-secondary">than last week</small>
</p>
</div>
</div>
</div>
<!--/ Card Border Shadow -->
<!-- Vehicles overview -->
<div class="col-xxl-6">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Vehicles Overview</h5>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill p-2 border-0 me-n1" type="button" id="vehiclesOverview" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="vehiclesOverview">
<a class="dropdown-item" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="card-body">
<div class="d-none d-lg-flex vehicles-progress-labels mb-6">
<div class="vehicles-progress-label on-the-way-text" style="width: 39.7%;">On the way</div>
<div class="vehicles-progress-label unloading-text" style="width: 28.3%;">Unloading</div>
<div class="vehicles-progress-label loading-text" style="width: 17.4%;">Loading</div>
<div class="vehicles-progress-label waiting-text text-nowrap" style="width: 14.6%;">Waiting</div>
</div>
<div class="vehicles-overview-progress progress rounded-3 mb-3 bg-transparent overflow-hidden" style="height: 46px;">
<div class="progress-bar fw-medium text-start shadow-none bg-lighter text-heading px-4 rounded-0" role="progressbar" style="width: 39.7%" aria-valuenow="39.7" aria-valuemin="0" aria-valuemax="100">39.7%</div>
<div class="progress-bar fw-medium text-start shadow-none bg-primary px-4" role="progressbar" style="width: 28.3%" aria-valuenow="28.3" aria-valuemin="0" aria-valuemax="100">28.3%</div>
<div class="progress-bar fw-medium text-start shadow-none text-bg-info px-2 px-sm-4" role="progressbar" style="width: 17.4%" aria-valuenow="17.4" aria-valuemin="0" aria-valuemax="100">17.4%</div>
<div class="progress-bar fw-medium text-start shadow-none snackbar text-paper px-1 px-sm-3 rounded-0 px-lg-4" role="progressbar" style="width: 14.6%" aria-valuenow="14.6" aria-valuemin="0" aria-valuemax="100">14.6%</div>
</div>
<div class="table-responsive">
<table class="table card-table table-border-top-0 table-border-bottom-0">
<tbody>
<tr>
<td class="w-50 ps-0">
<div class="d-flex justify-content-start align-items-center">
<div class="me-2">
<i class="icon-base ti tabler-car icon-lg text-heading"></i>
</div>
<h6 class="mb-0 fw-normal">On the way</h6>
</div>
</td>
<td class="text-end pe-0 text-nowrap">
<h6 class="mb-0">2hr 10min</h6>
</td>
<td class="text-end pe-0">
<span>39.7%</span>
</td>
</tr>
<tr>
<td class="w-50 ps-0">
<div class="d-flex justify-content-start align-items-center">
<div class="me-2">
<i class="icon-base ti tabler-circle-arrow-down icon-lg text-heading"></i>
</div>
<h6 class="mb-0 fw-normal">Unloading</h6>
</div>
</td>
<td class="text-end pe-0 text-nowrap">
<h6 class="mb-0">3hr 15min</h6>
</td>
<td class="text-end pe-0">
<span>28.3%</span>
</td>
</tr>
<tr>
<td class="w-50 ps-0">
<div class="d-flex justify-content-start align-items-center">
<div class="me-2">
<i class="icon-base ti tabler-circle-arrow-up icon-lg text-heading"></i>
</div>
<h6 class="mb-0 fw-normal">Loading</h6>
</div>
</td>
<td class="text-end pe-0 text-nowrap">
<h6 class="mb-0">1hr 24min</h6>
</td>
<td class="text-end pe-0">
<span>17.4%</span>
</td>
</tr>
<tr>
<td class="w-50 ps-0">
<div class="d-flex justify-content-start align-items-center">
<div class="me-2">
<i class="icon-base ti tabler-clock icon-lg text-heading"></i>
</div>
<h6 class="mb-0 fw-normal">Waiting</h6>
</div>
</td>
<td class="text-end pe-0 text-nowrap">
<h6 class="mb-0">5hr 19min</h6>
</td>
<td class="text-end pe-0">
<span>14.6%</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--/ Vehicles overview -->
<!-- Shipment statistics-->
<div class="col-xxl-6 col-lg-7">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-title mb-0">
<h5 class="mb-1">Shipment statistics</h5>
<p class="card-subtitle">Total number of deliveries 23.8k</p>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-primary">January</button>
<button type="button" class="btn btn-label-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">January</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">February</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">March</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">April</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">May</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">June</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">July</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">August</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">September</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">October</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">November</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">December</a></li>
</ul>
</div>
</div>
<div class="card-body">
<div id="shipmentStatisticsChart"></div>
</div>
</div>
</div>
<!--/ Shipment statistics -->
<!-- Delivery Performance -->
<div class="col-xxl-4 col-lg-5">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<div class="card-title mb-0">
<h5 class="mb-1 me-2">Delivery Performance</h5>
<p class="card-subtitle">12% increase in this month</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill p-2 me-n1" type="button" id="deliveryPerformance" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="deliveryPerformance">
<a class="dropdown-item" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="card-body">
<ul class="p-0 m-0">
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-package icon-26px"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-1 fw-normal">Packages in transit</h6>
<small class="text-success mb-0">
<i class="icon-base ti tabler-chevron-up me-1"></i>
25.8%
</small>
</div>
<div class="user-progress">
<h6 class="text-body mb-0">10k</h6>
</div>
</div>
</li>
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-info"><i class="icon-base ti tabler-truck icon-28px"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-1 fw-normal">Packages out for delivery</h6>
<small class="text-success mb-0">
<i class="icon-base ti tabler-chevron-up me-1"></i>
4.3%
</small>
</div>
<div class="user-progress">
<h6 class="text-body mb-0">5k</h6>
</div>
</div>
</li>
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-success"><i class="icon-base ti tabler-circle-check icon-26px"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-1 fw-normal">Packages delivered</h6>
<small class="text-danger mb-0">
<i class="icon-base ti tabler-chevron-down me-1"></i>
12.5
</small>
</div>
<div class="user-progress">
<h6 class="text-body mb-0">15k</h6>
</div>
</div>
</li>
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-warning"><i class="icon-base ti tabler-percentage icon-26px"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-1 fw-normal">Delivery success rate</h6>
<small class="text-success mb-0">
<i class="icon-base ti tabler-chevron-up me-1"></i>
35.6%
</small>
</div>
<div class="user-progress">
<h6 class="text-body mb-0">95%</h6>
</div>
</div>
</li>
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-secondary"><i class="icon-base ti tabler-clock icon-26px"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-1 fw-normal">Average delivery time</h6>
<small class="text-danger mb-0">
<i class="icon-base ti tabler-chevron-down me-1"></i>
2.15
</small>
</div>
<div class="user-progress">
<h6 class="text-body mb-0">2.5 Days</h6>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-danger"><i class="icon-base ti tabler-users icon-26px"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-1 fw-normal">Customer satisfaction</h6>
<small class="text-success mb-0">
<i class="icon-base ti tabler-chevron-up me-1"></i>
5.7%
</small>
</div>
<div class="user-progress">
<h6 class="text-body mb-0">4.5/5</h6>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--/ Delivery Performance -->
<!-- Reasons for delivery exceptions -->
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Reasons for delivery exceptions</h5>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill p-2 me-n1" type="button" id="deliveryExceptions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="deliveryExceptions">
<a class="dropdown-item" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="card-body">
<div id="deliveryExceptionsChart"></div>
</div>
</div>
</div>
<!--/ Reasons for delivery exceptions -->
<!-- Orders by Countries -->
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<div class="card-title mb-0">
<h5 class="mb-1">Orders by Countries</h5>
<p class="card-subtitle">62 deliveries in progress</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill p-2 me-n1" type="button" id="ordersCountries" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesByCountryTabs">
<a class="dropdown-item" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="nav-align-top">
<ul class="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-new" aria-controls="navs-justified-new" aria-selected="true">New</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-link-preparing" aria-controls="navs-justified-link-preparing" aria-selected="false">Preparing</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-link-shipping" aria-controls="navs-justified-link-shipping" aria-selected="false">Shipping</button>
</li>
</ul>
<div class="tab-content border-0 mx-1">
<div class="tab-pane fade show active" id="navs-justified-new" role="tabpanel">
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<p class="text-body mb-0">939 Orange, California(CA), 92118</p>
</div>
</li>
</ul>
<div class="border-1 border-light border-dashed my-4"></div>
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="navs-justified-link-preparing" role="tabpanel">
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<p class="text-body mb-0">939 Orange, California(CA), 92118</p>
</div>
</li>
<li class="timeline-item ps-6 border-transparent border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
</div>
</li>
</ul>
<div class="border-1 border-light border-dashed my-4"></div>
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="navs-justified-link-shipping" role="tabpanel">
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<p class="text-body mb-0">939 Orange, California(CA), 92118</p>
</div>
</li>
</ul>
<div class="border-1 border-light border-dashed my-4"></div>
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Orders by Countries -->
<!-- On route vehicles Table -->
<div class="col-12 order-5">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-title mb-0">
<h5 class="m-0 me-2">On route vehicles</h5>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill p-2 me-n1" type="button" id="routeVehicles" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="routeVehicles">
<a class="dropdown-item" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="card-datatable border-top">
<table class="dt-route-vehicles table">
<thead>
<tr>
<th></th>
<th></th>
<th>location</th>
<th>starting route</th>
<th>ending route</th>
<th>warnings</th>
<th class="w-20">progress</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!--/ On route vehicles Table -->
</div>
{% endblock %}

342
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/logistics/templates/app_logistics_fleet.html Normal file
View File

@@ -0,0 +1,342 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Fleet - Logistics{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/mapbox-gl/mapbox-gl.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/mapbox-gl/mapbox-gl.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/app-logistics-fleet.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-logistics-fleet.js' %}"></script>
{% endblock page_js %}
{% block content %}
{% if ENVIRONMENT == "local" %}
<div class="alert alert-outline-primary alert-dismissible" role="alert">
Fleet page is using Mapbox to display maps. The maps on the fleet page may not load on your localhost or domain
because you need to add your own access token for Mapbox. <br />For more details refer to the <a href="https://docs.mapbox.com/mapbox-gl-js/guides/" class="alert-link" target="_blank">
Mapbox </a> section in the <a href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/faq.html#mapbox-not-loading" class="alert-link" target="_blank">documentation</a>.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
{% endif %}
<div class="card overflow-hidden">
<!-- Map Menu Wrapper -->
<div class="d-flex app-logistics-fleet-wrapper">
<!-- Map Menu Button when screen is < md -->
<div class="flex-shrink-0 position-fixed m-6 d-md-none w-auto z-1">
<button class="btn btn-icon btn-white btn-white-dark-variant z-2" data-bs-toggle="sidebar" data-overlay="" data-target="#app-logistics-fleet-sidebar"><i class="icon-base ti tabler-menu icon-md"></i></button>
</div>
<!-- Map Menu -->
<div class="app-logistics-fleet-sidebar col h-100" id="app-logistics-fleet-sidebar">
<div class="card-header border-0 pt-6 pb-1 d-flex justify-content-between">
<h5 class="mb-0 card-title">Fleet</h5>
<!-- Sidebar close button -->
<i class="icon-base ti tabler-x icon-xs cursor-pointer close-sidebar d-md-none d-block btn btn-sm btn-icon p-0" data-bs-toggle="sidebar" data-overlay data-target="#app-logistics-fleet-sidebar"></i>
</div>
<!-- Sidebar when screen < md -->
<div class="card-body p-0 logistics-fleet-sidebar-body">
<!-- Menu Accordion -->
<div class="accordion py-2 px-1" id="fleet" data-bs-toggle="sidebar" data-overlay data-target="#app-logistics-fleet-sidebar">
<!-- Fleet 1 -->
<div class="accordion-item border-0 active mb-0 shadow-none" id="fl-1">
<div class="accordion-header" id="fleetOne">
<div role="button" class="accordion-button shadow-none align-items-center" data-bs-toggle="collapse" data-bs-target="#fleet1" aria-expanded="true" aria-controls="fleet1">
<div class="d-flex align-items-center">
<div class="avatar-wrapper">
<div class="avatar me-4">
<span class="avatar-initial rounded-circle bg-label-secondary w-px-40 h-px-40"><i class="icon-base ti tabler-car icon-lg"></i></span>
</div>
</div>
<span class="d-flex flex-column gap-1">
<span class="text-heading">VOL-342808</span>
<span class="text-body">Chelsea, NY, USA</span>
</span>
</div>
</div>
</div>
<div id="fleet1" class="accordion-collapse collapse show" data-bs-parent="#fleet">
<div class="accordion-body pt-5 pb-0">
<div class="d-flex align-items-center justify-content-between">
<h6 class="fw-normal mb-1">Delivery Process</h6>
<p class="text-body mb-1">88%</p>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar" role="progressbar" style="width: 88%;" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<ul class="timeline ps-4 mt-6 mb-2">
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-success text-uppercase">tracking number created</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<small class="text-body">Sep 01, 7:53 AM</small>
</div>
</li>
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-success text-uppercase">out for delivery</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<small class="text-body">Sep 03, 8:02 AM</small>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin mt-1"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-primary text-uppercase fw-medium">arriving</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<small class="text-body">Sep 04, 8:18 AM</small>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Fleet 2 -->
<div class="accordion-item border-0 mt-0 mb-0 shadow-none" id="fl-2">
<div class="accordion-header" id="fleetTwo">
<div role="button" class="accordion-button collapsed shadow-none align-items-center" data-bs-toggle="collapse" data-bs-target="#fleet2" aria-expanded="true" aria-controls="fleet2">
<div class="d-flex align-items-center">
<div class="avatar-wrapper">
<div class="avatar me-4">
<span class="avatar-initial rounded-circle bg-label-secondary w-px-40 h-px-40"><i class="icon-base ti tabler-car icon-lg"></i></span>
</div>
</div>
<span class="d-flex flex-column gap-1">
<span class="text-heading">VOL-954784</span>
<span class="text-body">Lincoln Harbor, NY, USA</span>
</span>
</div>
</div>
</div>
<div id="fleet2" class="accordion-collapse collapse" data-bs-parent="#fleet">
<div class="accordion-body pt-4 pb-0">
<div class="d-flex align-items-center justify-content-between">
<h6 class="fw-normal mb-1">Delivery Process</h6>
<p class="text-body mb-1">100%</p>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<ul class="timeline ps-4 mt-6 mb-2">
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-success text-uppercase">tracking number created</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<small class="text-body">Sep 01, 7:53 AM</small>
</div>
</li>
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-success text-uppercase">out for delivery</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<small class="text-body">Sep 03, 8:02 AM</small>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin mt-1"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-primary text-uppercase fw-medium">arrived</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<small class="text-body">Sep 04, 8:18 AM</small>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Fleet 3 -->
<div class="accordion-item border-0 mt-0 mb-0 shadow-none" id="fl-3">
<div class="accordion-header" id="fleetThree">
<div role="button" class="accordion-button collapsed shadow-none align-items-center" data-bs-toggle="collapse" data-bs-target="#fleet3" aria-expanded="true" aria-controls="fleet3">
<div class="d-flex align-items-center">
<div class="avatar-wrapper">
<div class="avatar me-4">
<span class="avatar-initial rounded-circle bg-label-secondary w-px-40 h-px-40"><i class="icon-base ti tabler-car icon-lg"></i></span>
</div>
</div>
<span class="d-flex flex-column gap-1">
<span class="text-heading">VOL-342808</span>
<span class="text-body">Midtown East, NY, USA</span>
</span>
</div>
</div>
</div>
<div id="fleet3" class="accordion-collapse collapse" data-bs-parent="#fleet">
<div class="accordion-body pt-4 pb-0">
<div class="d-flex align-items-center justify-content-between">
<h6 class="fw-normal mb-1">Delivery Process</h6>
<p class="text-body mb-1">60%</p>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<ul class="timeline ps-4 mt-6 mb-2">
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-success text-uppercase">tracking number created</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<small class="text-body">Sep 01, 7:53 AM</small>
</div>
</li>
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-success text-uppercase">out for delivery</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<small class="text-body">Sep 03, 8:02 AM</small>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-secondary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin mt-1"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-secondary text-uppercase fw-medium">arriving</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<small class="text-body">Sep 04, 8:18 AM</small>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Fleet 4 -->
<div class="accordion-item border-0 mt-0 mb-4 shadow-none" id="fl-4">
<div class="accordion-header" id="fleetFour">
<div role="button" class="accordion-button collapsed shadow-none align-items-center" data-bs-toggle="collapse" data-bs-target="#fleet4" aria-expanded="true" aria-controls="fleet4">
<div class="d-flex align-items-center">
<div class="avatar-wrapper">
<div class="avatar me-4">
<span class="avatar-initial rounded-circle bg-label-secondary w-px-40 h-px-40"><i class="icon-base ti tabler-car icon-lg"></i></span>
</div>
</div>
<span class="d-flex flex-column gap-1">
<span class="text-heading">VOL-343908</span>
<span class="text-body">Hoboken, NY, USA</span>
</span>
</div>
</div>
</div>
<div id="fleet4" class="accordion-collapse collapse" data-bs-parent="#fleet">
<div class="accordion-body pt-4 pb-0">
<div class="d-flex align-items-center justify-content-between">
<h6 class="fw-normal mb-1">Delivery Process</h6>
<p class="text-body mb-1">28%</p>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar" role="progressbar" style="width: 28%;" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<ul class="timeline ps-4 mt-6">
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-success text-uppercase">tracking number created</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<small class="text-body">Sep 01, 7:53 AM</small>
</div>
</li>
<li class="timeline-item ps-6 pb-3 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-secondary border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-secondary text-uppercase fw-medium">out for delivery</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<small class="text-body">Sep 03, 8:02 AM</small>
</div>
</li>
<li class="timeline-item ps-6 border-transparent">
<span class="timeline-indicator-advanced timeline-indicator-secondary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin mt-1"></i>
</span>
<div class="timeline-event ps-0 pb-0">
<div class="timeline-header">
<small class="text-secondary text-uppercase fw-medium">arriving</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<small class="text-body">Sep 04, 8:18 AM</small>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mapbox Map container -->
<div class="col h-100 map-container">
<!-- Map -->
<div id="map" class="h-100 w-100"></div>
</div>
<!-- Overlay Hidden -->
<div class="app-overlay d-none"></div>
</div>
</div>
{% endblock %}