Email Application

Email is a very popular way of communicating with others over the Internet. An application that allows users to send, receive, and read email is called an email client.

1. You need to add these pages to make this app work.

  <!-- Vendor files -->
  <script src="editors/quill/katex.min.js"></script>
  <script src="editors/quill/highlight.min.js"></script>
  <script src="editors/quill/quill.min.js"></script>
  <script src="extensions/toastr.min.js"></script>
  <script src="forms/select/select2.full.min.js"></script>
  <link rel="stylesheet" type="text/css" href="editors/quill/katex.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/monokai-sublime.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/quill.snow.css">
  <link rel="stylesheet" type="text/css" href="extensions/toastr.min.css">
  <link rel="stylesheet" type="text/css" href="forms/select/select2.min.css">

  <!-- Template files -->
  <script src="app-email.js"></script>
  <link rel="stylesheet" type="text/css" href="forms/form-quill-editor.css">
  <link rel="stylesheet" type="text/css" href="extensions/ext-component-toastr.css">
  <link rel="stylesheet" type="text/css" href="app-email.css">
  
2. Features you can perform in email application.
  • Compose Mail
  • Search mail
  • Delete mail
  • Mark mail as unread
  • Select All mails and Delete all
  • On click of mail list, mail detail will slide in
  • Notification on delete
  • Notification on favorite

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-email.html

Chat Application

Messaging or the use of chat apps are surging in popularity these days as people prefer chat-based apps over text messages as it provides real-time interactions and gives them a personal touch experience.

1. You need to add these file to make this page work.
  
    <!-- Template files -->
    <script src="app-chat.js"></script>
    <link rel="stylesheet" type="text/css" href="app-chat.css">
    <link rel="stylesheet" type="text/css" href="app-chat-list.css">
  
2. Features you can perform in chat application.
  • Notification badge of new messages
  • Start conversation to chat
  • Search User
  • Send message
  • Check personal profile
  • Check user's profile
  • Set status(Online, Offline, etc..) & other settings
  • Speech to text on click of mic icon

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-chat.html

ToDo

ToDo is maintained by developers, editors, writers, reviewers or readers like you as a way to focus your collaborative efforts. As such, they represent a tentative consensus that helps improve the efficiency of the editing process.

1. You need to add these files to make it work.

  <!-- Vendor files -->
  <script src="editors/quill/katex.min.js"></script>
  <script src="editors/quill/highlight.min.js"></script>
  <script src="editors/quill/quill.min.js"></script>
  <script src="forms/select/select2.full.min.js"></script>
  <script src="pickers/flatpickr/flatpickr.min.js"></script>
  <script src="extensions/dragula.min.js"></script>
  <script src="forms/validation/jquery.validate.min.js"></script>
  <script src="extensions/toastr.min.js"></script>
  <link rel="stylesheet" type="text/css" href="vendors.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/katex.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/monokai-sublime.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/quill.snow.css">
  <link rel="stylesheet" type="text/css" href="forms/select/select2.min.css">
  <link rel="stylesheet" type="text/css" href="pickers/flatpickr/flatpickr.min.css">
  <link rel="stylesheet" type="text/css" href="extensions/dragula.min.css">
  <link rel="stylesheet" type="text/css" href="extensions/toastr.min.css">

  <!-- Template files -->
  <script src="app-todo.js"></script>
  <link rel="stylesheet" type="text/css" href="forms/form-quill-editor.css">
  <link rel="stylesheet" type="text/css" href="forms/pickers/form-flat-pickr.css">
  <link rel="stylesheet" type="text/css" href="extensions/ext-component-toastr.css">
  <link rel="stylesheet" type="text/css" href="forms/form-validation.css">
  <link rel="stylesheet" type="text/css" href="app-todo.css">

2. Features you can perform in toDO List.
  • Add new todo task
  • Complete task
  • Notification when Complete task
  • Edit task
  • Sort task Asc & Desc
  • Search any task
  • Set favorite task

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-todo.html

Calendar

Calendar is made from Full Calendar Plugin which the most popular full-sized JavaScript Calendar. you'll have use below mentioned structure for add event modal to use add event functionality.

1. You need these files for application to work

  <!-- Vendor Files -->
  <script src="calendar/fullcalendar.min.js"></script>
  <script src="extensions/moment.min.js"></script>
  <script src="forms/select/select2.full.min.js"></script>
  <script src="forms/validation/jquery.validate.min.js"></script>
  <script src="pickers/flatpickr/flatpickr.min.js"></script>
  <link rel="stylesheet" type="text/css" href="calendars/fullcalendar.min.css">
  <link rel="stylesheet" type="text/css" href="forms/select/select2.min.css">
  <link rel="stylesheet" type="text/css" href="pickers/flatpickr/flatpickr.min.css">

  <!-- Template Files -->
  <script src="app-calendar-events.js"></script>
  <script src="app-calendar.js"></script>
  <link rel="stylesheet" type="text/css" href="forms/pickers/form-flat-pickr.css">
  <link rel="stylesheet" type="text/css" href="app-calendar.css">
  <link rel="stylesheet" type="text/css" href="forms/form-validation.css">

2. Actions you can perform with Calendar
  • Add new events.
  • Edit current events.
  • Remove existing Events.
  • Calendar Views : Month, Week, Day, List
  • Add category/label to your event.
  • Get info of event on click.
  • Event filters
  • Show/Hide Event Category wise

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://fullcalendar.io/
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-calendar.html

Kanban

Kanban board is one of the tools that can be used to manage work at a personal or organizational level. Kanban boards visually depict work at various stages of a process using cards to represent work items and columns to represent each stage of the process. Here, we are using jkanban library to create this application.

1. You need these files for application to work

  <!-- Vendor Files -->
  <script src="jkanban/jkanban.min.js"></script>
  <script src="forms/select/select2.full.min.js"></script>
  <script src="pickers/flatpickr/flatpickr.min.js"></script>
  <script src="editors/quill/katex.min.js"></script>
  <script src="editors/quill/highlight.min.js"></script>
  <script src="editors/quill/quill.min.js"></script>
  <script src="forms/validation/jquery.validate.min.js"></script>
  <link rel="stylesheet" type="text/css" href="jkanban/jkanban.min.css">
  <link rel="stylesheet" type="text/css" href="pickers/flatpickr/flatpickr.min.css">
  <link rel="stylesheet" type="text/css" href="forms/select/select2.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/katex.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/monokai-sublime.min.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/quill.snow.css">
  <link rel="stylesheet" type="text/css" href="editors/quill/quill.bubble.css">

  <!-- Template Files -->
  <script src="app-kanban.js"></script>
  <link rel="stylesheet" type="text/css" href="forms/pickers/form-flat-pickr.css">
  <link rel="stylesheet" type="text/css" href="forms/form-quill-editor.css">
  <link rel="stylesheet" type="text/css" href="forms/form-validation.css">
  <link rel="stylesheet" type="text/css" href="app-kanban.css">

2. Actions you can perform with Kanban Application
  • Add new board
  • Add new board item
  • Update current board Name
  • Update current board Item
  • Get info of event on click
  • Copy task link
  • Delete board
  • Delete board item

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://donorbox.org/jkanban
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-kanban.html

Invoice Application

Invoice Application is a fast and easy way for sending invoices and estimates to your customers.

Invoice List

Invoice List page will provide list of invoices with other invoice details of each invoice like invoice ID, client details, issue date, total amount, due/paid, etc..

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="moment.min.js"></script>
      <script src="datatable/jquery.dataTables.min.js"></script>
      <script src="datatable/datatables.buttons.min.js"></script>
      <script src="datatable/dataTables.bootstrap5.min.js"></script>
      <script src="datatable/datatables.checkboxes.min.js"></script>
      <script src="datatable/dataTables.responsive.min.js"></script>
      <script src="datatable/responsive.bootstrap5.min.js"></script>
      <link rel="stylesheet" type="text/css" href="datatable/dataTables.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="datatable/extensions/dataTables.checkboxes.css">
      <link rel="stylesheet" type="text/css" href="datatable/responsive.bootstrap5.min.css">

      <!-- Template Files -->
      <script src="app-invoice-list.js"></script>
      <link rel="stylesheet" type="text/css" href="app-invoice-list.css">
    
    
2. Actions you can perform with Invoice List Page
  • List of invoices
  • Filter by status
  • Actions to send mail, edit, delete, download or preview
  • Search invoice
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-invoice-list.html

Invoice Preview

To view invoice details with invoice id, date, address, products, etc..

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="forms/repeater/jquery.repeater.min.js"></script>
      <script src="pickers/flatpickr/flatpickr.min.js"></script>
      <link rel="stylesheet" type="text/css" href="pickers/flatpickr/flatpickr.min.css">

      <!-- Template Files -->
      <script src="app-invoice.js"></script>
      <link rel="stylesheet" type="text/css" href="pickers/form-flat-pickr.css">
      <link rel="stylesheet" type="text/css" href="app-invoice.css">
    
    
2. Actions you can perform with Invoice Preview Page
  • Find Invoice details
  • Download, send mail, edit invoice
  • Add Invoice payment
  • To print invoice
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-invoice-preview.html

Invoice Edit

To edit/update invoice details like ID, date, etc..

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="repeater/jquery.repeater.min.js"></script>
      <script src="flatpickr.min.js"></script>
      <link rel="stylesheet" type="text/css" href="flatpickr.min.css">

      <!-- Template Files -->
      <script src="app-invoice.js"></script>
      <link rel="stylesheet" type="text/css" href="forms/pickers/form-flat-pickr.css">
      <link rel="stylesheet" type="text/css" href="app-invoice.css">
    
    
2. Actions you can perform with Invoice Edit Page
  • Edit/update invoice
  • Add invoice item
  • Add payment
  • Invoice payment options
  • Add notes
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-invoice-edit.html

Invoice Add

To add/create new invoice.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="repeater/jquery.repeater.min.js"></script>
      <script src="select2.full.min.js"></script>
      <script src="flatpickr.min.js"></script>
      <link rel="stylesheet" type="text/css" href="select2.min.css">
      <link rel="stylesheet" type="text/css" href="flatpickr.min.css">

      <!-- Template Files -->
      <script src="app-invoice.js"></script>
      <link rel="stylesheet" type="text/css" href="forms/pickers/form-flat-pickr.css">
      <link rel="stylesheet" type="text/css" href="app-invoice.css">
    
    
2. Actions you can perform with Invoice Add Page
  • To add new invoice
  • Add invoice item
  • Add notes
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-invoice-add.html

File Manager

A file manager or file browser is a computer program that provides a user interface to manage files and folders. Folders and files may be displayed in a hierarchical tree based on their directory structure.

1. You need these files for application to work

  <!-- Vendor Files -->
  <script src="extensions/jstree.min.js"></script>
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="extensions/jstree.min.css">

  <!-- Template Files -->
  <script src="app-file-manager.js"></script>
  <link rel="stylesheet" type="text/css" href="extensions/ext-component-tree.css">
  <link rel="stylesheet" type="text/css" href="app-file-manager.css">

2. Actions you can perform with File Manager Application
  • Grid View & List View
  • Select File & Folder
  • View File & Folder info
  • Search files and folder

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://www.jstree.com/
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-file-manager.html

Roles & Permission Application

A permission is the right to access one or more system objects. A role is a group of permissions. Roles can be assigned to any user or user group, and a user or user group can have more than one role. Unlike hierarchical users, a role does not contain another role.

Roles

A role provided access to predefined menus and features so that depending on assigned role an administrator can have access to what he need.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="jquery.dataTables.min.js"></script>
      <script src="dataTables.bootstrap5.min.js"></script>
      <script src="dataTables.responsive.min.js"></script>
      <script src="responsive.bootstrap5.js"></script>
      <script src="datatables.buttons.min.js"></script>
      <script src="buttons.bootstrap5.min.js"></script>
      <script src="datatables.checkboxes.min.js"></script>
      <script src="jquery.validate.min.js"></script>
      <link rel="stylesheet" type="text/css" href="dataTables.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="responsive.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="buttons.bootstrap5.min.css">

      <!-- Template Files -->
      <script src="modal-add-role.js"></script>
      <script src="app-access-roles.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
    
    
2. Actions you can perform with Roles Page
  • Find List of Users.
  • Add New Roles.
  • Edit Roles.
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-access-roles.html

Permission

List of permission assign to user roles.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="jquery.dataTables.min.js"></script>
      <script src="dataTables.bootstrap5.min.js"></script>
      <script src="dataTables.responsive.min.js"></script>
      <script src="responsive.bootstrap5.js"></script>
      <script src="datatables.buttons.min.js"></script>
      <script src="buttons.bootstrap5.min.js"></script>
      <script src="jquery.validate.min.js"></script>
      <link rel="stylesheet" type="text/css" href="dataTables.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="responsive.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="buttons.bootstrap5.min.css">

      <!-- Template Files -->
      <script src="modal-add-permission.js"></script>
      <script src="modal-edit-permission.js"></script>
      <script src="app-access-permission.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
    
    
2. Actions you can perform with Permission Page
  • Find List of Permissions.
  • Add New Permissions.
  • Edit Permissions.
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-access-permission.html

E-commerce Application

Electronic commerce is an emerging model of new selling and merchandising tools in which buyers are able to participate in all phases of a purchase decision, while stepping through those processes electronically rather than in a physical store or by phone (with a physical catalogue).

E-commerce Shop

E-commerce Shop shows list of all the products to add to cart, to add in wishlist, to filter by category and more..

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="wNumb.min.js"></script>
      <script src="nouislider.min.js"></script>
      <script src="toastr.min.js"></script>
      <link rel="stylesheet" type="text/css" href="nouislider.min.css">
      <link rel="stylesheet" type="text/css" href="toastr.min.css">

      <!-- Template Files -->
      <script src="app-ecommerce.js"></script>
      <link rel="stylesheet" type="text/css" href="ext-component-sliders.css">
      <link rel="stylesheet" type="text/css" href="app-ecommerce.css">
      <link rel="stylesheet" type="text/css" href="ext-component-toastr.css">
    
    
2. Actions you can perform with eCommerce Shop Page
  • Add product to wishlist.
  • Add product to cart.
  • Change product view between list and grid view.
  • Remove products from wishlist.
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-ecommerce-shop.html

E-commerce Details

E-commerce details to view products details with more information about features, colors, price, etc..

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src=spinner/jquery.bootstrap-touchspin.js"></script>
      <script src=swiper.min.js"></script>
      <script src=toastr.min.js"></script>
      <link rel="stylesheet" type="text/css" href=spinner/jquery.bootstrap-touchspin.css">
      <link rel="stylesheet" type="text/css" href=swiper.min.css">
      <link rel="stylesheet" type="text/css" href=toastr.min.css">

      <!-- Template Files -->
      <script src="app-ecommerce-details.js"></script>
      <script src="forms/form-number-input.js"></script>
      <link rel="stylesheet" type="text/css" href="app-ecommerce-details.css">
      <link rel="stylesheet" type="text/css" href="forms/form-number-input.css">
      <link rel="stylesheet" type="text/css" href="extensions/ext-component-toastr.css">
    
    
2. Actions you can perform with eCommerce Details Page
  • To view more features & information about product
  • To view sellers policy or check more seller information
  • To check more related products
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-ecommerce-details.html

E-commerce Wishlist

E-commerce wishlist page used to view products added in wishlist.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="toastr.min.js"></script>
      <link rel="stylesheet" type="text/css" href="toastr.min.css">

      <!-- Template Files -->
      <script src="app-ecommerce-wishlist.js"></script>
      <link rel="stylesheet" type="text/css" href="app-ecommerce.css">
      <link rel="stylesheet" type="text/css" href="extensions/ext-component-toastr.css">
    
    
2. Actions you can perform with eCommerce Wishlist Page
  • To view list of wishlist products
  • To remove product from wishlist
  • Move product to cart form wishlist
  • Check details on click of product
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-ecommerce-wishlist.html

E-commerce Checkout

E-commerce Checkout page will be used to check list of items user wants to buy. User can also manage address to deliver product. Checkout process ends with payment process.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="wizard/bs-stepper.min.js"></script>
      <script src="spinner/jquery.bootstrap-touchspin.js"></script>
      <script src="toastr.min.js"></script>
      <link rel="stylesheet" type="text/css" href="wizard/bs-stepper.min.css">
      <link rel="stylesheet" type="text/css" href="spinner/jquery.bootstrap-touchspin.css">
      <link rel="stylesheet" type="text/css" href="toastr.min.css">

      <!-- Template Files -->
      <script src="app-ecommerce-checkout.js"></script>
      <link rel="stylesheet" type="text/css" href="app-ecommerce.css">
      <link rel="stylesheet" type="text/css" href="forms/pickers/form-pickadate.css">
      <link rel="stylesheet" type="text/css" href="forms/form-wizard.css">
      <link rel="stylesheet" type="text/css" href="extensions/ext-component-toastr.css">
      <link rel="stylesheet" type="text/css" href="forms/form-number-input.css">
    
    
2. Actions you can perform with eCommerce Checkout Page
  • To view list of products you added in cart
  • Move product to wishlist
  • To remove product from cart
  • Check details on click of product
  • Add new address / continue with added address
  • Payment of total amount
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-ecommerce-checkout.html

User Application

User management application used to check List of users, To check more details of each user & edit the details.

User List

User List page will provide list of users with other details of each users like email,role, user's plan, status, etc..

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="select2.full.min.js"></script>
      <script src="jquery.dataTables.min.js"></script>
      <script src="dataTables.bootstrap5.min.js"></script>
      <script src="dataTables.responsive.min.js"></script>
      <script src="datatables.buttons.min.js"></script>
      <script src="jszip.min.js"></script>
      <script src="pdfmake.min.js"></script>
      <script src="vfs_fonts.js"></script>
      <script src="buttons.html5.min.js"></script>
      <script src="buttons.print.min.js"></script>
      <script src="dataTables.rowGroup.min.js"></script>
      <script src="jquery.validate.min.js"></script>
      <script src="cleave.min.js"></script>
      <script src="cleave-phone.us.js"></script>
      <link rel="stylesheet" type="text/css" href="select2.min.css">
      <link rel="stylesheet" type="text/css" href="dataTables.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="responsive.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="buttons.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="rowGroup.bootstrap5.min.css">

      <!-- Template Files -->
      <script src="app-user-list.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
    
    
2. Actions you can perform with User List Page
  • List of users
  • Filter by role, plan, status
  • Actions to edit,delete or view user details
  • Add New User
  • Search user
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-user-list.html

User View Account

To check more details about user account, you need user view account page. Find more information about current plans, project and timeline about user.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="select2.full.min.js"></script>
      <script src="cleave.min.js"></script>
      <script src="cleave-phone.us.js"></script>
      <script src="jquery.validate.min.js"></script>
      <script src="moment.min.js"></script>
      <script src="jquery.dataTables.min.js"></script>
      <script src="dataTables.bootstrap5.min.js"></script>
      <script src="dataTables.responsive.min.js"></script>
      <script src="responsive.bootstrap5.js"></script>
      <script src="datatables.buttons.min.js"></script>
      <script src="jszip.min.js"></script>
      <script src="pdfmake.min.js"></script>
      <script src="vfs_fonts.js"></script>
      <script src="buttons.html5.min.js"></script>
      <script src="buttons.print.min.js"></script>
      <script src="dataTables.rowGroup.min.js"></script>
      <script src="sweetalert2.all.min.js"></script>
      <script src="polyfill.min.js"></script>
      <link rel="stylesheet" type="text/css" href="select2.min.css">
      <link rel="stylesheet" type="text/css" href="animate.min.css">
      <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">
      <link rel="stylesheet" type="text/css" href="dataTables.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="responsive.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="buttons.bootstrap5.min.css">
      <link rel="stylesheet" type="text/css" href="rowGroup.bootstrap5.min.css">

      <!-- Template Files -->
      <script src="modal-edit-user.js"></script>
      <script src="app-user-view-account.js"></script>
      <script src="app-user-view.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
      <link rel="stylesheet" type="text/css" href="ext-component-sweet-alerts.css">
    
    
2. Actions you can perform with User View Page
  • Find personal information about user
  • Find current activated plan of user with more information
  • User's timeline to show activities
  • User's project list
  • User's invoices list
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-user-view-account.html

User View Security

To check about security options. You can change the password and authenticate the user.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="select2.full.min.js"></script>
      <script src="cleave.min.js"></script>
      <script src="cleave-phone.us.js"></script>
      <script src="jquery.validate.min.js"></script>
      <script src="sweetalert2.all.min.js"></script>
      <script src="polyfill.min.js"></script>
      <link rel="stylesheet" type="text/css" href="select2.min.css">
      <link rel="stylesheet" type="text/css" href="animate.min.css">
      <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">

      <!-- Template Files -->
      <script src="modal-two-factor-auth.js"></script>
      <script src="modal-edit-user.js"></script>
      <script src="app-user-view-security.js"></script>
      <script src="app-user-view.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
      <link rel="stylesheet" type="text/css" href="ext-component-sweet-alerts.css">
    
    
2. Actions you can perform with User View Page
  • Find personal information about user
  • You can change the password
  • You can authenticate user
  • User's recent device activity
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-user-view-security.html

User View Billing & Plans

To upgrade the user's current plan and add and edit user's payment card. You need to visit Billing and Plans page.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="select2.full.min.js"></script>
      <script src="cleave.min.js"></script>
      <script src="cleave-phone.us.js"></script>
      <script src="jquery.validate.min.js"></script>
      <script src="sweetalert2.all.min.js"></script>
      <script src="polyfill.min.js"></script>
      <link rel="stylesheet" type="text/css" href="select2.min.css">
      <link rel="stylesheet" type="text/css" href="animate.min.css">
      <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">

      <!-- Template Files -->
      <script src="modal-two-factor-auth.js"></script>
      <script src="modal-edit-user.js"></script>
      <script src="modal-add-new-cc.js"></script>
      <script src="modal-edit-cc.js"></script>
      <script src="modal-add-new-address.js"></script>
      <script src="app-user-view.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
      <link rel="stylesheet" type="text/css" href="ext-component-sweet-alerts.css">
    
    
2. Actions you can perform with User View Page
  • Find personal information about user
  • You can upgrade the current plan
  • View and modify the use's payment methods
  • View or Edit use's billing address
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-user-view-billing.html

User View Notification

You can view and modify the list of notification of user.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="select2.full.min.js"></script>
      <script src="cleave.min.js"></script>
      <script src="cleave-phone.us.js"></script>
      <script src="jquery.validate.min.js"></script>
      <script src="sweetalert2.all.min.js"></script>
      <script src="polyfill.min.js"></script>
      <link rel="stylesheet" type="text/css" href="select2.min.css">
      <link rel="stylesheet" type="text/css" href="animate.min.css">
      <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">

      <!-- Template Files -->
      <script src="modal-edit-user.js"></script>
      <script src="app-user-view.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
      <link rel="stylesheet" type="text/css" href="ext-component-sweet-alerts.css">
    
    
2. Actions you can perform with User View Page
  • Find personal information about user
  • View and modify the use's notifications
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-user-view-notifications.html

User View Connections

You can view and modify the list of social media communications connections of user.

1. You need these files for application to work
    
      <!-- Vendor Files -->
      <script src="select2.full.min.js"></script>
      <script src="cleave.min.js"></script>
      <script src="cleave-phone.us.js"></script>
      <script src="jquery.validate.min.js"></script>
      <script src="sweetalert2.all.min.js"></script>
      <script src="polyfill.min.js"></script>
      <link rel="stylesheet" type="text/css" href="select2.min.css">
      <link rel="stylesheet" type="text/css" href="animate.min.css">
      <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">

      <!-- Template Files -->
      <script src="modal-edit-user.js"></script>
      <script src="app-user-view.js"></script>
      <link rel="stylesheet" type="text/css" href="form-validation.css">
      <link rel="stylesheet" type="text/css" href="ext-component-sweet-alerts.css">
    
    
2. Actions you can perform with User View Page
  • Find personal information about user
  • View and modify the use's social media accounts
Type URL
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-user-view-connections.html