feat: initial commit - Band Management application

resources/vuexy-admin-v10.11.1/django-version/README.md

@@ -0,0 +1,97 @@
+<p align="center">
+   <a href="https://1.envato.market/vuexy_admin" target="_blank">
+      <img src="https://cdn.pixinvent.com/pi-assets/vuexy/admin-template/logo/logo.png" alt="vuexy-logo" width="40px" height="auto">
+   </a>
+</p>
+
+<h1 align="center">
+   <a href="https://1.envato.market/vuexy_admin" target="_blank" align="center">
+      Vuexy - Bootstrap Django Admin Template
+   </a>
+</h1>
+
+<p align="center">Most Powerful & Comprehensive Bootstrap Django Admin Dashboard Template built for developers!</p>
+
+<p align="center">
+   <a href="https://1.envato.market/vuexy_admin" target="_blank" align="center">
+      <img src="https://cdn.pixinvent.com/pi-assets/vuexy/admin-template/banner/banner.png" alt="Vuexy – Bootstrap Django Admin Dashboard Template">
+   </a>
+</p>
+
+## Introduction
+
+Vuexy – Bootstrap Django Admin Dashboard Template – is the most developer friendly & highly customizable Admin Dashboard Template based on Bootstrap 5.
+
+If you’re a developer looking for an admin dashboard that is developer-friendly, rich with features, and highly customizable look no further than Vuexy. We’ve followed the highest industry standards to bring you the very best admin template that is not only fast and easy to use but highly scalable. Offering ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.
+
+Build premium quality applications with ease. Use our innovative admin template to create eye-catching, high-quality WebApps. Your apps will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices.
+
+[View Demo](https://demos.pixinvent.com/vuexy-html-django-admin-template/demo-1/login/)
+
+## Installation ⚒️
+
+Please [visit](https://demos.pixinvent.com/vuexy-html-admin-template/documentation/django-init-installation.html) our docs for installation guide.
+
+## Documentation 📜
+
+Check out our live [Documentation](https://demos.pixinvent.com/vuexy-html-admin-template/documentation/django-introduction.html)
+
+## Support 👨‍💻
+
+We use Product purchase code as support tickets to manage Item support.
+
+Make sure you use our [Support Portal](https://pixinvent.ticksy.com/) to create a support ticket.
+
+## Why forking is disabled? 🔒
+
+You will lose repository access when your support expires. If you have forked the repo and you lose the access to our repo then your fork also got deleted by GitHub.
+
+Hence, as precautions we disabled forking our repo.
+
+**Solution**
+
+However, you can still keep your repo even after your support expires by setting our repo as upstream:
+
+1. Create a new **private repo** in your GitHub. Make sure it's a private repo. You can't share our code publicly as per license.
+2. Clone our repo: `git clone https://github.com/pixinvent/vuexy-html-django-admin-template.git`
+3. Navigate to cloned directory
+4. Remove our repo as origin by running command: `git remote remove origin`
+5. Add your newly created repo as origin by running command: `git remote add origin YOUR_NEWLY_CREATE_REPO_GIT_URL`
+6. Add our repo as upstream by running command: `git remote add upstream https://github.com/pixinvent/vuexy-html-django-admin-template.git`
+7. Push the code to GitHub by running command: `git push -u origin main`
+
+Now, whenever you want to pull the latest changes from our repo just pull the changes by running command: `git pull upstream main`
+
+Cheers 🥂
+
+## Contributing 🦸
+
+Contributions are always welcome and recommended! Here is how:
+
+- Clone our repo `git clone https://github.com/pixinvent/vuexy-html-django-admin-template.git`
+- create a new branch based on branch you want to make Pull request to. For example if you want to make pull request to main branch, create new branch based on main branch.
+- Push your changes to new branch
+- Create pull request
+
+### Contribution Requirements 🧰
+
+- When you contribute, you agree to give a non-exclusive license to PixInvent to use that contribution in any context as we (PixInvent) see appropriate.
+- If you use content provided by another party, it must be appropriately licensed using an open source license.
+- Contributions are only accepted through Github pull requests.
+- Finally, contributed code must work in all supported browsers.
+
+## Useful Links 🎁
+
+- [Vue CheatSheet](https://vue-cheatsheet.themeselection.com/)
+- [Freebies](https://themeselection.com/products/category/download-free-admin-templates/)
+- [Download Free Admin Templates](https://themeselection.com/products/category/download-free-admin-templates/)
+- [Bootstrap 5 CheatSheet](https://bootstrap-cheatsheet.themeselection.com/)
+
+## Social Media 🌍
+
+- [Twitter](https://twitter.com/Theme_Selection)
+- [Facebook](https://www.facebook.com/ThemeSelections/)
+- [Pinterest](https://pinterest.com/themeselect/)
+- [Instagram](https://www.instagram.com/themeselection/)
+- [Discord](https://discord.gg/kBHkY7DekX)
+- [YouTube](https://www.youtube.com/channel/UCuryo5s0CW4aP83itLjIdZg)

resources/vuexy-admin-v10.11.1/django-version/documentation.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>$template_name</title>
+    <meta http-equiv="refresh" content="0; URL='https://demos.pixinvent.com/vuexy-html-admin-template/documentation/django-introduction.html'" />
+  </head>
+
+  <body>
+    <p>If you do not redirect please visit : <a href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/django-introduction.html">https://demos.pixinvent.com/vuexy-html-admin-template/documentation/django-introduction.html</a></p>
+  </body>
+
+</html>

resources/vuexy-admin-v10.11.1/django-version/full-version/.dockerignore

@@ -0,0 +1,11 @@
+.editorconfig
+.gitattributes
+.github
+.gitignore
+.gitlab-ci.yml
+.idea
+.pre-commit-config.yaml
+.readthedocs.yml
+.travis.yml
+venv
+.git

resources/vuexy-admin-v10.11.1/django-version/full-version/.editorconfig

@@ -0,0 +1,26 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.py]
+indent_size = 4
+combine_as_imports = true
+max_line_length = 119
+multi_line_output = 4
+quote_type = double
+indent_style = space
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[docker-compose.yml]
+indent_size = 4

resources/vuexy-admin-v10.11.1/django-version/full-version/.env.prod

@@ -0,0 +1,11 @@
+# Production Env File
+# -------------------------------------------------------------------------------------------
+
+# ! Don't commit this file in real project if contains sensetive information
+
+DEBUG=False
+DJANGO_ENVIRONMENT="production"
+SECRET_KEY = "K5tRjVxP9qCwZ2gH8sN6mT3dF7aK1pW4eX7yV9uL6kG3jB2tR8qE5zA1rC"
+
+# Update this with the actual base URL of your application
+BASE_URL='https://your-production-url'

resources/vuexy-admin-v10.11.1/django-version/full-version/.gitattributes

@@ -0,0 +1,220 @@
+* text eol=lf
+* text=auto
+
+*.blade.php diff=html
+*.css diff=css
+*.html diff=html
+*.md diff=markdown
+*.php diff=php
+
+/.github export-ignore
+CHANGELOG.md export-ignore
+
+
+## GITATTRIBUTES FOR WEB PROJECTS
+#
+# These settings are for any web project.
+#
+# Details per file setting:
+#   text    These files should be normalized (i.e. convert CRLF to LF).
+#   binary  These files are binary and should be left untouched.
+#
+# Note that binary is a macro for -text -diff.
+######################################################################
+
+# Auto detect
+##   Handle line endings automatically for files detected as
+##   text and leave all files detected as binary untouched.
+##   This will handle all files NOT defined below.
+*                 text=auto
+
+# Source code
+*.bash            text eol=lf
+*.bat             text eol=crlf
+*.cmd             text eol=crlf
+*.coffee          text
+*.css             text diff=css
+*.htm             text diff=html
+*.html            text diff=html
+*.inc             text
+*.ini             text
+*.js              text
+*.json            text
+*.jsx             text
+*.less            text
+*.ls              text
+*.map             text -diff
+*.od              text
+*.onlydata        text
+*.php             text diff=php
+*.pl              text
+*.ps1             text eol=crlf
+*.py              text diff=python
+*.rb              text diff=ruby
+*.sass            text
+*.scm             text
+*.scss            text diff=css
+*.sh              text eol=lf
+.husky/*          text eol=lf
+*.sql             text
+*.styl            text
+*.tag             text
+*.ts              text
+*.tsx             text
+*.xml             text
+*.xhtml           text diff=html
+
+# Docker
+Dockerfile        text
+
+# Documentation
+*.ipynb           text eol=lf
+*.markdown        text diff=markdown
+*.md              text diff=markdown
+*.mdwn            text diff=markdown
+*.mdown           text diff=markdown
+*.mkd             text diff=markdown
+*.mkdn            text diff=markdown
+*.mdtxt           text
+*.mdtext          text
+*.txt             text
+AUTHORS           text
+CHANGELOG         text
+CHANGES           text
+CONTRIBUTING      text
+COPYING           text
+copyright         text
+*COPYRIGHT*       text
+INSTALL           text
+license           text
+LICENSE           text
+NEWS              text
+readme            text
+*README*          text
+TODO              text
+
+# Templates
+*.dot             text
+*.ejs             text
+*.erb             text
+*.haml            text
+*.handlebars      text
+*.hbs             text
+*.hbt             text
+*.jade            text
+*.latte           text
+*.mustache        text
+*.njk             text
+*.phtml           text
+*.svelte          text
+*.tmpl            text
+*.tpl             text
+*.twig            text
+*.vue             text
+
+# Configs
+*.cnf             text
+*.conf            text
+*.config          text
+.editorconfig     text
+.env              text
+.gitattributes    text
+.gitconfig        text
+.htaccess         text
+*.lock            text -diff
+package.json      text eol=lf
+package-lock.json text eol=lf -diff
+pnpm-lock.yaml    text eol=lf -diff
+.prettierrc       text
+yarn.lock         text -diff
+*.toml            text
+*.yaml            text
+*.yml             text
+browserslist      text
+Makefile          text
+makefile          text
+
+# Heroku
+Procfile          text
+
+# Graphics
+*.ai              binary
+*.bmp             binary
+*.eps             binary
+*.gif             binary
+*.gifv            binary
+*.ico             binary
+*.jng             binary
+*.jp2             binary
+*.jpg             binary
+*.jpeg            binary
+*.jpx             binary
+*.jxr             binary
+*.pdf             binary
+*.png             binary
+*.psb             binary
+*.psd             binary
+# SVG treated as an asset (binary) by default.
+# *.svg             text
+# If you want to treat it as binary,
+# use the following line instead.
+*.svg             binary
+*.svgz            binary
+*.tif             binary
+*.tiff            binary
+*.wbmp            binary
+*.webp            binary
+
+# Audio
+*.kar             binary
+*.m4a             binary
+*.mid             binary
+*.midi            binary
+*.mp3             binary
+*.ogg             binary
+*.ra              binary
+
+# Video
+*.3gpp            binary
+*.3gp             binary
+*.as              binary
+*.asf             binary
+*.asx             binary
+*.avi             binary
+*.fla             binary
+*.flv             binary
+*.m4v             binary
+*.mng             binary
+*.mov             binary
+*.mp4             binary
+*.mpeg            binary
+*.mpg             binary
+*.ogv             binary
+*.swc             binary
+*.swf             binary
+*.webm            binary
+
+# Archives
+*.7z              binary
+*.gz              binary
+*.jar             binary
+*.rar             binary
+*.tar             binary
+*.zip             binary
+
+# Fonts
+*.ttf             binary
+*.eot             binary
+*.otf             binary
+*.woff            binary
+*.woff2           binary
+
+# Executables
+*.exe             binary
+*.pyc             binary
+
+# RC files (like .babelrc or .eslintrc)
+*.*rc             text
+
+# Ignore files (like .npmignore or .gitignore)
+*.*ignore         text

resources/vuexy-admin-v10.11.1/django-version/full-version/.gitignore

@@ -0,0 +1,172 @@
+# Ignoring src and assets folders
+
+# Exclude everything from vendors
+/src/assets/vendor
+
+# Ignoring static/assets folders
+./assets/
+static/
+staticfiles/
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Node Modules
+node_modules/
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+# db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+#.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/

resources/vuexy-admin-v10.11.1/django-version/full-version/.vscode/extensions.json

@@ -0,0 +1,24 @@
+{
+  "recommendations": [
+    // Django Python extensions
+    "ms-python.python",
+    "ms-python.vscode-pylance",
+    "donjayamanne.python-environment-manager",
+    "njpwerner.autodocstring",
+    "KevinRose.vsc-python-indent",
+    "charliermarsh.ruff",
+    // Code Formatting
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "dbaeumer.vscode-eslint",
+    "hookyqr.beautify",
+    // If needed
+    "VisualStudioExptTeam.vscodeintellicode",
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-rename-tag",
+    "syler.sass-indented",
+    "mrmlnc.vscode-scss",
+    "gamunu.vscode-yarn",
+    "zignd.html-css-class-completion",
+  ]
+}

resources/vuexy-admin-v10.11.1/django-version/full-version/.vscode/launch.json

@@ -0,0 +1,42 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Python: Current File (Integrated Terminal)",
+      "type": "python",
+      "request": "launch",
+      "program": "${file}",
+      "console": "integratedTerminal"
+    },
+    {
+      "name": "Python: Attach",
+      "type": "python",
+      "request": "attach",
+      "port": 5678,
+      "host": "localhost"
+    },
+    {
+      "name": "Python: Django",
+      "type": "python",
+      "request": "launch",
+      "program": "${workspaceFolder}/manage.py",
+      "console": "integratedTerminal",
+      "args": [
+        "runserver",
+        "--noreload",
+        "--nothreading"
+      ],
+      "django": true
+    },
+    {
+      "name": "Python: Current File (External Terminal)",
+      "type": "python",
+      "request": "launch",
+      "program": "${file}",
+      "console": "externalTerminal"
+    }
+  ]
+}

resources/vuexy-admin-v10.11.1/django-version/full-version/.vscode/settings.json

@@ -0,0 +1,80 @@
+{
+  "editor.wordWrap": "off",
+  "editor.formatOnSave": true,
+  "files.trimFinalNewlines": true,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "cSpell.language": "en",
+  "search.exclude": {
+    "**/.venv": true,
+    "**/node_modules": true,
+    "**/_temp": true,
+    "*.min.js": true,
+    "*.min.css": true
+  },
+  //Python
+  "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
+  "python.envFile": "${workspaceFolder}/.env",
+  "[python]": {
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit"
+    },
+    "editor.defaultFormatter": "ms-python.black-formatter"
+  },
+  // "python.analysis.autoImportCompletions": true,
+  // "python.formatting.provider": "black",
+  // "python.linting.enabled": true,
+  // "python.linting.mypyEnabled": true,
+  // "python.linting.lintOnSave": true,
+  // "python.analysis.typeCheckingMode": "basic",
+  // JS
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  // JSON
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  // Extension: Prettier
+  "prettier.requireConfig": true,
+  "prettier.configPath": ".prettierrc.json",
+  "prettier.ignorePath": ".prettierignore",
+  "[html]": {
+    "editor.defaultFormatter": "HookyQR.beautify"
+  },
+  "[django-html]": {
+    "editor.defaultFormatter": "HookyQR.beautify"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "files.associations": {
+    "**/*.html": "html",
+    "**/templates/**/*.html": "django-html",
+    "**/templates/**/*.py": "python",
+    "**/templates/**/*": "django-txt",
+    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
+  },
+  "emmet.includeLanguages": {
+    "django-html": "html"
+  },
+  "beautify.language": {
+    "html": ["htm", "html", "django-html"]
+  },
+  // Extension: Git
+  "git.rebaseWhenSync": true,
+  "git.enableSmartCommit": true,
+  "eslint.format.enable": true,
+  // Extension: npm
+  "npm.packageManager": "yarn"
+}

resources/vuexy-admin-v10.11.1/django-version/full-version/.vscode/snippets.code-snippets

@@ -0,0 +1,61 @@
+{
+  "django-view": {
+    "prefix": "django-view",
+    "body": [
+      "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 dashboards/urls.py file for more pages.",
+      "\"\"\"",
+      "",
+      "",
+      "class DashboardsView(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"
+    ],
+    "description": "django-view"
+  },
+  "django-template": {
+    "prefix": "django-template",
+    "body": [
+      "{% extends layout_path %}",
+      "",
+      "{% load static %}",
+      "{% load i18n %}",
+      "",
+      "{% block title %}{% endblock title %}",
+      "",
+      "{% block vendor_css %}",
+      "{{ block.super }}",
+      "<link rel=\"stylesheet\" href=\"{% static '' %}\" />",
+      "{% endblock vendor_css %}",
+      "",
+      "{% block vendor_js %}",
+      "{{ block.super }}",
+      "<script src=\"{% static '' %}\"></script>",
+      "{% endblock vendor_js %}",
+      "",
+      "{% block page_css %}",
+      "{{ block.super }}",
+      "<link rel=\"stylesheet\" href=\"{% static '' %}\" />",
+      "{% endblock page_css %}",
+      "",
+      "{% block page_js %}",
+      "{{ block.super }}",
+      "<script src=\"{% static '' %}\"></script>",
+      "{% endblock page_js %}"
+      "",
+      "{% block content %}",
+      "{% endblock %}"
+    ],
+    "description": "django-template"
+  }
+}

resources/vuexy-admin-v10.11.1/django-version/full-version/Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.12
+
+ARG APP_HOME=/app
+WORKDIR ${APP_HOME}
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+COPY requirements.txt ${APP_HOME}
+# install python dependencies
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . ${APP_HOME}
+
+# running migrations
+RUN python manage.py migrate
+
+# gunicorn
+CMD ["gunicorn", "--config", "gunicorn-cfg.py", "config.wsgi"]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/templates/app_academy_course.html

@@ -0,0 +1,338 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Academy - My Courses - App{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/plyr/plyr.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/plyr/plyr.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/app-academy.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-academy-course.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="app-academy">
+  <div class="card p-0 mb-6">
+    <div class="card-body d-flex flex-column flex-md-row justify-content-between p-0 pt-6">
+      <div class="app-academy-md-25 card-body py-0 pt-6 ps-12">
+        <img src="{% static 'img/illustrations/bulb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid app-academy-img-height scaleX-n1-rtl" alt="Bulb in hand" data-app-light-img="illustrations/bulb-light.png" data-app-dark-img="illustrations/bulb-dark.png" height="90" />
+      </div>
+      <div class="app-academy-md-50 card-body d-flex align-items-md-center flex-column text-md-center mb-6 py-6">
+        <span class="card-title mb-4 lh-lg px-md-12 h4 text-heading">
+          Education, talents, and career<br />
+          opportunities. <span class="text-primary text-nowrap">All in one place</span>.
+        </span>
+        <p class="mb-4">
+          Grow your skill with the most reliable online courses and certifications in<br />
+          marketing, information technology, programming, and data science.
+        </p>
+        <div class="d-flex align-items-center justify-content-between app-academy-md-80">
+          <input type="search" placeholder="Find your course" class="form-control me-4" />
+          <button type="submit" class="btn btn-primary btn-icon"><i class="icon-base ti tabler-search icon-22px"></i></button>
+        </div>
+      </div>
+      <div class="app-academy-md-25 d-flex align-items-end justify-content-end">
+        <img src="{% static 'img/illustrations/pencil-rocket.png' %}" alt="pencil rocket" height="188" class="scaleX-n1-rtl" />
+      </div>
+    </div>
+  </div>
+
+  <div class="card mb-6">
+    <div class="card-header d-flex flex-wrap justify-content-between gap-4">
+      <div class="card-title mb-0 me-1">
+        <h5 class="mb-0">My Courses</h5>
+        <p class="mb-0">Total 6 course you have purchased</p>
+      </div>
+      <div class="d-flex justify-content-md-end align-items-center column-gap-6 flex-sm-row flex-column row-gap-4">
+        <select class="form-select">
+          <option value="">All Courses</option>
+          <option value="ui/ux">UI/UX</option>
+          <option value="seo">SEO</option>
+          <option value="web">Web</option>
+          <option value="music">Music</option>
+          <option value="painting">Painting</option>
+        </select>
+
+        <div class="form-check form-switch my-2 ms-2">
+          <input type="checkbox" class="form-check-input" id="CourseSwitch" />
+          <label class="form-check-label text-nowrap mb-0" for="CourseSwitch">Hide completed</label>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <div class="row gy-6 mb-6">
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-1.png' %}" alt="tutor image 1" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-primary">Web</span>
+                <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
+                  4.4 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal">(1.23k)</span>
+                </p>
+              </div>
+              <a href="{% url 'app-academy-course-details' %}" class="h5">Basics of Angular</a>
+              <p class="mt-1">Introductory course for Angular and framework basics in web development.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>30 minutes</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle scaleX-n1-rtl me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-2.png' %}" alt="tutor image 2" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4 pe-xl-4 pe-xxl-0">
+                <span class="badge bg-label-danger">UI/UX</span>
+                <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
+                  4.2 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (424)</span>
+                </p>
+              </div>
+              <a class="h5" href="{% url 'app-academy-course-details' %}">Figma & More</a>
+              <p class="mt-1">Introductory course for design and framework basics in web development.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>16 hours</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-3.png' %}" alt="tutor image 3" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-success">SEO</span>
+                <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
+                  5 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (12)</span>
+                </p>
+              </div>
+              <a class="h5" href="{% url 'app-academy-course-details' %}">Keyword Research</a>
+              <p class="mt-1">Keyword suggestion tool provides comprehensive details & keyword suggestions.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>7 hours</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-50" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-4.png' %}" alt="tutor image 4" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-info">Music</span>
+                <p class="d-flex align-items-center justify-content-center gap-1 mb-0">
+                  3.8 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (634)</span>
+                </p>
+              </div>
+              <a class="h5" href="{% url 'app-academy-course-details' %}">Basics to Advanced</a>
+              <p class="mt-1">20 more lessons like this about music production, writing, mixing, mastering</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>30 minutes</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-5.png' %}" alt="tutor image 5" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-warning">Painting</span>
+                <p class="d-flex align-items-center justify-content-center gap-1 mb-0">
+                  4.7 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (34)</span>
+                </p>
+              </div>
+              <a class="h5" href="{% url 'app-academy-course-details' %}">Art & Drawing</a>
+              <p class="mt-1">Easy-to-follow video & guides show you how to draw animals, people & more.</p>
+              <p class="d-flex align-items-center text-success mb-1"><i class="icon-base ti tabler-check me-1"></i>Completed</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <a class="w-100 btn btn-label-primary" href="{% url 'app-academy-course-details' %}"><i class="icon-base ti tabler-rotate-clockwise-2 icon-xs me-1_5"></i>Start Over</a>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-6.png' %}" alt="tutor image 6" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-danger">UI/UX</span>
+                <p class="d-flex align-items-center justify-content-center gap-1 mb-0">
+                  3.6 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (2.5k)</span>
+                </p>
+              </div>
+              <a class="h5" href="{% url 'app-academy-course-details' %}">Basics Fundamentals</a>
+              <p class="mt-1">This guide will help you develop a systematic approach user interface.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>16 hours</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <nav aria-label="Page navigation" class="d-flex align-items-center justify-content-center">
+        <ul class="pagination mb-0 pagination-rounded">
+          <li class="page-item first disabled">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm scaleX-n1-rtl"></i></a>
+          </li>
+          <li class="page-item prev disabled">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm scaleX-n1-rtl"></i></a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">1</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">2</a>
+          </li>
+          <li class="page-item active">
+            <a class="page-link" href="javascript:void(0);">3</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">4</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">5</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">6</a>
+          </li>
+          <li class="page-item next">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-xs scaleX-n1-rtl"></i></a>
+          </li>
+          <li class="page-item last">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm scaleX-n1-rtl"></i></a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <div class="row gy-6 mb-6">
+    <div class="col-lg-6">
+      <div class="card shadow-none bg-label-primary h-100">
+        <div class="card-body d-flex justify-content-between flex-wrap-reverse">
+          <div class="mb-0 w-100 app-academy-sm-60 d-flex flex-column justify-content-between text-center text-sm-start">
+            <div class="card-title">
+              <h5 class="text-primary mb-2">Earn a Certificate</h5>
+              <p class="text-body w-sm-80 app-academy-xl-100">Get the right professional certificate program for you.</p>
+            </div>
+            <div class="mb-0"><button class="btn btn-sm btn-primary">View Programs</button></div>
+          </div>
+          <div class="w-100 app-academy-sm-40 d-flex justify-content-center justify-content-sm-end h-px-150 mb-4 mb-sm-0">
+            <img class="img-fluid scaleX-n1-rtl" src="{% static 'img/illustrations/boy-app-academy.png' %}" alt="boy illustration" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <div class="card shadow-none bg-label-danger h-100">
+        <div class="card-body d-flex justify-content-between flex-wrap-reverse">
+          <div class="mb-0 w-100 app-academy-sm-60 d-flex flex-column justify-content-between text-center text-sm-start">
+            <div class="card-title">
+              <h5 class="text-danger mb-2">Best Rated Courses</h5>
+              <p class="text-body app-academy-sm-60 app-academy-xl-100">Enroll now in the most popular and best rated courses.</p>
+            </div>
+            <div class="mb-0"><button class="btn btn-sm btn-danger">View Courses</button></div>
+          </div>
+          <div class="w-100 app-academy-sm-40 d-flex justify-content-center justify-content-sm-end h-px-150 mb-4 mb-sm-0">
+            <img class="img-fluid scaleX-n1-rtl" src="{% static 'img/illustrations/girl-app-academy.png' %}" alt="girl illustration" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-body row gy-6">
+      <div class="col-sm-12 col-lg-4 text-center pt-md-12 px-4">
+        <span class="badge bg-label-primary rounded mb-4 h-px-52 w-px-52 p-2"><i class="icon-base ti tabler-gift icon-36px"></i></span>
+        <h4 class="card-title mb-4">Today's Free Courses</h4>
+        <p class="card-text">We offers 284 Free Online courses from top tutors and companies to help you start or advance your career skills. Learn online for free and fast today!</p>
+        <button class="btn btn-primary">Get premium courses</button>
+      </div>
+      <div class="col-12 col-md-6 col-lg-4">
+        <div class="card h-100 shadow-none border">
+          <div class="p-2 pb-0">
+            <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="guitar-video-player" playsinline controls>
+              <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div class="card-body">
+            <h5 class="card-title">Your First Singing Lesson</h5>
+            <p class="card-text">In the same way as any other artistic domain, singing lends itself perfectly to self-teaching.</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-6 col-lg-4">
+        <div class="card h-100 shadow-none border">
+          <div class="p-2 pb-0">
+            <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="guitar-video-player-2" playsinline controls>
+              <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div class="card-body">
+            <h5 class="card-title">Guitar for Beginners</h5>
+            <p class="card-text">The Fender Acoustic Guitar is the best choice for both beginners and professionals offering a great sound.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/templates/app_academy_course_details.html

@@ -0,0 +1,277 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Academy - Course Details - App{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/plyr/plyr.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/plyr/plyr.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/app-academy-details.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-academy-course-details.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="row g-6">
+  <div class="col-lg-8">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
+          <div class="me-1">
+            <h5 class="mb-0">UI/UX Basic Fundamentals</h5>
+            <p class="mb-0">Prof. <span class="fw-medium text-heading"> Devonne Wallbridge </span></p>
+          </div>
+          <div class="d-flex align-items-center">
+            <span class="badge bg-label-danger">UI/UX</span>
+            <i class="icon-base ti tabler-share icon-lg mx-4"></i>
+            <i class="icon-base ti tabler-bookmarks icon-lg"></i>
+          </div>
+        </div>
+        <div class="card academy-content shadow-none border">
+          <div class="p-2">
+            <div class="cursor-pointer">
+              <video class="w-100" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="plyr-video-player" playsinline controls>
+                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
+              </video>
+            </div>
+          </div>
+          <div class="card-body pt-4">
+            <h5>About this course</h5>
+            <p class="mb-0">Learn web design in 1 hour with 25+ simple-to-use rules and guidelines — tons of amazing web design resources included!</p>
+            <hr class="my-6" />
+            <h5>By the numbers</h5>
+            <div class="d-flex flex-wrap row-gap-2">
+              <div class="me-12">
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-check me-2 align-bottom"></i>Skill level: All Levels</p>
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-users me-2 align-top"></i>Students: 38,815</p>
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-world me-2 align-bottom"></i>Languages: English</p>
+                <p class="text-nowrap mb-0"><i class="icon-base ti tabler-file me-2 align-bottom"></i>Captions: Yes</p>
+              </div>
+              <div>
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-video me-2 align-top ms-50"></i>Lectures: 19</p>
+                <p class="text-nowrap mb-0"><i class="icon-base ti tabler-clock me-2 align-top"></i>Video: 1.5 total hours</p>
+              </div>
+            </div>
+            <hr class="my-6" />
+            <h5>Description</h5>
+            <p class="mb-6">The material of this course is also covered in my other course about web design and development with HTML5 & CSS3. Scroll to the bottom of this page to check out that course, too! If you're already taking my other course, you already have all it takes to start designing beautiful websites today!</p>
+            <p class="mb-6">"Best web design course: If you're interested in web design, but want more than just a "how to use WordPress" course,I highly recommend this one." — Florian Giusti</p>
+            <p>"Very helpful to us left-brained people: I am familiar with HTML, CSS, JQuery, and Twitter Bootstrap, but I needed instruction in web design. This course gave me practical, impactful techniques for making websites more beautiful and engaging." — Susan Darlene Cain</p>
+            <hr class="my-6" />
+            <h5>Instructor</h5>
+            <div class="d-flex justify-content-start align-items-center user-name">
+              <div class="avatar-wrapper">
+                <div class="avatar me-4"><img src="{% static 'img/avatars/11.png' %}" alt="Avatar" class="rounded-circle" /></div>
+              </div>
+              <div class="d-flex flex-column">
+                <h6 class="mb-1">Devonne Wallbridge</h6>
+                <small>Web Developer, Designer, and Teacher</small>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4">
+    <div class="accordion stick-top accordion-custom-button" id="courseContent">
+      <div class="accordion-item active mb-0">
+        <div class="accordion-header" id="headingOne">
+          <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#chapterOne" aria-expanded="true" aria-controls="chapterOne">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Course Content</span>
+              <span class="text-body fw-normal">2 / 5 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterOne" class="accordion-collapse collapse show" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck1" checked="" />
+              <label for="defaultCheck1" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. Welcome to this course</span>
+                <small class="text-body d-block">2.4 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck2" checked="" />
+              <label for="defaultCheck2" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. Watch before you start</span>
+                <small class="text-body d-block">4.8 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck3" />
+              <label for="defaultCheck3" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. Basic design theory</span>
+                <small class="text-body d-block">5.9 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck4" />
+              <label for="defaultCheck4" class="form-check-label ms-4">
+                <span class="mb-0 h6">4. Basic fundamentals</span>
+                <small class="text-body d-block">3.6 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck5" />
+              <label for="defaultCheck5" class="form-check-label ms-4">
+                <span class="mb-0 h6">5. What is ui/ux</span>
+                <small class="text-body d-block">10.6 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <div class="accordion-header" id="headingTwo">
+          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterTwo" aria-expanded="false" aria-controls="chapterTwo">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Web Design for Web Developers</span>
+              <span class="text-body fw-normal">1 / 4 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterTwo" class="accordion-collapse collapse" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck1" checked="" />
+              <label for="defCheck1" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. How to use Pages in Figma</span>
+                <small class="text-body d-block">8:31 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck2" />
+              <label for="defCheck2" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. What is Lo Fi Wireframe</span>
+                <small class="text-body d-block">2 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck3" />
+              <label for="defCheck3" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. How to use color in Figma</span>
+                <small class="text-body d-block">5.9 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck4" />
+              <label for="defCheck4" class="form-check-label ms-4">
+                <span class="mb-0 h6">4. Frames vs Groups in Figma</span>
+                <small class="text-body d-block">3.6 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <div class="accordion-header" id="headingThree">
+          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterThree" aria-expanded="false" aria-controls="chapterThree">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Build Beautiful Websites!</span>
+              <span class="text-body fw-normal">0 / 6 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterThree" class="accordion-collapse collapse" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-01" />
+              <label for="defCheck-01" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. Section & Div Block</span>
+                <small class="text-body d-block">8:31 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-02" />
+              <label for="defCheck-02" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. Read-Only Version of Chat App</span>
+                <small class="text-body d-block">8 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-03" />
+              <label for="defCheck-03" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. Webflow Autosave</span>
+                <small class="text-body d-block">2.9 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-04" />
+              <label for="defCheck-04" class="form-check-label ms-4">
+                <span class="mb-0 h6">4. Canvas Settings</span>
+                <small class="text-body d-block">7.6 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-05" />
+              <label for="defCheck-05" class="form-check-label ms-4">
+                <span class="mb-0 h6">5. HTML Tags</span>
+                <small class="text-body d-block">10 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-06" />
+              <label for="defCheck-06" class="form-check-label ms-4">
+                <span class="mb-0 h6">6. Footer (Chat App)</span>
+                <small class="text-body d-block">9.10 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <div class="accordion-header" id="headingFour">
+          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterFour" aria-expanded="false" aria-controls="chapterFour">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Final Project</span>
+              <span class="text-body fw-normal">2 / 3 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterFour" class="accordion-collapse collapse" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-101" checked="" />
+              <label for="defCheck-101" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. Responsive Blog Site</span>
+                <small class="text-body d-block">10:0 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-102" checked="" />
+              <label for="defCheck-102" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. Responsive Portfolio</span>
+                <small class="text-body d-block">13:00 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-103" />
+              <label for="defCheck-103" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. Responsive eCommerce Website</span>
+                <small class="text-body d-block">15 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/templates/app_academy_dashboard.html

@@ -0,0 +1,537 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Academy - Dashboard - App{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<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' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
+<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/moment/moment.js' %}"></script>
+<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-academy-dashboard.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+
+<!-- Hour chart  -->
+<div class="card bg-transparent shadow-none my-6 border-0">
+  <div class="card-body row p-0 pb-6 g-6">
+    <div class="col-12 col-lg-8 card-separator">
+      <h5 class="mb-2">Welcome back,<span class="h4"> Felecia 👋🏻</span></h5>
+      <div class="col-12 col-lg-5">
+        <p>Your progress this week is Awesome. let's keep it up and get a lot of points reward !</p>
+      </div>
+      <div class="d-flex justify-content-between flex-wrap gap-4 me-12">
+        <div class="d-flex align-items-center gap-4 me-6 me-sm-0">
+          <div class="avatar avatar-lg">
+            <div class="avatar-initial bg-label-primary rounded">
+              <div class="text-primary">
+                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g id="Laptop">
+                    <path id="Vector" opacity="0.2" d="M5.9375 26.125V10.6875C5.9375 10.0576 6.18772 9.45352 6.63312 9.00812C7.07852 8.56272 7.68261 8.3125 8.3125 8.3125H29.6875C30.3174 8.3125 30.9215 8.56272 31.3669 9.00812C31.8123 9.45352 32.0625 10.0576 32.0625 10.6875V26.125H5.9375Z" fill="currentColor" />
+                    <path
+                      id="Vector_2"
+                      d="M5.9375 26.125V10.6875C5.9375 10.0576 6.18772 9.45352 6.63312 9.00812C7.07852 8.56272 7.68261 8.3125 8.3125 8.3125H29.6875C30.3174 8.3125 30.9215 8.56272 31.3669 9.00812C31.8123 9.45352 32.0625 10.0576 32.0625 10.6875V26.125M21.375 13.0625H16.625M3.5625 26.125H34.4375V28.5C34.4375 29.1299 34.1873 29.734 33.7419 30.1794C33.2965 30.6248 32.6924 30.875 32.0625 30.875H5.9375C5.30761 30.875 4.70352 30.6248 4.25812 30.1794C3.81272 29.734 3.5625 29.1299 3.5625 28.5V26.125Z"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="content-right">
+            <p class="mb-0 fw-medium">Hours Spent</p>
+            <h4 class="text-primary mb-0">34h</h4>
+          </div>
+        </div>
+        <div class="d-flex align-items-center gap-4">
+          <div class="avatar avatar-lg">
+            <div class="avatar-initial bg-label-info rounded">
+              <div class="text-info">
+                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g id="Lightbulb">
+                    <path
+                      id="Vector"
+                      opacity="0.2"
+                      d="M11.6822 24.7891C10.2684 23.6898 9.12342 22.2832 8.33388 20.6759C7.54435 19.0685 7.13099 17.3025 7.12513 15.5117C7.09544 9.06954 12.2759 3.71095 18.7181 3.56251C21.2113 3.50341 23.6599 4.23078 25.7166 5.64147C27.7732 7.05217 29.3335 9.07457 30.1761 11.4219C31.0188 13.7691 31.101 16.3221 30.4112 18.7188C29.7214 21.1154 28.2945 23.2341 26.3329 24.7742C25.8996 25.1092 25.5486 25.5388 25.3068 26.0301C25.065 26.5215 24.9387 27.0617 24.9376 27.6094V28.5C24.9376 28.815 24.8125 29.117 24.5898 29.3397C24.3671 29.5624 24.0651 29.6875 23.7501 29.6875H14.2501C13.9352 29.6875 13.6331 29.5624 13.4104 29.3397C13.1877 29.117 13.0626 28.815 13.0626 28.5V27.6094C13.0589 27.0658 12.9329 26.5301 12.6939 26.0418C12.4549 25.5536 12.1091 25.1255 11.6822 24.7891Z"
+                      fill="currentColor" />
+                    <path
+                      id="Union"
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M25.1509 6.46609C23.2675 5.17419 21.0251 4.50807 18.7418 4.5622L18.7411 4.56221C18.4983 4.56781 18.2574 4.58151 18.0187 4.60305L18.6951 2.56275C21.398 2.49881 24.0526 3.28743 26.2822 4.8168C28.512 6.34629 30.2037 8.53899 31.1173 11.0839C32.031 13.6289 32.1201 16.3969 31.3722 18.9954C30.6243 21.5938 29.0772 23.8909 26.9505 25.5607L26.9445 25.5654L26.9445 25.5654C26.6318 25.8071 26.3785 26.1171 26.204 26.4717C26.0295 26.8263 25.9384 27.2161 25.9376 27.6113V28.5C25.9376 29.0801 25.7072 29.6365 25.2969 30.0468C24.8867 30.457 24.3303 30.6875 23.7501 30.6875H14.2501C13.67 30.6875 13.1136 30.457 12.7033 30.0468C12.2931 29.6365 12.0626 29.0801 12.0626 28.5V27.6131C12.0595 27.2206 11.9683 26.8339 11.7957 26.4815C11.6232 26.1289 11.3737 25.8196 11.0656 25.5764L11.7414 23.5378C11.9208 23.6976 12.1057 23.8517 12.296 23.9996L11.6821 24.7891L12.301 24.0035C12.8459 24.4328 13.2871 24.9792 13.5921 25.6022C13.8971 26.2252 14.0579 26.9089 14.0626 27.6025L14.0627 27.6094L14.0626 28.5C14.0626 28.5497 14.0824 28.5974 14.1175 28.6326C14.1527 28.6677 14.2004 28.6875 14.2501 28.6875H23.7501C23.7999 28.6875 23.8475 28.6677 23.8827 28.6326C23.9179 28.5974 23.9376 28.5497 23.9376 28.5V27.6094L23.9376 27.6074C23.939 26.9073 24.1004 26.2167 24.4096 25.5885C24.7181 24.9616 25.1657 24.4133 25.7181 23.9855C27.5131 22.5752 28.8188 20.6359 29.4502 18.4422C30.082 16.2473 30.0067 13.9093 29.235 11.7597C28.4633 9.61009 27.0344 7.75799 25.1509 6.46609ZM11.7414 23.5378L11.7414 23.5378L18.0187 4.60305L18.018 4.6031L18.6944 2.56276C11.7043 2.72418 6.09331 8.53234 6.12513 15.5156C6.13159 17.458 6.57998 19.3733 7.43632 21.1167C8.29225 22.8593 9.53332 24.3843 11.0656 25.5764L11.7414 23.5378ZM11.7414 23.5378C10.7009 22.6109 9.84781 21.4898 9.23145 20.235C8.50882 18.7638 8.13049 17.1475 8.12512 15.5084L8.12512 15.5071C8.09905 9.84987 12.4637 5.10456 18.018 4.6031L11.7414 23.5378ZM12.0627 34.4375C12.0627 33.8852 12.5104 33.4375 13.0627 33.4375H24.9377C25.49 33.4375 25.9377 33.8852 25.9377 34.4375C25.9377 34.9898 25.49 35.4375 24.9377 35.4375H13.0627C12.5104 35.4375 12.0627 34.9898 12.0627 34.4375ZM20.3697 7.44532C19.8252 7.35302 19.3089 7.71961 19.2166 8.26412C19.1243 8.80864 19.4909 9.32489 20.0354 9.41719C21.2827 9.62862 22.4336 10.222 23.3292 11.1154C24.2249 12.0087 24.8212 13.1581 25.0358 14.4048C25.1295 14.9491 25.6467 15.3144 26.191 15.2207C26.7353 15.127 27.1005 14.6098 27.0068 14.0655C26.722 12.4107 25.9305 10.8851 24.7417 9.69934C23.5528 8.51353 22.0252 7.72596 20.3697 7.44532Z"
+                      fill="currentColor" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="content-right">
+            <p class="mb-0 fw-medium">Test Results</p>
+            <h4 class="text-info mb-0">82%</h4>
+          </div>
+        </div>
+        <div class="d-flex align-items-center gap-4">
+          <div class="avatar avatar-lg">
+            <div class="avatar-initial bg-label-warning rounded">
+              <div class="text-warning">
+                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g id="Check">
+                    <path
+                      id="Vector"
+                      opacity="0.2"
+                      d="M8.08984 29.9102C6.72422 28.5445 7.62969 25.6797 6.93203 24.0023C6.23438 22.325 3.5625 20.8555 3.5625 19C3.5625 17.1445 6.20469 15.7344 6.93203 13.9977C7.65938 12.2609 6.72422 9.45547 8.08984 8.08984C9.45547 6.72422 12.3203 7.62969 13.9977 6.93203C15.675 6.23438 17.1445 3.5625 19 3.5625C20.8555 3.5625 22.2656 6.20469 24.0023 6.93203C25.7391 7.65938 28.5445 6.72422 29.9102 8.08984C31.2758 9.45547 30.3703 12.3203 31.068 13.9977C31.7656 15.675 34.4375 17.1445 34.4375 19C34.4375 20.8555 31.7953 22.2656 31.068 24.0023C30.3406 25.7391 31.2758 28.5445 29.9102 29.9102C28.5445 31.2758 25.6797 30.3703 24.0023 31.068C22.325 31.7656 20.8555 34.4375 19 34.4375C17.1445 34.4375 15.7344 31.7953 13.9977 31.068C12.2609 30.3406 9.45547 31.2758 8.08984 29.9102Z"
+                      fill="currentColor" />
+                    <path
+                      id="Vector_2"
+                      d="M25.5312 15.4375L16.818 23.75L12.4687 19.5937M8.08984 29.9102C6.72422 28.5445 7.62969 25.6797 6.93203 24.0023C6.23437 22.325 3.5625 20.8555 3.5625 19C3.5625 17.1445 6.20469 15.7344 6.93203 13.9977C7.65937 12.2609 6.72422 9.45547 8.08984 8.08984C9.45547 6.72422 12.3203 7.62969 13.9977 6.93203C15.675 6.23437 17.1445 3.5625 19 3.5625C20.8555 3.5625 22.2656 6.20469 24.0023 6.93203C25.7391 7.65937 28.5445 6.72422 29.9102 8.08984C31.2758 9.45547 30.3703 12.3203 31.068 13.9977C31.7656 15.675 34.4375 17.1445 34.4375 19C34.4375 20.8555 31.7953 22.2656 31.068 24.0023C30.3406 25.7391 31.2758 28.5445 29.9102 29.9102C28.5445 31.2758 25.6797 30.3703 24.0023 31.068C22.325 31.7656 20.8555 34.4375 19 34.4375C17.1445 34.4375 15.7344 31.7953 13.9977 31.068C12.2609 30.3406 9.45547 31.2758 8.08984 29.9102Z"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="content-right">
+            <p class="mb-0 fw-medium">Course Completed</p>
+            <h4 class="text-warning mb-0">14</h4>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-lg-4 ps-md-4 ps-lg-6">
+      <div class="d-flex justify-content-between align-items-center">
+        <div>
+          <div>
+            <h5 class="mb-1">Time Spendings</h5>
+            <p class="mb-9">Weekly report</p>
+          </div>
+          <div class="time-spending-chart">
+            <h4 class="mb-2">231<span class="text-body">h</span> 14<span class="text-body">m</span></h4>
+            <span class="badge bg-label-success">+18.4%</span>
+          </div>
+        </div>
+        <div id="leadsReportChart"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Hour chart End  -->
+
+<!-- Topic and Instructors -->
+<div class="row mb-6 g-6">
+  <div class="col-12 col-xl-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">Topic you are interested in</h5>
+        <div class="dropdown">
+          <button class="btn p-0" type="button" id="topic" 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="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 class="col-12 col-xl-4 col-md-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">Popular Instructors</h5>
+        </div>
+        <div class="dropdown">
+          <button class="btn text-body-secondary p-0" type="button" id="popularInstructors" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="popularInstructors">
+            <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="px-5 py-4 border border-start-0 border-end-0">
+        <div class="d-flex justify-content-between align-items-center">
+          <p class="mb-0 text-uppercase">Instructors</p>
+          <p class="mb-0 text-uppercase">courses</p>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-6">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Maven Analytics</h6>
+                <small class="text-truncate text-body">Business Intelligence</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">33</h6>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center mb-6">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="{% static 'img/avatars/2.png' %}" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Bentlee Emblin</h6>
+                <small class="text-truncate text-body">Digital Marketing</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">52</h6>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center mb-6">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="{% static 'img/avatars/3.png' %}" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Benedetto Rossiter</h6>
+                <small class="text-truncate text-body">UI/UX Design</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">12</h6>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Beverlie Krabbe</h6>
+                <small class="text-truncate text-body">React Native</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">8</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-4 col-md-6">
+    <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">Top Courses</h5>
+        <div class="dropdown">
+          <button class="btn text-body-secondary p-0" type="button" id="topCourses" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topCourses">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="list-unstyled mb-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-video icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Videography Basic Design Course</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">1.2k Views</div>
+              </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-code icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Basic Front-end Development Course</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">834 Views</div>
+              </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-camera icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Basic Fundamentals of Photography</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">3.7k Views</div>
+              </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-brand-dribbble icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Advance Dribble Base Visual Design</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">2.5k Views</div>
+              </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-microphone-2 icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Your First Singing Lesson</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">948 Views</div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <div class="bg-label-primary rounded-3 text-center mb-4 pt-6">
+          <img class="img-fluid" src="{% static 'img/illustrations/girl-with-laptop.png' %}" alt="Card girl image" width="140" />
+        </div>
+        <h5 class="mb-2">Upcoming Webinar</h5>
+        <p class="small">Next Generation Frontend Architecture Using Layout Engine And React Native Web.</p>
+        <div class="row mb-4 g-3">
+          <div class="col-6">
+            <div class="d-flex align-items-center">
+              <div class="avatar flex-shrink-0 me-3">
+                <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-calendar-event icon-28px"></i></span>
+              </div>
+              <div>
+                <h6 class="mb-0 text-nowrap">17 Nov 23</h6>
+                <small>Date</small>
+              </div>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="d-flex align-items-center">
+              <div class="avatar flex-shrink-0 me-3">
+                <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-clock icon-28px"></i></span>
+              </div>
+              <div>
+                <h6 class="mb-0 text-nowrap">32 minutes</h6>
+                <small>Duration</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 text-center">
+          <a href="javascript:void(0);" class="btn btn-primary w-100 d-grid">Join the event</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-4 col-md-6">
+    <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">Assignment Progress</h5>
+        <div class="dropdown">
+          <button class="btn text-body-secondary p-0" type="button" id="assignmentProgress" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="assignmentProgress">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="d-flex mb-4 pb-1">
+            <div class="chart-progress me-4" data-color="primary" data-series="72" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">User experience Design</h6>
+                  <p class="mb-0 small">120 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-4 pb-1">
+            <div class="chart-progress me-4" data-color="success" data-series="48" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">Basic fundamentals</h6>
+                  <p class="mb-0 small">32 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-4 pb-1">
+            <div class="chart-progress me-4" data-color="danger" data-series="15" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">React native components</h6>
+                  <p class="mb-0 small">182 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex">
+            <div class="chart-progress me-4" data-color="info" data-series="24" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">Basic of music theory</h6>
+                  <p class="mb-0 small">56 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+<!--  Topic and Instructors  End-->
+
+<!-- Course datatable -->
+<div class="card mb-6">
+  <div class="mb-4">
+    <table class="table datatables-academy-course">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Course Name</th>
+          <th>Time</th>
+          <th class="w-25">Progress</th>
+          <th class="w-25">Status</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>
+<!-- Course datatable End -->
+
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/urls.py

@@ -0,0 +1,22 @@
+from django.urls import path
+from .views import AcademyView
+from django.contrib.auth.decorators import login_required
+
+
+urlpatterns = [
+    path(
+        "app/academy/dashboard/",
+        login_required(AcademyView.as_view(template_name="app_academy_dashboard.html")),
+        name="app-academy-dashboard",
+    ),
+    path(
+        "app/academy/course/",
+        login_required(AcademyView.as_view(template_name="app_academy_course.html")),
+        name="app-academy-course",
+    ),
+    path(
+        "app/academy/course_details/",
+        login_required(AcademyView.as_view(template_name="app_academy_course_details.html")),
+        name="app-academy-course-details",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/views.py

@@ -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 academy/urls.py file for more pages.
+"""
+
+
+class AcademyView(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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/access/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/access/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/access/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/access/templates/app_access_permission.html

@@ -0,0 +1,55 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Permission - Apps{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<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' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-access-permission.js' %}"></script>
+<script src="{% static 'js/modal-add-permission.js' %}"></script>
+<script src="{% static 'js/modal-edit-permission.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<!-- Permission Table -->
+<div class="card">
+  <div class="card-datatable table-responsive">
+    <table class="datatables-permissions table border-top">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Name</th>
+          <th>Assigned To</th>
+          <th>Created Date</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>
+<!--/ Permission Table -->
+
+<!-- Modal -->
+{% include "partials/_modals/modal_add_permission.html" %}
+{% include "partials/_modals/modal_edit_permission.html" %}
+<!-- /Modal -->
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/access/templates/app_access_roles.html

@@ -0,0 +1,243 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Roles - Apps{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<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' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-access-roles.js' %}"></script>
+<script src="{% static 'js/modal-add-role.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<h4 class="mb-1">Roles List</h4>
+
+<p class="mb-6">
+  A role provided access to predefined menus and features so that depending on <br />
+  assigned role an administrator can have access to what user needs.
+</p>
+<!-- Role cards -->
+<div class="row g-6">
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 4 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kaith D'souza" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="Avatar" />
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Administrator</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 7 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Jimmy Ressula" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="John Doe" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kristi Lawker" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="4 more">+4</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Manager</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 5 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Andrew Tye" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rishi Swaat" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/9.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rossie Kim" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2 more">+2</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Users</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 3 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Karlos" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Katy Turner" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/9.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Peter Adward" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Support</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 2 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Merchent" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/10.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Sam D'souza" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/13.png' %}" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Nurvi Karlos" class="avatar pull-up">
+              <img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="7 more">+7</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Restricted User</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card h-100">
+      <div class="row h-100">
+        <div class="col-sm-5">
+          <div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-4">
+            <img src="{% static 'img/illustrations/add-new-roles.png' %}" class="img-fluid" alt="Image" width="83" />
+          </div>
+        </div>
+        <div class="col-sm-7">
+          <div class="card-body text-sm-end text-center ps-sm-0">
+            <button data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-sm btn-primary mb-4 text-nowrap add-new-role">Add New Role</button>
+            <p class="mb-0">
+              Add new role, <br />
+              if it doesn't exist.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-12">
+    <h4 class="mt-6 mb-1">Total users with their roles</h4>
+    <p class="mb-0">Find all of your company’s administrator accounts and their associate roles.</p>
+  </div>
+  <div class="col-12">
+    <!-- Role Table -->
+    <div class="card">
+      <div class="card-datatable">
+        <table class="datatables-users table border-top">
+          <thead>
+            <tr>
+              <th></th>
+              <th></th>
+              <th>User</th>
+              <th>Role</th>
+              <th>Plan</th>
+              <th>Billing</th>
+              <th>Status</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+    <!--/ Role Table -->
+  </div>
+</div>
+<!--/ Role cards -->
+
+<!-- Add Role Modal -->
+{% include "partials/_modals/modal_add_role.html" %}
+<!-- / Add Role Modal -->
+
+
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/access/urls.py

@@ -0,0 +1,17 @@
+from django.urls import path
+from .views import AccessView
+from django.contrib.auth.decorators import login_required
+
+
+urlpatterns = [
+    path(
+        "app/access/roles/",
+        login_required(AccessView.as_view(template_name="app_access_roles.html")),
+        name="app-access-roles",
+    ),
+    path(
+        "app/access/permission/",
+        login_required(AccessView.as_view(template_name="app_access_permission.html")),
+        name="app-access-permission",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/access/views.py

@@ -0,0 +1,20 @@
+from django.views.generic import TemplateView
+from web_project import TemplateLayout
+from django.contrib.auth.mixins import PermissionRequiredMixin
+
+
+"""
+This file is a view controller for multiple pages as a module.
+Here you can override the page view layout.
+Refer to access/urls.py file for more pages.
+"""
+
+
+class AccessView(PermissionRequiredMixin, TemplateView):
+    permission_required = ("permission.view_permission", "permission.delete_permission", "permission.change_permission", "permission.add_permission")
+    # 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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_forgot_password_basic.html

@@ -0,0 +1,66 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Forgot Password Basic - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Forgot Password -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="{% url 'index' %}" class="app-brand-link">
+              <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+              <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Forgot Password? 🔒</h4>
+          <p class="mb-6">Enter your email and we'll send you instructions to reset your password</p>
+          <form id="formAuthentication" class="mb-6" action="{% url 'auth-reset-password-basic' %}" method="GET">
+            <div class="mb-6 form-control-validation">
+              <label for="email" class="form-label">Email</label>
+              <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" autofocus />
+            </div>
+            <button class="btn btn-primary d-grid w-100">Send Reset Link</button>
+          </form>
+          <div class="text-center">
+            <a href="{% url 'auth-login-basic' %}" class="d-flex justify-content-center">
+              <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+              Back to login
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- /Forgot Password -->
+    </div>
+  </div>
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_forgot_password_cover.html

@@ -0,0 +1,72 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Forgot Password Cover - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="{% url 'index' %}" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+    <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="{% static 'img/illustrations/auth-forgot-password-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-forgot-password-cover" class="my-5 auth-illustration d-lg-block d-none" data-app-light-img="illustrations/auth-forgot-password-illustration-light.png" data-app-dark-img="illustrations/auth-forgot-password-illustration-dark.png" />
+        <img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-forgot-password-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Forgot Password -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
+      <div class="w-px-400 mx-auto mt-12 mt-5">
+        <h4 class="mb-1">Forgot Password? 🔒</h4>
+        <p class="mb-6">Enter your email and we'll send you instructions to reset your password</p>
+        <form id="formAuthentication" class="mb-6" action="{% url 'auth-reset-password-cover' %}">
+           {% csrf_token %}
+          <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email</label>
+            <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" autofocus />
+          </div>
+          <button class="btn btn-primary d-grid w-100">Send Reset Link</button>
+        </form>
+        <div class="text-center">
+          <a href="{% url 'auth-login-cover' %}" class="d-flex justify-content-center">
+            <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+            Back to login
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- /Forgot Password -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_login_basic.html

@@ -0,0 +1,114 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Login Basic - Pages{% endblock %}
+
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static  'vendor/css/pages/page-auth.css' %}">
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+
+{% block content %}
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Login -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="{% url 'index' %}" class="app-brand-link">
+              <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+              <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Welcome to {% get_theme_variables 'template_name' %}! 👋</h4>
+          <p class="mb-6">Please sign-in to your account and start the adventure</p>
+
+          <form id="formAuthentication" class="mb-4" action="{% url 'index' %}">
+            {% csrf_token %}
+            <div class="mb-6 form-control-validation">
+              <label for="email" class="form-label">Email or Username</label>
+              <input type="text" class="form-control" id="email" name="email-username" placeholder="Enter your email or username" autofocus />
+            </div>
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="password">Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <div class="my-8">
+              <div class="d-flex justify-content-between">
+                <div class="form-check mb-0 ms-2">
+                  <input class="form-check-input" type="checkbox" id="remember-me" />
+                  <label class="form-check-label" for="remember-me"> Remember Me </label>
+                </div>
+                <a href="{% url 'auth-forgot-password-basic' %}">
+                  <p class="mb-0">Forgot Password?</p>
+                </a>
+              </div>
+            </div>
+            <div class="mb-6">
+              <button class="btn btn-primary d-grid w-100" type="submit">Login</button>
+            </div>
+          </form>
+
+          <p class="text-center">
+            <span>New on our platform?</span>
+            <a href="{% url 'auth-register-basic' %}">
+              <span>Create an account</span>
+            </a>
+          </p>
+
+          <div class="divider my-6">
+            <div class="divider-text">or</div>
+          </div>
+
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+              <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+              <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+              <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+              <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- /Login -->
+    </div>
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_login_cover.html

@@ -0,0 +1,114 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Login Cover - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="{% url 'index' %}" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+    <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="{% static 'img/illustrations/auth-login-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-login-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-login-illustration-light.png" data-app-dark-img="illustrations/auth-login-illustration-dark.png" />
+        <img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-login-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Login -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
+      <div class="w-px-400 mx-auto mt-12 pt-5">
+        <h4 class="mb-1">Welcome to {% get_theme_variables 'template_name' %}! 👋</h4>
+        <p class="mb-6">Please sign-in to your account and start the adventure</p>
+
+        <form id="formAuthentication" class="mb-6" action="{% url 'index' %}">
+          {% csrf_token %}
+          <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email or Username</label>
+            <input type="text" class="form-control" id="email" name="email-username" placeholder="Enter your email or username" autofocus />
+          </div>
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <div class="my-8">
+            <div class="d-flex justify-content-between">
+              <div class="form-check mb-0 ms-2">
+                <input class="form-check-input" type="checkbox" id="remember-me" />
+                <label class="form-check-label" for="remember-me"> Remember Me </label>
+              </div>
+              <a href="{% url 'auth-forgot-password-cover' %}">
+                <p class="mb-0">Forgot Password?</p>
+              </a>
+            </div>
+          </div>
+          <button class="btn btn-primary d-grid w-100">Sign in</button>
+        </form>
+
+        <p class="text-center">
+          <span>New on our platform?</span>
+          <a href="{% url 'auth-register-cover' %}">
+            <span>Create an account</span>
+          </a>
+        </p>
+
+        <div class="divider my-6">
+          <div class="divider-text">or</div>
+        </div>
+
+        <div class="d-flex justify-content-center">
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+            <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+            <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+            <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+            <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- /Login -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_register_basic.html

@@ -0,0 +1,113 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Register Basic - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static  'vendor/css/pages/page-auth.css' %}">
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+
+{% block content %}
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Register Card -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="{% url 'index' %}" class="app-brand-link">
+              <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+              <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Adventure starts here 🚀</h4>
+          <p class="mb-6">Make your app management easy and fun!</p>
+
+          <form id="formAuthentication" class="mb-6" action="{% url 'index' %}">
+            {% csrf_token %}
+            <div class="mb-6 form-control-validation">
+              <label for="username" class="form-label">Username</label>
+              <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" autofocus />
+            </div>
+            <div class="mb-6 form-control-validation">
+              <label for="email" class="form-label">Email</label>
+              <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" />
+            </div>
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="password">Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <div class="my-8 form-control-validation">
+              <div class="form-check mb-0 ms-2">
+                <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
+                <label class="form-check-label" for="terms-conditions">
+                  I agree to
+                  <a href="javascript:void(0);">privacy policy & terms</a>
+                </label>
+              </div>
+            </div>
+            <button class="btn btn-primary d-grid w-100">Sign up</button>
+          </form>
+
+          <p class="text-center">
+            <span>Already have an account?</span>
+            <a href="{% url 'auth-login-basic' %}">
+              <span>Sign in instead</span>
+            </a>
+          </p>
+
+          <div class="divider my-6">
+            <div class="divider-text">or</div>
+          </div>
+
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+              <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+              <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+              <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+              <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- Register Card -->
+    </div>
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_register_cover.html

@@ -0,0 +1,116 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Register Cover - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="{% url 'index' %}" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+    <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="{% static 'img/illustrations/auth-register-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-register-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-register-illustration-light.png" data-app-dark-img="illustrations/auth-register-illustration-dark.png" />
+        <img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-register-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Register -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
+      <div class="w-px-400 mx-auto mt-12 pt-5">
+        <h4 class="mb-1">Adventure starts here 🚀</h4>
+        <p class="mb-6">Make your app management easy and fun!</p>
+
+        <form id="formAuthentication" class="mb-6" action="{% url 'index' %}">
+          {% csrf_token %}
+          <div class="mb-6 form-control-validation">
+            <label for="username" class="form-label">Username</label>
+            <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" autofocus />
+          </div>
+          <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email</label>
+            <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" />
+          </div>
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <div class="mb-6 mt-8">
+            <div class="form-check mb-8 ms-2 form-control-validation">
+              <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
+              <label class="form-check-label" for="terms-conditions">
+                I agree to
+                <a href="javascript:void(0);">privacy policy & terms</a>
+              </label>
+            </div>
+          </div>
+          <button class="btn btn-primary d-grid w-100">Sign up</button>
+        </form>
+
+        <p class="text-center">
+          <span>Already have an account?</span>
+          <a href="{% url 'auth-login-cover' %}">
+            <span>Sign in instead</span>
+          </a>
+        </p>
+
+        <div class="divider my-6">
+          <div class="divider-text">or</div>
+        </div>
+
+        <div class="d-flex justify-content-center">
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+            <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+            <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+            <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+            <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- /Register -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_register_multisteps.html

@@ -0,0 +1,349 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Multi Steps Sign-up - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/bs-stepper/bs-stepper.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/bootstrap-select/bootstrap-select.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
+<script src="{% static 'vendor/libs/bs-stepper/bs-stepper.js' %}"></script>
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth-multisteps.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="authentication-wrapper authentication-cover authentication-bg">
+  <!-- Logo -->
+  <a href="{% url 'index' %}" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+    <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row">
+    <!-- Left Text -->
+    <div class="d-none d-lg-flex col-lg-4 align-items-center justify-content-center p-5 position-relative auth-multisteps-bg-height">
+      <img src="{% static 'img/illustrations/auth-register-multisteps-illustration.png' %}" alt="auth-register-multisteps" class="img-fluid" width="280" />
+      <img src="{% static 'img/illustrations/auth-register-multisteps-shape-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-register-multisteps" class="platform-bg" data-app-light-img="illustrations/auth-register-multisteps-shape-light.png" data-app-dark-img="illustrations/auth-register-multisteps-shape-dark.png" />
+    </div>
+    <!-- /Left Text -->
+
+    <!--  Multi Steps Registration -->
+    <div class="d-flex col-lg-8 align-items-center justify-content-center authentication-bg p-5">
+      <div class="w-px-700">
+        <div id="multiStepsValidation" class="bs-stepper border-none shadow-none mt-5">
+          <div class="bs-stepper-header border-none pt-12 px-0">
+            <div class="step" data-target="#accountDetailsValidation">
+              <button type="button" class="step-trigger">
+                <span class="bs-stepper-circle"><i class="icon-base ti tabler-file-analytics icon-md"></i></span>
+                <span class="bs-stepper-label">
+                  <span class="bs-stepper-title">Account</span>
+                  <span class="bs-stepper-subtitle">Account Details</span>
+                </span>
+              </button>
+            </div>
+            <div class="line">
+              <i class="icon-base ti tabler-chevron-right"></i>
+            </div>
+            <div class="step" data-target="#personalInfoValidation">
+              <button type="button" class="step-trigger">
+                <span class="bs-stepper-circle"><i class="icon-base ti tabler-user icon-md"></i></span>
+                <span class="bs-stepper-label">
+                  <span class="bs-stepper-title">Personal</span>
+                  <span class="bs-stepper-subtitle">Enter Information</span>
+                </span>
+              </button>
+            </div>
+            <div class="line">
+              <i class="icon-base ti tabler-chevron-right"></i>
+            </div>
+            <div class="step" data-target="#billingLinksValidation">
+              <button type="button" class="step-trigger">
+                <span class="bs-stepper-circle"><i class="icon-base ti tabler-credit-card icon-md"></i></span>
+                <span class="bs-stepper-label">
+                  <span class="bs-stepper-title">Billing</span>
+                  <span class="bs-stepper-subtitle">Payment Details</span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div class="bs-stepper-content px-0">
+            <form id="multiStepsForm" onSubmit="return false">
+              <!-- Account Details -->
+              <div id="accountDetailsValidation" class="content">
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Account Information</h4>
+                  <p class="mb-0">Enter Your Account Details</p>
+                </div>
+                <div class="row g-6">
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsUsername">Username</label>
+                    <input type="text" name="multiStepsUsername" id="multiStepsUsername" class="form-control" placeholder="johndoe" />
+                  </div>
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsEmail">Email</label>
+                    <input type="email" name="multiStepsEmail" id="multiStepsEmail" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
+                  </div>
+                  <div class="col-sm-6 form-password-toggle form-control-validation">
+                    <label class="form-label" for="multiStepsPass">Password</label>
+                    <div class="input-group input-group-merge">
+                      <input type="password" id="multiStepsPass" name="multiStepsPass" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multiStepsPass2" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsPass2"><i class="icon-base ti tabler-eye-off"></i></span>
+                    </div>
+                  </div>
+                  <div class="col-sm-6 form-password-toggle form-control-validation">
+                    <label class="form-label" for="multiStepsConfirmPass">Confirm Password</label>
+                    <div class="input-group input-group-merge">
+                      <input type="password" id="multiStepsConfirmPass" name="multiStepsConfirmPass" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multiStepsConfirmPass2" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsConfirmPass2"><i class="icon-base ti tabler-eye-off"></i></span>
+                    </div>
+                  </div>
+                  <div class="col-md-12">
+                    <label class="form-label" for="multiStepsURL">Profile Link</label>
+                    <input type="text" name="multiStepsURL" id="multiStepsURL" class="form-control" placeholder="johndoe/profile" aria-label="johndoe" />
+                  </div>
+                  <div class="col-12 d-flex justify-content-between">
+                    <button class="btn btn-label-secondary btn-prev" disabled>
+                      <i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
+                      <span class="align-middle d-sm-inline-block d-none">Previous</span>
+                    </button>
+                    <button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
+                  </div>
+                </div>
+              </div>
+              <!-- Personal Info -->
+              <div id="personalInfoValidation" class="content">
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Personal Information</h4>
+                  <p class="mb-0">Enter Your Personal Information</p>
+                </div>
+                <div class="row g-6">
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsFirstName">First Name</label>
+                    <input type="text" id="multiStepsFirstName" name="multiStepsFirstName" class="form-control" placeholder="John" />
+                  </div>
+                  <div class="col-sm-6">
+                    <label class="form-label" for="multiStepsLastName">Last Name</label>
+                    <input type="text" id="multiStepsLastName" name="multiStepsLastName" class="form-control" placeholder="Doe" />
+                  </div>
+                  <div class="col-sm-6">
+                    <label class="form-label" for="multiStepsMobile">Mobile</label>
+                    <div class="input-group">
+                      <span class="input-group-text">US (+1)</span>
+                      <input type="text" id="multiStepsMobile" name="multiStepsMobile" class="form-control multi-steps-mobile" placeholder="202 555 0111" />
+                    </div>
+                  </div>
+                  <div class="col-sm-6">
+                    <label class="form-label" for="multiStepsPincode">Pincode</label>
+                    <input type="text" id="multiStepsPincode" name="multiStepsPincode" class="form-control multi-steps-pincode" placeholder="Postal Code" maxlength="6" />
+                  </div>
+                  <div class="col-md-12 form-control-validation">
+                    <label class="form-label" for="multiStepsAddress">Address</label>
+                    <input type="text" id="multiStepsAddress" name="multiStepsAddress" class="form-control" placeholder="Address" />
+                  </div>
+                  <div class="col-md-12">
+                    <label class="form-label" for="multiStepsArea">Landmark</label>
+                    <input type="text" id="multiStepsArea" name="multiStepsArea" class="form-control" placeholder="Area/Landmark" />
+                  </div>
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsCity">City</label>
+                    <input type="text" id="multiStepsCity" class="form-control" placeholder="Jackson" />
+                  </div>
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsState">State</label>
+                    <select id="multiStepsState" class="select2 form-select" data-allow-clear="true">
+                      <option value="">Select</option>
+                      <option value="AL">Alabama</option>
+                      <option value="AK">Alaska</option>
+                      <option value="AZ">Arizona</option>
+                      <option value="AR">Arkansas</option>
+                      <option value="CA">California</option>
+                      <option value="CO">Colorado</option>
+                      <option value="CT">Connecticut</option>
+                      <option value="DE">Delaware</option>
+                      <option value="DC">District Of Columbia</option>
+                      <option value="FL">Florida</option>
+                      <option value="GA">Georgia</option>
+                      <option value="HI">Hawaii</option>
+                      <option value="ID">Idaho</option>
+                      <option value="IL">Illinois</option>
+                      <option value="IN">Indiana</option>
+                      <option value="IA">Iowa</option>
+                      <option value="KS">Kansas</option>
+                      <option value="KY">Kentucky</option>
+                      <option value="LA">Louisiana</option>
+                      <option value="ME">Maine</option>
+                      <option value="MD">Maryland</option>
+                      <option value="MA">Massachusetts</option>
+                      <option value="MI">Michigan</option>
+                      <option value="MN">Minnesota</option>
+                      <option value="MS">Mississippi</option>
+                      <option value="MO">Missouri</option>
+                      <option value="MT">Montana</option>
+                      <option value="NE">Nebraska</option>
+                      <option value="NV">Nevada</option>
+                      <option value="NH">New Hampshire</option>
+                      <option value="NJ">New Jersey</option>
+                      <option value="NM">New Mexico</option>
+                      <option value="NY">New York</option>
+                      <option value="NC">North Carolina</option>
+                      <option value="ND">North Dakota</option>
+                      <option value="OH">Ohio</option>
+                      <option value="OK">Oklahoma</option>
+                      <option value="OR">Oregon</option>
+                      <option value="PA">Pennsylvania</option>
+                      <option value="RI">Rhode Island</option>
+                      <option value="SC">South Carolina</option>
+                      <option value="SD">South Dakota</option>
+                      <option value="TN">Tennessee</option>
+                      <option value="TX">Texas</option>
+                      <option value="UT">Utah</option>
+                      <option value="VT">Vermont</option>
+                      <option value="VA">Virginia</option>
+                      <option value="WA">Washington</option>
+                      <option value="WV">West Virginia</option>
+                      <option value="WI">Wisconsin</option>
+                      <option value="WY">Wyoming</option>
+                    </select>
+                  </div>
+                  <div class="col-12 d-flex justify-content-between">
+                    <button class="btn btn-label-secondary btn-prev">
+                      <i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
+                      <span class="align-middle d-sm-inline-block d-none">Previous</span>
+                    </button>
+                    <button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
+                  </div>
+                </div>
+              </div>
+              <!-- Billing Links -->
+              <div id="billingLinksValidation" class="content">
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Select Plan</h4>
+                  <p class="mb-0">Select plan as per your requirement</p>
+                </div>
+                <!-- Custom plan options -->
+                <div class="row gap-md-0 gap-4 mb-12">
+                  <div class="col-md">
+                    <div class="form-check custom-option custom-option-icon">
+                      <label class="form-check-label custom-option-content" for="basicOption">
+                        <span class="custom-option-body">
+                          <span class="d-block mb-2 h5">Basic</span>
+                          <span>A simple start for start ups & Students</span>
+                          <span class="d-flex justify-content-center mt-2">
+                            <sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
+                            <span class="fw-medium h3 text-primary mb-0">0</span>
+                            <sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/month</sub>
+                          </span>
+                        </span>
+                        <input name="customRadioIcon" class="form-check-input" type="radio" value="" id="basicOption" />
+                      </label>
+                    </div>
+                  </div>
+                  <div class="col-md">
+                    <div class="form-check custom-option custom-option-icon">
+                      <label class="form-check-label custom-option-content" for="standardOption">
+                        <span class="custom-option-body">
+                          <span class="d-block mb-2 h5">Standard</span>
+                          <span>For small to medium businesses</span>
+                          <span class="d-flex justify-content-center mt-2">
+                            <sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
+                            <span class="fw-medium h3 text-primary mb-0">99</span>
+                            <sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/month</sub>
+                          </span>
+                        </span>
+                        <input name="customRadioIcon" class="form-check-input" type="radio" value="" id="standardOption" checked />
+                      </label>
+                    </div>
+                  </div>
+                  <div class="col-md">
+                    <div class="form-check custom-option custom-option-icon">
+                      <label class="form-check-label custom-option-content" for="enterpriseOption">
+                        <span class="custom-option-body">
+                          <span class="d-block mb-2 h5">Enterprise</span>
+                          <span>Solution for enterprise & organizations</span>
+                          <span class="d-flex justify-content-center mt-2">
+                            <sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
+                            <span class="fw-medium h3 text-primary mb-0">499</span>
+                            <sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/year</sub>
+                          </span>
+                        </span>
+                        <input name="customRadioIcon" class="form-check-input" type="radio" value="" id="enterpriseOption" />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <!--/ Custom plan options -->
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Payment Information</h4>
+                  <p class="mb-0">Enter your card information</p>
+                </div>
+                <!-- Credit Card Details -->
+                <div class="row g-6">
+                  <div class="col-md-12 form-control-validation">
+                    <label class="form-label w-100" for="multiStepsCard">Card Number</label>
+                    <div class="input-group input-group-merge">
+                      <input id="multiStepsCard" class="form-control multi-steps-card" name="multiStepsCard" type="text" placeholder="1356 3215 6548 7898" aria-describedby="multiStepsCardImg" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsCardImg"><span class="card-type"></span></span>
+                    </div>
+                  </div>
+                  <div class="col-md-5">
+                    <label class="form-label" for="multiStepsName">Name On Card</label>
+                    <input type="text" id="multiStepsName" class="form-control" name="multiStepsName" placeholder="John Doe" />
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <label class="form-label" for="multiStepsExDate">Expiry Date</label>
+                    <input type="text" id="multiStepsExDate" class="form-control multi-steps-exp-date" name="multiStepsExDate" placeholder="MM/YY" />
+                  </div>
+                  <div class="col-6 col-md-3">
+                    <label class="form-label" for="multiStepsCvv">CVV Code</label>
+                    <div class="input-group input-group-merge">
+                      <input type="text" id="multiStepsCvv" class="form-control multi-steps-cvv" name="multiStepsCvv" maxlength="3" placeholder="654" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsCvvHelp"><i class="icon-base ti tabler-help text-body-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
+                    </div>
+                  </div>
+                  <div class="col-12 d-flex justify-content-between form-control-validation">
+                    <button class="btn btn-label-secondary btn-prev">
+                      <i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
+                      <span class="align-middle d-sm-inline-block d-none">Previous</span>
+                    </button>
+                    <button type="submit" class="btn btn-success btn-next btn-submit">Submit</button>
+                  </div>
+                </div>
+                <!--/ Credit Card Details -->
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- / Multi Steps Registration -->
+  </div>
+</div>
+
+<script>
+// Check selected custom option
+window.Helpers.initCustomOptionCheck();
+
+</script>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_reset_password_basic.html

@@ -0,0 +1,77 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Reset Password Basic - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Reset Password -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="{% url 'index' %}" class="app-brand-link">
+              <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+              <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Reset Password 🔒</h4>
+          <p class="mb-6"><span class="fw-medium">Your new password must be different from previously used passwords</span></p>
+          <form id="formAuthentication" action="{% url 'auth-login-basic' %}">
+            {% csrf_token %}
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="password">New Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="confirm-password">Confirm Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="confirm-password" class="form-control" name="confirm-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <button class="btn btn-primary d-grid w-100 mb-6">Set new password</button>
+            <div class="text-center">
+              <a href="{% url 'auth-login-basic' %}" class="d-flex justify-content-center">
+                <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+                Back to login
+              </a>
+            </div>
+          </form>
+        </div>
+      </div>
+      <!-- /Reset Password -->
+    </div>
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_reset_password_cover.html

@@ -0,0 +1,82 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Reset Password Cover - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="{% url 'index' %}" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+    <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="{% static 'img/illustrations/auth-reset-password-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-reset-password-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-reset-password-illustration-light.png" data-app-dark-img="illustrations/auth-reset-password-illustration-dark.png" />
+        <img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-reset-password-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Reset Password -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
+      <div class="w-px-400 mx-auto mt-12 pt-5">
+        <h4 class="mb-1">Reset Password 🔒</h4>
+        <p class="mb-6"><span class="fw-medium">Your new password must be different from previously used passwords</span></p>
+        <form id="formAuthentication" class="mb-6" action="{% url 'auth-login-cover' %}">
+          {% csrf_token %}
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">New Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="confirm-password">Confirm Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="confirm-password" class="form-control" name="confirm-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <button class="btn btn-primary d-grid w-100 mb-6">Set new password</button>
+          <div class="text-center">
+            <a href="{% url 'auth-login-cover' %}" class="d-flex justify-content-center">
+              <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+              Back to login
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- /Reset Password -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_two_steps_basic.html

@@ -0,0 +1,78 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Two Steps Verifications Basic - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+<script src="{% static 'js/pages-auth-two-steps.js' %}"></script>
+{% endblock page_js %}
+
+
+{% block content %}
+<div class="authentication-wrapper authentication-basic px-6">
+  <div class="authentication-inner py-6">
+    <!--  Two Steps Verification -->
+    <div class="card">
+      <div class="card-body">
+        <!-- Logo -->
+        <div class="app-brand justify-content-center mb-6">
+          <a href="{% url 'index' %}" class="app-brand-link">
+            <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+            <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+          </a>
+        </div>
+        <!-- /Logo -->
+        <h4 class="mb-1">Two Step Verification 💬</h4>
+        <p class="text-start mb-6">
+          We sent a verification code to your mobile. Enter the code from the mobile in the field below.
+          <span class="fw-medium d-block mt-1 text-heading">******1234</span>
+        </p>
+        <p class="mb-0">Type your 6 digit security code</p>
+        <form id="twoStepsForm" action="{% url 'index' %}">
+          {% csrf_token %}
+          <div class="mb-6 form-control-validation">
+            <div class="auth-input-wrapper d-flex align-items-center justify-content-between numeral-mask-wrapper">
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" autofocus />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+            </div>
+            <!-- Create a hidden field which is combined by 3 fields above -->
+            <input type="hidden" name="otp" />
+          </div>
+          <button class="btn btn-primary d-grid w-100 mb-6">Verify my account</button>
+          <div class="text-center">
+            Didn't get the code?
+            <a href="javascript:void(0);"> Resend </a>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- / Two Steps Verification -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_two_steps_cover.html

@@ -0,0 +1,84 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Two Steps Verifications Cover - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/pages-auth.js' %}"></script>
+<script src="{% static 'js/pages-auth-two-steps.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="{% url 'index' %}" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+    <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="{% static 'img/illustrations/auth-two-step-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-two-steps-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-two-step-illustration-light.png" data-app-dark-img="illustrations/auth-two-step-illustration-dark.png" />
+        <img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-two-steps-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Two Steps Verification -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
+      <div class="w-px-400 mx-auto mt-12 mt-5">
+        <h4 class="mb-1">Two Step Verification 💬</h4>
+        <p class="text-start mb-6">
+          We sent a verification code to your mobile. Enter the code from the mobile in the field below.
+          <span class="fw-medium d-block mt-1 text-heading">******1234</span>
+        </p>
+        <p class="mb-0">Type your 6 digit security code</p>
+        <form id="twoStepsForm" action="{% url 'index' %}">
+          {% csrf_token %}
+          <div class="mb-6 form-control-validation">
+            <div class="auth-input-wrapper d-flex align-items-center justify-content-between numeral-mask-wrapper">
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" autofocus />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+            </div>
+            <!-- Create a hidden field which is combined by 3 fields above -->
+            <input type="hidden" name="otp" />
+          </div>
+          <button class="btn btn-primary d-grid w-100 mb-6">Verify my account</button>
+          <div class="text-center">
+            Didn't get the code?
+            <a href="javascript:void(0);"> Resend </a>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- /Two Steps Verification -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_verify_email_basic.html

@@ -0,0 +1,39 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Verify Email Basic - Pages{% endblock %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+{% block content %}
+<div class="authentication-wrapper authentication-basic px-6">
+  <div class="authentication-inner py-6">
+    <!-- Verify Email -->
+    <div class="card">
+      <div class="card-body">
+        <!-- Logo -->
+        <div class="app-brand justify-content-center mb-6">
+          <a href="{% url 'index' %}" class="app-brand-link">
+            <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+            <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+          </a>
+        </div>
+        <!-- /Logo -->
+        <h4 class="mb-1">Verify your email ✉️</h4>
+        <p class="text-start mb-0">Account activation link sent to your email address: <span class="fw-medium">hello@example.com</span> Please follow the link inside to continue.</p>
+        <a class="btn btn-primary w-100 my-6" href="{% url 'index' %}"> Skip for now </a>
+        <p class="text-center mb-0">
+          Didn't get the mail?
+          <a href="javascript:void(0);"> Resend </a>
+        </p>
+      </div>
+    </div>
+    <!-- /Verify Email -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/templates/auth_verify_email_cover.html

@@ -0,0 +1,47 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Verify Email Cover - Pages{% endblock %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
+{% endblock page_css %}
+
+
+{% block content %}
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="{% url 'index' %}" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
+    <span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="{% static 'img/illustrations/auth-verify-email-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-verify-email-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-verify-email-illustration-light.png" data-app-dark-img="illustrations/auth-verify-email-illustration-dark.png" />
+        <img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-verify-email-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!--  Verify email -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
+      <div class="w-px-400 mx-auto mt-12 mt-5">
+        <h4 class="mb-1">Verify your email ✉️</h4>
+        <p class="text-start mb-0">Account activation link sent to your email address: <span class="fw-medium">hello@example.com</span> Please follow the link inside to continue.</p>
+        <a class="btn btn-primary w-100 my-6" href="{% url 'index' %}"> Skip for now </a>
+        <p class="text-center mb-0">
+          Didn't get the mail?
+          <a href="javascript:void(0);"> Resend </a>
+        </p>
+      </div>
+    </div>
+    <!-- / Verify email -->
+  </div>
+</div>
+{% endblock content %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/urls.py

@@ -0,0 +1,71 @@
+from django.urls import path
+from .views import AuthView
+
+
+urlpatterns = [
+    path(
+        "auth/login/basic/",
+        AuthView.as_view(template_name="auth_login_basic.html"),
+        name="auth-login-basic",
+    ),
+    path(
+        "auth/login/cover/",
+        AuthView.as_view(template_name="auth_login_cover.html"),
+        name="auth-login-cover",
+    ),
+    path(
+        "auth/register/basic/",
+        AuthView.as_view(template_name="auth_register_basic.html"),
+        name="auth-register-basic",
+    ),
+    path(
+        "auth/register/cover/",
+        AuthView.as_view(template_name="auth_register_cover.html"),
+        name="auth-register-cover",
+    ),
+    path(
+        "auth/register/multisteps/",
+        AuthView.as_view(template_name="auth_register_multisteps.html"),
+        name="auth-register-multisteps",
+    ),
+    path(
+        "auth/verify_email/basic/",
+        AuthView.as_view(template_name="auth_verify_email_basic.html"),
+        name="auth-verify-email-basic",
+    ),
+    path(
+        "auth/verify_email/cover/",
+        AuthView.as_view(template_name="auth_verify_email_cover.html"),
+        name="auth-verify-email-cover",
+    ),
+    path(
+        "auth/reset_password/basic/",
+        AuthView.as_view(template_name="auth_reset_password_basic.html"),
+        name="auth-reset-password-basic",
+    ),
+    path(
+        "auth/reset_password/cover/",
+        AuthView.as_view(template_name="auth_reset_password_cover.html"),
+        name="auth-reset-password-cover",
+    ),
+    path(
+        "auth/forgot_password/basic/",
+        AuthView.as_view(template_name="auth_forgot_password_basic.html"),
+        name="auth-forgot-password-basic",
+    ),
+    path(
+        "auth/forgot_password/cover/",
+        AuthView.as_view(template_name="auth_forgot_password_cover.html"),
+        name="auth-forgot-password-cover",
+    ),
+    path(
+        "auth/two_steps/basic/",
+        AuthView.as_view(template_name="auth_two_steps_basic.html"),
+        name="auth-two-steps-basic",
+    ),
+    path(
+        "auth/two_steps/cover/",
+        AuthView.as_view(template_name="auth_two_steps_cover.html"),
+        name="auth-two-steps-cover",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/authentication/views.py

@@ -0,0 +1,26 @@
+from django.views.generic import TemplateView
+from web_project import TemplateLayout
+from web_project.template_helpers.theme import TemplateHelper
+
+
+"""
+This file is a view controller for multiple pages as a module.
+Here you can override the page view layout.
+Refer to auth/urls.py file for more pages.
+"""
+
+
+class AuthView(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))
+
+        # Update the context
+        context.update(
+            {
+                "layout_path": TemplateHelper.set_layout("layout_blank.html", context),
+            }
+        )
+
+        return context

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_actions.html

@@ -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 %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_analytics.html

@@ -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 %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_basic.html

@@ -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 %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/templates/cards_statistics.html

@@ -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 %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/tests.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/urls.py

@@ -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",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/cards/views.py

@@ -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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/templates/charts_apex.html

@@ -0,0 +1,304 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Apex - Charts{% 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/charts-apex.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+
+<div class="row gy-6">
+  <!-- Line Area Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Last updates</h5>
+          <p class="card-subtitle my-0">Commercial networks</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="lineAreaChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Area Chart -->
+
+  <!-- Bar Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-md-center align-items-start">
+        <h5 class="card-title mb-0">Data Science</h5>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="barChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Chart -->
+
+  <!-- Scatter Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">New Technologies Data</h5>
+        <div class="btn-group d-none d-sm-flex" role="group" aria-label="radio toggle button group">
+          <input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked />
+          <label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="monthlyRadio" />
+          <label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="yearlyRadio" />
+          <label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="scatterChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Scatter Chart -->
+
+  <!-- Line Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Balance</h5>
+          <p class="card-subtitle  my-0">Commercial networks & enterprises</p>
+        </div>
+        <div class="d-sm-flex d-none align-items-center">
+          <h5 class="mb-0 me-4">$ 100,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-down icon-xs text-danger"></i>
+            <span class="align-middle">20%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="lineChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Chart -->
+
+  <!-- Bar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <div>
+          <p class="card-subtitle text-body-secondary mb-1">Balance</p>
+          <h5 class="card-title mb-0">$74,382.72</h5>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="horizontalBarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Chart -->
+
+  <!-- Candlestick Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Stocks Prices</h5>
+          <p class="card-subtitle my-0">$50,863.98</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="candleStickChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Candlestick Chart -->
+
+  <!-- Heat map Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">Daily Sales States</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="heatChartDd" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="heatMapChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Heat map Chart -->
+
+  <!-- Radial bar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title mb-0">Statistics</h5>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="radialBarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Radial bar Chart -->
+
+  <!-- Radar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">Mobile Comparison</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="heatChartDd1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd1">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="radarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Radar Chart -->
+
+  <!-- Donut Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Expense Ratio</h5>
+          <p class="card-subtitle my-0">Spending on various categories</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="donutChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Donut Chart -->
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/templates/charts_chartjs.html

@@ -0,0 +1,264 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Chart.js - Charts{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/chartjs/chartjs.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/chartjs/chartjs.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/charts-chartjs-legend.js' %}"></script>
+<script src="{% static 'js/charts-chartjs.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+
+<div class="row">
+  <!-- Bar Charts -->
+  <div class="col-xl-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Latest Statistics</h5>
+        <div class="card-action-element ms-auto py-0">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="barChart" class="chartjs" data-height="400"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Charts -->
+
+  <!-- Horizontal Bar Charts -->
+  <div class="col-xl-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <div class="d-flex flex-column">
+          <p class="card-subtitle text-body-secondary mb-1 mt-0">Balance</p>
+          <h5 class="card-title mb-0">$74,123</h5>
+        </div>
+        <div class="card-action-element ms-auto py-0">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="horizontalBarChart" class="chartjs" data-height="400"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Horizontal Bar Charts -->
+
+  <!-- Line Charts -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <div>
+          <h5 class="card-title mb-0">Statistics</h5>
+          <p class="text-body-secondary">Commercial networks and enterprises</p>
+        </div>
+        <div class="card-header-elements ms-auto py-0">
+          <h5 class="mb-0 me-4">$ 78,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-up icon-xs text-success"></i>
+            <span class="align-middle">37%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer" class="custom-legend"></div>
+        <div>
+          <canvas id="lineChart" class="chartjs" data-height="500"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Charts -->
+
+  <!-- Radar Chart -->
+  <div class="col-lg-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header">
+        <h5 class="card-title mb-0">Radar Chart</h5>
+      </div>
+      <div class="card-body pt-2">
+        <canvas class="chartjs" id="radarChart" data-height="355"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Radar Chart -->
+
+  <!-- Polar Area Chart -->
+  <div class="col-lg-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Average Skills</h5>
+        <div class="card-header-elements ms-auto py-0 dropdown">
+          <button type="button" class="btn dropdown-toggle hide-arrow p-0" id="heat-chart-dd" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heat-chart-dd">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="polarChart" class="chartjs" data-height="337"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Polar Area Chart -->
+
+  <!-- Bubble Chart -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Bubble Chart</h5>
+        <div class="card-header-elements ms-auto py-0">
+          <h5 class="mb-0 me-4">$ 100,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-down icon-xs text-danger"></i>
+            <span class="align-middle">20%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="bubbleChart" class="chartjs" data-height="500"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Bubble Chart -->
+
+  <!-- Line Area Charts -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Data Science</h5>
+        <div class="card-header-elements py-0 ms-auto">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer1" class="custom-legend"></div>
+        <div>
+          <canvas id="lineAreaChart" class="chartjs" data-height="450"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Area Charts -->
+
+  <!-- Doughnut Chart -->
+  <div class="col-lg-4 col-12 mb-6">
+    <div class="card">
+      <h5 class="card-header">User by Devices</h5>
+      <div class="card-body">
+        <canvas id="doughnutChart" class="chartjs mb-6" data-height="350"></canvas>
+        <ul class="doughnut-legend d-flex justify-content-around ps-0 mb-2 pt-1">
+          <li class="ct-series-0 d-flex flex-column">
+            <h5 class="mb-0">Desktop</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(102, 110, 232);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">80 %</div>
+          </li>
+          <li class="ct-series-1 d-flex flex-column">
+            <h5 class="mb-0">Tablet</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(40, 208, 148);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">10 %</div>
+          </li>
+          <li class="ct-series-2 d-flex flex-column">
+            <h5 class="mb-0">Mobile</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(253, 172, 52);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">10 %</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!-- /Doughnut Chart -->
+
+  <!-- Scatter Chart -->
+  <div class="col-lg-8 col-12 mb-6">
+    <div class="card">
+      <div class="card-header flex-nowrap header-elements">
+        <h5 class="card-title mb-0">New Product Data</h5>
+        <div class="card-header-elements ms-auto py-0 d-none d-sm-block">
+          <div class="btn-group" role="group" aria-label="radio toggle button group">
+            <input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked />
+            <label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>
+
+            <input type="radio" class="btn-check" name="btnradio" id="monthlyRadio" />
+            <label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>
+
+            <input type="radio" class="btn-check" name="btnradio" id="yearlyRadio" />
+            <label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer2" class="custom-legend"></div>
+        <div>
+          <canvas id="scatterChart" class="chartjs" data-height="435"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Scatter Chart -->
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/urls.py

@@ -0,0 +1,17 @@
+from django.urls import path
+from .views import ChartsView
+from django.contrib.auth.decorators import login_required
+
+
+urlpatterns = [
+    path(
+        "charts/apex/",
+        login_required(ChartsView.as_view(template_name="charts_apex.html")),
+        name="charts-apex",
+    ),
+    path(
+        "charts/chartjs/",
+        login_required(ChartsView.as_view(template_name="charts_chartjs.html")),
+        name="charts-chartjs",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/charts/views.py

@@ -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 charts/urls.py file for more pages.
+"""
+
+
+class ChartsView(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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/chat/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/chat/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/chat/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/chat/templates/app_chat.html

@@ -0,0 +1,614 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Chat - Apps{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/maxLength/maxLength.css' %}" />
+{% endblock vendor_css %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/app-chat.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-chat.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="app-chat card overflow-hidden">
+  <div class="row g-0">
+    <!-- Sidebar Left -->
+    <div class="col app-chat-sidebar-left app-sidebar overflow-hidden" id="app-chat-sidebar-left">
+      <div class="chat-sidebar-left-user sidebar-header d-flex flex-column justify-content-center align-items-center flex-wrap px-6 pt-12">
+        <div class="avatar avatar-xl avatar-online chat-sidebar-avatar">
+          <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+        </div>
+        <h5 class="mt-4 mb-0">John Doe</h5>
+        <span>Admin</span>
+        <i class="icon-base ti tabler-x icon-lg cursor-pointer close-sidebar" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-left"></i>
+      </div>
+      <div class="sidebar-body px-6 pb-6">
+        <div class="my-6">
+          <div class="maxLength-wrapper">
+            <label for="chat-sidebar-left-user-about" class="text-uppercase text-body-secondary mb-1">About</label>
+            <textarea id="chat-sidebar-left-user-about" class="form-control chat-sidebar-left-user-about maxLength-example" rows="3" maxlength="120">Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.</textarea>
+            <small id="textarea-maxlength-info"></small>
+          </div>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase text-body-secondary mb-1">Status</p>
+          <div class="d-grid gap-2 pt-2 text-heading ms-2">
+            <div class="form-check form-check-success">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="active" id="user-active" checked />
+              <label class="form-check-label" for="user-active">Online</label>
+            </div>
+            <div class="form-check form-check-warning">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="away" id="user-away" />
+              <label class="form-check-label" for="user-away">Away</label>
+            </div>
+            <div class="form-check form-check-danger">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="busy" id="user-busy" />
+              <label class="form-check-label" for="user-busy">Do not Disturb</label>
+            </div>
+            <div class="form-check form-check-secondary">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="offline" id="user-offline" />
+              <label class="form-check-label" for="user-offline">Offline</label>
+            </div>
+          </div>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase text-body-secondary mb-1">Settings</p>
+          <ul class="list-unstyled d-grid gap-4 ms-2 pt-2 text-heading">
+            <li class="d-flex justify-content-between align-items-center">
+              <div>
+                <i class="icon-base ti tabler-lock icon-md me-1"></i>
+                <span class="align-middle">Two-step Verification</span>
+              </div>
+              <div class="form-check form-switch mb-0 me-1">
+                <input type="checkbox" class="form-check-input" checked />
+              </div>
+            </li>
+            <li class="d-flex justify-content-between align-items-center">
+              <div>
+                <i class="icon-base ti tabler-bell icon-md me-1"></i>
+                <span class="align-middle">Notification</span>
+              </div>
+              <div class="form-check form-switch mb-0 me-1">
+                <input type="checkbox" class="form-check-input" />
+              </div>
+            </li>
+            <li>
+              <i class="icon-base ti tabler-user-plus icon-md me-1"></i>
+              <span class="align-middle">Invite Friends</span>
+            </li>
+            <li>
+              <i class="icon-base ti tabler-trash icon-md me-1"></i>
+              <span class="align-middle">Delete Account</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex mt-6">
+          <button class="btn btn-primary w-100" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-left">Logout<i class="icon-base ti tabler-logout icon-16px ms-2"></i></button>
+        </div>
+      </div>
+    </div>
+    <!-- /Sidebar Left-->
+
+    <!-- Chat & Contacts -->
+    <div class="col app-chat-contacts app-sidebar flex-grow-0 overflow-hidden border-end" id="app-chat-contacts">
+      <div class="sidebar-header h-px-75 px-5 border-bottom d-flex align-items-center">
+        <div class="d-flex align-items-center me-6 me-lg-0">
+          <div class="flex-shrink-0 avatar avatar-online me-4" data-bs-toggle="sidebar" data-overlay="app-overlay-ex" data-target="#app-chat-sidebar-left">
+            <img class="user-avatar rounded-circle cursor-pointer" src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
+          </div>
+          <div class="flex-grow-1 input-group input-group-merge">
+            <span class="input-group-text" id="basic-addon-search31"><i class="icon-base ti tabler-search icon-xs"></i></span>
+            <input type="text" class="form-control chat-search-input" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31" />
+          </div>
+        </div>
+        <i class="icon-base ti tabler-x icon-lg cursor-pointer position-absolute top-50 end-0 translate-middle d-lg-none d-block" data-overlay data-bs-toggle="sidebar" data-target="#app-chat-contacts"></i>
+      </div>
+      <div class="sidebar-body">
+        <!-- Chats -->
+        <ul class="list-unstyled chat-contact-list py-2 mb-0" id="chat-list">
+          <li class="chat-contact-list-item chat-contact-list-item-title mt-0">
+            <h5 class="text-primary mb-0">Chats</h5>
+          </li>
+          <li class="chat-contact-list-item chat-list-item-0 d-none">
+            <h6 class="text-body-secondary mb-0">No Chats Found</h6>
+          </li>
+          <li class="chat-contact-list-item mb-1">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar avatar-online">
+                <img src="{% static 'img/avatars/13.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <div class="d-flex justify-content-between align-items-center">
+                  <h6 class="chat-contact-name text-truncate m-0 fw-normal">Waldemar Mannering</h6>
+                  <small class="chat-contact-list-item-time">5 Minutes</small>
+                </div>
+                <small class="chat-contact-status text-truncate">Refer friends. Get rewards.</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item mb-1">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar avatar-offline">
+                <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <div class="d-flex justify-content-between align-items-center">
+                  <h6 class="chat-contact-name text-truncate fw-normal m-0">Felecia Rower</h6>
+                  <small class="chat-contact-list-item-time">30 Minutes</small>
+                </div>
+                <small class="chat-contact-status text-truncate">I will purchase it for sure. 👍</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item mb-0">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar avatar-busy">
+                <span class="avatar-initial rounded-circle bg-label-success">CM</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <div class="d-flex justify-content-between align-items-center">
+                  <h6 class="chat-contact-name text-truncate fw-normal m-0">Calvin Moore</h6>
+                  <small class="chat-contact-list-item-time">1 Day</small>
+                </div>
+                <small class="chat-contact-status text-truncate">If it takes long you can mail inbox user</small>
+              </div>
+            </a>
+          </li>
+        </ul>
+        <!-- Contacts -->
+        <ul class="list-unstyled chat-contact-list mb-0 py-2" id="contact-list">
+          <li class="chat-contact-list-item chat-contact-list-item-title mt-0">
+            <h5 class="text-primary mb-0">Contacts</h5>
+          </li>
+          <li class="chat-contact-list-item contact-list-item-0 d-none">
+            <h6 class="text-body-secondary mb-0">No Contacts Found</h6>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Natalie Maxwell</h6>
+                <small class="chat-contact-status text-truncate">UI/UX Designer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/5.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Jess Cook</h6>
+                <small class="chat-contact-status text-truncate">Business Analyst</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="avatar d-block flex-shrink-0">
+                <span class="avatar-initial rounded-circle bg-label-primary">LM</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Louie Mason</h6>
+                <small class="chat-contact-status text-truncate">Resource Manager</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/7.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Krystal Norton</h6>
+                <small class="chat-contact-status text-truncate">Business Executive</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/8.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Stacy Garrison</h6>
+                <small class="chat-contact-status text-truncate">Marketing Ninja</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="avatar d-block flex-shrink-0">
+                <span class="avatar-initial rounded-circle bg-label-success">CM</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Calvin Moore</h6>
+                <small class="chat-contact-status text-truncate">UX Engineer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/10.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Mary Giles</h6>
+                <small class="chat-contact-status text-truncate">Account Department</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/13.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Waldemar Mannering</h6>
+                <small class="chat-contact-status text-truncate">AWS Support</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="avatar d-block flex-shrink-0">
+                <span class="avatar-initial rounded-circle bg-label-danger">AJ</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Amy Johnson</h6>
+                <small class="chat-contact-status text-truncate">Frontend Developer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Felecia Rower</h6>
+                <small class="chat-contact-status text-truncate">Cloud Engineer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item mb-0">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="{% static 'img/avatars/11.png' %}" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">William Stephens</h6>
+                <small class="chat-contact-status text-truncate">Backend Developer</small>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- /Chat contacts -->
+
+    <!-- Chat conversation -->
+    <div class="col app-chat-conversation d-flex align-items-center justify-content-center flex-column" id="app-chat-conversation">
+      <div class="bg-label-primary p-8 rounded-circle">
+        <i class="icon-base ti tabler-message-2 icon-50px"></i>
+      </div>
+      <p class="my-4">Select a contact to start a conversation.</p>
+      <button class="btn btn-primary app-chat-conversation-btn" id="app-chat-conversation-btn">Select Contact</button>
+    </div>
+    <!-- /Chat conversation -->
+
+    <!-- Chat History -->
+    <div class="col app-chat-history d-none" id="app-chat-history">
+      <div class="chat-history-wrapper">
+        <div class="chat-history-header border-bottom">
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="d-flex overflow-hidden align-items-center">
+              <i class="icon-base ti tabler-menu-2 icon-lg cursor-pointer d-lg-none d-block me-4" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-contacts"></i>
+              <div class="flex-shrink-0 avatar avatar-online">
+                <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-right" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="m-0 fw-normal">Felecia Rower</h6>
+                <small class="user-status text-body">NextJS developer</small>
+              </div>
+            </div>
+            <div class="d-flex align-items-center">
+              <span class="btn btn-text-secondary cursor-pointer d-sm-inline-flex d-none me-1 btn-icon rounded-pill">
+                <i class="icon-base ti tabler-phone icon-22px"></i>
+              </span>
+              <span class="btn btn-text-secondary cursor-pointer d-sm-inline-flex d-none me-1 btn-icon rounded-pill">
+                <i class="icon-base ti tabler-video icon-22px"></i>
+              </span>
+              <span class="btn btn-text-secondary cursor-pointer d-sm-inline-flex d-none me-1 btn-icon rounded-pill">
+                <i class="icon-base ti tabler-search icon-22px"></i>
+              </span>
+              <div class="dropdown">
+                <button class="btn btn-icon btn-text-secondary text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="true" id="chat-header-actions"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="chat-header-actions">
+                  <a class="dropdown-item" href="javascript:void(0);">View Contact</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Mute Notifications</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Block Contact</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Clear Chat</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Report</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="chat-history-body">
+          <ul class="list-unstyled chat-history">
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">How can we help? We're here for you! 😄</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:00 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Hey John, I am looking for the best admin template.</p>
+                    <p class="mb-0">Could you please help me to find it out? 🤔</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">It should be Bootstrap 5 compatible.</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:02 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">{% get_theme_variables 'template_name' %} has all the components you'll ever need in a app.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:03 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Looks clean and fresh UI. 😃</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">It's perfect for my next project.</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">How can I purchase it?</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:05 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Thanks, you can purchase it.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:06 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">I will purchase it for sure. 👍</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">Thanks.</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:08 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Great, Feel free to get in touch.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:10 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Do you have design files for {% get_theme_variables 'template_name' %}?</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:15 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1 w-50">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Yes that's correct documentation file, Design files are included with the template.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px me-1"></i>
+                    <small>10:15 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <!-- Chat message form -->
+        <div class="chat-history-footer shadow-xs">
+          <form class="form-send-message d-flex justify-content-between align-items-center ">
+            <input class="form-control message-input border-0 me-4 shadow-none" placeholder="Type your message here..." />
+            <div class="message-actions d-flex align-items-center">
+              <span class="btn btn-text-secondary btn-icon rounded-pill cursor-pointer">
+                <i class="speech-to-text icon-base ti tabler-microphone icon-22px text-heading"></i>
+              </span>
+              <label for="attach-doc" class="form-label mb-0">
+                <span class="btn btn-text-secondary btn-icon rounded-pill cursor-pointer mx-1">
+                  <i class="icon-base ti tabler-paperclip icon-22px text-heading"></i>
+                </span>
+                <input type="file" id="attach-doc" hidden />
+              </label>
+              <button class="btn btn-primary d-flex send-msg-btn">
+                <span class="align-middle d-md-inline-block d-none">Send</span>
+                <i class="icon-base ti tabler-send icon-16px ms-md-2 ms-0"></i>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <!-- /Chat History -->
+
+    <!-- Sidebar Right -->
+    <div class="col app-chat-sidebar-right app-sidebar overflow-hidden" id="app-chat-sidebar-right">
+      <div class="sidebar-header d-flex flex-column justify-content-center align-items-center flex-wrap px-6 pt-12">
+        <div class="avatar avatar-xl avatar-online chat-sidebar-avatar">
+          <img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
+        </div>
+        <h5 class="mt-4 mb-0">Felecia Rower</h5>
+        <span>NextJS Developer</span>
+        <i class="icon-base ti tabler-x icon-lg cursor-pointer close-sidebar d-block" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-right"></i>
+      </div>
+      <div class="sidebar-body p-6 pt-0">
+        <div class="my-6">
+          <p class="text-uppercase mb-1 text-body-secondary">About</p>
+          <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content .</p>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase mb-1 text-body-secondary">Personal Information</p>
+          <ul class="list-unstyled d-grid gap-4 mb-0 ms-2 py-2 text-heading">
+            <li class="d-flex align-items-center">
+              <i class="icon-base ti tabler-mail icon-md"></i>
+              <span class="align-middle ms-2">josephGreen@email.com</span>
+            </li>
+            <li class="d-flex align-items-center">
+              <i class="icon-base ti tabler-phone-call icon-md"></i>
+              <span class="align-middle ms-2">+1(123) 456 - 7890</span>
+            </li>
+            <li class="d-flex align-items-center">
+              <i class="icon-base ti tabler-clock icon-md"></i>
+              <span class="align-middle ms-2">Mon - Fri 10AM - 8PM</span>
+            </li>
+          </ul>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase text-body-secondary mb-1">Options</p>
+          <ul class="list-unstyled d-grid gap-4 ms-2 py-2 text-heading">
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-bookmark icon-md"></i>
+              <span class="align-middle ms-2">Add Tag</span>
+            </li>
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-star icon-md"></i>
+              <span class="align-middle ms-2">Important Contact</span>
+            </li>
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-photo icon-md"></i>
+              <span class="align-middle ms-2">Shared Media</span>
+            </li>
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-ban icon-md"></i>
+              <span class="align-middle ms-2">Block Contact</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex mt-6">
+          <button class="btn btn-danger w-100" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-right">Delete Contact<i class="icon-base ti tabler-trash icon-16px ms-2"></i></button>
+        </div>
+      </div>
+    </div>
+    <!-- /Sidebar Right -->
+
+    <div class="app-overlay"></div>
+  </div>
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/chat/urls.py

@@ -0,0 +1,12 @@
+from django.urls import path
+from .views import ChatView
+from django.contrib.auth.decorators import login_required
+
+
+urlpatterns = [
+    path(
+        "app/chat/",
+        login_required(ChatView.as_view(template_name="app_chat.html")),
+        name="app-chat",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/chat/views.py

@@ -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 chat/urls.py file for more pages.
+"""
+
+
+class ChatView(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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/dashboards/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/dashboards/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/dashboards/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/dashboards/templates/dashboard_analytics.html

@@ -0,0 +1,772 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Dashboard - Analytics{% 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/swiper/swiper.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' %}" />
+<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
+<script src="{% static 'vendor/libs/swiper/swiper.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/cards-advance.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/dashboards-analytics.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="row g-6">
+  <!-- Website Analytics -->
+  <div class="col-xl-6 col">
+    <div class="swiper-container swiper-container-horizontal swiper swiper-card-advance-bg" id="swiper-with-pagination-cards">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <div class="row">
+            <div class="col-12">
+              <h5 class="text-white mb-0">Website Analytics</h5>
+              <small>Total 28.5% Conversion Rate</small>
+            </div>
+            <div class="row">
+              <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
+                <h6 class="text-white mt-0 mt-md-3 mb-4">Traffic</h6>
+                <div class="row">
+                  <div class="col-6">
+                    <ul class="list-unstyled mb-0">
+                      <li class="d-flex mb-4 align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">28%</p>
+                        <p class="mb-0">Sessions</p>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">1.2k</p>
+                        <p class="mb-0">Leads</p>
+                      </li>
+                    </ul>
+                  </div>
+                  <div class="col-6">
+                    <ul class="list-unstyled mb-0">
+                      <li class="d-flex mb-4 align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">3.1k</p>
+                        <p class="mb-0">Page Views</p>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">12%</p>
+                        <p class="mb-0">Conversions</p>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
+                <img src="{% static 'img/illustrations/card-website-analytics-1.png' %}" alt="Website Analytics" height="150" class="card-website-analytics-img" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="row">
+            <div class="col-12">
+              <h5 class="text-white mb-0">Website Analytics</h5>
+              <small>Total 28.5% Conversion Rate</small>
+            </div>
+            <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
+              <h6 class="text-white mt-0 mt-md-3 mb-4">Spending</h6>
+              <div class="row">
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">12h</p>
+                      <p class="mb-0">Spend</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">127</p>
+                      <p class="mb-0">Order</p>
+                    </li>
+                  </ul>
+                </div>
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">18</p>
+                      <p class="mb-0">Order Size</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">2.3k</p>
+                      <p class="mb-0">Items</p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
+              <img src="{% static 'img/illustrations/card-website-analytics-2.png' %}" alt="Website Analytics" height="150" class="card-website-analytics-img" />
+            </div>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="row">
+            <div class="col-12">
+              <h5 class="text-white mb-0">Website Analytics</h5>
+              <small>Total 28.5% Conversion Rate</small>
+            </div>
+            <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
+              <h6 class="text-white mt-0 mt-md-3 mb-4">Revenue Sources</h6>
+              <div class="row">
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">268</p>
+                      <p class="mb-0">Direct</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">62</p>
+                      <p class="mb-0">Referral</p>
+                    </li>
+                  </ul>
+                </div>
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">890</p>
+                      <p class="mb-0">Organic</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">1.2k</p>
+                      <p class="mb-0">Campaign</p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
+              <img src="{% static 'img/illustrations/card-website-analytics-3.png' %}" alt="Website Analytics" height="150" class="card-website-analytics-img" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
+    </div>
+  </div>
+  <!--/ Website Analytics -->
+
+  <!-- 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>
+  <!--/ Average Daily Sales -->
+
+  <!-- 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">
+          <div class="col-4">
+            <div class="d-flex gap-2 align-items-center mb-2">
+              <span class="badge bg-label-info p-1 rounded"><i class="icon-base ti tabler-shopping-cart icon-sm"></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 p-1 rounded"><i class="icon-base ti tabler-link icon-sm"></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>
+  <!--/ Sales Overview -->
+
+  <!-- Earning Reports -->
+  <div class="col-md-6">
+    <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-18px"></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-18px"></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-18px"></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>
+  <!--/ Earning Reports -->
+
+  <!-- Support Tracker -->
+  <div class="col-12 col-md-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">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">
+          <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-md-8">
+          <div id="supportTracker"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Support Tracker -->
+
+  <!-- Sales By Country -->
+  <div class="col-xxl-4 col-md-6 order-1 order-xl-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">Sales by Countries</h5>
+          <p class="card-subtitle">Monthly Sales Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary btn-icon rounded-pill text-body-secondary border-0 me-n1" type="button" id="salesByCountry" 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="salesByCountry">
+            <a class="dropdown-item" href="javascript:void(0);">Download</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 align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-us rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$8,567k</h6>
+                </div>
+                <small class="text-body">United states</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  25.8%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-br rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$2,415k</h6>
+                </div>
+                <small class="text-body">Brazil</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  6.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-in rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$865k</h6>
+                </div>
+                <small class="text-body">India</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  12.4%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-au rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$745k</h6>
+                </div>
+                <small class="text-body">Australia</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  11.9%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-fr rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$45</h6>
+                </div>
+                <small class="text-body">France</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  16.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-cn rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$12k</h6>
+                </div>
+                <small class="text-body">China</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  14.8%
+                </p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Sales By Country -->
+
+  <!-- Total Earning -->
+  <div class="col-12 col-md-6 col-xxl-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>
+  <!--/ Total Earning -->
+
+  <!-- Monthly Campaign State -->
+  <div class="col-xxl-4 col-md-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">Monthly Campaign State</h5>
+          <p class="card-subtitle">8.52k Social Visiters</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="MonthlyCampaign" 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="MonthlyCampaign">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-success rounded p-1_5"><i class="icon-base ti tabler-mail icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Emails</h6>
+              <div class="d-flex">
+                <p class="mb-0">12,346</p>
+                <p class="ms-4 text-success mb-0">0.3%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-info rounded p-1_5"><i class="icon-base ti tabler-link icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Opened</h6>
+              <div class="d-flex">
+                <p class="mb-0">8,734</p>
+                <p class="ms-4 text-success mb-0">2.1%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-warning rounded p-1_5"><i class="icon-base ti tabler-mouse icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Clicked</h6>
+              <div class="d-flex">
+                <p class="mb-0">967</p>
+                <p class="ms-4 text-danger mb-0">1.4%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-primary rounded p-1_5"><i class="icon-base ti tabler-users icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Subscribe</h6>
+              <div class="d-flex">
+                <p class="mb-0">345</p>
+                <p class="ms-4 text-success mb-0">8.5%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-secondary rounded p-1_5"><i class="icon-base ti tabler-alert-triangle icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Complaints</h6>
+              <div class="d-flex">
+                <p class="mb-0">10</p>
+                <p class="ms-4 text-danger mb-0">1.5%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-3 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-danger rounded p-1_5"><i class="icon-base ti tabler-ban icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Unsubscribe</h6>
+              <div class="d-flex">
+                <p class="mb-0">86</p>
+                <p class="ms-4 text-success mb-0">0.8%</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Monthly Campaign State -->
+
+  <!-- Source Visit -->
+  <div class="col-xxl-4 col-md-6 col-12">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Source Visits</h5>
+          <p class="card-subtitle">38.4k Visitors</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="sourceVisits" 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="sourceVisits">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="list-unstyled mb-0">
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-shadow icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Direct Source</h6>
+                  <small class="text-body">Direct link click</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">1.2k</p>
+                  <div class="ms-4 badge bg-label-success">+4.2%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-globe icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Social Network</h6>
+                  <small class="text-body">Social Channels</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">31.5k</p>
+                  <div class="ms-4 badge bg-label-success">+8.2%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-mail icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Email Newsletter</h6>
+                  <small class="text-body">Mail Campaigns</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">893</p>
+                  <div class="ms-4 badge bg-label-success">+2.4%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-external-link icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Referrals</h6>
+                  <small class="text-body">Impact Radius Visits</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">342</p>
+                  <div class="ms-4 badge bg-label-danger">-0.4%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-ad icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">ADVT</h6>
+                  <small class="text-body">Google ADVT</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">2.15k</p>
+                  <div class="ms-4 badge bg-label-success">+9.1%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-star icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Other</h6>
+                  <small class="text-body">Many Sources</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">12.5k</p>
+                  <div class="ms-4 badge bg-label-success">+6.2%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Source Visit -->
+
+  <!-- Projects table -->
+  <div class="col-xxl-8">
+    <div class="card">
+      <div class="table-responsive mb-4">
+        <table class="table datatable-project table-sm">
+          <thead class="border-top">
+            <tr>
+              <th></th>
+              <th></th>
+              <th>Project</th>
+              <th>Leader</th>
+              <th>Team</th>
+              <th class="w-px-200">Progress</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+  </div>
+  <!--/ Projects table -->
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/dashboards/templates/dashboard_crm.html

@@ -0,0 +1,745 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}Dashboard - CRM{% endblock title %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.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/dashboards-crm.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="row g-6">
+  <!-- Sales last year -->
+  <div class="col-xxl-2 col-md-3 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>
+
+  <!-- Sessions Last month -->
+  <div class="col-xxl-2 col-md-3 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>
+
+  <!-- Total Profit -->
+  <div class="col-xxl-2 col-md-3 col-6">
+    <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-xxl-2 col-md-3 col-6">
+    <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">24.67k</p>
+        <div>
+          <span class="badge bg-label-success">+24.5%</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>
+
+  <!-- Earning Reports Tabs-->
+  <div class="col-xxl-8 col-12">
+    <div class="card h-100">
+      <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-popular 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>
+
+  <!-- Sales last 6 months -->
+  <div class="col-xl-4 col-md-6 order-xxl-0 order-1">
+    <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>
+
+  <!-- Sales By Country -->
+  <div class="col-xxl-4 col-md-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">Sales by Countries</h5>
+          <p class="card-subtitle">Monthly Sales Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary btn-icon rounded-pill text-body-secondary border-0 me-n1" type="button" id="salesByCountry" 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="salesByCountry">
+            <a class="dropdown-item" href="javascript:void(0);">Download</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 align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-us rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$8,567k</h6>
+                </div>
+                <small class="text-body">United states</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  25.8%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-br rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$2,415k</h6>
+                </div>
+                <small class="text-body">Brazil</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  6.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-in rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$865k</h6>
+                </div>
+                <small class="text-body">India</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  12.4%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-au rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$745k</h6>
+                </div>
+                <small class="text-body">Australia</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  11.9%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-fr rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$45</h6>
+                </div>
+                <small class="text-body">France</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  16.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-cn rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$12k</h6>
+                </div>
+                <small class="text-body">China</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  14.8%
+                </p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Sales By Country -->
+
+  <!-- Project Status -->
+  <div class="col-12 col-md-6 col-xxl-4">
+    <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-warning 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>
+
+  <!-- Active Projects -->
+  <div class="col-xxl-4 col-md-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">Active Project</h5>
+          <p class="card-subtitle">Average 72% Completed</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="activeProjects" 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="activeProjects">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="{% static 'img/icons/brands/laravel-logo.png' %}" alt="laravel-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Laravel</h6>
+                <small class="text-body">eCommerce</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-danger" role="progressbar" style="width: 65%" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">65%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="{% static 'img/icons/brands/figma-logo.png' %}" alt="figma-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Figma</h6>
+                <small class="text-body">App UI Kit</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-primary" role="progressbar" style="width: 86%" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">86%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="{% static 'img/icons/brands/vue-logo.png' %}" alt="vue-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">VueJs</h6>
+                <small class="text-body">Calendar App</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">90%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="{% static 'img/icons/brands/react-logo.png' %}" alt="react-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">React</h6>
+                <small class="text-body">Dashboard</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-info" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">37%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="{% static 'img/icons/brands/bootstrap-logo.png' %}" alt="bootstrap-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Bootstrap</h6>
+                <small class="text-body">Website</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-primary" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">22%</span>
+            </div>
+          </li>
+          <li class="d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="{% static 'img/icons/brands/sketch-logo.png' %}" alt="sketch-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Sketch</h6>
+                <small class="text-body">Website Design</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-warning" role="progressbar" style="width: 29%" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">29%</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Active Projects -->
+
+  <!-- Last Transaction -->
+  <div class="col-md-6 col-12">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title m-0 me-2">Last Transaction</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="teamMemberList" 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="teamMemberList">
+            <a class="dropdown-item" href="javascript:void(0);">Download</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="table-responsive">
+        <table class="table table-borderless border-top">
+          <thead class="border-bottom">
+            <tr>
+              <th>CARD</th>
+              <th>DATE</th>
+              <th>STATUS</th>
+              <th>TREND</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="pt-5">
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="{% static 'img/icons/payments/visa-img.png' %}" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*4230</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td class="pt-5">
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">17 Mar 2022</small>
+                </div>
+              </td>
+              <td class="pt-5"><span class="badge bg-label-success">Verified</span></td>
+              <td class="pt-5">
+                <p class="mb-0 text-heading">+$1,678</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="{% static 'img/icons/payments/master-card-img.png' %}" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*5578</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">12 Feb 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-danger">Rejected</span></td>
+              <td>
+                <p class="mb-0 text-heading">-$839</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="{% static 'img/icons/payments/american-express-img.png' %}" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*4567</p>
+                    <small class="text-body">ATM</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">28 Feb 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-success">Verified</span></td>
+              <td>
+                <p class="mb-0 text-heading">+$435</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="{% static 'img/icons/payments/visa-img.png' %}" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*5699</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">8 Jan 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-secondary">Pending</span></td>
+              <td>
+                <p class="mb-0 text-heading">+$2,345</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="{% static 'img/icons/payments/visa-img.png' %}" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*5699</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">8 Jan 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-danger">Rejected</span></td>
+              <td>
+                <p class="mb-0 text-heading">-$234</p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <!--/ Last Transaction -->
+
+  <!-- Activity Timeline -->
+  <div class="col-xxl-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="card-title m-0 me-2 pt-1 mb-2 d-flex align-items-center"><i class="icon-base ti tabler-list-details me-3"></i> Activity Timeline</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="timelineWapper" 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="timelineWapper">
+            <a class="dropdown-item" href="javascript:void(0);">Download</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 pb-xxl-0">
+        <ul class="timeline mb-0">
+          <li class="timeline-item timeline-item-transparent">
+            <span class="timeline-point timeline-point-primary"></span>
+            <div class="timeline-event">
+              <div class="timeline-header mb-3">
+                <h6 class="mb-0">12 Invoices have been paid</h6>
+                <small class="text-body-secondary">12 min ago</small>
+              </div>
+              <p class="mb-2">Invoices have been paid to the company</p>
+              <div class="d-flex align-items-center mb-1">
+                <div class="badge bg-lighter rounded-3">
+                  <img src="{% static '/img/icons/misc/pdf.png' %}" alt="img" width="15" class="me-2" />
+                  <span class="h6 mb-0 text-body">invoices.pdf</span>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent">
+            <span class="timeline-point timeline-point-success"></span>
+            <div class="timeline-event">
+              <div class="timeline-header mb-3">
+                <h6 class="mb-0">Client Meeting</h6>
+                <small class="text-body-secondary">45 min ago</small>
+              </div>
+              <p class="mb-2">Project meeting with john @10:15am</p>
+              <div class="d-flex justify-content-between flex-wrap gap-2">
+                <div class="d-flex flex-wrap align-items-center">
+                  <div class="avatar avatar-sm me-2">
+                    <img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
+                  </div>
+                  <div>
+                    <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
+                    <small>CEO of {% get_theme_variables 'creator_name' %}</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent">
+            <span class="timeline-point timeline-point-info"></span>
+            <div class="timeline-event">
+              <div class="timeline-header mb-3">
+                <h6 class="mb-0">Create a new project for client</h6>
+                <small class="text-body-secondary">2 Day Ago</small>
+              </div>
+              <p class="mb-2">6 team members in a project</p>
+              <ul class="list-group list-group-flush">
+                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap p-0">
+                  <div class="d-flex flex-wrap align-items-center">
+                    <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                      <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
+                        <img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
+                      </li>
+                      <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
+                        <img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
+                      </li>
+                      <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
+                        <img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
+                      </li>
+                      <li class="avatar">
+                        <span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Activity Timeline -->
+</div>
+
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/dashboards/urls.py

@@ -0,0 +1,18 @@
+from django.urls import path
+from .views import DashboardsView
+from django.contrib.auth.decorators import login_required
+
+
+urlpatterns = [
+    path(
+        "",
+        login_required(DashboardsView.as_view(template_name="dashboard_analytics.html")),
+        name="index",
+    ),
+
+    path(
+        "dashboard/crm/",
+        login_required(DashboardsView.as_view(template_name="dashboard_crm.html")),
+        name="dashboard-crm",
+    ),
+]

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/dashboards/views.py

@@ -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 dashboards/urls.py file for more pages.
+"""
+
+
+class DashboardsView(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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/admin.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/apps.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/models.py

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

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/templates/app_ecommerce_category_list.html

@@ -0,0 +1,137 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}eCommerce Category List - Apps{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<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' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/quill/typography.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/quill/katex.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/quill/editor.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
+<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+<script src="{% static 'vendor/libs/quill/katex.js' %}"></script>
+<script src="{% static 'vendor/libs/quill/quill.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/css/pages/app-ecommerce.css' %}" />
+{% endblock page_css %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-ecommerce-category-list.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="app-ecommerce-category">
+  <!-- Category List Table -->
+  <div class="card">
+    <div class="card-datatable">
+      <table class="datatables-category-list table">
+        <thead>
+          <tr>
+            <th></th>
+            <th></th>
+            <th>Categories</th>
+            <th class="text-nowrap text-sm-end">Total Products &nbsp;</th>
+            <th class="text-nowrap text-sm-end">Total Earning</th>
+            <th class="text-lg-center">Actions</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </div>
+  <!-- Offcanvas to add new customer -->
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommerceCategoryList" aria-labelledby="offcanvasEcommerceCategoryListLabel">
+    <!-- Offcanvas Header -->
+    <div class="offcanvas-header py-6">
+      <h5 id="offcanvasEcommerceCategoryListLabel" class="offcanvas-title">Add Category</h5>
+      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <!-- Offcanvas Body -->
+    <div class="offcanvas-body border-top">
+      <form class="pt-0" id="eCommerceCategoryListForm" onsubmit="return true">
+        <!-- Title -->
+        <div class="mb-6 form-control-validation">
+          <label class="form-label" for="ecommerce-category-title">Title</label>
+          <input type="text" class="form-control" id="ecommerce-category-title" placeholder="Enter category title" name="categoryTitle" aria-label="category title" />
+        </div>
+        <!-- Slug -->
+        <div class="mb-6 form-control-validation">
+          <label class="form-label" for="ecommerce-category-slug">Slug</label>
+          <input type="text" id="ecommerce-category-slug" class="form-control" placeholder="Enter slug" aria-label="slug" name="slug" />
+        </div>
+        <!-- Image -->
+        <div class="mb-6">
+          <label class="form-label" for="ecommerce-category-image">Attachment</label>
+          <input class="form-control" type="file" id="ecommerce-category-image" />
+        </div>
+        <!-- Parent category -->
+        <div class="mb-6 ecommerce-select2-dropdown">
+          <label class="form-label" for="ecommerce-category-parent-category">Parent category</label>
+          <select id="ecommerce-category-parent-category" class="select2 form-select" data-placeholder="Select parent category">
+            <option value="">Select parent Category</option>
+            <option value="Household">Household</option>
+            <option value="Management">Management</option>
+            <option value="Electronics">Electronics</option>
+            <option value="Office">Office</option>
+            <option value="Automotive">Automotive</option>
+          </select>
+        </div>
+        <!-- Description -->
+        <div class="mb-6">
+          <label class="form-label">Description</label>
+          <div class="form-control p-0 py-1">
+            <div class="comment-editor border-0" id="ecommerce-category-description"></div>
+            <div class="comment-toolbar border-0 rounded">
+              <div class="d-flex justify-content-end">
+                <span class="ql-formats me-0">
+                  <button class="ql-bold"></button>
+                  <button class="ql-italic"></button>
+                  <button class="ql-underline"></button>
+                  <button class="ql-list" value="ordered"></button>
+                  <button class="ql-list" value="bullet"></button>
+                  <button class="ql-link"></button>
+                  <button class="ql-image"></button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Status -->
+        <div class="mb-6 ecommerce-select2-dropdown">
+          <label class="form-label">Select category status</label>
+          <select id="ecommerce-category-status" class="select2 form-select" data-placeholder="Select category status">
+            <option value="">Select category status</option>
+            <option value="Scheduled">Scheduled</option>
+            <option value="Publish">Publish</option>
+            <option value="Inactive">Inactive</option>
+          </select>
+        </div>
+        <!-- Submit and reset -->
+        <div class="mb-6">
+          <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Add</button>
+          <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/templates/app_ecommerce_customer_all.html

@@ -0,0 +1,147 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}eCommerce Customer All - Apps{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.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' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
+<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/app-ecommerce-customer-all.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<!-- customers List Table -->
+<div class="card">
+  <div class="card-datatable table-responsive">
+    <table class="datatables-customers table border-top">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Customer</th>
+          <th class="text-nowrap">Customer Id</th>
+          <th>Country</th>
+          <th>Order</th>
+          <th class="text-nowrap">Total Spent</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+  <!-- Offcanvas to add new customer -->
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommerceCustomerAdd" aria-labelledby="offcanvasEcommerceCustomerAddLabel">
+    <div class="offcanvas-header">
+      <h5 id="offcanvasEcommerceCustomerAddLabel" class="offcanvas-title">Add Customer</h5>
+      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body border-top mx-0 flex-grow-0">
+      <form class="ecommerce-customer-add pt-0" id="eCommerceCustomerAddForm" onsubmit="return false">
+        <div class="ecommerce-customer-add-basic mb-4">
+          <h6 class="mb-6">Basic Information</h6>
+          <div class="mb-6 form-control-validation">
+            <label class="form-label" for="ecommerce-customer-add-name">Name*</label>
+            <input type="text" class="form-control" id="ecommerce-customer-add-name" placeholder="John Doe" name="customerName" aria-label="John Doe" />
+          </div>
+          <div class="mb-6 form-control-validation">
+            <label class="form-label" for="ecommerce-customer-add-email">Email*</label>
+            <input type="text" id="ecommerce-customer-add-email" class="form-control" placeholder="john.doe@example.com" aria-label="john.doe@example.com" name="customerEmail" />
+          </div>
+          <div>
+            <label class="form-label" for="ecommerce-customer-add-contact">Mobile</label>
+            <input type="text" id="ecommerce-customer-add-contact" class="form-control phone-mask" placeholder="+(123) 456-7890" aria-label="+(123) 456-7890" name="customerContact" />
+          </div>
+        </div>
+
+        <div class="ecommerce-customer-add-shiping mb-6 pt-4">
+          <h6 class="mb-6">Shipping Information</h6>
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-customer-add-address">Address Line 1</label>
+            <input type="text" id="ecommerce-customer-add-address" class="form-control" placeholder="45 Roker Terrace" aria-label="45 Roker Terrace" name="customerAddress1" />
+          </div>
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-customer-add-address-2">Address Line 2</label>
+            <input type="text" id="ecommerce-customer-add-address-2" class="form-control" aria-label="address2" name="customerAddress2" />
+          </div>
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-customer-add-town">Town</label>
+            <input type="text" id="ecommerce-customer-add-town" class="form-control" placeholder="New York" aria-label="New York" name="customerTown" />
+          </div>
+          <div class="col-12 mb-6">
+            <label class="form-label" for="ecommerce-customer-add-state">State / Province</label>
+            <input type="text" id="ecommerce-customer-add-state" class="form-control" placeholder="Southern tip" aria-label="Southern tip" name="customerState" />
+          </div>
+          <div class="col-12 mb-6">
+            <label class="form-label" for="ecommerce-customer-add-post-code">Post Code</label>
+            <input type="text" id="ecommerce-customer-add-post-code" class="form-control" placeholder="734990" aria-label="734990" name="pin" pattern="[0-9]{8}" maxlength="8" />
+          </div>
+          <div>
+            <label class="form-label" for="ecommerce-customer-add-country">Country</label>
+            <select id="ecommerce-customer-add-country" class="select2 form-select">
+              <option value="">Select</option>
+              <option value="Australia">Australia</option>
+              <option value="Bangladesh">Bangladesh</option>
+              <option value="Belarus">Belarus</option>
+              <option value="Brazil">Brazil</option>
+              <option value="Canada">Canada</option>
+              <option value="China">China</option>
+              <option value="France">France</option>
+              <option value="Germany">Germany</option>
+              <option value="India">India</option>
+              <option value="Indonesia">Indonesia</option>
+              <option value="Israel">Israel</option>
+              <option value="Italy">Italy</option>
+              <option value="Japan">Japan</option>
+              <option value="Korea">Korea, Republic of</option>
+              <option value="Mexico">Mexico</option>
+              <option value="Philippines">Philippines</option>
+              <option value="Russia">Russian Federation</option>
+              <option value="South Africa">South Africa</option>
+              <option value="Thailand">Thailand</option>
+              <option value="Turkey">Turkey</option>
+              <option value="Ukraine">Ukraine</option>
+              <option value="United Arab Emirates">United Arab Emirates</option>
+              <option value="United Kingdom">United Kingdom</option>
+              <option value="United States">United States</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="d-sm-flex mb-6">
+          <div class="me-auto mb-2 mb-md-0">
+            <h6 class="mb-1">Use as a billing address?</h6>
+            <small class="text-body-secondary">If you need more info, please check budget.</small>
+          </div>
+          <div class="form-check form-switch my-auto me-n2">
+            <input type="checkbox" class="form-check-input" checked />
+          </div>
+        </div>
+        <div>
+          <button type="submit" class="btn btn-primary me-sm-4 data-submit">Add</button>
+          <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/templates/app_ecommerce_customer_details_billing.html

@@ -0,0 +1,520 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}eCommerce Customer Details Address & Billing - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+
+<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
+<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
+<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/modal-edit-user.js' %}"></script>
+<script src="{% static 'js/modal-edit-cc.js' %}"></script>
+<script src="{% static 'js/modal-add-new-cc.js' %}"></script>
+<script src="{% static 'js/modal-add-new-address.js' %}"></script>
+<script src="{% static 'js/app-ecommerce-customer-detail.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
+  <div class="mb-2 mb-sm-0">
+    <h4 class="mb-1">Customer ID #634759</h4>
+    <p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
+  </div>
+  <button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
+</div>
+
+<div class="row">
+  <!-- Customer-detail Sidebar -->
+  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
+    <!-- Customer-detail Card -->
+    <div class="card mb-6">
+      <div class="card-body pt-12">
+        <div class="customer-avatar-section">
+          <div class="d-flex align-items-center flex-column">
+            <img class="img-fluid rounded mb-4" src="{% static 'img/avatars/1.png' %}" height="120" width="120" alt="User avatar" />
+            <div class="customer-info text-center mb-6">
+              <h5 class="mb-0">Lorine Hischke</h5>
+              <span>Customer ID #634759</span>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
+          <div class="d-flex align-items-center gap-4 me-5">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">184</h5>
+              <span>Orders</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-4">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">$12,378</h5>
+              <span>Spent</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-container">
+          <h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
+          <ul class="list-unstyled mb-6">
+            <li class="mb-2">
+              <span class="h6 me-1">Username:</span>
+              <span>lorine.hischke</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Email:</span>
+              <span>vafgot@vultukir.org</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Status:</span>
+              <span class="badge bg-label-success">Active</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Contact:</span>
+              <span>(123) 456-7890</span>
+            </li>
+
+            <li class="mb-2">
+              <span class="h6 me-1">Country:</span>
+              <span>USA</span>
+            </li>
+          </ul>
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Customer-detail Card -->
+    <!-- Plan Card -->
+
+    <div class="card mb-4 bg-gradient-primary">
+      <div class="card-body">
+        <div class="row justify-content-between mb-4">
+          <div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1 order-lg-0 order-xl-1 order-xxl-0">
+            <h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
+            <p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
+          </div>
+          <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="{% static 'img/illustrations/rocket.png' %}" class="w-px-75 m-2" alt="3dRocket" /></span>
+        </div>
+        <button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
+      </div>
+    </div>
+
+    <!-- /Plan Card -->
+  </div>
+  <!--/ Customer Sidebar -->
+
+  <!-- Customer Content -->
+  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
+    <!-- Customer Pills -->
+    <div class="nav-align-top">
+      <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-overview' %}"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
+        </li>
+      </ul>
+    </div>
+    <!--/ Customer Pills -->
+
+    <!-- Address accordion -->
+
+    <div class="card card-action mb-6">
+      <div class="card-header align-items-center py-6">
+        <h5 class="card-action-title mb-0">Address Book</h5>
+        <div class="card-action-element">
+          <button class="btn btn-sm btn-label-primary" type="button" data-bs-toggle="modal" data-bs-target="#addNewAddress">Add new address</button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="accordion accordion-flush accordion-arrow-left" id="ecommerceBillingAccordionAddress">
+          <div class="accordion-item border-bottom">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingHome">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressHome" aria-expanded="false" aria-controls="headingHome" role="button">
+                <span>
+                  <span class="d-flex gap-2 align-items-baseline">
+                    <span class="h6 mb-1">Home</span>
+                    <span class="badge bg-label-success">Default Address</span>
+                  </span>
+                  <span class="mb-0">23 Shatinon Mekalan</span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingAddressHome" class="accordion-collapse collapse" data-bs-parent="#ecommerceBillingAccordionAddress">
+              <div class="accordion-body ps-6 ms-1">
+                <h6 class="mb-1">Violet Mendoza</h6>
+                <p class="mb-1">23 Shatinon Mekalan,</p>
+                <p class="mb-1">Melbourne, VIC 3000,</p>
+                <p class="mb-1">LondonUK</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-bottom border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingOffice">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressOffice" aria-expanded="false" aria-controls="headingOffice" role="button">
+                <span class="d-flex flex-column">
+                  <span class="h6 mb-0">Office</span>
+                  <span class="mb-0">45 Roker Terrace</span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingAddressOffice" class="accordion-collapse collapse" aria-labelledby="headingOffice" data-bs-parent="#ecommerceBillingAccordionAddress">
+              <div class="accordion-body ps-6 ms-1">
+                <h6 class="mb-1">Violet Mendoza</h6>
+                <p class="mb-1">45 Roker Terrace,</p>
+                <p class="mb-1">Latheronwheel,</p>
+                <p class="mb-1">KW5 8NW</p>
+                <p class="mb-1">LondonUK</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingFamily">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressFamily" aria-expanded="false" aria-controls="headingFamily" role="button">
+                <span class="d-flex flex-column">
+                  <span class="h6 mb-0">Family</span>
+                  <span class="mb-0">512 Water Plant</span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingAddressFamily" class="accordion-collapse collapse" aria-labelledby="headingFamily" data-bs-parent="#ecommerceBillingAccordionAddress">
+              <div class="accordion-body ps-6 ms-1">
+                <h6 class="mb-1">Violet Mendoza</h6>
+                <p class="mb-1">512 Water Plant,</p>
+                <p class="mb-1">Melbourne, NY 10036,</p>
+                <p class="mb-1">New York,</p>
+                <p class="mb-1">United States</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Address accordion -->
+
+    <!-- payment accordion -->
+    <div class="card card-action mb-6">
+      <div class="card-header align-items-center py-6">
+        <h5 class="card-action-title mb-0">Payment Methods</h5>
+        <div class="card-action-element">
+          <button class="btn btn-sm btn-label-primary" type="button" data-bs-toggle="modal" data-bs-target="#addNewCCModal">Add payment methods</button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="accordion accordion-flush accordion-arrow-left" id="ecommerceBillingAccordionPayment">
+          <div class="accordion-item border-bottom">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentMaster">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentMaster" aria-expanded="false" aria-controls="headingPaymentMaster" role="button">
+                <span class="accordion-button-information d-flex align-items-center gap-4">
+                  <span class="accordion-button-image">
+                    <img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
+                  </span>
+                  <span class="d-flex flex-column">
+                    <span class="h6 mb-1">Mastercard</span>
+                    <span class="mb-0">Expires Apr 2028</span>
+                  </span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingPaymentMaster" class="accordion-collapse collapse" data-bs-parent="#ecommerceBillingAccordionPayment">
+              <div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
+                <table class="table table-sm table-borderless text-nowrap small">
+                  <tr>
+                    <td class="w-50">Name</td>
+                    <td class="fw-medium text-heading">Violet Mendoza</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">**** 4487</td>
+                  </tr>
+                  <tr>
+                    <td>Expires</td>
+                    <td class="fw-medium text-heading">04/2028</td>
+                  </tr>
+                  <tr>
+                    <td>Type</td>
+                    <td class="fw-medium text-heading">Visa credit card</td>
+                  </tr>
+                  <tr>
+                    <td>Issuer</td>
+                    <td class="fw-medium text-heading">VICBANK</td>
+                  </tr>
+                  <tr>
+                    <td>ID</td>
+                    <td class="fw-medium text-heading">id_w2r84jdy723</td>
+                  </tr>
+                </table>
+                <table class="table table-sm table-borderless text-nowrap">
+                  <tr>
+                    <td class="w-50">Billing Phone</td>
+                    <td class="fw-medium text-heading">USA</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">+7634 983 637</td>
+                  </tr>
+                  <tr>
+                    <td>Email</td>
+                    <td class="fw-medium text-heading">vafgot@vultukir.org</td>
+                  </tr>
+                  <tr>
+                    <td>Origin</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
+                  </tr>
+                  <tr>
+                    <td>CVC check</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">
+                      Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-bottom border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentExpress">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentExpress" aria-expanded="false" aria-controls="headingPaymentExpress" role="button">
+                <span class="accordion-button-information d-flex align-items-center gap-4">
+                  <span class="accordion-button-image">
+                    <img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
+                  </span>
+                  <span>
+                    <span class="d-flex gap-2 row-gap-0 flex-wrap align-items-baseline">
+                      <span class="h6 mb-1 text-nowrap">American Express</span>
+                      <span class="badge bg-label-success mb-2 mb-sm-0">Primary</span>
+                    </span>
+                    <span class="mb-0">45 Roker Terrace</span>
+                  </span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingPaymentExpress" class="accordion-collapse collapse" aria-labelledby="headingPaymentExpress" data-bs-parent="#ecommerceBillingAccordionPayment">
+              <div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
+                <table class="table table-sm table-borderless text-nowrap small">
+                  <tr>
+                    <td class="w-50">Name</td>
+                    <td class="fw-medium text-heading">Violet Mendoza</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">**** 4487</td>
+                  </tr>
+                  <tr>
+                    <td>Expires</td>
+                    <td class="fw-medium text-heading">08/2028</td>
+                  </tr>
+                  <tr>
+                    <td>Type</td>
+                    <td class="fw-medium text-heading">Visa credit card</td>
+                  </tr>
+                  <tr>
+                    <td>Issuer</td>
+                    <td class="fw-medium text-heading">VICBANK</td>
+                  </tr>
+                  <tr>
+                    <td>ID</td>
+                    <td class="fw-medium text-heading">id_w2r84jdy723</td>
+                  </tr>
+                </table>
+                <table class="table table-sm table-borderless text-nowrap">
+                  <tr>
+                    <td class="w-50">Billing Phone</td>
+                    <td class="fw-medium text-heading">USA</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">+7634 983 637</td>
+                  </tr>
+                  <tr>
+                    <td>Email</td>
+                    <td class="fw-medium text-heading">vafgot@vultukir.org</td>
+                  </tr>
+                  <tr>
+                    <td>Origin</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
+                  </tr>
+                  <tr>
+                    <td>CVC check</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">
+                      Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentVisa">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentVisa" aria-expanded="false" aria-controls="headingPaymentVisa" role="button">
+                <span class="accordion-button-information d-flex align-items-center gap-4">
+                  <span class="accordion-button-image">
+                    <img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
+                  </span>
+                  <span class="d-flex flex-column">
+                    <span class="h6 mb-1">Visa</span>
+                    <span class="mb-0">512 Water Plant</span>
+                  </span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingPaymentVisa" class="accordion-collapse collapse" aria-labelledby="headingPaymentVisa" data-bs-parent="#ecommerceBillingAccordionPayment">
+              <div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
+                <table class="table table-sm table-borderless text-nowrap small">
+                  <tr>
+                    <td class="w-50">Name</td>
+                    <td class="fw-medium text-heading">Violet Mendoza</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">**** 5155</td>
+                  </tr>
+                  <tr>
+                    <td>Expires</td>
+                    <td class="fw-medium text-heading">02/2022</td>
+                  </tr>
+                  <tr>
+                    <td>Type</td>
+                    <td class="fw-medium text-heading">Visa credit card</td>
+                  </tr>
+                  <tr>
+                    <td>Issuer</td>
+                    <td class="fw-medium text-heading">VICBANK</td>
+                  </tr>
+                  <tr>
+                    <td>ID</td>
+                    <td class="fw-medium text-heading">id_w2r84jdy723</td>
+                  </tr>
+                </table>
+                <table class="table table-sm table-borderless text-nowrap">
+                  <tr>
+                    <td class="w-50">Billing Phone</td>
+                    <td class="fw-medium text-heading">USA</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">+7634 983 637</td>
+                  </tr>
+                  <tr>
+                    <td>Email</td>
+                    <td class="fw-medium text-heading">vafgot@vultukir.org</td>
+                  </tr>
+                  <tr>
+                    <td>Origin</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
+                  </tr>
+                  <tr>
+                    <td>CVC check</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">
+                      Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Customer Content -->
+</div>
+
+
+<!-- Modal -->
+{% include "partials/_modals/modal_edit_user.html" %}
+{% include "partials/_modals/modal_edit_cc.html" %}
+{% include "partials/_modals/modal_add_new_address.html" %}
+{% include "partials/_modals/modal_add_new_cc.html" %}
+{% include "partials/_modals/modal_upgrade_plan.html" %}
+<!-- /Modal -->
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/templates/app_ecommerce_customer_details_notifications.html

@@ -0,0 +1,262 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}eCommerce Customer Details Notifications - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
+<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
+<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/modal-edit-user.js' %}"></script>
+<script src="{% static 'js/app-ecommerce-customer-detail.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
+  <div class="mb-2 mb-sm-0">
+    <h4 class="mb-1">Customer ID #634759</h4>
+    <p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
+  </div>
+  <button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
+</div>
+
+<div class="row">
+  <!-- Customer-detail Sidebar -->
+  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
+    <!-- Customer-detail Card -->
+    <div class="card mb-6">
+      <div class="card-body pt-12">
+        <div class="customer-avatar-section">
+          <div class="d-flex align-items-center flex-column">
+            <img class="img-fluid rounded mb-4" src="{% static 'img/avatars/1.png'%}" height="120" width="120" alt="User avatar" />
+            <div class="customer-info text-center mb-6">
+              <h5 class="mb-0">Lorine Hischke</h5>
+              <span>Customer ID #634759</span>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
+          <div class="d-flex align-items-center gap-4 me-5">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">184</h5>
+              <span>Orders</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-4">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">$12,378</h5>
+              <span>Spent</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-container">
+          <h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
+          <ul class="list-unstyled mb-6">
+            <li class="mb-2">
+              <span class="h6 me-1">Username:</span>
+              <span>lorine.hischke</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Email:</span>
+              <span>vafgot@vultukir.org</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Status:</span>
+              <span class="badge bg-label-success">Active</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Contact:</span>
+              <span>(123) 456-7890</span>
+            </li>
+
+            <li class="mb-2">
+              <span class="h6 me-1">Country:</span>
+              <span>USA</span>
+            </li>
+          </ul>
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Customer-detail Card -->
+    <!-- Plan Card -->
+
+    <div class="card mb-4 bg-gradient-primary">
+      <div class="card-body">
+        <div class="row justify-content-between mb-4">
+          <div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1  order-lg-0 order-xl-1 order-xxl-0">
+            <h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
+            <p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
+          </div>
+          <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="{% static 'img/illustrations/rocket.png' %}" class="w-px-75 m-2" alt="3dRocket" /></span>
+        </div>
+        <button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
+      </div>
+    </div>
+
+    <!-- /Plan Card -->
+  </div>
+  <!--/ Customer Sidebar -->
+
+  <!-- Customer Content -->
+  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
+    <!-- Customer Pills -->
+    <div class="nav-align-top">
+      <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-overview' %}"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-billing' %}"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
+        </li>
+      </ul>
+    </div>
+    <!--/ Customer Pills -->
+    <!-- Project table -->
+    <div class="card mb-6">
+      <!-- Notifications -->
+      <div class="card-header">
+        <h5 class="card-title mb-1">Notifications</h5>
+        <span class="text-body">You will receive notification for the below selected items.</span>
+      </div>
+      <div>
+        <div class="table-responsive border-bottom">
+          <table class="table">
+            <thead>
+              <tr>
+                <th class="text-nowrap">Type</th>
+                <th class="text-nowrap text-center">Email</th>
+                <th class="text-nowrap text-center">Browser</th>
+                <th class="text-nowrap text-center">App</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="text-nowrap text-heading">New for you</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck1" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck2" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck3" checked />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="text-nowrap text-heading">Account activity</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck4" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck5" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck6" checked />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="text-nowrap text-heading">A new browser used to sign in</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck7" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck8" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck9" />
+                  </div>
+                </td>
+              </tr>
+              <tr class="border-transparent">
+                <td class="text-nowrap text-heading">A new device is linked</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck10" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck11" />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck12" />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card-body pt-6">
+        <button type="submit" class="btn btn-primary me-3">Save changes</button>
+        <button type="reset" class="btn btn-label-secondary">Discard</button>
+      </div>
+      <!-- /Notifications -->
+    </div>
+    <!-- /Project table -->
+  </div>
+  <!--/ Customer Content -->
+</div>
+
+<!-- Modal -->
+{% include "partials/_modals/modal_edit_user.html" %}
+{% include "partials/_modals/modal_upgrade_plan.html" %}
+<!-- /Modal -->
+{% endblock %}

resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ecommerce/templates/app_ecommerce_customer_details_overview.html

@@ -0,0 +1,271 @@
+{% extends layout_path %}
+
+{% load static %}
+{% load i18n %}
+
+{% block title %}eCommerce Customer Details Overview - Pages{% endblock %}
+
+{% block vendor_css %}
+{{ block.super }}
+<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' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
+{% endblock vendor_css %}
+
+{% block vendor_js %}
+{{ block.super }}
+<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
+<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
+<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
+<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
+<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
+{% endblock vendor_js %}
+
+{% block page_js %}
+{{ block.super }}
+<script src="{% static 'js/modal-edit-user.js' %}"></script>
+<script src="{% static 'js/app-ecommerce-customer-detail.js' %}"></script>
+<script src="{% static 'js/app-ecommerce-customer-detail-overview.js' %}"></script>
+{% endblock page_js %}
+
+{% block content %}
+<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
+  <div class="mb-2 mb-sm-0">
+    <h4 class="mb-1">Customer ID #634759</h4>
+    <p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
+  </div>
+  <button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
+</div>
+
+<div class="row">
+  <!-- Customer-detail Sidebar -->
+  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
+    <!-- Customer-detail Card -->
+    <div class="card mb-6">
+      <div class="card-body pt-12">
+        <div class="customer-avatar-section">
+          <div class="d-flex align-items-center flex-column">
+            <img class="img-fluid rounded mb-4" src="{% static 'img/avatars/1.png' %}" height="120" width="120" alt="User avatar" />
+            <div class="customer-info text-center mb-6">
+              <h5 class="mb-0">Lorine Hischke</h5>
+              <span>Customer ID #634759</span>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
+          <div class="d-flex align-items-center gap-4 me-5">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">184</h5>
+              <span>Orders</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-4">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">$12,378</h5>
+              <span>Spent</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-container">
+          <h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
+          <ul class="list-unstyled mb-6">
+            <li class="mb-2">
+              <span class="h6 me-1">Username:</span>
+              <span>lorine.hischke</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Email:</span>
+              <span>vafgot@vultukir.org</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Status:</span>
+              <span class="badge bg-label-success">Active</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Contact:</span>
+              <span>(123) 456-7890</span>
+            </li>
+
+            <li class="mb-2">
+              <span class="h6 me-1">Country:</span>
+              <span>USA</span>
+            </li>
+          </ul>
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Customer-detail Card -->
+    <!-- Plan Card -->
+
+    <div class="card mb-4 bg-gradient-primary">
+      <div class="card-body">
+        <div class="row justify-content-between mb-4">
+          <div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1  order-lg-0 order-xl-1 order-xxl-0">
+            <h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
+            <p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
+          </div>
+          <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="{% static 'img/illustrations/rocket.png' %}" class="w-px-75 m-2" alt="3dRocket" /></span>
+        </div>
+        <button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
+      </div>
+    </div>
+
+    <!-- /Plan Card -->
+  </div>
+  <!--/ Customer Sidebar -->
+
+  <!-- Customer Content -->
+  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
+    <!-- Customer Pills -->
+    <div class="nav-align-top">
+      <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-billing' %}"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'app-ecommerce-customer-details-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
+        </li>
+      </ul>
+    </div>
+    <!--/ Customer Pills -->
+
+    <!-- / Customer cards -->
+    <div class="row text-nowrap">
+      <div class="col-md-6 mb-6">
+        <div class="card h-100">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-primary">
+                  <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Account Balance</h5>
+              <div class="d-flex align-items-baseline gap-1">
+                <h5 class="text-primary mb-0">$2345</h5>
+                <p class="mb-0">Credit Left</p>
+              </div>
+              <p class="mb-0 text-truncate">Account balance for next purchase</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 mb-6">
+        <div class="card">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-success">
+                  <i class="icon-base ti tabler-gift icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Loyalty Program</h5>
+              <span class="badge bg-label-success mb-2">Platinum member</span>
+              <p class="mb-0">3000 points to next tier</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 mb-6">
+        <div class="card">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-warning">
+                  <i class="icon-base ti tabler-star icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Wishlist</h5>
+              <div class="d-flex align-items-baseline gap-1">
+                <h5 class="text-warning mb-0">15</h5>
+                <p class="mb-0">Items in wishlist</p>
+              </div>
+              <p class="mb-0 text-truncate">Receive notification when items go on sale</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 mb-6">
+        <div class="card">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-info">
+                  <i class="icon-base ti tabler-crown icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Coupons</h5>
+              <div class="d-flex align-items-baseline gap-1">
+                <h5 class="text-info mb-0">21</h5>
+                <p class="mb-0">Coupons you win</p>
+              </div>
+
+              <p class="mb-0 text-truncate">Use coupon on next purchase</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- / customer cards -->
+
+    <!-- Invoice table -->
+    <div class="card mb-6">
+      <div class="table-responsive mb-4">
+        <table class="table datatables-customer-order">
+          <thead>
+            <tr>
+              <th></th>
+              <th>Order</th>
+              <th>Date</th>
+              <th>Status</th>
+              <th>Spent</th>
+              <th class="text-md-center">Actions</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+    <!-- /Invoice table -->
+  </div>
+  <!--/ Customer Content -->
+</div>
+<!-- Modal -->
+{% include "partials/_modals/modal_edit_user.html" %}
+{% include "partials/_modals/modal_upgrade_plan.html" %}
+<!-- /Modal -->
+{% endblock %}