From 379102baa5f40ff7302abc1e9135ccbfa177ca90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9A=D1=83=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D1=81=D0=BA=D0=B8=D0=B9?= <abundancia.modesta@vk.com>
Date: Mon, 22 Aug 2022 18:35:49 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=B0=D1=87=D0=B0=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/scss/_default_20220822172142.scss  |  79 +++
 .../assets/scss/_default_20220822172200.scss  |  79 +++
 .../assets/scss/_default_20220822172209.scss  |  79 +++
 .../assets/scss/_default_20220822172222.scss  |  79 +++
 .../assets/scss/_default_20220822172235.scss  |  73 +++
 .../global/is-navbar_20220822140733.vue       | 139 ++++
 .../global/is-select_20220822154447.vue       | 183 ++++++
 .../global/modals/is-modal_20220822163640.vue | 615 ++++++++++++++++++
 .history/pages/users_20220822151321.vue       | 320 +++++++++
 .history/pages/users_20220822151431.vue       | 321 +++++++++
 .history/pages/users_20220822151725.vue       | 296 +++++++++
 .history/pages/users_20220822151812.vue       | 321 +++++++++
 .history/pages/users_20220822151831.vue       | 321 +++++++++
 .history/pages/users_20220822151854.vue       | 321 +++++++++
 .history/pages/users_20220822151936.vue       | 324 +++++++++
 .history/pages/users_20220822152150.vue       | 340 ++++++++++
 .history/pages/users_20220822152212.vue       | 342 ++++++++++
 .history/pages/users_20220822152516.vue       | 343 ++++++++++
 .history/pages/users_20220822152545.vue       | 343 ++++++++++
 .history/pages/users_20220822152619.vue       | 344 ++++++++++
 .history/pages/users_20220822152633.vue       | 344 ++++++++++
 .history/pages/users_20220822152648.vue       | 344 ++++++++++
 .history/pages/users_20220822152655.vue       | 344 ++++++++++
 .history/pages/users_20220822152709.vue       | 344 ++++++++++
 .history/pages/users_20220822152715.vue       | 344 ++++++++++
 .history/pages/users_20220822152813.vue       | 344 ++++++++++
 .history/pages/users_20220822152851.vue       | 347 ++++++++++
 .history/pages/users_20220822152928.vue       | 347 ++++++++++
 .history/pages/users_20220822152932.vue       | 347 ++++++++++
 .history/pages/users_20220822152938.vue       | 347 ++++++++++
 .history/pages/users_20220822152949.vue       | 347 ++++++++++
 .history/pages/users_20220822153012.vue       | 347 ++++++++++
 .history/pages/users_20220822153023.vue       | 347 ++++++++++
 .history/pages/users_20220822153028.vue       | 347 ++++++++++
 .history/pages/users_20220822153033.vue       | 347 ++++++++++
 .history/pages/users_20220822153045.vue       | 350 ++++++++++
 .history/pages/users_20220822153102.vue       | 353 ++++++++++
 .history/pages/users_20220822153120.vue       | 356 ++++++++++
 .history/pages/users_20220822153127.vue       | 356 ++++++++++
 .history/pages/users_20220822153136.vue       | 359 ++++++++++
 .history/pages/users_20220822153152.vue       | 362 +++++++++++
 .history/pages/users_20220822153205.vue       | 362 +++++++++++
 .history/pages/users_20220822153404.vue       | 362 +++++++++++
 .history/pages/users_20220822153446.vue       | 365 +++++++++++
 .history/pages/users_20220822153453.vue       | 365 +++++++++++
 .history/pages/users_20220822155958.vue       | 344 ++++++++++
 .history/pages/users_20220822160248.vue       | 344 ++++++++++
 .history/pages/users_20220822160309.vue       | 344 ++++++++++
 .history/pages/users_20220822160554.vue       | 354 ++++++++++
 .history/pages/users_20220822160618.vue       | 354 ++++++++++
 .history/pages/users_20220822160636.vue       | 354 ++++++++++
 .history/pages/users_20220822161002.vue       | 339 ++++++++++
 .history/pages/users_20220822161108.vue       | 341 ++++++++++
 .history/pages/users_20220822161139.vue       | 341 ++++++++++
 .history/pages/users_20220822161154.vue       | 340 ++++++++++
 .history/pages/users_20220822161531.vue       | 342 ++++++++++
 .history/pages/users_20220822161557.vue       | 343 ++++++++++
 .history/pages/users_20220822161612.vue       | 343 ++++++++++
 .history/pages/users_20220822161719.vue       | 345 ++++++++++
 .history/pages/users_20220822161821.vue       | 344 ++++++++++
 .history/pages/users_20220822162408.vue       | 347 ++++++++++
 .history/pages/users_20220822162434.vue       | 347 ++++++++++
 .history/pages/users_20220822162441.vue       | 347 ++++++++++
 .history/pages/users_20220822162516.vue       | 347 ++++++++++
 .history/pages/users_20220822162557.vue       | 347 ++++++++++
 .history/pages/users_20220822162617.vue       | 349 ++++++++++
 .history/pages/users_20220822162650.vue       | 354 ++++++++++
 .history/pages/users_20220822162744.vue       | 354 ++++++++++
 .history/pages/users_20220822162759.vue       | 350 ++++++++++
 .history/pages/users_20220822162815.vue       | 351 ++++++++++
 .history/pages/users_20220822163218.vue       | 352 ++++++++++
 .history/pages/users_20220822163258.vue       | 355 ++++++++++
 .history/pages/users_20220822163311.vue       | 356 ++++++++++
 .history/pages/users_20220822163345.vue       | 359 ++++++++++
 .history/pages/users_20220822163349.vue       | 359 ++++++++++
 .history/pages/users_20220822163446.vue       | 359 ++++++++++
 .history/pages/users_20220822163501.vue       | 360 ++++++++++
 .history/pages/users_20220822163735.vue       | 360 ++++++++++
 .history/pages/users_20220822163756.vue       | 348 ++++++++++
 .history/pages/users_20220822164026.vue       | 350 ++++++++++
 .history/pages/users_20220822164046.vue       | 351 ++++++++++
 .history/pages/users_20220822164116.vue       | 351 ++++++++++
 .history/pages/users_20220822164142.vue       | 351 ++++++++++
 .history/pages/users_20220822164223.vue       | 354 ++++++++++
 .history/pages/users_20220822164259.vue       | 354 ++++++++++
 .history/pages/users_20220822164318.vue       | 354 ++++++++++
 .history/pages/users_20220822164340.vue       | 357 ++++++++++
 .history/pages/users_20220822164359.vue       | 356 ++++++++++
 .history/pages/users_20220822164446.vue       | 362 +++++++++++
 .history/pages/users_20220822164538.vue       | 362 +++++++++++
 .history/pages/users_20220822164600.vue       | 363 +++++++++++
 .history/pages/users_20220822164639.vue       | 364 +++++++++++
 .history/pages/users_20220822164707.vue       | 367 +++++++++++
 .history/pages/users_20220822164723.vue       | 368 +++++++++++
 .history/pages/users_20220822164802.vue       | 371 +++++++++++
 .history/pages/users_20220822164846.vue       | 371 +++++++++++
 .history/pages/users_20220822164922.vue       | 374 +++++++++++
 .history/pages/users_20220822164936.vue       | 376 +++++++++++
 .history/pages/users_20220822165006.vue       | 376 +++++++++++
 .history/pages/users_20220822165013.vue       | 376 +++++++++++
 .history/pages/users_20220822165047.vue       | 378 +++++++++++
 .history/pages/users_20220822165118.vue       | 378 +++++++++++
 .history/pages/users_20220822165158.vue       | 378 +++++++++++
 .history/pages/users_20220822165429.vue       | 381 +++++++++++
 .history/pages/users_20220822165455.vue       | 382 +++++++++++
 .history/pages/users_20220822165510.vue       | 383 +++++++++++
 .history/pages/users_20220822165525.vue       | 383 +++++++++++
 .history/pages/users_20220822165557.vue       | 384 +++++++++++
 .history/pages/users_20220822165629.vue       | 386 +++++++++++
 .history/pages/users_20220822165644.vue       | 387 +++++++++++
 .history/pages/users_20220822165653.vue       | 387 +++++++++++
 .history/pages/users_20220822165709.vue       | 387 +++++++++++
 .history/pages/users_20220822165719.vue       | 387 +++++++++++
 .history/pages/users_20220822165727.vue       | 387 +++++++++++
 .history/pages/users_20220822165801.vue       | 389 +++++++++++
 .history/pages/users_20220822165813.vue       | 389 +++++++++++
 .history/pages/users_20220822165838.vue       | 389 +++++++++++
 .history/pages/users_20220822165950.vue       | 389 +++++++++++
 .history/pages/users_20220822170011.vue       | 390 +++++++++++
 .history/pages/users_20220822170028.vue       | 390 +++++++++++
 .history/pages/users_20220822170054.vue       | 393 +++++++++++
 .history/pages/users_20220822170113.vue       | 393 +++++++++++
 .history/pages/users_20220822170140.vue       | 395 +++++++++++
 .history/pages/users_20220822170200.vue       | 395 +++++++++++
 .history/pages/users_20220822170216.vue       | 395 +++++++++++
 .history/pages/users_20220822170238.vue       | 393 +++++++++++
 .history/pages/users_20220822170256.vue       | 393 +++++++++++
 .history/pages/users_20220822170321.vue       | 393 +++++++++++
 .history/pages/users_20220822170333.vue       | 393 +++++++++++
 .history/pages/users_20220822170348.vue       | 394 +++++++++++
 .history/pages/users_20220822170403.vue       | 394 +++++++++++
 .history/pages/users_20220822170409.vue       | 394 +++++++++++
 .history/pages/users_20220822170447.vue       | 395 +++++++++++
 .history/pages/users_20220822170524.vue       | 395 +++++++++++
 .history/pages/users_20220822170641.vue       | 395 +++++++++++
 .history/pages/users_20220822170650.vue       | 395 +++++++++++
 .history/pages/users_20220822170658.vue       | 395 +++++++++++
 .history/pages/users_20220822171248.vue       | 395 +++++++++++
 .history/pages/users_20220822171307.vue       | 395 +++++++++++
 .history/pages/users_20220822171343.vue       | 397 +++++++++++
 .history/pages/users_20220822171400.vue       | 396 +++++++++++
 .history/pages/users_20220822171414.vue       | 398 ++++++++++++
 .history/pages/users_20220822171427.vue       | 398 ++++++++++++
 .history/pages/users_20220822171449.vue       | 398 ++++++++++++
 .history/pages/users_20220822171454.vue       | 398 ++++++++++++
 .history/pages/users_20220822171550.vue       | 401 ++++++++++++
 .history/pages/users_20220822171613.vue       | 401 ++++++++++++
 .history/pages/users_20220822171619.vue       | 401 ++++++++++++
 .history/pages/users_20220822171638.vue       | 401 ++++++++++++
 .history/pages/users_20220822171727.vue       | 401 ++++++++++++
 .history/pages/users_20220822171833.vue       | 401 ++++++++++++
 .history/pages/users_20220822171932.vue       | 401 ++++++++++++
 .history/pages/users_20220822172240.vue       | 401 ++++++++++++
 .history/pages/users_20220822172257.vue       | 401 ++++++++++++
 .history/pages/users_20220822172311.vue       | 401 ++++++++++++
 .history/pages/users_20220822172320.vue       | 401 ++++++++++++
 .history/pages/users_20220822172415.vue       | 399 ++++++++++++
 .history/pages/users_20220822172453.vue       | 399 ++++++++++++
 .history/pages/users_20220822172653.vue       | 405 ++++++++++++
 .history/pages/users_20220822172712.vue       | 407 ++++++++++++
 .history/pages/users_20220822172721.vue       | 407 ++++++++++++
 .history/pages/users_20220822172747.vue       | 407 ++++++++++++
 .history/pages/users_20220822172757.vue       | 407 ++++++++++++
 .history/pages/users_20220822172806.vue       | 407 ++++++++++++
 .history/pages/users_20220822172814.vue       | 407 ++++++++++++
 .history/pages/users_20220822172901.vue       | 410 ++++++++++++
 .history/pages/users_20220822172911.vue       | 410 ++++++++++++
 .history/pages/users_20220822172921.vue       | 410 ++++++++++++
 .history/pages/users_20220822172931.vue       | 410 ++++++++++++
 .history/pages/users_20220822172947.vue       | 407 ++++++++++++
 .history/pages/users_20220822173106.vue       | 408 ++++++++++++
 .history/pages/users_20220822173303.vue       | 408 ++++++++++++
 .history/pages/users_20220822173442.vue       | 408 ++++++++++++
 .history/pages/users_20220822173723.vue       | 415 ++++++++++++
 .history/pages/users_20220822174034.vue       | 427 ++++++++++++
 .history/pages/users_20220822174104.vue       | 427 ++++++++++++
 .history/pages/users_20220822174121.vue       | 427 ++++++++++++
 .history/pages/users_20220822174215.vue       | 430 ++++++++++++
 .history/pages/users_20220822174517.vue       | 434 ++++++++++++
 .history/pages/users_20220822174529.vue       | 434 ++++++++++++
 .history/pages/users_20220822174559.vue       | 440 +++++++++++++
 .history/pages/users_20220822174610.vue       | 440 +++++++++++++
 .history/pages/users_20220822174647.vue       | 440 +++++++++++++
 .history/pages/users_20220822174711.vue       | 440 +++++++++++++
 .history/pages/users_20220822174855.vue       | 440 +++++++++++++
 .history/pages/users_20220822174923.vue       | 440 +++++++++++++
 .history/pages/users_20220822175157.vue       | 441 +++++++++++++
 .history/pages/users_20220822175225.vue       | 442 +++++++++++++
 .history/pages/users_20220822175232.vue       | 441 +++++++++++++
 .history/pages/users_20220822175544.vue       | 445 +++++++++++++
 .history/pages/users_20220822175641.vue       | 448 +++++++++++++
 .history/pages/users_20220822175708.vue       | 452 +++++++++++++
 .history/pages/users_20220822175853.vue       | 457 +++++++++++++
 .history/pages/users_20220822175939.vue       | 462 +++++++++++++
 .history/pages/users_20220822175945.vue       | 462 +++++++++++++
 .history/pages/users_20220822180001.vue       | 462 +++++++++++++
 .history/pages/users_20220822180033.vue       | 462 +++++++++++++
 .history/pages/users_20220822180044.vue       | 459 +++++++++++++
 .history/pages/users_20220822180920.vue       | 518 +++++++++++++++
 .history/pages/users_20220822180949.vue       | 518 +++++++++++++++
 .history/pages/users_20220822181017.vue       | 501 ++++++++++++++
 .history/pages/users_20220822181034.vue       | 501 ++++++++++++++
 .history/pages/users_20220822181140.vue       | 501 ++++++++++++++
 .history/pages/users_20220822181318.vue       | 519 +++++++++++++++
 .history/pages/users_20220822181449.vue       | 519 +++++++++++++++
 .history/plugins/components_20220822154910.js |  86 +++
 .history/plugins/components_20220822155019.js |  84 +++
 .history/plugins/components_20220822160221.js |  84 +++
 components/global/is-navbar.vue               |  11 +-
 components/global/is-select.vue               |  14 +-
 components/global/modals/is-modal.vue         |   1 -
 package-lock.json                             |   5 +
 package.json                                  |   1 +
 pages/users.vue                               | 280 ++++++--
 plugins/components.js                         |   7 +-
 215 files changed, 77592 insertions(+), 51 deletions(-)
 create mode 100644 .history/assets/scss/_default_20220822172142.scss
 create mode 100644 .history/assets/scss/_default_20220822172200.scss
 create mode 100644 .history/assets/scss/_default_20220822172209.scss
 create mode 100644 .history/assets/scss/_default_20220822172222.scss
 create mode 100644 .history/assets/scss/_default_20220822172235.scss
 create mode 100644 .history/components/global/is-navbar_20220822140733.vue
 create mode 100644 .history/components/global/is-select_20220822154447.vue
 create mode 100644 .history/components/global/modals/is-modal_20220822163640.vue
 create mode 100644 .history/pages/users_20220822151321.vue
 create mode 100644 .history/pages/users_20220822151431.vue
 create mode 100644 .history/pages/users_20220822151725.vue
 create mode 100644 .history/pages/users_20220822151812.vue
 create mode 100644 .history/pages/users_20220822151831.vue
 create mode 100644 .history/pages/users_20220822151854.vue
 create mode 100644 .history/pages/users_20220822151936.vue
 create mode 100644 .history/pages/users_20220822152150.vue
 create mode 100644 .history/pages/users_20220822152212.vue
 create mode 100644 .history/pages/users_20220822152516.vue
 create mode 100644 .history/pages/users_20220822152545.vue
 create mode 100644 .history/pages/users_20220822152619.vue
 create mode 100644 .history/pages/users_20220822152633.vue
 create mode 100644 .history/pages/users_20220822152648.vue
 create mode 100644 .history/pages/users_20220822152655.vue
 create mode 100644 .history/pages/users_20220822152709.vue
 create mode 100644 .history/pages/users_20220822152715.vue
 create mode 100644 .history/pages/users_20220822152813.vue
 create mode 100644 .history/pages/users_20220822152851.vue
 create mode 100644 .history/pages/users_20220822152928.vue
 create mode 100644 .history/pages/users_20220822152932.vue
 create mode 100644 .history/pages/users_20220822152938.vue
 create mode 100644 .history/pages/users_20220822152949.vue
 create mode 100644 .history/pages/users_20220822153012.vue
 create mode 100644 .history/pages/users_20220822153023.vue
 create mode 100644 .history/pages/users_20220822153028.vue
 create mode 100644 .history/pages/users_20220822153033.vue
 create mode 100644 .history/pages/users_20220822153045.vue
 create mode 100644 .history/pages/users_20220822153102.vue
 create mode 100644 .history/pages/users_20220822153120.vue
 create mode 100644 .history/pages/users_20220822153127.vue
 create mode 100644 .history/pages/users_20220822153136.vue
 create mode 100644 .history/pages/users_20220822153152.vue
 create mode 100644 .history/pages/users_20220822153205.vue
 create mode 100644 .history/pages/users_20220822153404.vue
 create mode 100644 .history/pages/users_20220822153446.vue
 create mode 100644 .history/pages/users_20220822153453.vue
 create mode 100644 .history/pages/users_20220822155958.vue
 create mode 100644 .history/pages/users_20220822160248.vue
 create mode 100644 .history/pages/users_20220822160309.vue
 create mode 100644 .history/pages/users_20220822160554.vue
 create mode 100644 .history/pages/users_20220822160618.vue
 create mode 100644 .history/pages/users_20220822160636.vue
 create mode 100644 .history/pages/users_20220822161002.vue
 create mode 100644 .history/pages/users_20220822161108.vue
 create mode 100644 .history/pages/users_20220822161139.vue
 create mode 100644 .history/pages/users_20220822161154.vue
 create mode 100644 .history/pages/users_20220822161531.vue
 create mode 100644 .history/pages/users_20220822161557.vue
 create mode 100644 .history/pages/users_20220822161612.vue
 create mode 100644 .history/pages/users_20220822161719.vue
 create mode 100644 .history/pages/users_20220822161821.vue
 create mode 100644 .history/pages/users_20220822162408.vue
 create mode 100644 .history/pages/users_20220822162434.vue
 create mode 100644 .history/pages/users_20220822162441.vue
 create mode 100644 .history/pages/users_20220822162516.vue
 create mode 100644 .history/pages/users_20220822162557.vue
 create mode 100644 .history/pages/users_20220822162617.vue
 create mode 100644 .history/pages/users_20220822162650.vue
 create mode 100644 .history/pages/users_20220822162744.vue
 create mode 100644 .history/pages/users_20220822162759.vue
 create mode 100644 .history/pages/users_20220822162815.vue
 create mode 100644 .history/pages/users_20220822163218.vue
 create mode 100644 .history/pages/users_20220822163258.vue
 create mode 100644 .history/pages/users_20220822163311.vue
 create mode 100644 .history/pages/users_20220822163345.vue
 create mode 100644 .history/pages/users_20220822163349.vue
 create mode 100644 .history/pages/users_20220822163446.vue
 create mode 100644 .history/pages/users_20220822163501.vue
 create mode 100644 .history/pages/users_20220822163735.vue
 create mode 100644 .history/pages/users_20220822163756.vue
 create mode 100644 .history/pages/users_20220822164026.vue
 create mode 100644 .history/pages/users_20220822164046.vue
 create mode 100644 .history/pages/users_20220822164116.vue
 create mode 100644 .history/pages/users_20220822164142.vue
 create mode 100644 .history/pages/users_20220822164223.vue
 create mode 100644 .history/pages/users_20220822164259.vue
 create mode 100644 .history/pages/users_20220822164318.vue
 create mode 100644 .history/pages/users_20220822164340.vue
 create mode 100644 .history/pages/users_20220822164359.vue
 create mode 100644 .history/pages/users_20220822164446.vue
 create mode 100644 .history/pages/users_20220822164538.vue
 create mode 100644 .history/pages/users_20220822164600.vue
 create mode 100644 .history/pages/users_20220822164639.vue
 create mode 100644 .history/pages/users_20220822164707.vue
 create mode 100644 .history/pages/users_20220822164723.vue
 create mode 100644 .history/pages/users_20220822164802.vue
 create mode 100644 .history/pages/users_20220822164846.vue
 create mode 100644 .history/pages/users_20220822164922.vue
 create mode 100644 .history/pages/users_20220822164936.vue
 create mode 100644 .history/pages/users_20220822165006.vue
 create mode 100644 .history/pages/users_20220822165013.vue
 create mode 100644 .history/pages/users_20220822165047.vue
 create mode 100644 .history/pages/users_20220822165118.vue
 create mode 100644 .history/pages/users_20220822165158.vue
 create mode 100644 .history/pages/users_20220822165429.vue
 create mode 100644 .history/pages/users_20220822165455.vue
 create mode 100644 .history/pages/users_20220822165510.vue
 create mode 100644 .history/pages/users_20220822165525.vue
 create mode 100644 .history/pages/users_20220822165557.vue
 create mode 100644 .history/pages/users_20220822165629.vue
 create mode 100644 .history/pages/users_20220822165644.vue
 create mode 100644 .history/pages/users_20220822165653.vue
 create mode 100644 .history/pages/users_20220822165709.vue
 create mode 100644 .history/pages/users_20220822165719.vue
 create mode 100644 .history/pages/users_20220822165727.vue
 create mode 100644 .history/pages/users_20220822165801.vue
 create mode 100644 .history/pages/users_20220822165813.vue
 create mode 100644 .history/pages/users_20220822165838.vue
 create mode 100644 .history/pages/users_20220822165950.vue
 create mode 100644 .history/pages/users_20220822170011.vue
 create mode 100644 .history/pages/users_20220822170028.vue
 create mode 100644 .history/pages/users_20220822170054.vue
 create mode 100644 .history/pages/users_20220822170113.vue
 create mode 100644 .history/pages/users_20220822170140.vue
 create mode 100644 .history/pages/users_20220822170200.vue
 create mode 100644 .history/pages/users_20220822170216.vue
 create mode 100644 .history/pages/users_20220822170238.vue
 create mode 100644 .history/pages/users_20220822170256.vue
 create mode 100644 .history/pages/users_20220822170321.vue
 create mode 100644 .history/pages/users_20220822170333.vue
 create mode 100644 .history/pages/users_20220822170348.vue
 create mode 100644 .history/pages/users_20220822170403.vue
 create mode 100644 .history/pages/users_20220822170409.vue
 create mode 100644 .history/pages/users_20220822170447.vue
 create mode 100644 .history/pages/users_20220822170524.vue
 create mode 100644 .history/pages/users_20220822170641.vue
 create mode 100644 .history/pages/users_20220822170650.vue
 create mode 100644 .history/pages/users_20220822170658.vue
 create mode 100644 .history/pages/users_20220822171248.vue
 create mode 100644 .history/pages/users_20220822171307.vue
 create mode 100644 .history/pages/users_20220822171343.vue
 create mode 100644 .history/pages/users_20220822171400.vue
 create mode 100644 .history/pages/users_20220822171414.vue
 create mode 100644 .history/pages/users_20220822171427.vue
 create mode 100644 .history/pages/users_20220822171449.vue
 create mode 100644 .history/pages/users_20220822171454.vue
 create mode 100644 .history/pages/users_20220822171550.vue
 create mode 100644 .history/pages/users_20220822171613.vue
 create mode 100644 .history/pages/users_20220822171619.vue
 create mode 100644 .history/pages/users_20220822171638.vue
 create mode 100644 .history/pages/users_20220822171727.vue
 create mode 100644 .history/pages/users_20220822171833.vue
 create mode 100644 .history/pages/users_20220822171932.vue
 create mode 100644 .history/pages/users_20220822172240.vue
 create mode 100644 .history/pages/users_20220822172257.vue
 create mode 100644 .history/pages/users_20220822172311.vue
 create mode 100644 .history/pages/users_20220822172320.vue
 create mode 100644 .history/pages/users_20220822172415.vue
 create mode 100644 .history/pages/users_20220822172453.vue
 create mode 100644 .history/pages/users_20220822172653.vue
 create mode 100644 .history/pages/users_20220822172712.vue
 create mode 100644 .history/pages/users_20220822172721.vue
 create mode 100644 .history/pages/users_20220822172747.vue
 create mode 100644 .history/pages/users_20220822172757.vue
 create mode 100644 .history/pages/users_20220822172806.vue
 create mode 100644 .history/pages/users_20220822172814.vue
 create mode 100644 .history/pages/users_20220822172901.vue
 create mode 100644 .history/pages/users_20220822172911.vue
 create mode 100644 .history/pages/users_20220822172921.vue
 create mode 100644 .history/pages/users_20220822172931.vue
 create mode 100644 .history/pages/users_20220822172947.vue
 create mode 100644 .history/pages/users_20220822173106.vue
 create mode 100644 .history/pages/users_20220822173303.vue
 create mode 100644 .history/pages/users_20220822173442.vue
 create mode 100644 .history/pages/users_20220822173723.vue
 create mode 100644 .history/pages/users_20220822174034.vue
 create mode 100644 .history/pages/users_20220822174104.vue
 create mode 100644 .history/pages/users_20220822174121.vue
 create mode 100644 .history/pages/users_20220822174215.vue
 create mode 100644 .history/pages/users_20220822174517.vue
 create mode 100644 .history/pages/users_20220822174529.vue
 create mode 100644 .history/pages/users_20220822174559.vue
 create mode 100644 .history/pages/users_20220822174610.vue
 create mode 100644 .history/pages/users_20220822174647.vue
 create mode 100644 .history/pages/users_20220822174711.vue
 create mode 100644 .history/pages/users_20220822174855.vue
 create mode 100644 .history/pages/users_20220822174923.vue
 create mode 100644 .history/pages/users_20220822175157.vue
 create mode 100644 .history/pages/users_20220822175225.vue
 create mode 100644 .history/pages/users_20220822175232.vue
 create mode 100644 .history/pages/users_20220822175544.vue
 create mode 100644 .history/pages/users_20220822175641.vue
 create mode 100644 .history/pages/users_20220822175708.vue
 create mode 100644 .history/pages/users_20220822175853.vue
 create mode 100644 .history/pages/users_20220822175939.vue
 create mode 100644 .history/pages/users_20220822175945.vue
 create mode 100644 .history/pages/users_20220822180001.vue
 create mode 100644 .history/pages/users_20220822180033.vue
 create mode 100644 .history/pages/users_20220822180044.vue
 create mode 100644 .history/pages/users_20220822180920.vue
 create mode 100644 .history/pages/users_20220822180949.vue
 create mode 100644 .history/pages/users_20220822181017.vue
 create mode 100644 .history/pages/users_20220822181034.vue
 create mode 100644 .history/pages/users_20220822181140.vue
 create mode 100644 .history/pages/users_20220822181318.vue
 create mode 100644 .history/pages/users_20220822181449.vue
 create mode 100644 .history/plugins/components_20220822154910.js
 create mode 100644 .history/plugins/components_20220822155019.js
 create mode 100644 .history/plugins/components_20220822160221.js

diff --git a/.history/assets/scss/_default_20220822172142.scss b/.history/assets/scss/_default_20220822172142.scss
new file mode 100644
index 0000000..1c1a662
--- /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 0000000..17f1d1c
--- /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 0000000..d5f3066
--- /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 0000000..f0fa76b
--- /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 0000000..14070e6
--- /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 0000000..9b434df
--- /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 0000000..718a358
--- /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 0000000..0b8aac9
--- /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 0000000..9ec560f
--- /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 0000000..7f87c3b
--- /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 0000000..4fe33c8
--- /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 0000000..7f87c3b
--- /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 0000000..e980a38
--- /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 0000000..b6c1ff5
--- /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 0000000..ab294e5
--- /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 0000000..e5b13f4
--- /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 0000000..d55e76d
--- /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 0000000..9c8d70c
--- /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 0000000..6ec890e
--- /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 0000000..7c11a4d
--- /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 0000000..56e76db
--- /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 0000000..ec81273
--- /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 0000000..d9589d8
--- /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 0000000..56e76db
--- /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 0000000..b436b47
--- /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 0000000..715d054
--- /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 0000000..3abc830
--- /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 0000000..501d9c1
--- /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 0000000..b626e67
--- /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 0000000..6f9ae1c
--- /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 0000000..e9ef3e3
--- /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 0000000..4287007
--- /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 0000000..25c7fc0
--- /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 0000000..5992520
--- /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 0000000..25c7fc0
--- /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 0000000..833cc7c
--- /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 0000000..153d6be
--- /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 0000000..60f7913
--- /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 0000000..43385cf
--- /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 0000000..58243b8
--- /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 0000000..46b0509
--- /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 0000000..0433657
--- /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 0000000..dbba385
--- /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 0000000..d96da0c
--- /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 0000000..181f5b0
--- /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 0000000..628208f
--- /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 0000000..47bc686
--- /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 0000000..47bc686
--- /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 0000000..3661978
--- /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 0000000..351f44d
--- /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 0000000..9d5f627
--- /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 0000000..cd3c4ac
--- /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 0000000..2db9fd1
--- /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 0000000..084c8f1
--- /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 0000000..4950d5c
--- /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 0000000..2dc7a74
--- /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 0000000..3fca17f
--- /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 0000000..cdf3023
--- /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 0000000..e6d7875
--- /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 0000000..e765145
--- /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 0000000..f72999a
--- /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 0000000..f72999a
--- /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 0000000..bd98f24
--- /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 0000000..8de5c0c
--- /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 0000000..95b3b5b
--- /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 0000000..e06b5df
--- /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 0000000..d894ba7
--- /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 0000000..faef5ab
--- /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 0000000..94de3f2
--- /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 0000000..97ce861
--- /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 0000000..fc5ff0e
--- /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 0000000..3af4f51
--- /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 0000000..2f83245
--- /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 0000000..f0a0154
--- /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 0000000..c192eac
--- /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 0000000..2a11550
--- /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 0000000..d40b601
--- /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 0000000..5c58d64
--- /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 0000000..397b109
--- /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 0000000..ccf2f95
--- /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 0000000..8d137e4
--- /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 0000000..b06c568
--- /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 0000000..8d137e4
--- /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 0000000..01cfbd6
--- /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 0000000..c4d34d0
--- /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 0000000..48ac52d
--- /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 0000000..5b956f9
--- /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 0000000..c77f548
--- /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 0000000..1058ca5
--- /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 0000000..2b7d853
--- /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 0000000..69af00e
--- /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 0000000..7708d74
--- /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 0000000..2a36a47
--- /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 0000000..26b5ca7
--- /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 0000000..12a244b
--- /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 0000000..995f4ea
--- /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 0000000..6d373d4
--- /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 0000000..d6c18fe
--- /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 0000000..2a18a38
--- /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 0000000..1e7c5c5
--- /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 0000000..193564d
--- /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 0000000..a6da8ce
--- /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 0000000..d19d213
--- /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 0000000..9e60d2c
--- /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 0000000..eb6fd03
--- /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 0000000..2f8d280
--- /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 0000000..7fa9b7f
--- /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 0000000..68790e9
--- /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 0000000..56f981a
--- /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 0000000..6f4cdef
--- /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 0000000..93367f2
--- /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 0000000..302b709
--- /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 0000000..e7e7f05
--- /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 0000000..f5f6f7c
--- /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 0000000..6f4d259
--- /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 0000000..41472cb
--- /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 0000000..57cccde
--- /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 0000000..f8e4299
--- /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 0000000..989e30a
--- /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 0000000..13bf339
--- /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 0000000..69f4d86
--- /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 0000000..05e9de4
--- /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 0000000..b007dc0
--- /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 0000000..fa9cd36
--- /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 0000000..3ce89fd
--- /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 0000000..05e9de4
--- /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 0000000..d9002ea
--- /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 0000000..b67832d
--- /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 0000000..83c0c31
--- /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 0000000..729b067
--- /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 0000000..9f4084b
--- /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 0000000..c059188
--- /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 0000000..ea7e6c2
--- /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 0000000..91fde22
--- /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 0000000..b2c13f5
--- /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 0000000..7299e28
--- /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 0000000..954d82b
--- /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 0000000..2275bde
--- /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 0000000..69beb8f
--- /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 0000000..261c3f2
--- /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 0000000..0b9dd6d
--- /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 0000000..21f61bd
--- /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 0000000..533215e
--- /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 0000000..1199288
--- /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 0000000..155b5e6
--- /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 0000000..4cf9d8f
--- /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 0000000..f229134
--- /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 0000000..2c0e028
--- /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 0000000..6fe9bd3
--- /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 0000000..23783cb
--- /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 0000000..6e561a5
--- /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 0000000..207893e
--- /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 0000000..207893e
--- /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 0000000..e9532ab
--- /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 0000000..4811b52
--- /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 0000000..f85f531
--- /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 0000000..614b7bc
--- /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 0000000..d12f99e
--- /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 0000000..4a3ebb7
--- /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 0000000..bedb0c3
--- /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 0000000..1c4b64d
--- /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 0000000..2f49691
--- /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 0000000..6710d22
--- /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 0000000..9413656
--- /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 0000000..2096359
--- /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 0000000..98d9f2e
--- /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 0000000..90a297b
--- /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 0000000..de041d8
--- /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 0000000..d826ab2
--- /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 0000000..2096359
--- /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 0000000..f71d268
--- /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 0000000..9b587a4
--- /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 0000000..3eec3e8
--- /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 0000000..59bf62d
--- /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 0000000..5268d5c
--- /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 0000000..de87ba3
--- /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 0000000..ff7cba4
--- /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 0000000..5dba6da
--- /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 0000000..078b9c2
--- /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 0000000..3bd0de0
--- /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 0000000..eaa7f75
--- /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 0000000..79de979
--- /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 0000000..3c831a7
--- /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 0000000..e4ae224
--- /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 0000000..8b76151
--- /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 0000000..e4ae224
--- /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 0000000..7802c04
--- /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 0000000..48ea316
--- /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 0000000..7802c04
--- /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 0000000..919f4b4
--- /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 0000000..dfea494
--- /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 0000000..51a97ff
--- /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 0000000..7d19173
--- /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 0000000..491e076
--- /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 0000000..fb131ab
--- /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 0000000..d936bea
--- /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 0000000..3e1554d
--- /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 0000000..7edaf6c
--- /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 0000000..696d619
--- /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 0000000..cd89711
--- /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 0000000..78e4e75
--- /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 0000000..d78c99a
--- /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 0000000..5ad262c
--- /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 0000000..e13a225
--- /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 0000000..60aca85
--- /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 0000000..bbbfa34
--- /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 0000000..3b8542e
--- /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 0000000..23bef2b
--- /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 ddd5d36..9b434df 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 480e9e9..718a358 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 9c1e4b2..0b8aac9 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 0920037..34d9ee8 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 037b212..b02df1c 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 8284273..60aca85 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 b9da4d2..23bef2b 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);
 
 
 
-- 
GitLab