diff --git a/.history/assets/scss/_default_20220822172142.scss b/.history/assets/scss/_default_20220822172142.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1c1a6627d326e72026ac07cd66387b31f271940d
--- /dev/null
+++ b/.history/assets/scss/_default_20220822172142.scss
@@ -0,0 +1,79 @@
+// Text styling
+
+.text {
+  // Text weight
+  &-200 {
+    font-weight: 200 !important;
+  }
+  &-300 {
+    font-weight: 300 !important;
+  }
+  &-400 {
+    font-weight: 400 !important;
+  }
+  &-500 {
+    font-weight: 500 !important;
+  }
+  &-600 {
+    font-weight: 600 !important;
+  }
+  &-700 {
+    font-weight: 700 !important;
+  }
+  &-800 {
+    font-weight: 800 !important;
+  }
+  &-900 {
+    font-weight: 900 !important;
+  }
+  // Text transformation
+  &-uppercase {
+    text-transform: uppercase !important;
+  }
+  &-lowercase {
+    text-transform: lowercase !important;
+  }
+  &-full-width {
+    text-transform: full-width !important;
+  }
+  &-capitalize {
+    text-transform: capitalize !important;
+  }
+  // Text selectable
+  &-not-selectable {
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+}
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+
+.vs__fade-enter-active,
+.vs__fade-leave-active {
+  transition: all .3s;
+}
diff --git a/.history/assets/scss/_default_20220822172200.scss b/.history/assets/scss/_default_20220822172200.scss
new file mode 100644
index 0000000000000000000000000000000000000000..17f1d1cf88107756f8f5493f52246e061a5c7513
--- /dev/null
+++ b/.history/assets/scss/_default_20220822172200.scss
@@ -0,0 +1,79 @@
+// Text styling
+
+.text {
+  // Text weight
+  &-200 {
+    font-weight: 200 !important;
+  }
+  &-300 {
+    font-weight: 300 !important;
+  }
+  &-400 {
+    font-weight: 400 !important;
+  }
+  &-500 {
+    font-weight: 500 !important;
+  }
+  &-600 {
+    font-weight: 600 !important;
+  }
+  &-700 {
+    font-weight: 700 !important;
+  }
+  &-800 {
+    font-weight: 800 !important;
+  }
+  &-900 {
+    font-weight: 900 !important;
+  }
+  // Text transformation
+  &-uppercase {
+    text-transform: uppercase !important;
+  }
+  &-lowercase {
+    text-transform: lowercase !important;
+  }
+  &-full-width {
+    text-transform: full-width !important;
+  }
+  &-capitalize {
+    text-transform: capitalize !important;
+  }
+  // Text selectable
+  &-not-selectable {
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+}
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+
+.vs__fade-enter-active,
+.vs__fade-leave-active {
+  transition: all .3s linear;
+}
diff --git a/.history/assets/scss/_default_20220822172209.scss b/.history/assets/scss/_default_20220822172209.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d5f30667e965000da94bf7e6831e559ab5522ccb
--- /dev/null
+++ b/.history/assets/scss/_default_20220822172209.scss
@@ -0,0 +1,79 @@
+// Text styling
+
+.text {
+  // Text weight
+  &-200 {
+    font-weight: 200 !important;
+  }
+  &-300 {
+    font-weight: 300 !important;
+  }
+  &-400 {
+    font-weight: 400 !important;
+  }
+  &-500 {
+    font-weight: 500 !important;
+  }
+  &-600 {
+    font-weight: 600 !important;
+  }
+  &-700 {
+    font-weight: 700 !important;
+  }
+  &-800 {
+    font-weight: 800 !important;
+  }
+  &-900 {
+    font-weight: 900 !important;
+  }
+  // Text transformation
+  &-uppercase {
+    text-transform: uppercase !important;
+  }
+  &-lowercase {
+    text-transform: lowercase !important;
+  }
+  &-full-width {
+    text-transform: full-width !important;
+  }
+  &-capitalize {
+    text-transform: capitalize !important;
+  }
+  // Text selectable
+  &-not-selectable {
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+}
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+
+.vs__fade-enter-active,
+.vs__fade-leave-active {
+  transition: .3s linear;
+}
diff --git a/.history/assets/scss/_default_20220822172222.scss b/.history/assets/scss/_default_20220822172222.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f0fa76b37e713d9c976b5bb07b1280761494bfdf
--- /dev/null
+++ b/.history/assets/scss/_default_20220822172222.scss
@@ -0,0 +1,79 @@
+// Text styling
+
+.text {
+  // Text weight
+  &-200 {
+    font-weight: 200 !important;
+  }
+  &-300 {
+    font-weight: 300 !important;
+  }
+  &-400 {
+    font-weight: 400 !important;
+  }
+  &-500 {
+    font-weight: 500 !important;
+  }
+  &-600 {
+    font-weight: 600 !important;
+  }
+  &-700 {
+    font-weight: 700 !important;
+  }
+  &-800 {
+    font-weight: 800 !important;
+  }
+  &-900 {
+    font-weight: 900 !important;
+  }
+  // Text transformation
+  &-uppercase {
+    text-transform: uppercase !important;
+  }
+  &-lowercase {
+    text-transform: lowercase !important;
+  }
+  &-full-width {
+    text-transform: full-width !important;
+  }
+  &-capitalize {
+    text-transform: capitalize !important;
+  }
+  // Text selectable
+  &-not-selectable {
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+}
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+
+.vs__fade-enter-active,
+.vs__fade-leave-active {
+  transition: none;
+}
diff --git a/.history/assets/scss/_default_20220822172235.scss b/.history/assets/scss/_default_20220822172235.scss
new file mode 100644
index 0000000000000000000000000000000000000000..14070e6076d40ff362c186e796e601b950c0d526
--- /dev/null
+++ b/.history/assets/scss/_default_20220822172235.scss
@@ -0,0 +1,73 @@
+// Text styling
+
+.text {
+  // Text weight
+  &-200 {
+    font-weight: 200 !important;
+  }
+  &-300 {
+    font-weight: 300 !important;
+  }
+  &-400 {
+    font-weight: 400 !important;
+  }
+  &-500 {
+    font-weight: 500 !important;
+  }
+  &-600 {
+    font-weight: 600 !important;
+  }
+  &-700 {
+    font-weight: 700 !important;
+  }
+  &-800 {
+    font-weight: 800 !important;
+  }
+  &-900 {
+    font-weight: 900 !important;
+  }
+  // Text transformation
+  &-uppercase {
+    text-transform: uppercase !important;
+  }
+  &-lowercase {
+    text-transform: lowercase !important;
+  }
+  &-full-width {
+    text-transform: full-width !important;
+  }
+  &-capitalize {
+    text-transform: capitalize !important;
+  }
+  // Text selectable
+  &-not-selectable {
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+}
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(.99);
+}
diff --git a/.history/components/global/is-navbar_20220822140733.vue b/.history/components/global/is-navbar_20220822140733.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b434dfbdf01b246575c733ee5ef62be69e6aa3d
--- /dev/null
+++ b/.history/components/global/is-navbar_20220822140733.vue
@@ -0,0 +1,139 @@
+<template lang="pug">
+.is-navbar
+  .navbar-item
+    IsText(
+        :is-text="`${parsePageName($nuxt.$route.name)} of challenge drive`"
+        is-color="#4E4E4E"
+        :is-font-size="24"
+        is-text-transform="uppercase"
+        is-font-weight="700"
+        :is-user-select="false"
+      )
+  .navbar-item(
+    v-if='this.$auth.user'
+  )
+    .account-info(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      .account-icon
+        img.photo-preview(
+          v-bind:src="imagePreview"
+          v-show="showPreview"
+        )
+        i.photo-preview(
+          class="fa fa-user-circle fa-3x"
+          aria-hidden="true"
+          v-show="defaultPreview"
+        )
+      .account-name
+        | {{ this.$auth.user.firstname ? this.$auth.user.firstname : 'Admin' }}
+    is-modal(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  nuxt-link(
+    to='/'
+    v-else
+  ) to Auth
+</template>
+
+<script>
+export default {
+  name: 'IsNavbar',
+  transition: 'page',
+  data() {
+    return {
+      title: this.parsePageName(this.$nuxt.$route.name),
+      imagePreview: '',
+      showPreview: false,
+      defaultPreview: true
+    }
+  },
+  async mounted() {
+    this.title = this.parsePageName(this.$nuxt.$route.name)
+    await this.$axios.get('/api/users/me')
+      .then(response => {
+        if (response.data.photos[0].link == '') this.defaultPreview = true
+        else {
+          this.defaultPreview = false
+          this.showPreview = true
+          this.imagePreview = response.data.photos[0].link
+        }
+      })
+      .catch(err => {
+        this.$ctoast.replace('Error', {
+          type: 'error',
+          description: `[Error]: ${err}`
+        })
+        console.log(err);
+      })
+  },
+  methods: {
+    parsePageName (routePath) {
+      switch (routePath) {
+        case 'statistics':
+          return 'Statistics';
+        case 'users':
+          return 'Users';
+        case 'service':
+          return 'Paid services';
+        case 'events':
+          return 'Unique events';
+        case 'administrators':
+          return 'Administrators';
+        case 'chats':
+          return 'User notification';
+        default:
+          return 'Statistics'
+      }
+    },
+
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.is-navbar {
+  width: 100%;
+  max-width: 915px;
+  height: 100%;
+  max-height: 50px;
+  min-height: 50px;
+  background: #FFFFFF;
+  border: 1px solid #C5DFDE;
+  border-radius: 20px;
+  padding: 20px 30px;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .navbar-item {
+    .account-info {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      user-select: none;
+      .account-icon {
+        width: 100%;
+        max-width: 50px;
+        height: 100%;
+        max-height: 50px;
+        border-radius: 50%;
+        overflow: hidden;
+        .photo-preview{
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .account-name {
+        margin-left: 10px;
+        line-height: 23.87px;
+        font-size: 1.3rem;
+        color: #1B1B1B;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/components/global/is-select_20220822154447.vue b/.history/components/global/is-select_20220822154447.vue
new file mode 100644
index 0000000000000000000000000000000000000000..718a35866e5e1dec34ac00c04ca37de8b2acc005
--- /dev/null
+++ b/.history/components/global/is-select_20220822154447.vue
@@ -0,0 +1,183 @@
+
+
+
+
+
+
+
+
+
+
+<!-- <template lang="pug">
+div(
+  :id="`is-select-${selectData.id_attr}`"
+  class="is-select btn"
+)
+  input(
+    :id="selectData.id_attr"
+    type="text"
+    :value="selectedItem.name"
+
+    :placeholder="selectData.placeholder"
+    :class="`is-select__input ${openList ? 'show' : ''}`"
+    @click="openOptionsList"
+    readonly
+  )
+  //- v-model="selectedItem.name"
+  //- :value="selectedItem.name"
+  fai(
+    :icon="['far', 'caret-square-up']"
+    class="is-select__icon"
+  )
+  ul(
+    class="is-select__options-list"
+  )
+    li(
+      v-if="selectData.btnEnabled"
+      @click="btnFunction"
+      class="default-btn"
+      :style="`${this.selectData.borderBottom ? 'border-bottom: 1px solid #EEE;' : ''} ${this.selectData.centered ? 'text-align: center;' : ''} ${this.selectData.customColor ? 'color: #2980B9;' : ''}`"
+    ) {{ selectData.btnName }}
+    li(
+      v-for="option in selectData.data" :key="option.id"
+      @click="selectOption(option)") {{ option.name }}
+</template>
+
+<script>
+export default {
+  name: 'IsSelect',
+  data () {
+    return {
+      openList: false
+    }
+  },
+  props: {
+    selectData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    selectedItem: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  methods: {
+    selectOption (option) {
+      this.$emit('select', option)
+      this.openList = !this.openList
+    },
+    openOptionsList () {
+      this.openList = !this.openList
+    },
+    btnFunction () {
+      this.$emit('selectButtonFunction')
+      this.openList = !this.openList
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.is-select {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &.btn {
+    position: relative;
+    box-sizing: border-box;
+
+    .is-select {
+      &__options-list {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  &__input {
+    position: relative;
+    z-index: 998;
+    user-select: none !important;
+    cursor: pointer;
+
+    &.show {
+      &~.is-select {
+        &__icon {
+          transform: scale(1, 1);
+          transition: all .3s;
+        }
+
+        &__options-list {
+          display: block;
+          height: auto;
+          max-height: 100px;
+          opacity: 1;
+          transition: max-height .3s, opacity .3s;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    font-size: 1rem;
+    position: absolute;
+    top: 10px;
+    bottom: 0;
+    right: 5px;
+    transform: scale(1, -1);
+    transition: all .3s;
+    color: #2c3e50;
+    margin-right: 0.5rem;
+    cursor: pointer;
+    z-index: 999;
+  }
+
+  &__options-list {
+    display: block;
+    position: absolute;
+    list-style: none;
+    padding: 0;
+    margin: 0 0 1rem 0;
+    left: 0;
+    right: 0;
+    top: 2.22rem;
+    overflow-y: scroll;
+    background-color: #fff;
+    z-index: 1000 !important;
+    scrollbar-width: none;
+    height: auto;
+    max-height: 1px;
+    opacity: 0;
+    transition: max-height .3s, opacity .3s;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.125);
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    li {
+      padding: .5rem .75rem;
+      cursor: pointer;
+      font-size: 12px;
+
+      &:hover {
+        background-color: #f1f1f1;
+      }
+    }
+
+    .default-btn {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      max-width: 275px;
+      margin: 0 auto;
+      user-select: none
+    }
+  }
+}
+</style> -->
diff --git a/.history/components/global/modals/is-modal_20220822163640.vue b/.history/components/global/modals/is-modal_20220822163640.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b8aac9ca02343b2af74671f0491ed526dcb2540
--- /dev/null
+++ b/.history/components/global/modals/is-modal_20220822163640.vue
@@ -0,0 +1,615 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label.account-photo(
+                for="file"
+              )
+                input(
+                  type="file"
+                  id="file"
+                  ref="file"
+                  accept="image/*"
+                  v-on:change="handleFileUpload()"
+                )
+                img.photo-preview(
+                  v-bind:src="imagePreview"
+                  v-show="showPreview"
+                )
+              .btn_photo
+                button(
+                  class=""
+                  @click.prevent='savePhoto'
+                )
+                  | Save Photo
+              label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+              label(
+                for="secondname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Secondname"
+                  is-name="secondname"
+                  is-type="text"
+                  is-placeholder="Secondname"
+                  @input="parseSecondname"
+                  :is-required="true"
+                  :is-value='secondname'
+                )
+              label.label_posr(
+                for="email"
+              )
+                .label_account
+                  | Email
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="email"
+                  is-type="email"
+                  :is-value='email'
+                  :is-disabled='true'
+                )
+              label.label_posr(
+                for="type"
+              )
+                .label_account
+                 | Type of account
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="type"
+                  is-type="text"
+                  :is-value='type'
+                  :is-disabled='true'
+                )
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+        div
+          button(
+            class="toAuth"
+            @click='logout'
+          )
+            | Logout
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      firstname: '',
+      secondname: '',
+      email: '',
+      type: '',
+      photoLink: '',
+    }
+  },
+  async mounted() {
+    await this.$axios.get('/api/users/me')
+      .then(response => {
+        this.firstname = response.data.firstname
+        this.secondname = response.data.secondname
+        this.email = response.data.email
+        this.type = response.data.role.name
+        this.imagePreview = response.data.photos[0].link
+      })
+      .catch(err => {
+        this.$ctoast.replace('Error', {
+          type: 'error',
+          description: `[Error]: ${err}`
+        })
+        console.log(err);
+      })
+  },
+  methods: {
+    parseFirstname(data) {
+      this.firstname = data
+    },
+    parseSecondname(data) {
+      this.secondname = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    logout() {
+      this.$ctoast.info(
+        `Log out...`,
+        {
+          delay: false,
+          name: 'logout'
+        })
+      setTimeout(() => {
+        this.$ctoast.replace('logout', {
+          title: 'Log out',
+          type: 'success'
+        })
+        setTimeout(async () => {
+          await this.$auth.logout()
+        }, 500)
+      }, 1000)
+    },
+    handleFileUpload() {
+      this.file = this.$refs.file.files[0];
+      const reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        this.showPreview = true;
+        this.imagePreview = reader.result;
+      }.bind(this), false);
+
+      if (this.file) {
+        if (/\.(jpe?g|png|gif)$/i.test(this.file.name)) {
+          reader.readAsDataURL(this.file);
+        }
+      }
+    },
+    async save() {
+      await this.$nuxt.$axios.patch('/api/users', {
+        firstname: this.firstname,
+        secondname: this.secondname
+      })
+        .then(response => {
+        })
+        .catch(err => {
+          this.$ctoast.show({
+            title: `[Error]: ${err}`,
+            type: 'error'
+          })
+        })
+    },
+    async savePhoto() {
+      const photo = new FormData()
+      photo.append('file', this.file)
+      await this.$nuxt.$axios.post('/api/files/image', photo)
+        .then(response => {
+          this.photoLink = response.data.link
+        })
+      await this.$nuxt.$axios.patch('/api/users', {
+        photos: [
+          {
+            position: 0,
+            link: this.photoLink
+          }
+        ]
+      })
+    }
+
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/pages/users_20220822151321.vue b/.history/pages/users_20220822151321.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ec560f4f2c0587f291a78845a937d16bc3d30c5
--- /dev/null
+++ b/.history/pages/users_20220822151321.vue
@@ -0,0 +1,320 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        is-button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          :is-function='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async pagination() {
+      try {
+        this.reloading = true
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822151431.vue b/.history/pages/users_20220822151431.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f87c3b31f45322fde3f4a2d6439adc8f08f3e0d
--- /dev/null
+++ b/.history/pages/users_20220822151431.vue
@@ -0,0 +1,321 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        is-button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          :is-function='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822151725.vue b/.history/pages/users_20220822151725.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4fe33c8ba19474bf8c5bc51abc9070beca64fffb
--- /dev/null
+++ b/.history/pages/users_20220822151725.vue
@@ -0,0 +1,296 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        is-button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          :is-function='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822151812.vue b/.history/pages/users_20220822151812.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f87c3b31f45322fde3f4a2d6439adc8f08f3e0d
--- /dev/null
+++ b/.history/pages/users_20220822151812.vue
@@ -0,0 +1,321 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        is-button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          :is-function='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822151831.vue b/.history/pages/users_20220822151831.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e980a386de273d3a4a8c921bfdf6024d2964ef05
--- /dev/null
+++ b/.history/pages/users_20220822151831.vue
@@ -0,0 +1,321 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        is-button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822151854.vue b/.history/pages/users_20220822151854.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b6c1ff5b2926e3a40fbdba512717f90479ba531c
--- /dev/null
+++ b/.history/pages/users_20220822151854.vue
@@ -0,0 +1,321 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822151936.vue b/.history/pages/users_20220822151936.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab294e567d23317c5c416ce0cd19b0b79809e278
--- /dev/null
+++ b/.history/pages/users_20220822151936.vue
@@ -0,0 +1,324 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152150.vue b/.history/pages/users_20220822152150.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5b13f4911d2c417c61c239f560bad798380bca8
--- /dev/null
+++ b/.history/pages/users_20220822152150.vue
@@ -0,0 +1,340 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152212.vue b/.history/pages/users_20220822152212.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d55e76d82d5150b99849c898c4559eb748593e91
--- /dev/null
+++ b/.history/pages/users_20220822152212.vue
@@ -0,0 +1,342 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152516.vue b/.history/pages/users_20220822152516.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c8d70cf7bae10199ed197d127556a3392fefdf5
--- /dev/null
+++ b/.history/pages/users_20220822152516.vue
@@ -0,0 +1,343 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        height: 45px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152545.vue b/.history/pages/users_20220822152545.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ec890e8ae323da708f9767ccf8d50514674fdde
--- /dev/null
+++ b/.history/pages/users_20220822152545.vue
@@ -0,0 +1,343 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+        height: 40px;
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152619.vue b/.history/pages/users_20220822152619.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c11a4d3c7ddffffb6960f1704e1fcb57cc64e13
--- /dev/null
+++ b/.history/pages/users_20220822152619.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 40px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152633.vue b/.history/pages/users_20220822152633.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56e76db573b5bcf973825f2c3428f4e1c8db8603
--- /dev/null
+++ b/.history/pages/users_20220822152633.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 30px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152648.vue b/.history/pages/users_20220822152648.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec81273042c8fa8cd19d63e21203989575f090d6
--- /dev/null
+++ b/.history/pages/users_20220822152648.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 35px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152655.vue b/.history/pages/users_20220822152655.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d9589d84220f464dca2f415c99d229c876a10fdd
--- /dev/null
+++ b/.history/pages/users_20220822152655.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 32px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152709.vue b/.history/pages/users_20220822152709.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56e76db573b5bcf973825f2c3428f4e1c8db8603
--- /dev/null
+++ b/.history/pages/users_20220822152709.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 30px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152715.vue b/.history/pages/users_20220822152715.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b436b47919528dc8b3887823464fee7b4dc7d912
--- /dev/null
+++ b/.history/pages/users_20220822152715.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 10px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152813.vue b/.history/pages/users_20220822152813.vue
new file mode 100644
index 0000000000000000000000000000000000000000..715d054d05269fd2e9851c3b894e3749305565d4
--- /dev/null
+++ b/.history/pages/users_20220822152813.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152851.vue b/.history/pages/users_20220822152851.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3abc83037e7fb6700e717acd2abb20a7dcf1be10
--- /dev/null
+++ b/.history/pages/users_20220822152851.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(8) {
+          width: 12px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152928.vue b/.history/pages/users_20220822152928.vue
new file mode 100644
index 0000000000000000000000000000000000000000..501d9c1460f72c80d1865b68b8b7bd30df989b86
--- /dev/null
+++ b/.history/pages/users_20220822152928.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(8) {
+          width: 20px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152932.vue b/.history/pages/users_20220822152932.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b626e67c4bc6d508b22c355091802c255d34ff58
--- /dev/null
+++ b/.history/pages/users_20220822152932.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(8) {
+          width: 30px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152938.vue b/.history/pages/users_20220822152938.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f9ae1ccc89a127d8a2213453cc8c4083efe6a4f
--- /dev/null
+++ b/.history/pages/users_20220822152938.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(8) {
+          width: 40px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822152949.vue b/.history/pages/users_20220822152949.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9ef3e367dccccf3f937d00979f8cddab608fc18
--- /dev/null
+++ b/.history/pages/users_20220822152949.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 12px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153012.vue b/.history/pages/users_20220822153012.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4287007bae02695c2d5df6b711b827fee31461a5
--- /dev/null
+++ b/.history/pages/users_20220822153012.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 12px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153023.vue b/.history/pages/users_20220822153023.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25c7fc065c72bb699ed3bc77aefb90283daf4bbc
--- /dev/null
+++ b/.history/pages/users_20220822153023.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153028.vue b/.history/pages/users_20220822153028.vue
new file mode 100644
index 0000000000000000000000000000000000000000..599252025a40bb7bde7c94ed9c8e230dadc2d92b
--- /dev/null
+++ b/.history/pages/users_20220822153028.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(8) {
+          width: 55px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153033.vue b/.history/pages/users_20220822153033.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25c7fc065c72bb699ed3bc77aefb90283daf4bbc
--- /dev/null
+++ b/.history/pages/users_20220822153033.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153045.vue b/.history/pages/users_20220822153045.vue
new file mode 100644
index 0000000000000000000000000000000000000000..833cc7c78f1e874408e03a978ce006fa56ac8917
--- /dev/null
+++ b/.history/pages/users_20220822153045.vue
@@ -0,0 +1,350 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153102.vue b/.history/pages/users_20220822153102.vue
new file mode 100644
index 0000000000000000000000000000000000000000..153d6be851ee66393a039cb67ad0db507a21613e
--- /dev/null
+++ b/.history/pages/users_20220822153102.vue
@@ -0,0 +1,353 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153120.vue b/.history/pages/users_20220822153120.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60f79136a1fcd3054b16fa2ab6af50dcf1f3c281
--- /dev/null
+++ b/.history/pages/users_20220822153120.vue
@@ -0,0 +1,356 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(5) {
+          width: 50px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153127.vue b/.history/pages/users_20220822153127.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43385cff924ac52649f5a7c0b5ca003126eae809
--- /dev/null
+++ b/.history/pages/users_20220822153127.vue
@@ -0,0 +1,356 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153136.vue b/.history/pages/users_20220822153136.vue
new file mode 100644
index 0000000000000000000000000000000000000000..58243b84d2979eed8b3152e8818acaf362aa1d01
--- /dev/null
+++ b/.history/pages/users_20220822153136.vue
@@ -0,0 +1,359 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153152.vue b/.history/pages/users_20220822153152.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46b0509ff87a26318350416e835cf4e5f2ea97ac
--- /dev/null
+++ b/.history/pages/users_20220822153152.vue
@@ -0,0 +1,362 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 40px !important;
+        }
+        th:nth-child(2) {
+          width: 40px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153205.vue b/.history/pages/users_20220822153205.vue
new file mode 100644
index 0000000000000000000000000000000000000000..04336576df17efe472a22429fae00a7766378666
--- /dev/null
+++ b/.history/pages/users_20220822153205.vue
@@ -0,0 +1,362 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 20px !important;
+        }
+        th:nth-child(2) {
+          width: 40px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153404.vue b/.history/pages/users_20220822153404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dbba3856038b06e176eb792a1d0c35325f7d10e1
--- /dev/null
+++ b/.history/pages/users_20220822153404.vue
@@ -0,0 +1,362 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153446.vue b/.history/pages/users_20220822153446.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d96da0cfdd1c868dfd7f77a992d60e7130753c24
--- /dev/null
+++ b/.history/pages/users_20220822153446.vue
@@ -0,0 +1,365 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 149px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822153453.vue b/.history/pages/users_20220822153453.vue
new file mode 100644
index 0000000000000000000000000000000000000000..181f5b014ceeac5f4073021378e8d42285e80b6c
--- /dev/null
+++ b/.history/pages/users_20220822153453.vue
@@ -0,0 +1,365 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    is-select(
+      :select-data="currentCategoryMatrix"
+      :selected-item="clusterSelectedData"
+      @select="selectedMatrix"
+
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentCategoryMatrix: {
+        id_attr: 'matrix',
+        placeholder: 'Выберите матрицу',
+        borderBottom: true,
+        centered: true,
+        customColor: true,
+        data: [
+          { 1: '1' },
+          { 2: '2' },
+          { 3: '3' }
+        ]
+      },
+      clusterSelectedData: {},
+      // selectedItem: {},
+      // selectData: {
+      //   id_attr: 'learn',
+      //   placeholder: 'choose',
+      //   btnEnabled: false,
+      //   btnName: '',
+      //   borderBottom: true,
+      //   centered: true,
+      //   customColor: true,
+      //   data: [
+      //     {1: '1'},
+      //     {2: '2'},
+      //     {3: '3'}
+      //   ]
+      // }
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822155958.vue b/.history/pages/users_20220822155958.vue
new file mode 100644
index 0000000000000000000000000000000000000000..628208f9a7e3927ed32e7dae86d1dc11cc21a8c9
--- /dev/null
+++ b/.history/pages/users_20220822155958.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    point-select(
+      :options='currentData'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentData: [
+        { 1: '1' },
+        { 2: '2' },
+        { 3: '3' }
+      ]
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822160248.vue b/.history/pages/users_20220822160248.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47bc6861be36c9fe766bdc96b498d4dbf348a03e
--- /dev/null
+++ b/.history/pages/users_20220822160248.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options='currentData'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentData: [
+        { 1: '1' },
+        { 2: '2' },
+        { 3: '3' }
+      ]
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822160309.vue b/.history/pages/users_20220822160309.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47bc6861be36c9fe766bdc96b498d4dbf348a03e
--- /dev/null
+++ b/.history/pages/users_20220822160309.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options='currentData'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentData: [
+        { 1: '1' },
+        { 2: '2' },
+        { 3: '3' }
+      ]
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822160554.vue b/.history/pages/users_20220822160554.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3661978ffb17bd9930ddaea8561da4754d5d7c79
--- /dev/null
+++ b/.history/pages/users_20220822160554.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      label="countryName"
+      :options='countries'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentData: [
+        {
+          countryCode: '1',
+          countryName: 'Russia'
+        },
+        {
+          countryCode: '2',
+          countryName: 'China'
+        },
+        {
+          countryCode: '3',
+          countryName: 'Belarus'
+        }
+      ]
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822160618.vue b/.history/pages/users_20220822160618.vue
new file mode 100644
index 0000000000000000000000000000000000000000..351f44d610fceda9c100f4235c0ff8e02f78a637
--- /dev/null
+++ b/.history/pages/users_20220822160618.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      label="currentData.countryName"
+      :options='currentData.countries'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentData: [
+        {
+          countryCode: '1',
+          countryName: 'Russia'
+        },
+        {
+          countryCode: '2',
+          countryName: 'China'
+        },
+        {
+          countryCode: '3',
+          countryName: 'Belarus'
+        }
+      ]
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822160636.vue b/.history/pages/users_20220822160636.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9d5f627801c62363ff2e55a09dc4b47a2e29e58d
--- /dev/null
+++ b/.history/pages/users_20220822160636.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :label="currentData.countryName"
+      :options='currentData.countries'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      currentData: [
+        {
+          countryCode: '1',
+          countryName: 'Russia'
+        },
+        {
+          countryCode: '2',
+          countryName: 'China'
+        },
+        {
+          countryCode: '3',
+          countryName: 'Belarus'
+        }
+      ]
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161002.vue b/.history/pages/users_20220822161002.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd3c4ac17b43e49a31baa302a9809bc564570642
--- /dev/null
+++ b/.history/pages/users_20220822161002.vue
@@ -0,0 +1,339 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161108.vue b/.history/pages/users_20220822161108.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2db9fd15df0bf38973908da926c3b4d1d8556340
--- /dev/null
+++ b/.history/pages/users_20220822161108.vue
@@ -0,0 +1,341 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161139.vue b/.history/pages/users_20220822161139.vue
new file mode 100644
index 0000000000000000000000000000000000000000..084c8f15f9007bbfe7c401b57bccdc0e4014dc96
--- /dev/null
+++ b/.history/pages/users_20220822161139.vue
@@ -0,0 +1,341 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: [],
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161154.vue b/.history/pages/users_20220822161154.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4950d5cd7daec734bbf9f3ec12592d6a336b2abd
--- /dev/null
+++ b/.history/pages/users_20220822161154.vue
@@ -0,0 +1,340 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: [],
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161531.vue b/.history/pages/users_20220822161531.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2dc7a7400673c23c6efdf766b09cfa95f5ec649b
--- /dev/null
+++ b/.history/pages/users_20220822161531.vue
@@ -0,0 +1,342 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: [],
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161557.vue b/.history/pages/users_20220822161557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3fca17ff00f3b471b7546f24f09c55b8311bd938
--- /dev/null
+++ b/.history/pages/users_20220822161557.vue
@@ -0,0 +1,343 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+    div {{selected}}
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: [],
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161612.vue b/.history/pages/users_20220822161612.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cdf30234dd4565db5d0b83e48e36721f2637239b
--- /dev/null
+++ b/.history/pages/users_20220822161612.vue
@@ -0,0 +1,343 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+    div {{selected}}
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: {},
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161719.vue b/.history/pages/users_20220822161719.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e6d78759a3bf9efe4e45ffb8e1070477a5de53bc
--- /dev/null
+++ b/.history/pages/users_20220822161719.vue
@@ -0,0 +1,345 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+    div {{selected}}
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822161821.vue b/.history/pages/users_20220822161821.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e76514588d5594135b8d79774f914ae421c656a8
--- /dev/null
+++ b/.history/pages/users_20220822161821.vue
@@ -0,0 +1,344 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162408.vue b/.history/pages/users_20220822162408.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f72999a403767e8559a1dc134ced22ac066e74a9
--- /dev/null
+++ b/.history/pages/users_20220822162408.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .vs__search {
+      padding: 5px 10px;
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162434.vue b/.history/pages/users_20220822162434.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f72999a403767e8559a1dc134ced22ac066e74a9
--- /dev/null
+++ b/.history/pages/users_20220822162434.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .vs__search {
+      padding: 5px 10px;
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162441.vue b/.history/pages/users_20220822162441.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd98f24bc63a7411cdd3e02836e64e6cc24f2d1b
--- /dev/null
+++ b/.history/pages/users_20220822162441.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .vs__search {
+      padding: 5px 10px !important;
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162516.vue b/.history/pages/users_20220822162516.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8de5c0cd2e0cb7a72d3ed47663245fee87b6b0c8
--- /dev/null
+++ b/.history/pages/users_20220822162516.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      padding: 5px 10px !important;
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162557.vue b/.history/pages/users_20220822162557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95b3b5b394fb229afd42d4e08bb510d067214899
--- /dev/null
+++ b/.history/pages/users_20220822162557.vue
@@ -0,0 +1,347 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 180px;
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162617.vue b/.history/pages/users_20220822162617.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e06b5df1ef8849d2938144613f2f6460a6cb01c4
--- /dev/null
+++ b/.history/pages/users_20220822162617.vue
@@ -0,0 +1,349 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 180px;
+      padding: 0;
+      margin: 0;
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162650.vue b/.history/pages/users_20220822162650.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d894ba78c28db6accfdbdf694198af487dee2ef0
--- /dev/null
+++ b/.history/pages/users_20220822162650.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 180px;
+      padding: 0;
+      margin: 0;
+      .vs__search {
+        width: 180px;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162744.vue b/.history/pages/users_20220822162744.vue
new file mode 100644
index 0000000000000000000000000000000000000000..faef5ab30843c45bef57338063d24ea935b623a1
--- /dev/null
+++ b/.history/pages/users_20220822162744.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      padding: 0;
+      margin: 0;
+      .vs__search {
+        width: 205px;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162759.vue b/.history/pages/users_20220822162759.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94de3f22fff4410e8cec0af401bb6f83b2e79ef1
--- /dev/null
+++ b/.history/pages/users_20220822162759.vue
@@ -0,0 +1,350 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      .vs__search {
+        width: 205px;
+      }
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822162815.vue b/.history/pages/users_20220822162815.vue
new file mode 100644
index 0000000000000000000000000000000000000000..97ce861dd86f6f01f3c4a671d66a7752f32803a0
--- /dev/null
+++ b/.history/pages/users_20220822162815.vue
@@ -0,0 +1,351 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      .vs__search {
+        width: 205px;
+      }
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163218.vue b/.history/pages/users_20220822163218.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fc5ff0edc33316b118e9db546a0bd1b65625761e
--- /dev/null
+++ b/.history/pages/users_20220822163218.vue
@@ -0,0 +1,352 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      .vs__search {
+        width: 205px;
+        padding: 0.75rem 1rem;
+      }
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163258.vue b/.history/pages/users_20220822163258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3af4f51e25010ba17e31c6f886ba9c848eab3aa0
--- /dev/null
+++ b/.history/pages/users_20220822163258.vue
@@ -0,0 +1,355 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      .vs__selected-options{
+        .vs__search {
+        width: 205px;
+        padding: 0.75rem 1rem;
+      }
+      }
+
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163311.vue b/.history/pages/users_20220822163311.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f832450510633bfee7d0048a01fe1680e784e37
--- /dev/null
+++ b/.history/pages/users_20220822163311.vue
@@ -0,0 +1,356 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      .vs__selected-options{
+        hui
+        .vs__search {
+        width: 205px;
+        padding: 0.75rem 1rem;
+      }
+      }
+
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163345.vue b/.history/pages/users_20220822163345.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0a015408a038ed6ec40d138ad86cce27a075b13
--- /dev/null
+++ b/.history/pages/users_20220822163345.vue
@@ -0,0 +1,359 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      vs__dropdown-toggle{
+        .vs__selected-options{
+        hui
+        .vs__search {
+          width: 205px;
+          padding: 0.75rem 1rem;
+        }
+      }
+      }
+
+
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163349.vue b/.history/pages/users_20220822163349.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c192eacfb5208a1140eda5924ec11ecdd5da941f
--- /dev/null
+++ b/.history/pages/users_20220822163349.vue
@@ -0,0 +1,359 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      .vs__dropdown-toggle{
+        .vs__selected-options{
+        hui
+        .vs__search {
+          width: 205px;
+          padding: 0.75rem 1rem;
+        }
+      }
+      }
+
+
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163446.vue b/.history/pages/users_20220822163446.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a115507d1b603e29f69a7fa2bd9f987c8b4af81
--- /dev/null
+++ b/.history/pages/users_20220822163446.vue
@@ -0,0 +1,359 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      .vs__dropdown-toggle{
+        .vs__selected-options{
+        hui
+        .vs__search {
+          width: 205px;
+          padding: 0.75rem 1rem !important;
+        }
+      }
+      }
+
+
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163501.vue b/.history/pages/users_20220822163501.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d40b601740382f8ade55432353c6267436cea737
--- /dev/null
+++ b/.history/pages/users_20220822163501.vue
@@ -0,0 +1,360 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      hui
+      .vs__dropdown-toggle{
+        .vs__selected-options{
+        hui
+        .vs__search {
+          width: 205px;
+          padding: 0.75rem 1rem !important;
+        }
+      }
+      }
+
+
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163735.vue b/.history/pages/users_20220822163735.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c58d64eb0dd9ae94162b8a95d0c1d4a6af1537f
--- /dev/null
+++ b/.history/pages/users_20220822163735.vue
@@ -0,0 +1,360 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+      hui:abs($number: 0)
+      .vs__dropdown-toggle{
+        .vs__selected-options{
+        hui:abs($number: 0)
+        .vs__search {
+          width: 205px;
+          padding: 0.75rem 1rem !important;
+        }
+      }
+      }
+
+
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822163756.vue b/.history/pages/users_20220822163756.vue
new file mode 100644
index 0000000000000000000000000000000000000000..397b10965d865799c0cee5dc0881d7105a4acc63
--- /dev/null
+++ b/.history/pages/users_20220822163756.vue
@@ -0,0 +1,348 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    .v-select {
+      width: 205px;
+      position: relative;
+    }
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/pages/users_20220822164026.vue b/.history/pages/users_20220822164026.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ccf2f95634a9dd9c8cef57a7d455c931b3b3be50
--- /dev/null
+++ b/.history/pages/users_20220822164026.vue
@@ -0,0 +1,350 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+  }
+</style>
diff --git a/.history/pages/users_20220822164046.vue b/.history/pages/users_20220822164046.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d137e4a525c35c8204a4ee416520c3f6e520537
--- /dev/null
+++ b/.history/pages/users_20220822164046.vue
@@ -0,0 +1,351 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+  }
+</style>
diff --git a/.history/pages/users_20220822164116.vue b/.history/pages/users_20220822164116.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b06c56851bfd992bd72c94c27d3d15b64591e2e3
--- /dev/null
+++ b/.history/pages/users_20220822164116.vue
@@ -0,0 +1,351 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: absolute;
+  }
+</style>
diff --git a/.history/pages/users_20220822164142.vue b/.history/pages/users_20220822164142.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d137e4a525c35c8204a4ee416520c3f6e520537
--- /dev/null
+++ b/.history/pages/users_20220822164142.vue
@@ -0,0 +1,351 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+  }
+</style>
diff --git a/.history/pages/users_20220822164223.vue b/.history/pages/users_20220822164223.vue
new file mode 100644
index 0000000000000000000000000000000000000000..01cfbd654e428f715fc2c240658339b2a50e378c
--- /dev/null
+++ b/.history/pages/users_20220822164223.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+    .vs__dropdown-toggle {
+      padding: 5px 10px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164259.vue b/.history/pages/users_20220822164259.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c4d34d0ca90d59cc9218aa9c67c4178566ef3a70
--- /dev/null
+++ b/.history/pages/users_20220822164259.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 5px 0 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164318.vue b/.history/pages/users_20220822164318.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48ac52dc8d19df50ddae4457cd76763dd703a869
--- /dev/null
+++ b/.history/pages/users_20220822164318.vue
@@ -0,0 +1,354 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164340.vue b/.history/pages/users_20220822164340.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b956f9ef63841694a20d86442761d54112d4c68
--- /dev/null
+++ b/.history/pages/users_20220822164340.vue
@@ -0,0 +1,357 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        position: absolute;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164359.vue b/.history/pages/users_20220822164359.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c77f5486bf7ad24368db0df336074310c3e9152b
--- /dev/null
+++ b/.history/pages/users_20220822164359.vue
@@ -0,0 +1,356 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164446.vue b/.history/pages/users_20220822164446.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1058ca58944280b3babc8ef6455e1b82ea419696
--- /dev/null
+++ b/.history/pages/users_20220822164446.vue
@@ -0,0 +1,362 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 205px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164538.vue b/.history/pages/users_20220822164538.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b7d8535a6469cd37bd21448b82cd281dc6255fd
--- /dev/null
+++ b/.history/pages/users_20220822164538.vue
@@ -0,0 +1,362 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164600.vue b/.history/pages/users_20220822164600.vue
new file mode 100644
index 0000000000000000000000000000000000000000..69af00e399a0da62cb5439eed76449cc14514d07
--- /dev/null
+++ b/.history/pages/users_20220822164600.vue
@@ -0,0 +1,363 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164639.vue b/.history/pages/users_20220822164639.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7708d744664f31a5b677512c40ee224197ea8582
--- /dev/null
+++ b/.history/pages/users_20220822164639.vue
@@ -0,0 +1,364 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          width: 100%;
+          height: 18px;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164707.vue b/.history/pages/users_20220822164707.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a36a47d4b00750767414dccd51d745fab824ec1
--- /dev/null
+++ b/.history/pages/users_20220822164707.vue
@@ -0,0 +1,367 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+        }
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164723.vue b/.history/pages/users_20220822164723.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26b5ca74250ec2ab2440a6635cbeaabdc026aa2a
--- /dev/null
+++ b/.history/pages/users_20220822164723.vue
@@ -0,0 +1,368 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164802.vue b/.history/pages/users_20220822164802.vue
new file mode 100644
index 0000000000000000000000000000000000000000..12a244b45d7974ae2398a36f2bbad9640852c81f
--- /dev/null
+++ b/.history/pages/users_20220822164802.vue
@@ -0,0 +1,371 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+        .vs__actions {
+          position: absolute;
+        }
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164846.vue b/.history/pages/users_20220822164846.vue
new file mode 100644
index 0000000000000000000000000000000000000000..995f4ea31a14cb4021ac4898ef51d1477e6a95cd
--- /dev/null
+++ b/.history/pages/users_20220822164846.vue
@@ -0,0 +1,371 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164922.vue b/.history/pages/users_20220822164922.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6d373d45aa7b2831836f1647b19a5409ce9571c2
--- /dev/null
+++ b/.history/pages/users_20220822164922.vue
@@ -0,0 +1,374 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822164936.vue b/.history/pages/users_20220822164936.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6c18fee37f055613fa9832c808c861774e2cd55
--- /dev/null
+++ b/.history/pages/users_20220822164936.vue
@@ -0,0 +1,376 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 5px;
+          left: 5px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165006.vue b/.history/pages/users_20220822165006.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a18a380877ebcc375400858328ac991fa235a8d
--- /dev/null
+++ b/.history/pages/users_20220822165006.vue
@@ -0,0 +1,376 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 10px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165013.vue b/.history/pages/users_20220822165013.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1e7c5c591ed699f00fd6f2526d4b4b9ee3470d14
--- /dev/null
+++ b/.history/pages/users_20220822165013.vue
@@ -0,0 +1,376 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165047.vue b/.history/pages/users_20220822165047.vue
new file mode 100644
index 0000000000000000000000000000000000000000..193564d98690cac5a5e1232d499131148fe607d7
--- /dev/null
+++ b/.history/pages/users_20220822165047.vue
@@ -0,0 +1,378 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165118.vue b/.history/pages/users_20220822165118.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6da8ce5c292f82e055383c1956b67361fe5f223
--- /dev/null
+++ b/.history/pages/users_20220822165118.vue
@@ -0,0 +1,378 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 12px;
+        right: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165158.vue b/.history/pages/users_20220822165158.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d19d213dcbcd70e16850613aa74a6a0d9b4585d1
--- /dev/null
+++ b/.history/pages/users_20220822165158.vue
@@ -0,0 +1,378 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165429.vue b/.history/pages/users_20220822165429.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9e60d2cd60f6086308d38d23ccb04771d4fa5303
--- /dev/null
+++ b/.history/pages/users_20220822165429.vue
@@ -0,0 +1,381 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165455.vue b/.history/pages/users_20220822165455.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eb6fd032d34bdcee264f0af776fb69165e9a4654
--- /dev/null
+++ b/.history/pages/users_20220822165455.vue
@@ -0,0 +1,382 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      list-style: none;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165510.vue b/.history/pages/users_20220822165510.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f8d280418bab2d07852c4d9fc0af11be8acc5c9
--- /dev/null
+++ b/.history/pages/users_20220822165510.vue
@@ -0,0 +1,383 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      list-style: none;
+      background: #fff;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165525.vue b/.history/pages/users_20220822165525.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7fa9b7f1882698a79f9e7e9e3e2e82d1683b9877
--- /dev/null
+++ b/.history/pages/users_20220822165525.vue
@@ -0,0 +1,383 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      list-style: none;
+      background: #ccc;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165557.vue b/.history/pages/users_20220822165557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68790e998adeffa537cb2e02bcf2446c50df11f3
--- /dev/null
+++ b/.history/pages/users_20220822165557.vue
@@ -0,0 +1,384 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      list-style: none;
+      background: #ccc;
+      width: 165px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165629.vue b/.history/pages/users_20220822165629.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56f981ae04ae64d3cc20ce65fa9d21653c09c469
--- /dev/null
+++ b/.history/pages/users_20220822165629.vue
@@ -0,0 +1,386 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      list-style: none;
+      background: #ccc;
+      width: 165px;
+      padding: 0;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165644.vue b/.history/pages/users_20220822165644.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f4cdef31f46d842e6c5f622d958d65c633f2d0f
--- /dev/null
+++ b/.history/pages/users_20220822165644.vue
@@ -0,0 +1,387 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 2px;
+      list-style: none;
+      background: #ccc;
+      width: 165px;
+      padding: 0;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165653.vue b/.history/pages/users_20220822165653.vue
new file mode 100644
index 0000000000000000000000000000000000000000..93367f21a1a82490c543dcf4fd28c16668b9c766
--- /dev/null
+++ b/.history/pages/users_20220822165653.vue
@@ -0,0 +1,387 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #ccc;
+      width: 165px;
+      padding: 0;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165709.vue b/.history/pages/users_20220822165709.vue
new file mode 100644
index 0000000000000000000000000000000000000000..302b70990aa15d19daad9bf1cf2d5b04b0fb0ff7
--- /dev/null
+++ b/.history/pages/users_20220822165709.vue
@@ -0,0 +1,387 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #ccc;
+      width: 165px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165719.vue b/.history/pages/users_20220822165719.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7e7f05ed4e1ac3f08ccb3a79e0f79a833fd1559
--- /dev/null
+++ b/.history/pages/users_20220822165719.vue
@@ -0,0 +1,387 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #ccc;
+      width: 155px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165727.vue b/.history/pages/users_20220822165727.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5f6f7c562d341b401c5ead2b63fdd4c6e580760
--- /dev/null
+++ b/.history/pages/users_20220822165727.vue
@@ -0,0 +1,387 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #ccc;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165801.vue b/.history/pages/users_20220822165801.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f4d259d13adc6822ce6fffe69deafe3e3b45e85
--- /dev/null
+++ b/.history/pages/users_20220822165801.vue
@@ -0,0 +1,389 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #FFFFFF;
+      border: 1px solid #C5DFDE;
+      border-radius: 20px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165813.vue b/.history/pages/users_20220822165813.vue
new file mode 100644
index 0000000000000000000000000000000000000000..41472cb99639c5bb957f45d38d8623ce184dd224
--- /dev/null
+++ b/.history/pages/users_20220822165813.vue
@@ -0,0 +1,389 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #FFFFFF;
+      border: 1px solid #C5DFDE;
+      border-radius: 10px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165838.vue b/.history/pages/users_20220822165838.vue
new file mode 100644
index 0000000000000000000000000000000000000000..57cccde958b2dc7e25c4f868a6e6d6215899d84d
--- /dev/null
+++ b/.history/pages/users_20220822165838.vue
@@ -0,0 +1,389 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #C5DFDE;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822165950.vue b/.history/pages/users_20220822165950.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f8e4299e1b183f8a6f8d8a3b6090d5722891a061
--- /dev/null
+++ b/.history/pages/users_20220822165950.vue
@@ -0,0 +1,389 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      list-style: none;
+      background: #C5DFDE;
+      border: 1px solid #9bafaf;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170011.vue b/.history/pages/users_20220822170011.vue
new file mode 100644
index 0000000000000000000000000000000000000000..989e30acee97ed9be13e8b6f95065ff19f43c713
--- /dev/null
+++ b/.history/pages/users_20220822170011.vue
@@ -0,0 +1,390 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: -5px;
+      list-style: none;
+      background: #C5DFDE;
+      border: 1px solid #9bafaf;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170028.vue b/.history/pages/users_20220822170028.vue
new file mode 100644
index 0000000000000000000000000000000000000000..13bf339a6a033a8f36c94415c1246daf15afcd81
--- /dev/null
+++ b/.history/pages/users_20220822170028.vue
@@ -0,0 +1,390 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: 0px;
+      list-style: none;
+      background: #C5DFDE;
+      border: 1px solid #9bafaf;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170054.vue b/.history/pages/users_20220822170054.vue
new file mode 100644
index 0000000000000000000000000000000000000000..69f4d862b92cd9af13224a596020db14522f2bad
--- /dev/null
+++ b/.history/pages/users_20220822170054.vue
@@ -0,0 +1,393 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: 0px;
+      list-style: none;
+      background: #C5DFDE;
+      border: 1px solid #9bafaf;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170113.vue b/.history/pages/users_20220822170113.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05e9de4ef9c57d2b8d29c2dfda1dd50c7f41f000
--- /dev/null
+++ b/.history/pages/users_20220822170113.vue
@@ -0,0 +1,393 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: 0px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170140.vue b/.history/pages/users_20220822170140.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b007dc02058d34a2e06c7b669b78ef33bdb4e594
--- /dev/null
+++ b/.history/pages/users_20220822170140.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: 0px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      height: 100%;
+      max-height: 300px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170200.vue b/.history/pages/users_20220822170200.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa9cd36702204f0f5b0b89dc48f87e0626f8c513
--- /dev/null
+++ b/.history/pages/users_20220822170200.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: 0px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      height: 100%;
+      max-height: 400px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170216.vue b/.history/pages/users_20220822170216.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ce89fd6f839d60c9cac6c4ddf2a33b9bdba00ce
--- /dev/null
+++ b/.history/pages/users_20220822170216.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: 0px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      height: 100%;
+      max-height: 500px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170238.vue b/.history/pages/users_20220822170238.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05e9de4ef9c57d2b8d29c2dfda1dd50c7f41f000
--- /dev/null
+++ b/.history/pages/users_20220822170238.vue
@@ -0,0 +1,393 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      bottom: 0px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170256.vue b/.history/pages/users_20220822170256.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d9002eafa3dfd4c4d9dd94590f65685889f6451f
--- /dev/null
+++ b/.history/pages/users_20220822170256.vue
@@ -0,0 +1,393 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 0px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170321.vue b/.history/pages/users_20220822170321.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b67832daa00fe490ed164f81017967513c3191a0
--- /dev/null
+++ b/.history/pages/users_20220822170321.vue
@@ -0,0 +1,393 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 145px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170333.vue b/.history/pages/users_20220822170333.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83c0c31260fc2d9f013733a8e4b96f9a65887986
--- /dev/null
+++ b/.history/pages/users_20220822170333.vue
@@ -0,0 +1,393 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170348.vue b/.history/pages/users_20220822170348.vue
new file mode 100644
index 0000000000000000000000000000000000000000..729b067b37f193cb2e6b1497587b22e7093873cc
--- /dev/null
+++ b/.history/pages/users_20220822170348.vue
@@ -0,0 +1,394 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170403.vue b/.history/pages/users_20220822170403.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f4084b19448747ded916c812fa90aa68aaff1a7
--- /dev/null
+++ b/.history/pages/users_20220822170403.vue
@@ -0,0 +1,394 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 15px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170409.vue b/.history/pages/users_20220822170409.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c059188c22e583ec88d8cd8e0f32ab04ef47534e
--- /dev/null
+++ b/.history/pages/users_20220822170409.vue
@@ -0,0 +1,394 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 5px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170447.vue b/.history/pages/users_20220822170447.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea7e6c2de65e42677902ab1e6dbeaaa8070199e3
--- /dev/null
+++ b/.history/pages/users_20220822170447.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 5px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170524.vue b/.history/pages/users_20220822170524.vue
new file mode 100644
index 0000000000000000000000000000000000000000..91fde226f4fc4a8154018f6fb5a16ad88de025d4
--- /dev/null
+++ b/.history/pages/users_20220822170524.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 0px;
+      left: 30px;
+      right: 30px;
+
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170641.vue b/.history/pages/users_20220822170641.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b2c13f5381b11db493addba225c39b1e91ba7d89
--- /dev/null
+++ b/.history/pages/users_20220822170641.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 0px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170650.vue b/.history/pages/users_20220822170650.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7299e28796bfc9717851f0bf72249372a140449a
--- /dev/null
+++ b/.history/pages/users_20220822170650.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 5px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822170658.vue b/.history/pages/users_20220822170658.vue
new file mode 100644
index 0000000000000000000000000000000000000000..954d82b79512456b15f3173e569d60027ac59db7
--- /dev/null
+++ b/.history/pages/users_20220822170658.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'}]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171248.vue b/.history/pages/users_20220822171248.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2275bde44cb69c0b6ee659dd2abc47e1dfd5711b
--- /dev/null
+++ b/.history/pages/users_20220822171248.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171307.vue b/.history/pages/users_20220822171307.vue
new file mode 100644
index 0000000000000000000000000000000000000000..69beb8fd9acf2688c78a1cddb77f2f336434338c
--- /dev/null
+++ b/.history/pages/users_20220822171307.vue
@@ -0,0 +1,395 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171343.vue b/.history/pages/users_20220822171343.vue
new file mode 100644
index 0000000000000000000000000000000000000000..261c3f2e810760b97b642391838e0cf05a78383c
--- /dev/null
+++ b/.history/pages/users_20220822171343.vue
@@ -0,0 +1,397 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100%;
+      max-height: 400px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171400.vue b/.history/pages/users_20220822171400.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b9dd6de0b58998395871a8baf2b912553e2bcd9
--- /dev/null
+++ b/.history/pages/users_20220822171400.vue
@@ -0,0 +1,396 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171414.vue b/.history/pages/users_20220822171414.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21f61bd9b622dc65e6f3fdbcf21d3b4c15746a67
--- /dev/null
+++ b/.history/pages/users_20220822171414.vue
@@ -0,0 +1,398 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171427.vue b/.history/pages/users_20220822171427.vue
new file mode 100644
index 0000000000000000000000000000000000000000..533215e02fcf8ebe994b13d87a7f4b8aab5ecf53
--- /dev/null
+++ b/.history/pages/users_20220822171427.vue
@@ -0,0 +1,398 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171449.vue b/.history/pages/users_20220822171449.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1199288380bc8df4987cfeb43512594171db8d51
--- /dev/null
+++ b/.history/pages/users_20220822171449.vue
@@ -0,0 +1,398 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China',]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171454.vue b/.history/pages/users_20220822171454.vue
new file mode 100644
index 0000000000000000000000000000000000000000..155b5e6e8b1155901bb33bc66dd428c6d177da11
--- /dev/null
+++ b/.history/pages/users_20220822171454.vue
@@ -0,0 +1,398 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171550.vue b/.history/pages/users_20220822171550.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4cf9d8f1f9f59fbffa846cc4eb5c75e9281ca88d
--- /dev/null
+++ b/.history/pages/users_20220822171550.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar{
+        width: 5px;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171613.vue b/.history/pages/users_20220822171613.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f22913481f8d51ee67ebdac33fb9fb113d7259d7
--- /dev/null
+++ b/.history/pages/users_20220822171613.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar{
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171619.vue b/.history/pages/users_20220822171619.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c0e02874bf4d679f7b94ae19e361de21902b781
--- /dev/null
+++ b/.history/pages/users_20220822171619.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar{
+        width: 0 !important;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171638.vue b/.history/pages/users_20220822171638.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6fe9bd36d607bd3be6e261c6b2296cbdcf3de2f1
--- /dev/null
+++ b/.history/pages/users_20220822171638.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar{
+        width: 0 !important;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171727.vue b/.history/pages/users_20220822171727.vue
new file mode 100644
index 0000000000000000000000000000000000000000..23783cb7f5519b9ea90cd322d2db1258b8f9b13c
--- /dev/null
+++ b/.history/pages/users_20220822171727.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      .vs__dropdown-menu::-webkit-scrollbar{
+        width: 0 !important;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171833.vue b/.history/pages/users_20220822171833.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e561a5e1bf27010fab1f3273daac0b278a46ab7
--- /dev/null
+++ b/.history/pages/users_20220822171833.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar{
+        background-color: #fff;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822171932.vue b/.history/pages/users_20220822171932.vue
new file mode 100644
index 0000000000000000000000000000000000000000..207893e9b863fbb867de428e128f07ff127eacf6
--- /dev/null
+++ b/.history/pages/users_20220822171932.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172240.vue b/.history/pages/users_20220822172240.vue
new file mode 100644
index 0000000000000000000000000000000000000000..207893e9b863fbb867de428e128f07ff127eacf6
--- /dev/null
+++ b/.history/pages/users_20220822172240.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},{label:'China', code: 'chi'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172257.vue b/.history/pages/users_20220822172257.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9532abbc3105aa9c0b099a1c507a3d7134a7d65
--- /dev/null
+++ b/.history/pages/users_20220822172257.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 400px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172311.vue b/.history/pages/users_20220822172311.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4811b52092ee3e880dd9297290eafc745a4aab46
--- /dev/null
+++ b/.history/pages/users_20220822172311.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 200px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172320.vue b/.history/pages/users_20220822172320.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f85f531bf0af4702eb8ac0daeffa9b7f1f480b29
--- /dev/null
+++ b/.history/pages/users_20220822172320.vue
@@ -0,0 +1,401 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      overflow: hidden;
+      overflow-y: scroll;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172415.vue b/.history/pages/users_20220822172415.vue
new file mode 100644
index 0000000000000000000000000000000000000000..614b7bc3d03a80b47efd24ff5cd06c54367e52a8
--- /dev/null
+++ b/.history/pages/users_20220822172415.vue
@@ -0,0 +1,399 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172453.vue b/.history/pages/users_20220822172453.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d12f99e07e05e456236171c508e6a22ac55373af
--- /dev/null
+++ b/.history/pages/users_20220822172453.vue
@@ -0,0 +1,399 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172653.vue b/.history/pages/users_20220822172653.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4a3ebb7e321102daa0e5fc836755ed94a98584ab
--- /dev/null
+++ b/.history/pages/users_20220822172653.vue
@@ -0,0 +1,405 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172712.vue b/.history/pages/users_20220822172712.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bedb0c3e91ae50b5cc091104ba7eecf5fc5ebba3
--- /dev/null
+++ b/.history/pages/users_20220822172712.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 10px;
+          height: 10px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172721.vue b/.history/pages/users_20220822172721.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c4b64d826eebe8cc2c72a73ff4dcf7bf0697722
--- /dev/null
+++ b/.history/pages/users_20220822172721.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 40px;
+          height: 40px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172747.vue b/.history/pages/users_20220822172747.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f49691270527282f0de56172e4e2c439d85a799
--- /dev/null
+++ b/.history/pages/users_20220822172747.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 30px;
+          height: 30px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172757.vue b/.history/pages/users_20220822172757.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6710d223981fb59dfe0c691d49234b7b9ad0ab84
--- /dev/null
+++ b/.history/pages/users_20220822172757.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 20px;
+          height: 20px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172806.vue b/.history/pages/users_20220822172806.vue
new file mode 100644
index 0000000000000000000000000000000000000000..941365637d567426413ea678b51753df35857c03
--- /dev/null
+++ b/.history/pages/users_20220822172806.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 22px;
+          height: 22px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172814.vue b/.history/pages/users_20220822172814.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2096359f1ea1c2d6d861da761d873b81c783d58b
--- /dev/null
+++ b/.history/pages/users_20220822172814.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172901.vue b/.history/pages/users_20220822172901.vue
new file mode 100644
index 0000000000000000000000000000000000000000..98d9f2e471aa7caae4771b6ff0752b48d8b27df7
--- /dev/null
+++ b/.history/pages/users_20220822172901.vue
@@ -0,0 +1,410 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          svg {
+            color: rgba(0, 0, 0, 0.87);
+          }
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172911.vue b/.history/pages/users_20220822172911.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90a297bda0a7e80ef7aeb55455e0a7e64814af48
--- /dev/null
+++ b/.history/pages/users_20220822172911.vue
@@ -0,0 +1,410 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          svg {
+            color: rgba(0, 0, 0, 0.6);
+          }
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172921.vue b/.history/pages/users_20220822172921.vue
new file mode 100644
index 0000000000000000000000000000000000000000..de041d8f48ce223be409072717e1d2301cb67f28
--- /dev/null
+++ b/.history/pages/users_20220822172921.vue
@@ -0,0 +1,410 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          svg {
+            color: rgba(0, 255, 0, 0.6);
+          }
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172931.vue b/.history/pages/users_20220822172931.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d826ab240b6908176533324953f32d0477211b3a
--- /dev/null
+++ b/.history/pages/users_20220822172931.vue
@@ -0,0 +1,410 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          svg path {
+            color: rgba(0, 255, 0, 0.6);
+          }
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822172947.vue b/.history/pages/users_20220822172947.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2096359f1ea1c2d6d861da761d873b81c783d58b
--- /dev/null
+++ b/.history/pages/users_20220822172947.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822173106.vue b/.history/pages/users_20220822173106.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f71d268a703998b4369aa0d1715234d65093bfb1
--- /dev/null
+++ b/.history/pages/users_20220822173106.vue
@@ -0,0 +1,408 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+       placeholer='Account Type'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822173303.vue b/.history/pages/users_20220822173303.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b587a45f18e50ea85747ffb56f1c5bf8de20787
--- /dev/null
+++ b/.history/pages/users_20220822173303.vue
@@ -0,0 +1,408 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Belarus', code: 'bel'},{label:'China', code: 'chi'},{label:'Russia', code: 'ru'},{label:'Serbia', code: 'se'},]"
+      :value="selected"
+       @input="setSelected"
+       placeholder='Account Type'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822173442.vue b/.history/pages/users_20220822173442.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3eec3e844dc6e088b976111a9d2fb77776b74606
--- /dev/null
+++ b/.history/pages/users_20220822173442.vue
@@ -0,0 +1,408 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selected"
+       @input="setSelected"
+       placeholder='Account Type'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selected: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelected(value) {
+      this.selected = value
+    },
+
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822173723.vue b/.history/pages/users_20220822173723.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59bf62d9ae8663e35a468c2b4b6f269edb34f7ae
--- /dev/null
+++ b/.history/pages/users_20220822173723.vue
@@ -0,0 +1,415 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174034.vue b/.history/pages/users_20220822174034.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5268d5c67a76b34c3dd6b4e7a0492038eed20058
--- /dev/null
+++ b/.history/pages/users_20220822174034.vue
@@ -0,0 +1,427 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174104.vue b/.history/pages/users_20220822174104.vue
new file mode 100644
index 0000000000000000000000000000000000000000..de87ba3dd9dfdb2f2cf51a7e71e3952a690a1c95
--- /dev/null
+++ b/.history/pages/users_20220822174104.vue
@@ -0,0 +1,427 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='Account Type'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174121.vue b/.history/pages/users_20220822174121.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff7cba47e8ea0bd1083009cb137bbac30abd10b3
--- /dev/null
+++ b/.history/pages/users_20220822174121.vue
@@ -0,0 +1,427 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174215.vue b/.history/pages/users_20220822174215.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5dba6da0d416c8b538002908ac84ea36a1d95049
--- /dev/null
+++ b/.history/pages/users_20220822174215.vue
@@ -0,0 +1,430 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      accountStatus: null,
+      accountType: null,
+      fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174517.vue b/.history/pages/users_20220822174517.vue
new file mode 100644
index 0000000000000000000000000000000000000000..078b9c2b7c6fc84fb2a5cc7e3f533489c4a75546
--- /dev/null
+++ b/.history/pages/users_20220822174517.vue
@@ -0,0 +1,434 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      accountStatus: null,
+      accountType: null,
+      fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${fromAtoZ}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174529.vue b/.history/pages/users_20220822174529.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3bd0de09100c1fa3217641cfdd7e4f33de20cab5
--- /dev/null
+++ b/.history/pages/users_20220822174529.vue
@@ -0,0 +1,434 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      accountStatus: null,
+      accountType: null,
+      fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.fromAtoZ}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174559.vue b/.history/pages/users_20220822174559.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eaa7f75b0d2144af8cfc5c67879964fd7ff4bff9
--- /dev/null
+++ b/.history/pages/users_20220822174559.vue
@@ -0,0 +1,440 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      accountStatus: null,
+      accountType: null,
+      fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.fromAtoZ}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(err => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174610.vue b/.history/pages/users_20220822174610.vue
new file mode 100644
index 0000000000000000000000000000000000000000..79de9791d4222f46f11388de088b5e7375e1301e
--- /dev/null
+++ b/.history/pages/users_20220822174610.vue
@@ -0,0 +1,440 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      accountStatus: null,
+      accountType: null,
+      fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.fromAtoZ}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174647.vue b/.history/pages/users_20220822174647.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3c831a782e4778b7e70af95e660501757ebaefc1
--- /dev/null
+++ b/.history/pages/users_20220822174647.vue
@@ -0,0 +1,440 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174711.vue b/.history/pages/users_20220822174711.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4ae22478abe39736a7b2ab418bb3a98f51d5d1b
--- /dev/null
+++ b/.history/pages/users_20220822174711.vue
@@ -0,0 +1,440 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174855.vue b/.history/pages/users_20220822174855.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b76151001974702fa49c571aa7a294820df056c
--- /dev/null
+++ b/.history/pages/users_20220822174855.vue
@@ -0,0 +1,440 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code?this.selectedFromAtoZ.code:'ASC'}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822174923.vue b/.history/pages/users_20220822174923.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4ae22478abe39736a7b2ab418bb3a98f51d5d1b
--- /dev/null
+++ b/.history/pages/users_20220822174923.vue
@@ -0,0 +1,440 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175157.vue b/.history/pages/users_20220822175157.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7802c0476ce7f1750e0e04e8c397f78e608931e5
--- /dev/null
+++ b/.history/pages/users_20220822175157.vue
@@ -0,0 +1,441 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175225.vue b/.history/pages/users_20220822175225.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48ea316156cea60ee383e508e1c11b4f9b3c0bc8
--- /dev/null
+++ b/.history/pages/users_20220822175225.vue
@@ -0,0 +1,442 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+          user-select: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175232.vue b/.history/pages/users_20220822175232.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7802c0476ce7f1750e0e04e8c397f78e608931e5
--- /dev/null
+++ b/.history/pages/users_20220822175232.vue
@@ -0,0 +1,441 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175544.vue b/.history/pages/users_20220822175544.vue
new file mode 100644
index 0000000000000000000000000000000000000000..919f4b4476c823ad2c50de7d3934712cd4eb38b2
--- /dev/null
+++ b/.history/pages/users_20220822175544.vue
@@ -0,0 +1,445 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+      setTimeout(() => {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+        .then(response => {
+          this.usersList = response.data.data
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      },500)
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175641.vue b/.history/pages/users_20220822175641.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dfea49420118c811fe8a1efca76736526d27114d
--- /dev/null
+++ b/.history/pages/users_20220822175641.vue
@@ -0,0 +1,448 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+            this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175708.vue b/.history/pages/users_20220822175708.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51a97ff00b55a5e3bbc5ee2884635a19d06b2977
--- /dev/null
+++ b/.history/pages/users_20220822175708.vue
@@ -0,0 +1,452 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175853.vue b/.history/pages/users_20220822175853.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7d19173aea259ee849f036c2a50318f048c51e72
--- /dev/null
+++ b/.history/pages/users_20220822175853.vue
@@ -0,0 +1,457 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175939.vue b/.history/pages/users_20220822175939.vue
new file mode 100644
index 0000000000000000000000000000000000000000..491e076939307e212f4d3dbf9fdae04c23416b64
--- /dev/null
+++ b/.history/pages/users_20220822175939.vue
@@ -0,0 +1,462 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 80px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822175945.vue b/.history/pages/users_20220822175945.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb131aba95782aa8768ad724b773c12a0f28bc20
--- /dev/null
+++ b/.history/pages/users_20220822175945.vue
@@ -0,0 +1,462 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822180001.vue b/.history/pages/users_20220822180001.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d936bea4744d9dac79e547b5933b44e98714a9ca
--- /dev/null
+++ b/.history/pages/users_20220822180001.vue
@@ -0,0 +1,462 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.twoItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822180033.vue b/.history/pages/users_20220822180033.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e1554de41898c293cf1974e179635a1bc725277
--- /dev/null
+++ b/.history/pages/users_20220822180033.vue
@@ -0,0 +1,462 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+      // accountStatus: null,
+      // accountType: null,
+      // fromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822180044.vue b/.history/pages/users_20220822180044.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7edaf6c318c5293e4b721d35f45413527be8affd
--- /dev/null
+++ b/.history/pages/users_20220822180044.vue
@@ -0,0 +1,459 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super Coach'},{label:'Super Athlete', code: 'Super Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822180920.vue b/.history/pages/users_20220822180920.vue
new file mode 100644
index 0000000000000000000000000000000000000000..696d6197ecbfe517142e9003352ed5049ac8d8f3
--- /dev/null
+++ b/.history/pages/users_20220822180920.vue
@@ -0,0 +1,518 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code == 'Basic') {
+        await await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code != 'Basic')&&(this.selectedAccountStatus == null || this.selectedFromAtoZ == null)) {
+        await await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822180949.vue b/.history/pages/users_20220822180949.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd8971169fb2889970719041e830c8a855f440fa
--- /dev/null
+++ b/.history/pages/users_20220822180949.vue
@@ -0,0 +1,518 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code == 'Basic') {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code != 'Basic')&&(this.selectedAccountStatus == null || this.selectedFromAtoZ == null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822181017.vue b/.history/pages/users_20220822181017.vue
new file mode 100644
index 0000000000000000000000000000000000000000..78e4e7577dbdcc55b8b3dfd2bfabb1a187802156
--- /dev/null
+++ b/.history/pages/users_20220822181017.vue
@@ -0,0 +1,501 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    async setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code == 'Basic') {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code != 'Basic')&&(this.selectedAccountStatus == null || this.selectedFromAtoZ == null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822181034.vue b/.history/pages/users_20220822181034.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d78c99ad8a6cca5832e35d001989eacf8cc7ae95
--- /dev/null
+++ b/.history/pages/users_20220822181034.vue
@@ -0,0 +1,501 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Basic', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    async setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code === 'Basic') {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountStatus == null || this.selectedFromAtoZ == null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822181140.vue b/.history/pages/users_20220822181140.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ad262c81166f2ec888479f8f4d1c699ea2c3cf9
--- /dev/null
+++ b/.history/pages/users_20220822181140.vue
@@ -0,0 +1,501 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'All', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    async setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code === 'Basic') {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountStatus == null || this.selectedFromAtoZ == null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822181318.vue b/.history/pages/users_20220822181318.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e13a22554b5a8cd2e177035c5e5e4c3f0e40413e
--- /dev/null
+++ b/.history/pages/users_20220822181318.vue
@@ -0,0 +1,519 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'All', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    async setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code === 'Basic') {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountType == null || this.selectedFromAtoZ == null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountType !== null || this.selectedFromAtoZ == null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220822181449.vue b/.history/pages/users_20220822181449.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60aca85b44f54a5db43298cd8e18fd62d8acc0ae
--- /dev/null
+++ b/.history/pages/users_20220822181449.vue
@@ -0,0 +1,519 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'All', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    try {
+      this.reloading = true
+      const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+      setTimeout(
+        () => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        }, 500
+      )
+      this.reloading = false
+    } catch (error) {
+      this.$ctoast.replace('Error', {
+        title: `[Error]: ${error}`,
+        type: 'error'
+      })
+    }
+  },
+  methods: {
+    selectedMatrix(option) {
+      this.currentCategoryMatrix.data.id = option.id
+      this.clusterSelectedData = option
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    async setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code === 'Basic') {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountType === null || this.selectedFromAtoZ === null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountType !== null || this.selectedFromAtoZ === null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+
+
+    },
+    parseSearch(data) {
+      this.search = data
+    },
+    async PagePP() {
+      try {
+        this.reloading = true
+        this.page++
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async PageMM() {
+      try {
+        this.reloading = true
+        this.page--
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    },
+    async paginateBtn(index) {
+      try {
+        this.reloading = true
+        this.page = index+1
+        this.$refs['users-loader'].status = true
+        const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+        setTimeout(
+          () => {
+            this.usersList = res.data.data
+            this.$ctoast.replace('Loaded', {
+              title: 'Reloaded',
+              type: 'success'
+            })
+            this.$refs['users-loader'].status = false
+          }, 300
+        )
+
+        this.reloading = false
+      } catch (error) {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/plugins/components_20220822154910.js b/.history/plugins/components_20220822154910.js
new file mode 100644
index 0000000000000000000000000000000000000000..bbbfa34c2455334e36900cd81063b4db3983335d
--- /dev/null
+++ b/.history/plugins/components_20220822154910.js
@@ -0,0 +1,86 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+// UI
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+
+
+
+Vue.use(vSelect, {
+  componentPrefix:'point'
+})
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/.history/plugins/components_20220822155019.js b/.history/plugins/components_20220822155019.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b8542e10c26f5b79406064c6a37328dac54ef02
--- /dev/null
+++ b/.history/plugins/components_20220822155019.js
@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+// UI
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+import Vuelidate from "vuelidate"
+import PointSelect from 'vue-select'
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+Vue.component('PointSelect', PointSelect)
+
+
+
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/.history/plugins/components_20220822160221.js b/.history/plugins/components_20220822160221.js
new file mode 100644
index 0000000000000000000000000000000000000000..23bef2b3c74377a7f2f9a4e5339522b30fd0a1f6
--- /dev/null
+++ b/.history/plugins/components_20220822160221.js
@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+// UI
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+Vue.component('vSelect', vSelect);
+
+
+
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/components/global/is-navbar.vue b/components/global/is-navbar.vue
index ddd5d369c2b20d2300e420479908361ab0c11e05..9b434dfbdf01b246575c733ee5ef62be69e6aa3d 100644
--- a/components/global/is-navbar.vue
+++ b/components/global/is-navbar.vue
@@ -53,11 +53,12 @@ export default {
     this.title = this.parsePageName(this.$nuxt.$route.name)
     await this.$axios.get('/api/users/me')
       .then(response => {
-        this.defaultPreview = false
-        this.showPreview = true
-        this.imagePreview = response.data.photos[0].link
-
-
+        if (response.data.photos[0].link == '') this.defaultPreview = true
+        else {
+          this.defaultPreview = false
+          this.showPreview = true
+          this.imagePreview = response.data.photos[0].link
+        }
       })
       .catch(err => {
         this.$ctoast.replace('Error', {
diff --git a/components/global/is-select.vue b/components/global/is-select.vue
index 480e9e9ae7e1fc4aaf97cce81a4616c933a0a41f..718a35866e5e1dec34ac00c04ca37de8b2acc005 100644
--- a/components/global/is-select.vue
+++ b/components/global/is-select.vue
@@ -1,4 +1,14 @@
-<template lang="pug">
+
+
+
+
+
+
+
+
+
+
+<!-- <template lang="pug">
 div(
   :id="`is-select-${selectData.id_attr}`"
   class="is-select btn"
@@ -170,4 +180,4 @@ export default {
     }
   }
 }
-</style>
+</style> -->
diff --git a/components/global/modals/is-modal.vue b/components/global/modals/is-modal.vue
index 9c1e4b2c1d7804dc2bcc18e464d7385130d8ff99..0b8aac9ca02343b2af74671f0491ed526dcb2540 100644
--- a/components/global/modals/is-modal.vue
+++ b/components/global/modals/is-modal.vue
@@ -264,7 +264,6 @@ export default {
   height: 100vh;
   cursor: pointer;
   display: block;
-  background-image: url();
 
   &.show {
     transition: visibility .3s, background-color .3s;
diff --git a/package-lock.json b/package-lock.json
index 092003714dd70e6226ac8e85254d35c7c2272eff..34d9ee8c6a44cf04cd3b0bca7aa8218aba0a2e83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16775,6 +16775,11 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.4.tgz",
       "integrity": "sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ=="
     },
+    "vue-select": {
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.20.0.tgz",
+      "integrity": "sha512-Qau4BzpgAC+/9jM5oTlOrfA81ONdtTFH6PqeSDKvIB56f1F6EbIR8qAotpUxrIiNVppyPFjvVDkyriMfHjWBQA=="
+    },
     "vue-server-renderer": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.14.tgz",
diff --git a/package.json b/package.json
index 037b212e02a6b55279ec825399e5b18bf6d23606..b02df1c0ffc5f0254965364cbbd2974f8185d777 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "v-calendar": "^2.4.1",
     "vue": "^2.6.14",
     "vue-cookie": "^1.1.4",
+    "vue-select": "^3.20.0",
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
     "vuelidate": "^0.7.7",
diff --git a/pages/users.vue b/pages/users.vue
index 82842734e9cef281a448db0139f84a7ad74bf5da..60aca85b44f54a5db43298cd8e18fd62d8acc0ae 100644
--- a/pages/users.vue
+++ b/pages/users.vue
@@ -10,11 +10,28 @@
       :is-required="true"
       @input='parseSearch'
     )
-    is-select(
-      :select-data="currentCategoryMatrix"
-      :selected-item="clusterSelectedData"
-      @select="selectedMatrix"
-
+    //- is-select(
+    //-   :select-data="currentCategoryMatrix"
+    //-   :selected-item="clusterSelectedData"
+    //-   @select="selectedMatrix"
+    //- )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: 'All'},]"
+      :value="selectedAccountType"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'All', code: 'Basic'},{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},]"
+      :value="selectedAccountStatus"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
     )
   .inner
     table
@@ -42,10 +59,11 @@
         span
           fai(icon="chevron-left")
       .isPagination
-        is-button(
+        button(
           v-for="(pager, index) in numOfPage"
           :key="index"
-        ) {{pager}}: {{index+1}}
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
       is-button.next(
         title="Следующая страница"
         :is-function='PagePP'
@@ -84,34 +102,9 @@ export default {
       last_page: null,
       search: '',
       range: {},
-      currentCategoryMatrix: {
-        id_attr: 'matrix',
-        placeholder: 'Выберите матрицу',
-        borderBottom: true,
-        centered: true,
-        customColor: true,
-        data: [
-          { 1: '1' },
-          { 2: '2' },
-          { 3: '3' }
-        ]
-      },
-      clusterSelectedData: {},
-      // selectedItem: {},
-      // selectData: {
-      //   id_attr: 'learn',
-      //   placeholder: 'choose',
-      //   btnEnabled: false,
-      //   btnName: '',
-      //   borderBottom: true,
-      //   centered: true,
-      //   customColor: true,
-      //   data: [
-      //     {1: '1'},
-      //     {2: '2'},
-      //     {3: '3'}
-      //   ]
-      // }
+      selectedAccountType: null,
+      selectedAccountStatus: null,
+      selectedFromAtoZ: null,
     }
   },
   head() {
@@ -156,8 +149,96 @@ export default {
       this.currentCategoryMatrix.data.id = option.id
       this.clusterSelectedData = option
     },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value
+    },
+    async setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value
+      this.$refs['users-loader'].status = true
+
+      if (this.selectedAccountStatus.code === 'Basic') {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      } else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountType === null || this.selectedFromAtoZ === null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }else if ((this.selectedAccountStatus.code !== 'Basic')&&(this.selectedAccountType !== null || this.selectedFromAtoZ === null)) {
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus.code}&sort_by_name=ASC`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
+      }
+
+
+
+    },
+    async setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value
+      this.$refs['users-loader'].status = true
+
+        await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ.code}`)
+          .then(response => {
+            setTimeout(() => {
+              this.usersList = response.data.data
+              this.$ctoast.replace('Loaded', {
+                title: 'Reloaded',
+                type: 'success'
+              })
+              this.$refs['users-loader'].status = false
+          },500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        })
 
 
+    },
     parseSearch(data) {
       this.search = data
     },
@@ -212,9 +293,10 @@ export default {
         })
       }
     },
-    async pagination() {
+    async paginateBtn(index) {
       try {
         this.reloading = true
+        this.page = index+1
         this.$refs['users-loader'].status = true
         const res = await this.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=ASC`)
         setTimeout(
@@ -247,13 +329,14 @@ export default {
   background: #FFFFFF;
   .flex {
     display: flex;
+    margin-bottom: 10px;
   }
     .posa {
       position: absolute;
-      bottom: 20px;
+      bottom: 10px;
       left: 30px;
       right: 30px;
-
+      height: 40px;
       .flex {
         width: 100%;
         display: flex;
@@ -262,6 +345,28 @@ export default {
         .isPagination {
           width: 100%;
           text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
         }
 
         .is-button {
@@ -293,19 +398,42 @@ export default {
       td,
       th {
         padding: 6px 18px;
+
         font-size: 12px;
         border: #C5DFDE 1px solid;
       }
       td {
         padding: 2px 18px;
+        height: 28.5px;
       }
       thead {
         width: 100%;
         th:nth-child(1) {
-          width: 12px !important;
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
         }
         th:nth-child(9) {
-          width: 12px !important;
+          width: 40px !important;
         }
       }
       tbody {
@@ -317,3 +445,75 @@ export default {
   }
 }
 </style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/plugins/components.js b/plugins/components.js
index b9da4d2fba4e52e696d219e0144dbabba991d14e..23bef2b3c74377a7f2f9a4e5339522b30fd0a1f6 100644
--- a/plugins/components.js
+++ b/plugins/components.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VCalendar from 'v-calendar'
-import Vuelidate from "vuelidate"
+
 
 // Reusable SFC's
 // Usability
@@ -38,7 +38,8 @@ import IsThead from '~/components/global/table/is-thead'
 // UI
 import IsTooltip from '~/components/global/is-tooltip'
 import IsLoader from '~/components/global/is-loader'
-
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
 
 // Pages components
 
@@ -68,7 +69,7 @@ Vue.component('IsModalCalendar', IsModalCalendar)
 Vue.component('IsTooltip', IsTooltip)
 Vue.component('IsLoader', IsLoader)
 Vue.component('IsSelect', IsSelect)
-
+Vue.component('vSelect', vSelect);