ToDo Application

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. Required Template Specific Vendor Js files
        
          // Date range picker vendor file
            <script src="moment.min.js"></script>
            <script src="daterangepicker.js"></script>
          // Select2 vendor file
            <script src="select2.full.min.js"></script>
          // Quill Editor vendor file
            <script src="quill.min.js"></script>
          // Dragula vendor file
            <script src="dragula.min.js"></script>
        
      
2. Required Template Specific Vendor Css files
        
          // Date range picker vendor css file
            <link rel="stylesheet" type="text/css" href="daterangepicker.css">
          // Select2 vendor css file
            <link rel="stylesheet" type="text/css" href="select2.min.css">
          // Quill Editor vendor css file
            <link rel="stylesheet" type="text/css" href="quill.snow.css">
          // Dragula vendor css file
            <link rel="stylesheet" type="text/css" href="dragula.min.css">
        
      
3. Required Template Specific Js File
          
              <script src="app-todo.js"></script>
          
      
4. Required Template Specific Css File
          
              <link rel="stylesheet" type="text/css" href="app-todo.css">
          
      
5. Features you can perform in TODO application.
  • Add new task
  • Complete task
  • Delete task
  • Filter any task
  • Set favorite task
  • Task drag and drop
  • Task tags base on priority
  • Sort task ascending or descending
  • On click of todo list, edit task will open

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

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

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. Required Template Specific Vendor Js file
          
            // Quill Editor vendor file
              <script src="quill.min.js"></script>
          
      
2. Required Template Specific Vendor Css file
          
            // Quill Editor vendor css file
              <link rel="stylesheet" type="text/css" href="quill.snow.css">
          
      
3. Required Template Specific Js Files
          
              <script src="app-email.js"></script>
          
      
4. Required Template Specific Css File
          
              <link rel="stylesheet" type="text/css" href="app-email.css">
          
      
5. Features you can perform in Email application.
  • Compose Mail
  • Search mail
  • Delete mail
  • Mark mail starred
  • Mark mail as unread
  • Select All mails and Delete all
  • Select All mails and Mark mail unread
  • On click of mail list, mail detail will slide in

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

Type URL
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-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 pages to make it work.
        
          <script src="app-chat.js"></script>
          <link rel="stylesheet" type="text/css" href="app-chat.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
  • Added #channels
  • Favorite Conversation
  • Pin to top chat
  • Chat time
  • Delete chat
  • Block user

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

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

Calendar Application

TOAST UI Calendar is a full-featured calendar. Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.

1. Required Template Specific Vendor Js files
          
            // TOAST UI calendar vendor files
              <script src="tui-code-snippet.min.js"></script>
              <script src="tui-dom.js"></script>
              <script src="tui-time-picker.min.js"></script>
              <script src="tui-date-picker.min.js"></script>
              <script src="moment.min.js"></script>
              <script src="chance.min.js"></script>
              <script src="tui-calendar.min.js"></script>
          
      
2. Required Template Specific Vendor Css files
          
            // TOAST UI calendar vendor css files
              <link rel="stylesheet" type="text/css" href="tui-time-picker.css">
              <link rel="stylesheet" type="text/css" href="tui-date-picker.css">
              <link rel="stylesheet" type="text/css" href="tui-calendar.min.css">
          
      
3. Required Template Specific Js Files
          
            // Random schedule generate
              <script src="calendars-data.js"></script>
              <script src="schedules.js"></script>
            // Page specific js
              <script src="app-calendar.js"></script>
          
      
4. Required Template Specific Css File
          
            // Page specific css
              <link rel="stylesheet" type="text/css" href="calendar.css">
          
      
5. Actions you can perform with Calendar application
  • Add new events.
  • Edit existing events.
  • Remove existing events.
  • Manage your schedule.
  • Filter calendar events
  • Multiple calendar view
  • Drag and drop existing events.
  • Add category/label to your event.
  • Get info of event on click.

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

Type URL
Plugin Link https://ui.toast.com/tui-calendar/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/app-calendar.html

Invoice Application

An invoice is a document issued by a seller to the buyer that indicates the quantities and costs of the products or services provider by the seller. Payment terms indicate the maximum amount of time that a buyer has to pay for the goods and/or services that they have purchased from the seller.

1. Required Template Specific Vendor Js files
            
              // Date picker vendor file
                <script src="picker.js"></script>
                <script src="picker.date.js"></script>
              // Form repeater vendor file
                <script src="jquery.repeater.min.js"></script>
              // Datatable vendor file
                <script src="datatables.min.js"></script>
            
        
2. Required Template Specific Vendor Css files
            
              // Date picker vendor css file
                <link rel="stylesheet" type="text/css" href="pickadate.css">
              // Datatable vendor css file
                <link rel="stylesheet" type="text/css" href="datatables.min.css">
            
        
3. Required Template Specific Js Files
          
            <script src="app-invoice.js"></script>
          
      
4. Required Template Specific Css Files
            
                <link rel="stylesheet" type="text/css" href="app-invoice.css">
            
        
5. Actions you can perform with Invoice
  • Filter invoice list
  • Select invoice list
  • Sort ascending or descending invoice list
  • On invoice number's click in invoice list page, view the detail of invoice
  • On view icon's click in invoice list page, view the detail of invoice.
  • To add new invoice, Click on Create invoice button on invoice list page.
  • To edit invoice, click on edit icon in invoice list page.
  • On Edit invoice button's click in invoice page, view the edit invoice page.
  • Add, Delete items in invoice edit and add Page.

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

Type URL
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/app-invoice.html

Kanban Application

A kanban board is designed to help visualize work, limit work-in-progress, and maximize efficiency (or flow). Kanban boards use cards, columns, and continuous improvement to help technology and service teams commit to the right amount of work, and get it done! jKanban allow you to create and manage Kanban Board in your project!

1. Required Template Specific Vendor Js files
            
              // jKanban vendor file
                <script src="jkanban.min.js"></script>
              // Quill Editor vendor file
                <script src="quill.min.js"></script>
              // Date picker vendor file
                <script src="picker.js"></script>
                <script src="picker.date.js"></script>
            
        
2. Required Template Specific Vendor Css files
            
              // jKanban vendor css file
                <link rel="stylesheet" type="text/css" href="jkanban.min.css">
              // Quill Editor vendor css file
                <link rel="stylesheet" type="text/css" href="quill.snow.css">
              // Date picker vendor css file
                <link rel="stylesheet" type="text/css" href="pickadate.css">
            
        
3. Required Template Specific Js Files
          
            <script src="app-kanban.js"></script>
          
      
4. Required Template Specific Css Files
            
                <link rel="stylesheet" type="text/css" href="app-kanban.css">
            
        
5. Actions you can perform with Kanban
  • Add New Kanban Board
  • Add New Item in current board
  • Delete Kanban Board
  • Delete Kanban Item
  • Open right sidebar on click event of kanban-item

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

Type URL
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/app-kanban.html

File Manager Application

A file manager provides a user interface to manage files and folders. It contains the recently accessed file lists, folder structure, files list with of different application extensions.

1. Required Template Specific Js Files
          
            <script src="app-file-manager.js"></script>
          
      
2. Required Template Specific Css Files
            
                <link rel="stylesheet" type="text/css" href="app-file-manager.css">
            
        
3. Actions you can perform with Kanban
  • Show the list of recently accessed file list
  • Show the list of folders that contains many files in it
  • List of files with different kind of extensions
  • Open detailed sidebar on click event of app-file-info

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

Type URL
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/app-file-manager.html

User Application

User management application is used to check list of users, to check more details of each user and edit the details.

1. Required Template Specific Vendor Js files
        
          // Datatable vendor file
            <script src="datatables.min.js"></script>
          // jQuery Validate vendor file
            <script src="jquery.validate.min.js"></script>
          // Date picker vendor file
            <script src="picker.js"></script>
            <script src="picker.date.js"></script>
          // Select2 vendor file
            <script src="select2.full.min.js"></script>
        
      
2. Required Template Specific Vendor Css files
        
          // Datatable vendor css file
            <link rel="stylesheet" type="text/css" href="datatables.min.css">
          // Date picker vendor css file
            <link rel="stylesheet" type="text/css" href="pickadate.css">
          // Select2 vendor css file
            <link rel="stylesheet" type="text/css" href="select2.min.css">
        
      
3. Required Template Specific Js Files
        
          <script src="app-users.js"></script>
        
      
4. Required Template Specific Css Files
        
            <link rel="stylesheet" type="text/css" href="app-users.css">
          // Form Validation css file
            <link rel="stylesheet" type="text/css" href="form-validation.css">
        
      
5. Actions you can perform with Invoice
  • List of users
  • Filter user list
  • Search user
  • Sort ascending or descending user list
  • On click of username in user list page, view the detail of that user
  • On click of edit icon in user list page, you can edit details of that user
  • Find personal information about user in user details' page
  • User's permission in user details' page
  • Edit/update user's personal information & address in user edit page
  • Edit/update permission in user edit page
  • Edit/update user's social medias in user edit page.

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

Type URL
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/app-users-list.html