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

0
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/__init__.py Normal file
View File

2
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/admin.py Normal file
View File

@@ -0,0 +1,2 @@
# Register your models here.

6
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/apps.py Normal file
View File

@@ -0,0 +1,6 @@
from django.apps import AppConfig
class CardsConfig(AppConfig):
default_auto_field = "django.db.models.BigAutoField"
name = "apps.cards"

0
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/migrations/__init__.py Normal file
View File

2
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/models.py Normal file
View File

@@ -0,0 +1,2 @@
# Create your models here.

413
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_actions.html Normal file
View File

@@ -0,0 +1,413 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Cards Actions- UI elements{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/spinkit/spinkit.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/notiflix/notiflix.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/notiflix/notiflix.js' %}"></script>
<script src="{% static 'vendor/libs/sortablejs/sortable.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/cards-actions.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Cards Action -->
<div class="card card-action mb-12">
<div class="card-alert"></div>
<div class="card-header">
<h5 class="card-action-title mb-0">Cards Action</h5>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-collapsible"><i class="icon-base ti tabler-chevron-up icon-sm"></i></a>
</li>
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-reload"><i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl icon-sm"></i></a>
</li>
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-expand"><i class="icon-base ti tabler-arrows-maximize me-2 icon-sm"></i></a>
</li>
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-close"><i class="icon-base ti tabler-x icon-sm"></i></a>
</li>
</ul>
</div>
</div>
<div class="collapse show">
<table class="table table-hover">
<thead>
<tr>
<th>Action</th>
<th class="text-center">Icon</th>
<th>Details</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td>Collapse</td>
<td class="text-center">
<i class="icon-base ti tabler-chevron-up icon-sm"></i>
</td>
<td>Collapse card content using collapse action.</td>
</tr>
<tr>
<td>Refresh Content</td>
<td class="text-center">
<i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl icon-sm"></i>
</td>
<td>Refresh your card content using refresh action.</td>
</tr>
<tr>
<td>Expand Card</td>
<td class="text-center">
<i class="icon-base ti tabler-arrows-maximize icon-sm"></i>
</td>
<td>Maximize your card using expand action</td>
</tr>
<tr>
<td>Remove Card</td>
<td class="text-center">
<i class="icon-base ti tabler-x icon-sm"></i>
</td>
<td>Remove card from page using remove card action</td>
</tr>
</tbody>
</table>
</div>
</div>
<h6 class="pb-1 mb-6 text-body-secondary">Examples</h6>
<p>Use <code>.card-action</code> class with <code>.card</code> class to create action card. Use <code>.card-action-title</code> for action card title and <code>.card-action-element</code> to warp the actions icons.</p>
<div class="row mb-12">
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-header">
<h5 class="card-action-title mb-0">Collapsible Card</h5>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-collapsible"><i class="icon-base ti tabler-chevron-up"></i></a>
</li>
</ul>
</div>
</div>
<div class="collapse show">
<div class="card-body">
<p class="card-text">To create a collapsible card, use <code>.card-collapsible</code> class with action item. To show the collapsible content default use <code>.show</code> class with <code>.collapse</code>.</p>
<p class="card-text">Click on <i class="icon-base ti tabler-chevron-up"></i> to see card collapse in action.</p>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-alert"></div>
<div class="card-header">
<h5 class="card-action-title mb-0">Refresh Content</h5>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-reload"><i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl"></i></a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<p class="card-text">To create a card with refresh action, use <code>.card-reload</code> class with action item. Use <code>.card-alert</code> class to show custom response message.</p>
<p class="card-text">Click on <i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl"></i> icon to see refresh card content in action.</p>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-header">
<h5 class="card-action-title mb-0">Expand Card</h5>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-expand"><i class="icon-base ti tabler-arrows-maximize"></i></a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<p class="card-text">To create a card with expand(fullscreen) action, use <code>.card-expand</code> class with action item. Use <kbd>ESC</kbd> key to exit from the arrows-maximize mode.</p>
<p class="card-text">Click on <i class="icon-base ti tabler-arrows-maximize"></i> icon to see expand card in action.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-alert"></div>
<div class="card-header">
<h5 class="card-action-title mb-0">Remove Card</h5>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-close"><i class="icon-base ti tabler-x"></i></a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<p class="card-text">Remove card action hide the card, use <code>.card-close</code> class with action item.</p>
<br />
<p class="card-text">Click on <i class="icon-base ti tabler-x"></i> icon to see remove card in action.</p>
</div>
</div>
</div>
</div>
<!--/ Cards Action -->
<!-- Header elements -->
<h5 class="mb-6">Header Elements</h5>
<div class="row mb-12">
<div class="col-md">
<div class="card mb-6">
<div class="card-header header-elements">
<h5 class="mb-0 me-2">Card Header</h5>
<div class="card-header-elements ms-auto">
<span class="badge bg-primary rounded-pill">New</span>
</div>
</div>
<div class="card-body">
<p class="card-text">Sample card header with badge.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card mb-6">
<div class="card-body">
<div class="card-title header-elements">
<h5 class="m-0 me-2">Card Title</h5>
<div class="card-title-elements ms-auto">
<span class="badge bg-primary rounded-pill">10</span>
</div>
</div>
<p class="card-text">Sample card title with outline badge.</p>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-md">
<div class="card mb-6">
<div class="card-header header-elements">
<h5 class="mb-0 me-2">Card Header</h5>
<div class="card-header-elements ms-auto">
<button type="button" class="btn btn-xs btn-primary"><span class="icon-base ti tabler-plus icon-xs me-1"></span>Button</button>
</div>
</div>
<div class="card-body">
<p class="card-text">Sample card header with extra small button.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card mb-6">
<div class="card-body">
<div class="card-title header-elements">
<h5 class="m-0 me-2">Card Title</h5>
<div class="card-title-elements ms-auto">
<button type="button" class="btn btn-icon btn-sm btn-primary">
<span class="icon-base ti tabler-brand-shopee icon-20px"></span>
</button>
</div>
</div>
<p class="card-text">Sample card title with small icon button.</p>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-md">
<div class="card mb-6">
<div class="card-header header-elements">
<h5 class="mb-0 me-2">Card Header</h5>
<div class="card-header-elements ms-auto">
<input type="text" class="form-control form-control-sm" placeholder="Search" />
</div>
</div>
<div class="card-body">
<p class="card-text">Sample card header with extra search input box.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card mb-6">
<div class="card-body">
<div class="card-title header-elements">
<h5 class="m-0 me-2">Card Title</h5>
<div class="card-title-elements ms-auto">
<div class="form-check form-switch me-n2 mb-0">
<input type="checkbox" class="form-check-input" />
</div>
</div>
</div>
<p class="card-text">Sample card title with switch.</p>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-md">
<div class="card mb-6">
<div class="card-header header-elements">
<h5 class="mb-0 me-2">Card Header</h5>
<div class="card-header-elements ms-auto">
<span class="icon-base ti tabler-bell icon-xs text-body-secondary"></span>
<span class="text text-body-secondary d-flex">
<small>Sample Text</small>
</span>
</div>
</div>
<div class="card-body">
<p class="card-text">Sample card header with text.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card mb-6">
<div class="card-body">
<div class="card-title header-elements">
<h5 class="m-0 me-2">Card Title</h5>
<div class="card-header-elements ms-auto">
<span class="icon-base ti tabler-bell icon-xs text-body-secondary"></span>
<span class="text text-body-secondary d-flex">
<small>Sample Text</small>
</span>
</div>
</div>
<p class="card-text">Sample card title with text.</p>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-md">
<div class="card mb-6">
<div class="card-header header-elements">
<h5 class="mb-0 me-2">Card Header</h5>
<div class="card-header-elements">
<span class="badge bg-danger rounded-pill">Hello!</span>
</div>
<div class="card-header-elements ms-auto">
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">Sample card header with badge and dropdown.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card mb-6">
<div class="card-body">
<div class="card-title header-elements">
<h5 class="m-0 me-2">Card Title</h5>
<div class="card-title-elements">
<div class="form-check form-switch mb-0">
<input type="checkbox" class="form-check-input mt-50" />
</div>
</div>
<div class="card-title-elements ms-auto">
<select class="form-select form-select-sm w-auto">
<option selected="">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<p class="card-text">Sample card title with switch, select box & button.</p>
</div>
</div>
</div>
</div>
<!--/ Header elements -->
<!-- Draggable Cards -->
<h5 class="pb-1 mb-6">Draggable Cards</h5>
<div class="row gy-4" id="sortable-4">
<div class="col-md-6 col-xl-4">
<div class="card bg-primary text-white">
<div class="card-header cursor-move text-white">Drag me!</div>
<div class="card-body">
<h5 class="card-title text-white">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card bg-secondary text-white">
<div class="card-header cursor-move text-white">Drag me!</div>
<div class="card-body">
<h5 class="card-title text-white">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card bg-success text-white">
<div class="card-header cursor-move text-white">Drag me!</div>
<div class="card-body">
<h5 class="card-title text-white">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card bg-danger text-white">
<div class="card-header cursor-move text-white">Drag me!</div>
<div class="card-body">
<h5 class="card-title text-white">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card bg-warning text-white">
<div class="card-header cursor-move text-white">Drag me!</div>
<div class="card-body">
<h5 class="card-title text-white">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card bg-info text-white">
<div class="card-header cursor-move text-white">Drag me!</div>
<div class="card-body">
<h5 class="card-title text-white">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
</div>
<!--/ Draggable Cards -->
{% endblock %}

2071
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_advance.html Normal file
View File

File diff suppressed because it is too large Load Diff

615
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_analytics.html Normal file
View File

@@ -0,0 +1,615 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Cards Analytics- UI elements{% endblock title %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/apex-charts/apexcharts.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/cards-analytics.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Earning Reports -->
<div class="col-lg-6 order-md-0 order-lg-0">
<div class="card h-100">
<div class="card-header pb-0 d-flex justify-content-between">
<div class="card-title mb-0">
<h5 class="mb-1">Earning Reports</h5>
<p class="card-subtitle">Weekly Earnings Overview</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReportsId" 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="earningReportsId">
<a class="dropdown-item" href="javascript:void(0);">View More</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</div>
<div class="card-body">
<div class="row align-items-center g-md-8">
<div class="col-12 col-md-5 d-flex flex-column">
<div class="d-flex gap-2 align-items-center mb-3 flex-wrap">
<h2 class="mb-0">$468</h2>
<div class="badge rounded bg-label-success">+4.2%</div>
</div>
<small class="text-body">You informed of this week compared to last week</small>
</div>
<div class="col-12 col-md-7 ps-xl-8">
<div id="weeklyEarningReports"></div>
</div>
</div>
<div class="border rounded p-5 mt-5">
<div class="row gap-4 gap-sm-0">
<div class="col-12 col-sm-4">
<div class="d-flex gap-2 align-items-center">
<div class="badge rounded bg-label-primary p-1"><i class="icon-base ti tabler-currency-dollar icon-sm"></i></div>
<h6 class="mb-0 fw-normal">Earnings</h6>
</div>
<h4 class="my-2">$545.69</h4>
<div class="progress w-75" style="height:4px">
<div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-12 col-sm-4">
<div class="d-flex gap-2 align-items-center">
<div class="badge rounded bg-label-info p-1"><i class="icon-base ti tabler-chart-pie-2 icon-sm"></i></div>
<h6 class="mb-0 fw-normal">Profit</h6>
</div>
<h4 class="my-2">$256.34</h4>
<div class="progress w-75" style="height:4px">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-12 col-sm-4">
<div class="d-flex gap-2 align-items-center">
<div class="badge rounded bg-label-danger p-1"><i class="icon-base ti tabler-brand-paypal icon-sm"></i></div>
<h6 class="mb-0 fw-normal">Expense</h6>
</div>
<h4 class="my-2">$74.19</h4>
<div class="progress w-75" style="height:4px">
<div class="progress-bar bg-danger" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Support Tracker -->
<div class="col-md-6 order-md-3 order-lg-0">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<div class="card-title mb-0">
<h5 class="mb-1">Support Tracker</h5>
<p class="card-subtitle">Last 7 Days</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="supportTrackerMenu" 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="supportTrackerMenu">
<a class="dropdown-item" href="javascript:void(0);">View More</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</div>
<div class="card-body row">
<div class="col-12 col-sm-4 col-md-12 col-lg-4">
<div class="mt-lg-4 mt-lg-2 mb-lg-6 mb-2">
<h2 class="mb-0">164</h2>
<p class="mb-0">Total Tickets</p>
</div>
<ul class="p-0 m-0">
<li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
<div class="badge rounded bg-label-primary p-1_5"><i class="icon-base ti tabler-ticket icon-md"></i></div>
<div>
<h6 class="mb-0 text-nowrap">New Tickets</h6>
<small class="text-body-secondary">142</small>
</div>
</li>
<li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
<div class="badge rounded bg-label-info p-1_5"><i class="icon-base ti tabler-circle-check icon-md"></i></div>
<div>
<h6 class="mb-0 text-nowrap">Open Tickets</h6>
<small class="text-body-secondary">28</small>
</div>
</li>
<li class="d-flex gap-4 align-items-center pb-1">
<div class="badge rounded bg-label-warning p-1_5"><i class="icon-base ti tabler-clock icon-md"></i></div>
<div>
<h6 class="mb-0 text-nowrap">Response Time</h6>
<small class="text-body-secondary">1 Day</small>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-8 col-md-12 col-lg-8">
<div id="supportTracker"></div>
</div>
</div>
</div>
</div>
<!-- Sales last 6 months -->
<div class="col-md-6 col-lg-4 order-md-2 order-lg-0">
<div class="card h-100">
<div class="card-header d-flex justify-content-between pb-4">
<div class="card-title mb-0">
<h5 class="mb-1">Sales</h5>
<p class="card-subtitle">Last 6 Months</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="salesLastMonthMenu" 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="salesLastMonthMenu">
<a class="dropdown-item" href="javascript:void(0);">View More</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</div>
<div class="card-body">
<div id="salesLastMonth"></div>
</div>
</div>
</div>
<!-- Revenue Report -->
<div class="col-12 col-lg-8 order-md-1 order-lg-0">
<div class="card h-100">
<div class="card-body p-0">
<div class="row row-bordered g-0">
<div class="col-md-8 position-relative p-6">
<div class="card-header d-inline-block p-0 text-wrap position-absolute">
<h5 class="m-0 card-title">Revenue Report</h5>
</div>
<div id="totalRevenueChart" class="mt-n1"></div>
</div>
<div class="col-md-4 p-4">
<div class="text-center mt-5">
<div class="dropdown">
<button class="btn btn-sm btn-label-primary dropdown-toggle" type="button" id="budgetId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<script>
document.write(new Date().getFullYear());
</script>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="budgetId">
<a class="dropdown-item prev-year1" href="javascript:void(0);">
<script>
document.write(new Date().getFullYear() - 1);
</script>
</a>
<a class="dropdown-item prev-year2" href="javascript:void(0);">
<script>
document.write(new Date().getFullYear() - 2);
</script>
</a>
<a class="dropdown-item prev-year3" href="javascript:void(0);">
<script>
document.write(new Date().getFullYear() - 3);
</script>
</a>
</div>
</div>
</div>
<h3 class="text-center pt-8 mb-0">$25,825</h3>
<p class="mb-8 text-center"><span class="fw-medium text-heading">Budget: </span>56,800</p>
<div class="px-3">
<div id="budgetChart"></div>
</div>
<div class="text-center mt-8">
<button type="button" class="btn btn-primary">Increase Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Status -->
<div class="col-lg-6 col-xl-4 order-3 order-xl-0">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<h5 class="mb-0 card-title">Project Status</h5>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="projectStatusId" 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="projectStatusId">
<a class="dropdown-item" href="javascript:void(0);">View More</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-start">
<div class="badge rounded bg-label-primary p-2 me-3 rounded"><i class="icon-base ti tabler-currency-dollar icon-lg"></i></div>
<div class="d-flex justify-content-between w-100 gap-2 align-items-center">
<div class="me-2">
<h6 class="mb-0">$4,3742</h6>
<small class="text-body">Your Earnings</small>
</div>
<h6 class="mb-0 text-success">+10.2%</h6>
</div>
</div>
<div id="projectStatusChart"></div>
<div class="d-flex justify-content-between mb-4">
<h6 class="mb-0">Donates</h6>
<div class="d-flex">
<p class="mb-0 me-4">$756.26</p>
<p class="mb-0 text-danger">-139.34</p>
</div>
</div>
<div class="d-flex justify-content-between">
<h6 class="mb-0">Podcasts</h6>
<div class="d-flex">
<p class="mb-0 me-4">$2,207.03</p>
<p class="mb-0 text-success">+576.24</p>
</div>
</div>
</div>
</div>
</div>
<!-- Earning Reports Tabs-->
<div class="col-12 col-xl-8 order-1 order-lg-0">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="card-title m-0">
<h5 class="mb-1">Earning Reports</h5>
<p class="card-subtitle">Yearly Earnings Overview</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReportsTabsId" 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="earningReportsTabsId">
<a class="dropdown-item" href="javascript:void(0);">View More</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</div>
<div class="card-body">
<ul class="nav nav-tabs widget-nav-tabs pb-8 gap-4 mx-1 d-flex flex-nowrap" role="tablist">
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link btn active d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-orders-id" aria-controls="navs-orders-id" aria-selected="true">
<div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-shopping-cart icon-md"></i></div>
<h6 class="tab-widget-title mb-0 mt-2">Orders</h6>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-sales-id" aria-controls="navs-sales-id" aria-selected="false">
<div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-chart-bar icon-md"></i></div>
<h6 class="tab-widget-title mb-0 mt-2">Sales</h6>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-profit-id" aria-controls="navs-profit-id" aria-selected="false">
<div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-currency-dollar icon-md"></i></div>
<h6 class="tab-widget-title mb-0 mt-2">Profit</h6>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-income-id" aria-controls="navs-income-id" aria-selected="false">
<div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-chart-pie-2 icon-md"></i></div>
<h6 class="tab-widget-title mb-0 mt-2">Income</h6>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link btn d-flex align-items-center justify-content-center disabled" role="tab" data-bs-toggle="tab" aria-selected="false">
<div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-plus icon-md"></i></div>
</a>
</li>
</ul>
<div class="tab-content p-0 ms-0 ms-sm-2">
<div class="tab-pane fade show active" id="navs-orders-id" role="tabpanel">
<div id="earningReportsTabsOrders"></div>
</div>
<div class="tab-pane fade" id="navs-sales-id" role="tabpanel">
<div id="earningReportsTabsSales"></div>
</div>
<div class="tab-pane fade" id="navs-profit-id" role="tabpanel">
<div id="earningReportsTabsProfit"></div>
</div>
<div class="tab-pane fade" id="navs-income-id" role="tabpanel">
<div id="earningReportsTabsIncome"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Total Earning -->
<div class="col-12 col-md-6 col-xl-4 order-2 order-xl-0">
<div class="card h-100">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0 card-title">Total Earning</h5>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="totalEarning" 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="totalEarning">
<a class="dropdown-item" href="javascript:void(0);">View More</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<h2 class="mb-0 me-2">87%</h2>
<i class="icon-base ti tabler-chevron-up text-success me-1"></i>
<h6 class="text-success mb-0">25.8%</h6>
</div>
</div>
<div class="card-body">
<div id="totalEarningChart"></div>
<div class="d-flex align-items-start my-4">
<div class="badge rounded bg-label-primary p-2 me-4 rounded"><i class="icon-base ti tabler-brand-paypal icon-md"></i></div>
<div class="d-flex justify-content-between w-100 gap-2 align-items-center">
<div class="me-2">
<h6 class="mb-0">Total Revenue</h6>
<small class="text-body">Client Payment</small>
</div>
<h6 class="mb-0 text-success">+$126</h6>
</div>
</div>
<div class="d-flex align-items-start">
<div class="badge rounded bg-label-secondary p-2 me-4 rounded"><i class="icon-base ti tabler-currency-dollar icon-md"></i></div>
<div class="d-flex justify-content-between w-100 gap-2 align-items-center">
<div class="me-2">
<h6 class="mb-0">Total Sales</h6>
<small class="text-body">Refund</small>
</div>
<h6 class="mb-0 text-success">+$98</h6>
</div>
</div>
</div>
</div>
</div>
<!-- Carrier Performance -->
<div class="col-12 col-lg-8">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">Carrier Performance</h5>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="performance" 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="performance">
<a class="dropdown-item" href="javascript:void(0);">Delivery rate</a>
<a class="dropdown-item" href="javascript:void(0);">Delivery time</a>
<a class="dropdown-item" href="javascript:void(0);">Delivery exceptions</a>
</div>
</div>
</div>
<div class="card-body">
<div id="carrierPerformance"></div>
</div>
</div>
</div>
<!-- Delivery Exceptions -->
<div class="col-12 col-md-6 col-lg-4 order-1 order-xl-0">
<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 text-body-secondary border-0 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>
<!-- Vehicles overview -->
<div class="col-12 col-lg-8 order-3 order-xl-0">
<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 text-body-secondary border-0 p-2 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-6" style="height: 46px;">
<div class="progress-bar fw-medium text-start 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 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 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 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">
<tbody class="table-border-bottom-0">
<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>
<!-- Interested Topics -->
<div class="col-12">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">Topic you are interested in</h5>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="topic" 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="topic">
<a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
<a class="dropdown-item" href="javascript:void(0);">See All</a>
</div>
</div>
</div>
<div class="card-body row g-3">
<div class="col-md-8">
<div id="horizontalBarChart"></div>
</div>
<div class="col-md-4 d-flex justify-content-around align-items-center">
<div>
<div class="d-flex align-items-baseline">
<span class="text-primary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">UI Design</p>
<h5>35%</h5>
</div>
</div>
<div class="d-flex align-items-baseline my-12">
<span class="text-success me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">Music</p>
<h5>14%</h5>
</div>
</div>
<div class="d-flex align-items-baseline">
<span class="text-danger me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">React</p>
<h5>10%</h5>
</div>
</div>
</div>
<div>
<div class="d-flex align-items-baseline">
<span class="text-info me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">UX Design</p>
<h5>20%</h5>
</div>
</div>
<div class="d-flex align-items-baseline my-12">
<span class="text-secondary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">Animation</p>
<h5>12%</h5>
</div>
</div>
<div class="d-flex align-items-baseline">
<span class="text-warning me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">SEO</p>
<h5>9%</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

672
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_basic.html Normal file
View File

@@ -0,0 +1,672 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Cards basic - UI elements{% endblock %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/masonry/masonry.js' %}"></script>
{% endblock vendor_js %}
{% block content %}
<!-- Examples -->
<div class="row mb-12 g-6">
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<img class="card-img-top" src="{% static 'img/elements/2.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="javascript:void(0)" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="img-fluid" src="{% static 'img/elements/5.png' %}" alt="Card image cap" />
<div class="card-body">
<p class="card-text">Bear claw sesame snaps gummies chocolate.</p>
<a href="javascript:void(0);" class="card-link">Card link</a>
<a href="javascript:void(0);" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle">Support card subtitle</h6>
<img class="img-fluid d-flex mx-auto my-6 rounded" src="{% static 'img/elements/4.png' %}" alt="Card image cap" />
<p class="card-text">Bear claw sesame snaps gummies chocolate.</p>
<a href="javascript:void(0);" class="card-link">Card link</a>
<a href="javascript:void(0);" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<!-- Examples -->
<!-- Content types -->
<h5 class="pb-1 mb-6">Content types</h5>
<div class="row mb-12 g-6">
<div class="col-md-6 col-lg-4">
<h6 class="mt-2 text-body-secondary">Body</h6>
<div class="card mb-6">
<div class="card-body">
<p class="card-text">This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut.</p>
</div>
</div>
<h6 class="mt-2 text-body-secondary">Titles, text, and links</h6>
<div class="card mb-6">
<div class="card-body">
<h5 class="card-title mb-1">Card title</h5>
<div class="card-subtitle mb-4">Card subtitle</div>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="javascript:void(0)" class="card-link">Card link</a>
<a href="javascript:void(0)" class="card-link">Another link</a>
</div>
</div>
<h6 class="mt-2 text-body-secondary">List groups</h6>
<div class="card mb-6">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-4">
<h6 class="mt-2 text-body-secondary">Images</h6>
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/5.png' %}" alt="Card image cap" />
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">Cookie topping caramels jujubes gingerbread. Lollipop apple pie cupcake candy canes cookie ice cream. Wafer chocolate bar carrot cake jelly-o.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<h6 class="mt-2 text-body-secondary">Kitchen sink</h6>
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/7.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="javascript:void(0)" class="card-link">Card link</a>
<a href="javascript:void(0)" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<h6 class="pb-1 mb-6 text-body-secondary">Header and footer</h6>
<div class="row mb-12 g-6">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<h5 class="card-header">Quote</h5>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Lorem ipsum dolor sit amet, consectetur.</p>
<footer class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card text-center">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-body-secondary">2 days ago</div>
</div>
</div>
</div>
<!--/ Content types -->
<!-- Text alignment -->
<h5 class="pb-1 mb-6">Text alignment</h5>
<div class="row mb-12 g-6">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card text-end">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<!--/ Text alignment -->
<!-- Navigation -->
<h5 class="pb-1 mb-6">Navigation</h5>
<div class="row mb-12 g-6">
<div class="col-md-6">
<div class="card text-center">
<div class="card-header px-0 pt-0">
<div class="nav-align-top">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tab-home" aria-controls="navs-tab-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tab-profile" aria-controls="navs-tab-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link disabled" data-bs-toggle="tab" role="tab" aria-selected="false">Disabled</button>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content p-0">
<div class="tab-pane fade show active" id="navs-tab-home" role="tabpanel">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go home</a>
</div>
<div class="tab-pane fade" id="navs-tab-profile" role="tabpanel">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go profile</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card text-center">
<div class="card-header">
<div class="nav-align-top">
<ul class="nav nav-pills row-gap-2" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-tab-home" aria-controls="navs-pills-tab-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-tab-profile" aria-controls="navs-pills-tab-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false">Disabled</button>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content p-0">
<div class="tab-pane fade show active" id="navs-pills-tab-home" role="tabpanel">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go home</a>
</div>
<div class="tab-pane fade" id="navs-pills-tab-profile" role="tabpanel">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go profile</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Navigation -->
<!-- Images -->
<h5 class="pb-1 mb-6">Images caps & overlay</h5>
<div class="row mb-12 g-6">
<div class="col-md-6 col-xl-4">
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/18.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
<img class="card-img-bottom" src="{% static 'img/elements/1.png' %}" alt="Card image cap" />
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card text-bg-dark border-0">
<img class="card-img" src="{% static 'img/elements/12.png' %}" alt="Card image" />
<div class="card-img-overlay">
<h5 class="card-title text-white">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
<!--/ Images -->
<!-- Horizontal -->
<h5 class="pb-1 mb-6">Horizontal</h5>
<div class="row mb-12 g-6">
<div class="col-md">
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img class="card-img card-img-left" src="{% static 'img/elements/12.png' %}" alt="Card image" />
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="card">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="col-md-4">
<img class="card-img card-img-right" src="{% static 'img/elements/17.png' %}" alt="Card image" />
</div>
</div>
</div>
</div>
</div>
<!--/ Horizontal -->
<!-- Style variation -->
<h5 class="pb-1 mb-4">Style variation</h5>
<h6 class="pb-1 mb-4 text-body-secondary">Default(solid)</h6>
<div class="row g-6 mb-6">
<div class="col-md-6 col-xl-4">
<div class="card text-bg-primary">
<div class="card-body">
<h5 class="card-title text-white">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card text-bg-secondary">
<div class="card-body">
<h5 class="card-title text-white">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card text-bg-success">
<div class="card-body">
<h5 class="card-title text-white">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card text-bg-danger">
<div class="card-body">
<h5 class="card-title text-white">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card text-bg-warning">
<div class="card-body">
<h5 class="card-title text-white">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card text-bg-info">
<div class="card-body">
<h5 class="card-title text-white">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
</div>
<!-- Label -->
<h6 class="pb-1 mb-4 text-body-secondary">Label</h6>
<div class="row g-6 mb-4">
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-label-primary">
<div class="card-body">
<h5 class="card-title text-primary">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-label-secondary">
<div class="card-body">
<h5 class="card-title text-secondary">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-label-success">
<div class="card-body">
<h5 class="card-title text-success">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-label-danger">
<div class="card-body">
<h5 class="card-title text-danger">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-label-warning">
<div class="card-body">
<h5 class="card-title text-warning">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-label-info">
<div class="card-body">
<h5 class="card-title text-info">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
</div>
<!-- Outline -->
<h6 class="pb-1 mb-4 text-body-secondary">Outline</h6>
<div class="row g-6">
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-transparent border border-primary text-primary">
<div class="card-body">
<h5 class="card-title text-primary">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-transparent border border-secondary text-secondary">
<div class="card-body">
<h5 class="card-title text-secondary">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-transparent border border-success text-success">
<div class="card-body">
<h5 class="card-title text-success">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-transparent border border-danger text-danger">
<div class="card-body">
<h5 class="card-title text-danger">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-transparent border border-warning text-warning">
<div class="card-body">
<h5 class="card-title text-warning">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card shadow-none bg-transparent border border-info text-info">
<div class="card-body">
<h5 class="card-title text-info">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up.</p>
</div>
</div>
</div>
</div>
<!--/ Style variation -->
<!-- Card layout -->
<h5 class="pb-1 my-12">Card layout</h5>
<!-- Card Groups -->
<h6 class="pb-1 mb-6 text-body-secondary">Card Groups</h6>
<div class="card-group mb-12">
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/4.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/5.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/1.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!-- Grid Card -->
<h6 class="pb-1 mb-6 text-body-secondary">Grid Card</h6>
<div class="row row-cols-1 row-cols-md-3 g-6 mb-12">
<div class="col">
<div class="card h-100">
<img class="card-img-top" src="{% static 'img/elements/2.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img class="card-img-top" src="{% static 'img/elements/5.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img class="card-img-top" src="{% static 'img/elements/4.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img class="card-img-top" src="{% static 'img/elements/18.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img class="card-img-top" src="{% static 'img/elements/19.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img class="card-img-top" src="{% static 'img/elements/20.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<!-- Masonry -->
<h6 class="pb-1 mb-6 text-body-secondary">Masonry</h6>
<div class="row g-6" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/5.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-4">
<figure class="p-4 mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-body-secondary">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="{% static 'img/elements/18.png' %}" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card bg-primary text-white text-center p-4">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<img class="card-img-top card-img-bottom" src="{% static 'img/elements/4.png' %}" alt="Card image cap" />
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-4 text-end">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-body-secondary">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!--/ Card layout -->
{% endblock %}

589
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_statistics.html Normal file
View File

@@ -0,0 +1,589 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Cards Statistics- UI elements{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/cards-statistics.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Statistics -->
<div class="col-lg-8 col-md-12">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title mb-0">Statistics</h5>
<small class="text-body-secondary">Updated 1 month ago</small>
</div>
<div class="card-body">
<div class="row gy-3">
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-primary me-4 p-2"><i class="icon-base ti tabler-chart-pie-2 icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">230k</h5>
<small>Sales</small>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-info me-4 p-2"><i class="icon-base ti tabler-users icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">8.549k</h5>
<small>Customers</small>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-danger me-4 p-2"><i class="icon-base ti tabler-shopping-cart icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">1.423k</h5>
<small>Products</small>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-success me-4 p-2"><i class="icon-base ti tabler-currency-dollar icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">$9745</h5>
<small>Revenue</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Orders -->
<div class="col-lg-2 col-6">
<div class="card h-100">
<div class="card-body text-center">
<div class="badge rounded p-2 bg-label-danger mb-2"><i class="icon-base ti tabler-briefcase icon-lg"></i></div>
<h5 class="card-title mb-1">97.8k</h5>
<p class="mb-0">Orders</p>
</div>
</div>
</div>
<!-- Reviews -->
<div class="col-lg-2 col-6">
<div class="card h-100">
<div class="card-body text-center">
<div class="badge rounded p-2 bg-label-success mb-2"><i class="icon-base ti tabler-message-dots icon-lg"></i></div>
<h5 class="card-title mb-1">3.4k</h5>
<p class="mb-0">Review</p>
</div>
</div>
</div>
<!-- Orders last week -->
<div class="col-xl-2 col-md-4 col-6">
<div class="card h-100">
<div class="card-header pb-3">
<h5 class="card-title mb-1">Order</h5>
<p class="card-subtitle">Last week</p>
</div>
<div class="card-body">
<div id="ordersLastWeek"></div>
<div class="d-flex justify-content-between align-items-center gap-3">
<h4 class="mb-0">124k</h4>
<small class="text-success">+12.6%</small>
</div>
</div>
</div>
</div>
<!-- Sales last year -->
<div class="col-xl-2 col-md-4 col-6">
<div class="card h-100">
<div class="card-header pb-0">
<h5 class="card-title mb-1">Sales</h5>
<p class="card-subtitle">Last Year</p>
</div>
<div id="salesLastYear"></div>
<div class="card-body pt-0">
<div class="d-flex justify-content-between align-items-center mt-3 gap-3">
<h4 class="mb-0">175k</h4>
<small class="text-danger">-16.2%</small>
</div>
</div>
</div>
</div>
<!-- Profit last month -->
<div class="col-xl-2 col-md-4 col-6">
<div class="card h-100">
<div class="card-header pb-0">
<h5 class="card-title mb-1">Profit</h5>
<p class="card-subtitle">Last Month</p>
</div>
<div class="card-body">
<div id="profitLastMonth"></div>
<div class="d-flex justify-content-between align-items-center mt-3 gap-3">
<h4 class="mb-0">624k</h4>
<small class="text-success">+8.24%</small>
</div>
</div>
</div>
</div>
<!-- Sessions Last month -->
<div class="col-xl-2 col-md-4 col-6">
<div class="card h-100">
<div class="card-header pb-0">
<h5 class="card-title mb-1">Sessions</h5>
<p class="card-subtitle">Last Month</p>
</div>
<div class="card-body">
<div id="sessionsLastMonth"></div>
<div class="d-flex justify-content-between align-items-center mt-3 gap-3">
<h4 class="mb-0">45.1k</h4>
<small class="text-success">+12.6%</small>
</div>
</div>
</div>
</div>
<!-- Expenses -->
<div class="col-xl-2 col-md-4 col-6">
<div class="card h-100">
<div class="card-header pb-2">
<h5 class="card-title mb-1">82.5k</h5>
<p class="card-subtitle">Expenses</p>
</div>
<div class="card-body">
<div id="expensesChart"></div>
<div class="mt-3 text-center">
<small class="text-body-secondary mt-3">$21k Expenses more than last month</small>
</div>
</div>
</div>
</div>
<!-- Impression -->
<div class="col-xl-2 col-md-4 col-6">
<div class="card h-100">
<div class="card-header pb-0">
<h5 class="card-title mb-1">Impression</h5>
<p class="card-subtitle">This Week</p>
</div>
<div class="card-body">
<div id="impressionThisWeek"></div>
<div class="d-flex justify-content-between align-items-center mt-3 gap-3">
<h4 class="mb-0">26.1k</h4>
<small class="text-danger">-24.5%</small>
</div>
</div>
</div>
</div>
<!-- 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-1">
<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-1">
<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-1">
<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-1">
<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 -->
<!-- Cards with few info -->
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="mb-1 me-2">86%</h5>
<p class="mb-0">CPU Usage</p>
</div>
<div class="card-icon">
<span class="badge bg-label-primary rounded p-2">
<i class="icon-base ti tabler-cpu icon-26px"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="mb-1 me-2">1.24gb</h5>
<p class="mb-0">Memory Usage</p>
</div>
<div class="card-icon">
<span class="badge bg-label-success rounded p-2">
<i class="icon-base ti tabler-server icon-26px"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="mb-1 me-2">0.2%</h5>
<p class="mb-0">Downtime Ratio</p>
</div>
<div class="card-icon">
<span class="badge bg-label-danger rounded p-2">
<i class="icon-base ti tabler-chart-pie-2 icon-26px"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="mb-1 me-2">128</h5>
<p class="mb-0">Issues Found</p>
</div>
<div class="card-icon">
<span class="badge bg-label-warning rounded p-2">
<i class="icon-base ti tabler-alert-octagon icon-26px"></i>
</span>
</div>
</div>
</div>
</div>
<!--/ Cards with few info -->
<!-- Cards with charts & info -->
<!-- Subscriber Gained -->
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body pb-0">
<div class="card-icon">
<span class="badge bg-label-primary rounded p-2">
<i class="icon-base ti tabler-users icon-26px"></i>
</span>
</div>
<h5 class="card-title mb-0 mt-2">92.6k</h5>
<small>Subscribers Gained</small>
</div>
<div id="subscriberGained"></div>
</div>
</div>
<!-- Quarterly Sales -->
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body pb-0">
<div class="card-icon">
<span class="badge bg-label-danger rounded p-2">
<i class="icon-base ti tabler-shopping-cart icon-26px"></i>
</span>
</div>
<h5 class="card-title mb-0 mt-2">36.5%</h5>
<small>Quarterly Sales</small>
</div>
<div id="quarterlySales"></div>
</div>
</div>
<!-- Order Received -->
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body pb-0">
<div class="card-icon">
<span class="badge bg-label-warning rounded p-2">
<i class="icon-base ti tabler-package icon-26px"></i>
</span>
</div>
<h5 class="card-title mb-0 mt-2">97.5k</h5>
<small>Order Received</small>
</div>
<div id="orderReceived"></div>
</div>
</div>
<!-- Revenue Generated -->
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-body pb-0">
<div class="card-icon">
<span class="badge bg-label-success rounded p-2">
<i class="icon-base ti tabler-credit-card icon-26px"></i>
</span>
</div>
<h5 class="card-title mb-0 mt-2">97.5k</h5>
<small>Revenue Generated</small>
</div>
<div id="revenueGenerated"></div>
</div>
</div>
<!-- Average Daily Sales -->
<div class="col-xl-3 col-sm-6">
<div class="card h-100">
<div class="card-header pb-0">
<h5 class="mb-3 card-title">Average Daily Sales</h5>
<p class="mb-0 text-body">Total Sales This Month</p>
<h4 class="mb-0">$28,450</h4>
</div>
<div class="card-body px-0">
<div id="averageDailySales"></div>
</div>
</div>
</div>
<!-- Sales Overview -->
<div class="col-xl-3 col-sm-6">
<div class="card h-100">
<div class="card-header">
<div class="d-flex justify-content-between">
<p class="mb-0 text-body">Sales Overview</p>
<p class="card-text fw-medium text-success">+18.2%</p>
</div>
<h4 class="card-title mb-1">$42.5k</h4>
</div>
<div class="card-body">
<div class="row mt-4">
<div class="col-4">
<div class="d-flex gap-2 align-items-center mb-2">
<span class="badge bg-label-info rounded"><i class="icon-base ti tabler-shopping-cart icon-18px"></i></span>
<p class="mb-0">Order</p>
</div>
<h5 class="mb-0 pt-1">62.2%</h5>
<small class="text-body-secondary">6,440</small>
</div>
<div class="col-4">
<div class="divider divider-vertical">
<div class="divider-text">
<span class="badge-divider-bg bg-label-secondary">VS</span>
</div>
</div>
</div>
<div class="col-4 text-end">
<div class="d-flex gap-2 justify-content-end align-items-center mb-2">
<p class="mb-0">Visits</p>
<span class="badge bg-label-primary rounded"><i class="icon-base ti tabler-link icon-18px"></i></span>
</div>
<h5 class="mb-0 pt-1">25.5%</h5>
<small class="text-body-secondary">12,749</small>
</div>
</div>
<div class="d-flex align-items-center mt-6">
<div class="progress w-100" style="height: 10px;">
<div class="progress-bar bg-info" style="width: 70%" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-primary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Avg Daily Traffic -->
<div class="col-xl-3 col-sm-6">
<div class="card h-100">
<div class="card-header pb-0 d-flex justify-content-between align-items-start">
<div class="card-title mb-0">
<h4 class="mb-0">2.84k</h4>
<small class="text-body">Avg Daily Traffic</small>
</div>
<div class="badge bg-label-success">+15%</div>
</div>
<div class="card-body">
<div id="averageDailyTraffic"></div>
</div>
</div>
</div>
<!-- Statistics -->
<div class="col-xl-3 col-sm-6">
<div class="card h-100">
<div class="card-header d-flex align-items-start justify-content-between">
<h5 class="card-title mb-0">Statistics</h5>
<div class="dropdown">
<button class="btn btn-text-secondary btn-icon rounded-pill text-body-secondary border-0 me-n1" type="button" id="progressStat" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="progressStat">
<a class="dropdown-item" href="javascript:void(0);">View More</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2 gap-3">
<h6 class="mb-0">Subscribers Gained</h6>
<div class="badge bg-label-success">+92k</div>
</div>
<div class="d-flex justify-content-between align-items-center gap-3">
<p class="mb-0">1.2k new subscriber</p>
<small class="text-body-secondary">85%</small>
</div>
<div class="d-flex align-items-center mt-1">
<div class="progress w-100" style="height: 8px;">
<div class="progress-bar bg-primary" style="width: 85%" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-6 mb-2 gap-3">
<h6 class="mb-0">Orders Received</h6>
<div class="badge bg-label-success">+38k</div>
</div>
<div class="d-flex justify-content-between align-items-center gap-3">
<p class="mb-0">2.4k new orders</p>
<small class="text-body-secondary">65%</small>
</div>
<div class="d-flex align-items-center mt-1">
<div class="progress w-100" style="height: 8px;">
<div class="progress-bar bg-info" style="width: 65%" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Total Profit -->
<div class="col-lg-2 col-6 mb-lg-0">
<div class="card h-100">
<div class="card-body">
<div class="badge p-2 bg-label-danger mb-3 rounded"><i class="icon-base ti tabler-credit-card icon-28px"></i></div>
<h5 class="card-title mb-1">Total Profit</h5>
<p class="card-subtitle ">Last week</p>
<p class="text-heading mb-3 mt-1">1.28k</p>
<div>
<span class="badge bg-label-danger">-12.2%</span>
</div>
</div>
</div>
</div>
<!-- Total Sales -->
<div class="col-lg-2 col-6 mb-lg-0">
<div class="card h-100">
<div class="card-body">
<div class="badge p-2 bg-label-success mb-3 rounded"><i class="icon-base ti tabler-credit-card icon-28px"></i></div>
<h5 class="card-title mb-1">Total Sales</h5>
<p class="card-subtitle ">Last week</p>
<p class="text-heading mb-3 mt-1">$4,673</p>
<div>
<span class="badge bg-label-success">+25.2%</span>
</div>
</div>
</div>
</div>
<!-- Revenue Growth -->
<div class="col-xxl-4 col-xl-5 col-md-6 col-sm-8 col-12 mb-md-0 order-xxl-0 order-2">
<div class="card pb-xxl-3">
<div class="card-body row">
<div class="d-flex flex-column col-4">
<div class="card-title mb-auto">
<h5 class="mb-2 text-nowrap">Revenue Growth</h5>
<p class="mb-0">Weekly Report</p>
</div>
<div class="chart-statistics">
<h3 class="card-title mb-1">$4,673</h3>
<span class="badge bg-label-success">+15.2%</span>
</div>
</div>
<div id="revenueGrowth" class="col-8"></div>
</div>
</div>
</div>
<!-- Generated Leads -->
<div class="col-lg-4 col-md-6">
<div class="card h-100">
<div class="card-body d-flex justify-content-between">
<div class="d-flex flex-column">
<div class="card-title mb-auto">
<h5 class="mb-0 text-nowrap">Generated Leads</h5>
<p class="mb-0">Monthly Report</p>
</div>
<div class="chart-statistics">
<h3 class="card-title mb-0">4,350</h3>
<p class="text-success text-nowrap mb-0"><i class="icon-base ti tabler-chevron-up me-1"></i> 15.8%</p>
</div>
</div>
<div id="generatedLeadsChart"></div>
</div>
</div>
</div>
<!--/ Cards with charts & info -->
</div>
{% endblock %}

2
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/tests.py Normal file
View File

@@ -0,0 +1,2 @@
# Create your tests here.

32
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/urls.py Normal file
View File

@@ -0,0 +1,32 @@
from django.urls import path
from .views import CardView
from django.contrib.auth.decorators import login_required
urlpatterns = [
path(
"cards/basic/",
login_required(CardView.as_view(template_name="cards_basic.html")),
name="cards-basic",
),
path(
"cards/advance/",
login_required(CardView.as_view(template_name="cards_advance.html")),
name="cards-advance",
),
path(
"cards/statistics/",
login_required(CardView.as_view(template_name="cards_statistics.html")),
name="cards-statistics",
),
path(
"cards/analytics/",
login_required(CardView.as_view(template_name="cards_analytics.html")),
name="cards-analytics",
),
path(
"cards/actions/",
login_required(CardView.as_view(template_name="cards_actions.html")),
name="cards-actions",
),
]

18
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/views.py Normal file
View File

@@ -0,0 +1,18 @@
from django.views.generic import TemplateView
from web_project import TemplateLayout
"""
This file is a view controller for multiple pages as a module.
Here you can override the page view layout.
Refer to card/urls.py file for more pages.
"""
class CardView(TemplateView):
# Predefined function
def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
context = TemplateLayout.init(self, super().get_context_data(**kwargs))
return context