From 6dd0b4f02684991917d8b3ab5c38bd193de2df26 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Fri, 21 Aug 2020 16:04:21 +0200
Subject: [PATCH] backend pagination and sorting from laravel database

---
 .../Controllers/Admin/DashboardController.php |   2 +-
 .../Controllers/Admin/PagesController.php     |   2 +-
 app/Http/Controllers/Admin/PlanController.php |   2 +-
 app/Http/Controllers/Admin/UserController.php |   2 +-
 app/Http/Resources/UserResource.php           |  22 +-
 app/Page.php                                  |  14 +
 app/Services/StripeService.php                |   4 +-
 app/User.php                                  |  20 +-
 composer.json                                 |   1 +
 composer.lock                                 |  60 +-
 config/vuefilemanager.php                     |   2 +-
 public/mix-manifest.json                      | 204 ++++-
 .../Admin/WidgetLatestRegistrations.vue       |  26 +-
 .../js/components/Others/Layout/PageTab.vue   |   4 +-
 .../Others/Tables/DatatableWrapper.vue        | 709 ++++++++++--------
 ...barBanner.vue => UpgradeSidebarBanner.vue} |   0
 resources/js/views/Admin/Invoices.vue         |  23 +-
 resources/js/views/Admin/Pages.vue            |  18 +-
 resources/js/views/Admin/Plans.vue            |  48 +-
 .../Admin/Plans/PlanTabs/PlanSubscribers.vue  |  31 +-
 resources/js/views/Admin/Users.vue            |  32 +-
 .../Admin/Users/UserTabs/UserInvoices.vue     |  40 +-
 .../Admin/Users/UserTabs/UserSubscription.vue |   4 +-
 .../AdminAccount.vue                          |   0
 .../{SetupWIzard => SetupWizard}/AppSetup.vue |   0
 .../BillingsDetail.vue                        |   0
 .../{SetupWIzard => SetupWizard}/Database.vue |   0
 .../EnvironmentSetup.vue                      |   0
 .../InstallationDisclaimer.vue                |   0
 .../PurchaseCode.vue                          |   0
 .../StripeCredentials.vue                     |   0
 .../SubscriptionPlans.vue                     |   0
 .../SubscriptionService.vue                   |   0
 resources/js/views/Upgrade/UpgradeBilling.vue |  13 +-
 resources/js/views/User/Invoices.vue          |  31 +-
 resources/js/views/User/PaymentMethods.vue    |  40 +-
 resources/js/views/User/Subscription.vue      |   4 +-
 37 files changed, 853 insertions(+), 505 deletions(-)
 rename resources/js/components/Others/{UpgradeSIdebarBanner.vue => UpgradeSidebarBanner.vue} (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/AdminAccount.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/AppSetup.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/BillingsDetail.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/Database.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/EnvironmentSetup.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/InstallationDisclaimer.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/PurchaseCode.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/StripeCredentials.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/SubscriptionPlans.vue (100%)
 rename resources/js/views/{SetupWIzard => SetupWizard}/SubscriptionService.vue (100%)

diff --git a/app/Http/Controllers/Admin/DashboardController.php b/app/Http/Controllers/Admin/DashboardController.php
index 7999a3b5..10ca9b62 100644
--- a/app/Http/Controllers/Admin/DashboardController.php
+++ b/app/Http/Controllers/Admin/DashboardController.php
@@ -60,7 +60,7 @@ class DashboardController extends Controller
     public function new_registrations()
     {
         return new UsersCollection(
-            User::take(7)->orderByDesc('created_at')->get()
+            User::sortable(['created_at' => 'desc'])->paginate(10)
         );
     }
 }
diff --git a/app/Http/Controllers/Admin/PagesController.php b/app/Http/Controllers/Admin/PagesController.php
index ab523bef..6d076916 100644
--- a/app/Http/Controllers/Admin/PagesController.php
+++ b/app/Http/Controllers/Admin/PagesController.php
@@ -19,7 +19,7 @@ class PagesController extends Controller
     public function index()
     {
         return new PageCollection(
-            Page::all()
+            Page::sortable()->paginate(10)
         );
     }
 
diff --git a/app/Http/Controllers/Admin/PlanController.php b/app/Http/Controllers/Admin/PlanController.php
index 908c22b6..41895859 100644
--- a/app/Http/Controllers/Admin/PlanController.php
+++ b/app/Http/Controllers/Admin/PlanController.php
@@ -153,7 +153,7 @@ class PlanController extends Controller
         $subscribers = Subscription::where('stripe_plan', $id)->pluck('user_id');
 
         return new UsersCollection(
-            User::findMany($subscribers)
+            User::sortable()->findMany($subscribers)
         );
     }
 }
diff --git a/app/Http/Controllers/Admin/UserController.php b/app/Http/Controllers/Admin/UserController.php
index 3911ce03..f8d7218b 100644
--- a/app/Http/Controllers/Admin/UserController.php
+++ b/app/Http/Controllers/Admin/UserController.php
@@ -102,7 +102,7 @@ class UserController extends Controller
     public function users()
     {
         return new UsersCollection(
-            User::all()
+            User::sortable()->paginate('20')
         );
     }
 
diff --git a/app/Http/Resources/UserResource.php b/app/Http/Resources/UserResource.php
index 865d287c..62df61a1 100644
--- a/app/Http/Resources/UserResource.php
+++ b/app/Http/Resources/UserResource.php
@@ -23,17 +23,17 @@ class UserResource extends JsonResource
                 'id'         => (string)$this->id,
                 'type'       => 'user',
                 'attributes' => [
-                    'storage_capacity'        => $this->settings->storage_capacity,
-                    'subscription'            => $this->subscribed('main'),
-                    'incomplete_payment' => $this->hasIncompletePayment('main') ? route('cashier.payment', $this->subscription('main')->latestPayment()->id) : null,
-                    'stripe_customer'         => is_null($this->stripe_id) ? false : true,
-                    'name'                    => $this->name,
-                    'email'                   => env('APP_DEMO') ? obfuscate_email($this->email) : $this->email,
-                    'avatar'                  => $this->avatar,
-                    'role'                    => $this->role,
-                    'created_at_formatted'    => format_date($this->created_at, '%d. %B. %Y'),
-                    'created_at'              => $this->created_at,
-                    'updated_at'              => $this->updated_at,
+                    'storage_capacity'     => $this->settings->storage_capacity,
+                    'subscription'         => $this->subscribed('main'),
+                    'incomplete_payment'   => $this->hasIncompletePayment('main') ? route('cashier.payment', $this->subscription('main')->latestPayment()->id) : null,
+                    'stripe_customer'      => is_null($this->stripe_id) ? false : true,
+                    'name'                 => $this->name,
+                    'email'                => env('APP_DEMO') ? obfuscate_email($this->email) : $this->email,
+                    'avatar'               => $this->avatar,
+                    'role'                 => $this->role,
+                    'created_at_formatted' => format_date($this->created_at, '%d. %B. %Y'),
+                    'created_at'           => $this->created_at,
+                    'updated_at'           => $this->updated_at,
                 ]
             ],
             'relationships' => [
diff --git a/app/Page.php b/app/Page.php
index e227e630..e3e1b8f3 100644
--- a/app/Page.php
+++ b/app/Page.php
@@ -3,9 +3,23 @@
 namespace App;
 
 use Illuminate\Database\Eloquent\Model;
+use Kyslik\ColumnSortable\Sortable;
 
 class Page extends Model
 {
+    use Sortable;
+
+    /**
+     * Sortable columns
+     *
+     * @var string[]
+     */
+    public $sortable = [
+        'title',
+        'slug',
+        'visibility',
+    ];
+
     public $timestamps = false;
 
     protected $guarded = ['id'];
diff --git a/app/Services/StripeService.php b/app/Services/StripeService.php
index 5f8945d9..25d4f717 100644
--- a/app/Services/StripeService.php
+++ b/app/Services/StripeService.php
@@ -380,6 +380,8 @@ class StripeService
      */
     public function getInvoices()
     {
-        return $this->stripe->invoices()->all();
+        return $this->stripe->invoices()->all([
+            'limit' => 20
+        ]);
     }
 }
\ No newline at end of file
diff --git a/app/User.php b/app/User.php
index 0029a4fe..f72abe93 100644
--- a/app/User.php
+++ b/app/User.php
@@ -5,14 +5,12 @@ namespace App;
 use App\Notifications\ResetPassword;
 use App\Notifications\ResetUserPasswordNotification;
 use ByteUnits\Metric;
-use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
-use Illuminate\Support\Facades\Hash;
-use Illuminate\Support\Facades\Notification;
 use Illuminate\Support\Facades\Storage;
 use Laravel\Cashier\Billable;
 use Laravel\Passport\HasApiTokens;
+use Kyslik\ColumnSortable\Sortable;
 use Rinvex\Subscriptions\Traits\HasSubscriptions;
 
 /**
@@ -78,7 +76,7 @@ use Rinvex\Subscriptions\Traits\HasSubscriptions;
  */
 class User extends Authenticatable
 {
-    use HasApiTokens, Notifiable, Billable;
+    use HasApiTokens, Notifiable, Billable, Sortable;
 
     protected $guarded = ['id', 'role'];
 
@@ -113,6 +111,19 @@ class User extends Authenticatable
         'used_capacity', 'storage'
     ];
 
+    /**
+     * Sortable columns
+     *
+     * @var string[]
+     */
+    public $sortable = [
+        'id',
+        'name',
+        'role',
+        'created_at',
+        'storage_capacity',
+    ];
+
     /**
      * Get tax rate id for user
      *
@@ -197,7 +208,6 @@ class User extends Authenticatable
     {
         // Get avatar from external storage
         if ($this->attributes['avatar'] && is_storage_driver(['s3', 'spaces', 'wasabi', 'backblaze'])) {
-
             return Storage::temporaryUrl($this->attributes['avatar'], now()->addDay());
         }
 
diff --git a/composer.json b/composer.json
index d53acfd0..7f377a58 100644
--- a/composer.json
+++ b/composer.json
@@ -15,6 +15,7 @@
         "fruitcake/laravel-cors": "^1.0",
         "gabrielelana/byte-units": "^0.5.0",
         "intervention/image": "^2.5",
+        "kyslik/column-sortable": "^6.3",
         "laravel/cashier": "^12.0",
         "laravel/framework": "^7.0",
         "laravel/passport": "^8.4",
diff --git a/composer.lock b/composer.lock
index e633f387..3f358375 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "c2e0a4adcc267140dcc5f4b1ee31ae2f",
+    "content-hash": "0d1b10acc2a996969b828cc7f51cdee6",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -1467,6 +1467,63 @@
             ],
             "time": "2019-11-02T09:15:47+00:00"
         },
+        {
+            "name": "kyslik/column-sortable",
+            "version": "6.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Kyslik/column-sortable.git",
+                "reference": "9f2ddfabe5cfd9cfd67b15805e2d0de48429c995"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Kyslik/column-sortable/zipball/9f2ddfabe5cfd9cfd67b15805e2d0de48429c995",
+                "reference": "9f2ddfabe5cfd9cfd67b15805e2d0de48429c995",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "5.8.*|^6.0|^7.0",
+                "illuminate/support": "5.8.*|^6.0|^7.0",
+                "php": ">=7.2"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^5.0",
+                "phpunit/phpunit": "^8.5"
+            },
+            "type": "package",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Kyslik\\ColumnSortable\\ColumnSortableServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Kyslik\\ColumnSortable\\": "src/ColumnSortable/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Martin Kiesel",
+                    "email": "martin.kiesel@gmail.com",
+                    "role": "Developer and maintainer"
+                }
+            ],
+            "description": "Package for handling column sorting in Laravel 6.x",
+            "keywords": [
+                "column",
+                "laravel",
+                "sort",
+                "sortable",
+                "sorting"
+            ],
+            "time": "2020-03-08T12:26:23+00:00"
+        },
         {
             "name": "laminas/laminas-diactoros",
             "version": "2.3.1",
@@ -8501,6 +8558,7 @@
             "keywords": [
                 "tokenizer"
             ],
+            "abandoned": true,
             "time": "2019-09-17T06:23:10+00:00"
         },
         {
diff --git a/config/vuefilemanager.php b/config/vuefilemanager.php
index 8d2d7027..e3611542 100644
--- a/config/vuefilemanager.php
+++ b/config/vuefilemanager.php
@@ -2,7 +2,7 @@
 
 return [
 
-    'version'    => '1.7.6',
+    'version'    => '1.7.7',
 
     // Define size of chunk uploaded by MB. E.g. integer 128 means chunk size will be 128MB.
     'chunk_size' => env('CHUNK_SIZE', '128'),
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 6f123fd7..a9fc813b 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,25 +1,36 @@
 {
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js",
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
+    "/js/main.bb4cb0991a6fdce01110.hot-update.js": "/js/main.bb4cb0991a6fdce01110.hot-update.js",
     "/chunks/admin.js": "/chunks/admin.js",
     "/chunks/admin-account.js": "/chunks/admin-account.js",
+    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js",
+    "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js",
+    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/trash.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/trash.js",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js",
     "/chunks/app-billings.js": "/chunks/app-billings.js",
     "/chunks/app-email.js": "/chunks/app-email.js",
     "/chunks/app-index.js": "/chunks/app-index.js",
     "/chunks/app-others.js": "/chunks/app-others.js",
     "/chunks/app-payments.js": "/chunks/app-payments.js",
     "/chunks/app-settings.js": "/chunks/app-settings.js",
+    "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js",
     "/chunks/app-setup.js": "/chunks/app-setup.js",
     "/chunks/billings-detail.js": "/chunks/billings-detail.js",
     "/chunks/contact-us.js": "/chunks/contact-us.js",
+    "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js",
     "/chunks/dashboard.js": "/chunks/dashboard.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js",
     "/chunks/database.js": "/chunks/database.js",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js",
     "/chunks/environment-setup.js": "/chunks/environment-setup.js",
     "/chunks/files.js": "/chunks/files.js",
+    "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js",
     "/chunks/invoices.js": "/chunks/invoices.js",
@@ -34,6 +45,7 @@
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js",
     "/chunks/plans.js": "/chunks/plans.js",
     "/chunks/profile.js": "/chunks/profile.js",
+    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js",
     "/chunks/settings.js": "/chunks/settings.js",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js",
@@ -53,6 +65,7 @@
     "/chunks/trash.js": "/chunks/trash.js",
     "/chunks/upgrade.js": "/chunks/upgrade.js",
     "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js",
+    "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js",
     "/chunks/user.js": "/chunks/user.js",
     "/chunks/user-create.js": "/chunks/user-create.js",
@@ -62,5 +75,192 @@
     "/chunks/user-password.js": "/chunks/user-password.js",
     "/chunks/user-storage.js": "/chunks/user-storage.js",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js",
-    "/chunks/users.js": "/chunks/users.js"
+    "/chunks/users.js": "/chunks/users.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.944c1d968ff639fc892e.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.944c1d968ff639fc892e.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.1510272625bf46075cd8.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.1510272625bf46075cd8.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.05ad76de17fd728af9b2.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.05ad76de17fd728af9b2.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.993aa30207ee2ecd3b76.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.993aa30207ee2ecd3b76.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.cc91738609c7f94a9756.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.cc91738609c7f94a9756.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.d3d7073286bf04700476.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.d3d7073286bf04700476.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.8436672d2409c9e712da.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.8436672d2409c9e712da.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.ac04a34e8e5f3415f44d.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.ac04a34e8e5f3415f44d.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.620a7da7dec3f07a5ad0.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.620a7da7dec3f07a5ad0.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.2c856d388f67c6c383af.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.2c856d388f67c6c383af.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a29fc4d78026fdd56c0e.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a29fc4d78026fdd56c0e.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4779cc82d4ec86d9b094.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4779cc82d4ec86d9b094.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.ae798d9bd3d688b8280c.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.ae798d9bd3d688b8280c.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.b34bf2a6a631c7bc8646.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.b34bf2a6a631c7bc8646.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.83bd8bc9ea76aa7eb3f1.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.83bd8bc9ea76aa7eb3f1.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a36377880d815ac5b160.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a36377880d815ac5b160.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4637a3a2d2fe790fff40.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4637a3a2d2fe790fff40.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.76bd295872a577c5c3da.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.76bd295872a577c5c3da.hot-update.js",
+    "/chunks/users.48c06e1b805e5d42a4bc.hot-update.js": "/chunks/users.48c06e1b805e5d42a4bc.hot-update.js",
+    "/chunks/users.41871fd21e5ef81e58ad.hot-update.js": "/chunks/users.41871fd21e5ef81e58ad.hot-update.js",
+    "/chunks/users.0439d773cb6b7563e717.hot-update.js": "/chunks/users.0439d773cb6b7563e717.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4a575d16434f7fb97a39.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4a575d16434f7fb97a39.hot-update.js",
+    "/chunks/users.5b11293ac62ce227bec2.hot-update.js": "/chunks/users.5b11293ac62ce227bec2.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.3eb3c8f5e31b86e5a576.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.3eb3c8f5e31b86e5a576.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c547c9232b3b4d0ece6d.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c547c9232b3b4d0ece6d.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.187ee1e43e05e16df98a.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.187ee1e43e05e16df98a.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.e5eca1a57180c45bb946.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.e5eca1a57180c45bb946.hot-update.js",
+    "/chunks/users.9566e331f50e0f32ebe7.hot-update.js": "/chunks/users.9566e331f50e0f32ebe7.hot-update.js",
+    "/chunks/users.5f2d1947f44413e02d7e.hot-update.js": "/chunks/users.5f2d1947f44413e02d7e.hot-update.js",
+    "/chunks/users.b1bf33c6a8d92a9a3e34.hot-update.js": "/chunks/users.b1bf33c6a8d92a9a3e34.hot-update.js",
+    "/chunks/users.dc6c19f48d4c8602da69.hot-update.js": "/chunks/users.dc6c19f48d4c8602da69.hot-update.js",
+    "/chunks/users.92ca1be4ee9124ef7df3.hot-update.js": "/chunks/users.92ca1be4ee9124ef7df3.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a0212038ebe4a0a89281.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a0212038ebe4a0a89281.hot-update.js",
+    "/chunks/users.6125ef411e18aa7fec00.hot-update.js": "/chunks/users.6125ef411e18aa7fec00.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.79b6d6b67366f6eb5ee8.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.79b6d6b67366f6eb5ee8.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.b25d6de9fa51174f046d.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.b25d6de9fa51174f046d.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.9ec34766863f9b0059e4.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.9ec34766863f9b0059e4.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.6d86cc71d53fd6634992.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.6d86cc71d53fd6634992.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.44e1ebefd474b7003a2c.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.44e1ebefd474b7003a2c.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.471c1c92f410be56dc91.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.471c1c92f410be56dc91.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4f5f8f8b83ed2dd5e5e0.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.4f5f8f8b83ed2dd5e5e0.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.98099c5621a2b5303499.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.98099c5621a2b5303499.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.aa97b558e4b1e24f143e.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.aa97b558e4b1e24f143e.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.fe50a5c33e0a030f2be7.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.fe50a5c33e0a030f2be7.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a7802baa485edcfa53b1.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a7802baa485edcfa53b1.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.5f339e28b480508a5ac6.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.5f339e28b480508a5ac6.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.3040b10d176fd022c88c.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.3040b10d176fd022c88c.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.d412e83f79a6c97f9415.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.d412e83f79a6c97f9415.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.0a2e647490b2e386ed35.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.0a2e647490b2e386ed35.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.0486b815c9344246711d.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.0486b815c9344246711d.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.5a95a991c2f1d72e8fa0.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.5a95a991c2f1d72e8fa0.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c12e12f51318252969bb.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c12e12f51318252969bb.hot-update.js",
+    "/chunks/dashboard.7cf20459ba4260163f70.hot-update.js": "/chunks/dashboard.7cf20459ba4260163f70.hot-update.js",
+    "/chunks/dashboard.435452c4bb363abfadf9.hot-update.js": "/chunks/dashboard.435452c4bb363abfadf9.hot-update.js",
+    "/chunks/dashboard.8a32cb503794cefae980.hot-update.js": "/chunks/dashboard.8a32cb503794cefae980.hot-update.js",
+    "/chunks/user-invoices.7459951ddaf8fd801e84.hot-update.js": "/chunks/user-invoices.7459951ddaf8fd801e84.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.e58b48ca209191a2e89d.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.e58b48ca209191a2e89d.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.46136a1c25da54be4060.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.46136a1c25da54be4060.hot-update.js",
+    "/chunks/user-invoices.d320ace3a9ec6641df6e.hot-update.js": "/chunks/user-invoices.d320ace3a9ec6641df6e.hot-update.js",
+    "/chunks/user-invoices.4b19dbb3b5cf8ac2cef9.hot-update.js": "/chunks/user-invoices.4b19dbb3b5cf8ac2cef9.hot-update.js",
+    "/chunks/user-invoices.a5870974efa9942c7ab7.hot-update.js": "/chunks/user-invoices.a5870974efa9942c7ab7.hot-update.js",
+    "/chunks/user-invoices.227077af02b56df8d2cb.hot-update.js": "/chunks/user-invoices.227077af02b56df8d2cb.hot-update.js",
+    "/chunks/user-invoices.fe0f81400266a54fc296.hot-update.js": "/chunks/user-invoices.fe0f81400266a54fc296.hot-update.js",
+    "/chunks/user-invoices.437dd402142200775f2b.hot-update.js": "/chunks/user-invoices.437dd402142200775f2b.hot-update.js",
+    "/chunks/user-invoices.cba0dcb79cec32f11b0b.hot-update.js": "/chunks/user-invoices.cba0dcb79cec32f11b0b.hot-update.js",
+    "/chunks/user-invoices.3e4c25257a9d0741dfd7.hot-update.js": "/chunks/user-invoices.3e4c25257a9d0741dfd7.hot-update.js",
+    "/chunks/user-invoices.8dc1a86bbe95420385cf.hot-update.js": "/chunks/user-invoices.8dc1a86bbe95420385cf.hot-update.js",
+    "/chunks/user-invoices.44e5401678483cd06e0a.hot-update.js": "/chunks/user-invoices.44e5401678483cd06e0a.hot-update.js",
+    "/chunks/user-invoices.050bcd9b7474bee4d2f1.hot-update.js": "/chunks/user-invoices.050bcd9b7474bee4d2f1.hot-update.js",
+    "/chunks/user-invoices.d2bf22f57e3445e581ec.hot-update.js": "/chunks/user-invoices.d2bf22f57e3445e581ec.hot-update.js",
+    "/chunks/settings-invoices.4f1d7412058f6090c8a1.hot-update.js": "/chunks/settings-invoices.4f1d7412058f6090c8a1.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.771dd287f2436e79fa07.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.771dd287f2436e79fa07.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.14718d24500032498fc3.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.14718d24500032498fc3.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a9311e13f0ef1a00e5eb.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a9311e13f0ef1a00e5eb.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.38c07aafe15da81c8486.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.38c07aafe15da81c8486.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.37ba04c34d2d8f52e41c.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.37ba04c34d2d8f52e41c.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.95fd7c791ddeb5727966.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.95fd7c791ddeb5727966.hot-update.js",
+    "/chunks/user-invoices.b69947bb3c045cb81476.hot-update.js": "/chunks/user-invoices.b69947bb3c045cb81476.hot-update.js",
+    "/chunks/user-invoices.26b72d9facfd8f963eb7.hot-update.js": "/chunks/user-invoices.26b72d9facfd8f963eb7.hot-update.js",
+    "/chunks/user-invoices.9a8119a6a494ef8da7fd.hot-update.js": "/chunks/user-invoices.9a8119a6a494ef8da7fd.hot-update.js",
+    "/chunks/user-invoices.92bfc2a69ec804970516.hot-update.js": "/chunks/user-invoices.92bfc2a69ec804970516.hot-update.js",
+    "/chunks/user-invoices.6dd5f3c048774b9a3a06.hot-update.js": "/chunks/user-invoices.6dd5f3c048774b9a3a06.hot-update.js",
+    "/chunks/user-invoices.18b2f69321996a2fb758.hot-update.js": "/chunks/user-invoices.18b2f69321996a2fb758.hot-update.js",
+    "/chunks/user-invoices.45ca6a277b4150896d4d.hot-update.js": "/chunks/user-invoices.45ca6a277b4150896d4d.hot-update.js",
+    "/chunks/user-invoices.636305cc4132221fed78.hot-update.js": "/chunks/user-invoices.636305cc4132221fed78.hot-update.js",
+    "/chunks/user-invoices.65cad1484a224b88ab4b.hot-update.js": "/chunks/user-invoices.65cad1484a224b88ab4b.hot-update.js",
+    "/chunks/user-invoices.4de171304d8d72a47912.hot-update.js": "/chunks/user-invoices.4de171304d8d72a47912.hot-update.js",
+    "/chunks/user-invoices.e40147e8ce55b9306eb4.hot-update.js": "/chunks/user-invoices.e40147e8ce55b9306eb4.hot-update.js",
+    "/chunks/user-invoices.714b347b49ae72f24d6a.hot-update.js": "/chunks/user-invoices.714b347b49ae72f24d6a.hot-update.js",
+    "/chunks/user-invoices.16c6655ba372906a36f1.hot-update.js": "/chunks/user-invoices.16c6655ba372906a36f1.hot-update.js",
+    "/chunks/user-invoices.8dcb6a6d86531a0fa757.hot-update.js": "/chunks/user-invoices.8dcb6a6d86531a0fa757.hot-update.js",
+    "/chunks/user-invoices.a6a68fa5d5af5b699810.hot-update.js": "/chunks/user-invoices.a6a68fa5d5af5b699810.hot-update.js",
+    "/chunks/user-invoices.32b7bc7ac7c6a254f002.hot-update.js": "/chunks/user-invoices.32b7bc7ac7c6a254f002.hot-update.js",
+    "/chunks/user-invoices.bc975c92ba6f93d0f130.hot-update.js": "/chunks/user-invoices.bc975c92ba6f93d0f130.hot-update.js",
+    "/chunks/user-invoices.3537423eb79d7fd2b7db.hot-update.js": "/chunks/user-invoices.3537423eb79d7fd2b7db.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.70aa0cc8b14c78ba42d1.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.70aa0cc8b14c78ba42d1.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.232f8065d3b22e5a0e3f.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.232f8065d3b22e5a0e3f.hot-update.js",
+    "/chunks/user-invoices.8787525b8ec92647c464.hot-update.js": "/chunks/user-invoices.8787525b8ec92647c464.hot-update.js",
+    "/chunks/user-invoices.fa0892e23ff76e3cb428.hot-update.js": "/chunks/user-invoices.fa0892e23ff76e3cb428.hot-update.js",
+    "/chunks/user-invoices.aa41f352e779d1d3e113.hot-update.js": "/chunks/user-invoices.aa41f352e779d1d3e113.hot-update.js",
+    "/chunks/user-invoices.fcce8f7277edcbebb1d6.hot-update.js": "/chunks/user-invoices.fcce8f7277edcbebb1d6.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.b60d00ba436a936503f8.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.b60d00ba436a936503f8.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.8409a542e4993f402f70.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.8409a542e4993f402f70.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.7170f4df78217147d772.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.7170f4df78217147d772.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a123ec1e4fbcb75c5b79.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.a123ec1e4fbcb75c5b79.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.666f226c02f4ccbfc1d3.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.666f226c02f4ccbfc1d3.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.52b4baf8b1864266c4fe.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.52b4baf8b1864266c4fe.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.901ce760a067a71230f8.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.901ce760a067a71230f8.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.f26ee90177541af1e70a.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.f26ee90177541af1e70a.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.3bdee2ae02d4aa4009ff.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.3bdee2ae02d4aa4009ff.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.1ecf56eb9e9776414a3e.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.1ecf56eb9e9776414a3e.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.a92578ffb62f30c71172.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.a92578ffb62f30c71172.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.ad376d3591a71da886b9.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.ad376d3591a71da886b9.hot-update.js",
+    "/chunks/user-subscription.53c6af8bbde37b75ac51.hot-update.js": "/chunks/user-subscription.53c6af8bbde37b75ac51.hot-update.js",
+    "/chunks/user-subscription.933d3d1a84d7acf9fdb9.hot-update.js": "/chunks/user-subscription.933d3d1a84d7acf9fdb9.hot-update.js",
+    "/chunks/user-subscription.86c1ea594c65216e0507.hot-update.js": "/chunks/user-subscription.86c1ea594c65216e0507.hot-update.js",
+    "/chunks/plans.1d10d3bf3f16ae5c5b5f.hot-update.js": "/chunks/plans.1d10d3bf3f16ae5c5b5f.hot-update.js",
+    "/chunks/plans.59f6b409ea04dbf2795c.hot-update.js": "/chunks/plans.59f6b409ea04dbf2795c.hot-update.js",
+    "/chunks/plans.97469d6763aca102d500.hot-update.js": "/chunks/plans.97469d6763aca102d500.hot-update.js",
+    "/chunks/plans.8d9e3fa25c6c64549b8d.hot-update.js": "/chunks/plans.8d9e3fa25c6c64549b8d.hot-update.js",
+    "/chunks/plans.2a2f61a79d84c9fa0bcd.hot-update.js": "/chunks/plans.2a2f61a79d84c9fa0bcd.hot-update.js",
+    "/chunks/plans.cce96b136f0d676c3e20.hot-update.js": "/chunks/plans.cce96b136f0d676c3e20.hot-update.js",
+    "/chunks/plans.f5b7f4c4cb14a365382e.hot-update.js": "/chunks/plans.f5b7f4c4cb14a365382e.hot-update.js",
+    "/chunks/plans.7756da473a171f50b7f7.hot-update.js": "/chunks/plans.7756da473a171f50b7f7.hot-update.js",
+    "/chunks/plans.4f6ee50c642ec2ffd753.hot-update.js": "/chunks/plans.4f6ee50c642ec2ffd753.hot-update.js",
+    "/chunks/plans.a5ae8fd34465fdbcbdc9.hot-update.js": "/chunks/plans.a5ae8fd34465fdbcbdc9.hot-update.js",
+    "/chunks/plan-subscribers.3a07fd5545525ca27356.hot-update.js": "/chunks/plan-subscribers.3a07fd5545525ca27356.hot-update.js",
+    "/chunks/plan-subscribers.9e854092b5a479102890.hot-update.js": "/chunks/plan-subscribers.9e854092b5a479102890.hot-update.js",
+    "/chunks/plan-subscribers.1db61b70982df1cf9ab1.hot-update.js": "/chunks/plan-subscribers.1db61b70982df1cf9ab1.hot-update.js",
+    "/chunks/plan-subscribers.7a3457ef981ba6cb39fa.hot-update.js": "/chunks/plan-subscribers.7a3457ef981ba6cb39fa.hot-update.js",
+    "/chunks/invoices.09424332ce20afe0087e.hot-update.js": "/chunks/invoices.09424332ce20afe0087e.hot-update.js",
+    "/chunks/invoices.d7b2ff14725e2a471938.hot-update.js": "/chunks/invoices.d7b2ff14725e2a471938.hot-update.js",
+    "/chunks/invoices.9a13e686a57b02c32e69.hot-update.js": "/chunks/invoices.9a13e686a57b02c32e69.hot-update.js",
+    "/chunks/invoices.5f257c63fc5ed7fa7f5f.hot-update.js": "/chunks/invoices.5f257c63fc5ed7fa7f5f.hot-update.js",
+    "/chunks/invoices.71b72dde8bb6f382be0c.hot-update.js": "/chunks/invoices.71b72dde8bb6f382be0c.hot-update.js",
+    "/chunks/invoices.1fcbf7ef74fdda4850e4.hot-update.js": "/chunks/invoices.1fcbf7ef74fdda4850e4.hot-update.js",
+    "/chunks/pages.c959681fdad0e79fc3ad.hot-update.js": "/chunks/pages.c959681fdad0e79fc3ad.hot-update.js",
+    "/chunks/pages.0c8794539db70951eac9.hot-update.js": "/chunks/pages.0c8794539db70951eac9.hot-update.js",
+    "/chunks/pages.ca95f6ac8593c259a4c0.hot-update.js": "/chunks/pages.ca95f6ac8593c259a4c0.hot-update.js",
+    "/chunks/pages.306d91b692dd08d757ac.hot-update.js": "/chunks/pages.306d91b692dd08d757ac.hot-update.js",
+    "/chunks/pages.ef2314b934e7c7d397f1.hot-update.js": "/chunks/pages.ef2314b934e7c7d397f1.hot-update.js",
+    "/chunks/settings-subscription.ea7b9265779f4902d2ff.hot-update.js": "/chunks/settings-subscription.ea7b9265779f4902d2ff.hot-update.js",
+    "/chunks/settings-subscription.aba4d879ff48a352f553.hot-update.js": "/chunks/settings-subscription.aba4d879ff48a352f553.hot-update.js",
+    "/chunks/settings-payment-methods.33659e69cf6176754cc9.hot-update.js": "/chunks/settings-payment-methods.33659e69cf6176754cc9.hot-update.js",
+    "/chunks/settings-invoices.4dd320bccec8d0690a65.hot-update.js": "/chunks/settings-invoices.4dd320bccec8d0690a65.hot-update.js",
+    "/chunks/settings-invoices.685938d667c2e26dbd96.hot-update.js": "/chunks/settings-invoices.685938d667c2e26dbd96.hot-update.js",
+    "/chunks/settings-invoices.21aac9310f251c05b72d.hot-update.js": "/chunks/settings-invoices.21aac9310f251c05b72d.hot-update.js",
+    "/chunks/settings-invoices.2e1f20998b3ecc713eef.hot-update.js": "/chunks/settings-invoices.2e1f20998b3ecc713eef.hot-update.js",
+    "/chunks/settings-invoices.0a2384334cf18cbca2d6.hot-update.js": "/chunks/settings-invoices.0a2384334cf18cbca2d6.hot-update.js",
+    "/chunks/settings-invoices.e8787a4b683d4f926387.hot-update.js": "/chunks/settings-invoices.e8787a4b683d4f926387.hot-update.js",
+    "/chunks/settings-payment-methods.66282b9bfbb2600acc01.hot-update.js": "/chunks/settings-payment-methods.66282b9bfbb2600acc01.hot-update.js",
+    "/chunks/settings-payment-methods.c1a1794d584257217840.hot-update.js": "/chunks/settings-payment-methods.c1a1794d584257217840.hot-update.js",
+    "/chunks/settings-payment-methods.c569178309ca19eae2b6.hot-update.js": "/chunks/settings-payment-methods.c569178309ca19eae2b6.hot-update.js",
+    "/chunks/settings-payment-methods.0aad978c33f86804ab46.hot-update.js": "/chunks/settings-payment-methods.0aad978c33f86804ab46.hot-update.js",
+    "/chunks/users.cf38867f165784ad6053.hot-update.js": "/chunks/users.cf38867f165784ad6053.hot-update.js",
+    "/chunks/plans.2d6369e01e154154960b.hot-update.js": "/chunks/plans.2d6369e01e154154960b.hot-update.js",
+    "/chunks/pages.15d4f319edfa561a0d93.hot-update.js": "/chunks/pages.15d4f319edfa561a0d93.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.582d1ace431b54925d03.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.582d1ace431b54925d03.hot-update.js",
+    "/chunks/users.cb962e81743a89ba03d4.hot-update.js": "/chunks/users.cb962e81743a89ba03d4.hot-update.js",
+    "/chunks/users.13d47bf6d027fac70a04.hot-update.js": "/chunks/users.13d47bf6d027fac70a04.hot-update.js",
+    "/chunks/user-invoices.147425f069c4f08f6463.hot-update.js": "/chunks/user-invoices.147425f069c4f08f6463.hot-update.js",
+    "/chunks/user-invoices.fb50725738fc8371b500.hot-update.js": "/chunks/user-invoices.fb50725738fc8371b500.hot-update.js",
+    "/chunks/setup-wizard.87ca25b2e0d9152e7edc.hot-update.js": "/chunks/setup-wizard.87ca25b2e0d9152e7edc.hot-update.js",
+    "/chunks/setup-wizard.c42d940917c3c1b67b9b.hot-update.js": "/chunks/setup-wizard.c42d940917c3c1b67b9b.hot-update.js",
+    "/chunks/settings-payment-methods.e7813bb43a6e61200422.hot-update.js": "/chunks/settings-payment-methods.e7813bb43a6e61200422.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.e3a9450c09135a4bc15b.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.e3a9450c09135a4bc15b.hot-update.js",
+    "/chunks/settings-payment-methods.97dac83ebe43b2bdb8df.hot-update.js": "/chunks/settings-payment-methods.97dac83ebe43b2bdb8df.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c8219a923132e0799c33.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c8219a923132e0799c33.hot-update.js",
+    "/chunks/settings-payment-methods.5e8128f5475c89fd4f8c.hot-update.js": "/chunks/settings-payment-methods.5e8128f5475c89fd4f8c.hot-update.js",
+    "/chunks/upgrade-billing.c6d8a4f019225376ee95.hot-update.js": "/chunks/upgrade-billing.c6d8a4f019225376ee95.hot-update.js",
+    "/chunks/upgrade-billing.3cba57d1bd099b515527.hot-update.js": "/chunks/upgrade-billing.3cba57d1bd099b515527.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.5e7472773baf97c65fc7.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.5e7472773baf97c65fc7.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.20bcf60d761addd262da.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.20bcf60d761addd262da.hot-update.js",
+    "/chunks/upgrade-billing.a85ba7f0290390a1dead.hot-update.js": "/chunks/upgrade-billing.a85ba7f0290390a1dead.hot-update.js",
+    "/chunks/user-invoices.cab27c1c0a1ff2bb6ccf.hot-update.js": "/chunks/user-invoices.cab27c1c0a1ff2bb6ccf.hot-update.js",
+    "/chunks/settings-invoices.e6630c7592e37a0ebb75.hot-update.js": "/chunks/settings-invoices.e6630c7592e37a0ebb75.hot-update.js",
+    "/chunks/settings-payment-methods.e0148c7fd01af88ccb80.hot-update.js": "/chunks/settings-payment-methods.e0148c7fd01af88ccb80.hot-update.js",
+    "/chunks/pages.b1e87063a01eb3f698e4.hot-update.js": "/chunks/pages.b1e87063a01eb3f698e4.hot-update.js",
+    "/chunks/pages.8d80196befae2ccd680e.hot-update.js": "/chunks/pages.8d80196befae2ccd680e.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.ceee3bdc03bffef6f6d5.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.ceee3bdc03bffef6f6d5.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.64e016563aab8e79698e.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.64e016563aab8e79698e.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.9d890c38bf1acac14ebc.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.9d890c38bf1acac14ebc.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c87f9c3904cf2066b904.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.c87f9c3904cf2066b904.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.2c378a4e0b4f723c4de3.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.2c378a4e0b4f723c4de3.hot-update.js",
+    "/chunks/plans.43b9aab542e22978fe6c.hot-update.js": "/chunks/plans.43b9aab542e22978fe6c.hot-update.js",
+    "/chunks/invoices.f6ed57114d061caf4ec3.hot-update.js": "/chunks/invoices.f6ed57114d061caf4ec3.hot-update.js",
+    "/chunks/plan-subscribers.f43808c73233bffa5f16.hot-update.js": "/chunks/plan-subscribers.f43808c73233bffa5f16.hot-update.js"
 }
diff --git a/resources/js/components/Admin/WidgetLatestRegistrations.vue b/resources/js/components/Admin/WidgetLatestRegistrations.vue
index 49000e24..91ab38d5 100644
--- a/resources/js/components/Admin/WidgetLatestRegistrations.vue
+++ b/resources/js/components/Admin/WidgetLatestRegistrations.vue
@@ -1,6 +1,6 @@
 <template>
     <WidgetWrapper :icon="icon" :title="title">
-        <DatatableWrapper v-if="users" :paginator="false" :columns="columns" :data="users" class="table table-users">
+        <DatatableWrapper  @init="isLoading = false" api="/api/dashboard/new-users" :paginator="false" :columns="columns" class="table table-users">
             <template slot-scope="{ row }">
                 <tr>
                     <td style="width: 300px">
@@ -65,27 +65,26 @@
         data() {
             return {
                 isLoading: false,
-                users: undefined,
                 columns: [
                     {
                         label: this.$t('admin_page_user.table.name'),
-                        field: 'data.attributes.name',
-                        sortable: true
+                        field: 'name',
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.role'),
-                        field: 'data.attributes.role',
-                        sortable: true
+                        field: 'role',
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.storage_used'),
-                        field: 'relationships.storage.data.attributes.used',
-                        sortable: true
+                        field: 'used',
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.created_at'),
-                        field: 'data.attributes.created_at_formatted',
-                        sortable: true
+                        field: 'created_at',
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -107,13 +106,6 @@
                 }
             }
         },
-        created() {
-            axios.get('/api/dashboard/new-users')
-                .then(response => {
-                    this.users = response.data.data
-                    this.isLoading = false
-                })
-        }
     }
 </script>
 
diff --git a/resources/js/components/Others/Layout/PageTab.vue b/resources/js/components/Others/Layout/PageTab.vue
index e41f9a5d..960d8fef 100644
--- a/resources/js/components/Others/Layout/PageTab.vue
+++ b/resources/js/components/Others/Layout/PageTab.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="page-tab">
-        <div id="loader" v-if="isLoading">
+        <div id="loader" v-show="isLoading">
             <Spinner></Spinner>
         </div>
-        <slot v-if="! isLoading"></slot>
+        <slot v-show="! isLoading"></slot>
     </div>
 </template>
 
diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/Others/Tables/DatatableWrapper.vue
index d64237bc..a1fbfdc9 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -4,410 +4,489 @@
             <thead class="table-header">
             <tr>
                 <th
-                        v-for="(column, index) in columns"
-                        @click="sort(column.field, column.sortable, index)"
-                        :key="index"
-                        :class="{ sortable: column.sortable }"
-                        v-if="! column.hidden"
+                    v-for="(column, index) in columns"
+                    @click="sort(column.field, column.sortable)"
+                    :key="index"
+                    :class="{ 'sortable': column.sortable }"
+                    v-if="! column.hidden"
                 >
                     <span>{{ column.label }}</span>
 
-                    <chevron-up-icon v-if="false" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
+                    <chevron-up-icon v-if="column.sortable" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
                 </th>
             </tr>
             </thead>
 
             <tbody class="table-body">
-            <slot v-for="row in visibleData" :row="row">
+            <slot v-for="row in data.data" :row="row">
                 <DatatableCell :data="row" :key="row.id"/>
             </slot>
             </tbody>
 
         </table>
-        <div v-if="hasData && paginator" class="paginator-wrapper">
-            <ul v-if="chunks.length > 1" class="pagination">
-                <li class="page-item">
-                    <a
-                            @click="goToPage(pageIndex - 1)"
-                            class="page-link"
-                            :class="{ disabled: pageIndex == 0 }"
-                    >
+
+        <slot v-if="! isLoading  && ! hasData" name="empty-page"></slot>
+
+        <div v-if="paginator && hasData" class="paginator-wrapper">
+
+            <!--Show if there is only 6 pages-->
+            <ul v-if="data.meta.total > 20 && data.meta.last_page <= 6" class="pagination">
+
+                <!--Go previous icon-->
+                <li class="page-item previous">
+                    <a @click="goToPage(pageIndex - 1)" class="page-link" :class="{ disabled: pageIndex == 0 }">
                         <chevron-left-icon size="14" class="icon"></chevron-left-icon>
                     </a>
                 </li>
-                <li
-                        v-for="(row, index) in chunks"
-                        :key="index"
-                        class="page-item"
-                        @click="goToPage(index)"
-                >
-                    <a
-                            class="page-link"
-                            :class="{ active: pageIndex == index }">
-                        {{ index + 1 }}
+
+                <li v-for="(page, index) in 6" :key="index" class="page-item" @click="goToPage(page)">
+                    <a class="page-link" :class="{ active: pageIndex === page }">
+                        {{ page }}
                     </a>
                 </li>
-                <li class="page-item">
-                    <a
-                            @click="goToPage(pageIndex + 1)"
-                            class="page-link"
-                            :class="{ disabled: pageIndex + 1 == chunks.length }"
-                    >
+
+                <!--Go next icon-->
+                <li class="page-item next">
+                    <a @click="goToPage(pageIndex + 1)" class="page-link" :class="{ disabled: pageIndex + 1 == data.meta.last_page }">
                         <chevron-right-icon size="14" class="icon"></chevron-right-icon>
                     </a>
                 </li>
             </ul>
-            <span class="paginator-info">{{ $t('datatable.paginate_info', {visible: visibleData.length, total: data.length}) }}</span>
+
+            <!--Show if there is more than 6 pages-->
+            <ul v-if="data.meta.total > 20 && data.meta.last_page > 6" class="pagination">
+
+                <!--Go previous icon-->
+                <li class="page-item previous">
+                    <a @click="goToPage(pageIndex - 1)" class="page-link" :class="{ disabled: pageIndex == 0 }">
+                        <chevron-left-icon size="14" class="icon"></chevron-left-icon>
+                    </a>
+                </li>
+
+                <!--Show first Page-->
+                <li class="page-item" v-if="pageIndex >= 5" @click="goToPage(1)">
+                    <a class="page-link">
+                        1
+                    </a>
+                </li>
+
+                <li v-if="pageIndex < 5" v-for="(page, index) in 5" :key="index" class="page-item" @click="goToPage(pageIndex + 1)">
+                    <a class="page-link" :class="{ active: pageIndex === page }">
+                        {{ page }}
+                    </a>
+                </li>
+
+                <li class="page-item" v-if="pageIndex >= 5">
+                    <a class="page-link">...</a>
+                </li>
+
+                <!--Floated Pages-->
+                <li v-if="pageIndex >= 5 && pageIndex < (data.meta.last_page - 3)" v-for="(page, index) in floatPages" :key="index" class="page-item" @click="goToPage(page)">
+                    <a class="page-link" :class="{ active: pageIndex === page }">
+                        {{ page }}
+                    </a>
+                </li>
+
+                <li class="page-item" v-if="pageIndex < (data.meta.last_page - 3)">
+                    <a class="page-link">...</a>
+                </li>
+
+                <li v-if="pageIndex > (data.meta.last_page - 4)" v-for="(page, index) in 5" :key="index" class="page-item" @click="goToPage(data.meta.last_page - (4 - index))">
+                    <a class="page-link" :class="{ active: pageIndex === (data.meta.last_page - (4 - index)) }">
+                        {{ data.meta.last_page - (4 - index) }}
+                    </a>
+                </li>
+
+                <!--Show last page-->
+                <li class="page-item" v-if="pageIndex < (data.meta.last_page - 3)" @click="goToPage(data.meta.last_page)">
+                    <a class="page-link">
+                        {{ data.meta.last_page }}
+                    </a>
+                </li>
+
+                <!--Go next icon-->
+                <li class="page-item next">
+                    <a @click="goToPage(pageIndex + 1)" class="page-link" :class="{ disabled: pageIndex + 1 == data.meta.last_page }">
+                        <chevron-right-icon size="14" class="icon"></chevron-right-icon>
+                    </a>
+                </li>
+            </ul>
+
+
+            <span class="paginator-info">{{ $t('datatable.paginate_info', {visible: data.meta.per_page, total: data.meta.total}) }}</span>
         </div>
     </div>
 </template>
 
 <script>
-    import { ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
-    import DatatableCell from '@/components/Others/Tables/DatatableCell'
-    import {chunk, sortBy} from 'lodash'
+import {ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon} from 'vue-feather-icons'
+import DatatableCell from '@/components/Others/Tables/DatatableCell'
+import {chunk, sortBy} from 'lodash'
+import axios from "axios";
 
-    export default {
-        props: ['columns', 'data', 'scope', 'paginator'],
-        components: {
-            ChevronRightIcon,
-            ChevronLeftIcon,
-            DatatableCell,
-            ChevronUpIcon,
+export default {
+    name: 'DatatableWrapper',
+    props: [
+        'columns', 'scope', 'paginator', 'api', 'tableData'
+    ],
+    components: {
+        ChevronRightIcon,
+        ChevronLeftIcon,
+        DatatableCell,
+        ChevronUpIcon,
+    },
+    computed: {
+        hasData() {
+            return this.data && this.data.data.length > 0 ? true : false
         },
-        data() {
-            return {
-                items_per_view: 20,
-                pageIndex: 0,
-                paginatorVisible: true,
-                chunks: [],
-                filter: {
-                    sort: 'DESC',
-                    field: undefined,
-                    index: undefined,
-                }
-            }
-        },
-        methods: {
-            goToPage(index) {
-                if (index == this.chunks.length || index == -1) return
-
-                // Update page index
-                this.pageIndex = index
-            },
-            sort(field, sortable, index) {
-
-                // Prevent sortable if is disabled
-                if (!sortable) return
-
-                // Set filter
-                this.filter.field = field
-                this.filter.index = index
-
-                // Set sorting direction
-                if (this.filter.sort === 'DESC') {
-                    this.filter.sort = 'ASC'
-                } else if (this.filter.sort === 'ASC') {
-                    this.filter.sort = 'DESC'
-                }
-            }
-        },
-        computed: {
-            hasData() {
-
-                return this.data.length > 0 ? true : false
-            },
-            visibleData() {
-
-                // Prefent errors when data is empty
-                if (!this.hasData) return
-
-                // Reconfigure data
-                if (this.filter.field) {
-
-                    // Set chunks with sorting
-                    if (this.filter.sort === 'DESC') {
-
-                        // DESC
-                        this.chunks = chunk(sortBy(this.data, this.filter.field), this.items_per_view)
-                    } else {
-
-                        // ASC
-                        this.chunks = chunk(sortBy(this.data, this.filter.field).reverse(), this.items_per_view)
-                    }
-
-                } else {
-
-                    // Get data to chunks
-                    this.chunks = chunk(this.data, this.items_per_view)
-                }
-
-                // Return chunks
-                return this.chunks[this.pageIndex]
+        floatPages() {
+            return [(this.pageIndex - 1), this.pageIndex, (this.pageIndex + 1)];
+        }
+    },
+    data() {
+        return {
+            data: undefined,
+            isLoading: true,
+            pageIndex: 1,
+            filter: {
+                sort: 'DESC',
+                field: undefined,
             }
         }
+    },
+    methods: {
+        goToPage(index) {
+            if (index > this.data.meta.last_page || index === 0) return
+
+            this.pageIndex = index
+
+            this.getPage(index)
+        },
+        sort(field, sortable) {
+
+            // Prevent sortable if is disabled
+            if (!sortable) return
+
+            // Set filter
+            this.filter.field = field
+
+            // Set sorting direction
+            if (this.filter.sort === 'DESC') {
+                this.filter.sort = 'ASC'
+            } else if (this.filter.sort === 'ASC') {
+                this.filter.sort = 'DESC'
+            }
+
+            this.getPage(this.pageIndex)
+        },
+        getPage(page) {
+
+            // Get api URI
+            this.URI = this.api;
+
+            // Set page index
+            if (this.paginator)
+                this.URI = this.URI + '?page=' + page
+
+            // Add filder URI if is defined sorting
+            if (this.filter.field)
+
+                this.URI = this.URI + (this.paginator ? '&' : '?') + 'sort=' + this.filter.field + '&direction=' + this.filter.sort
+
+            this.isLoading = true
+
+            // Get data
+            axios.get(this.URI)
+                .then(response => {
+                    this.data = response.data
+                    this.$emit('data', response.data)
+
+                })
+                .catch(() => this.$isSomethingWrong())
+                .finally(() => {
+                    this.$emit('init', true)
+                    this.isLoading = false
+                }
+            )
+        },
+    },
+    created() {
+        if (this.api)
+            this.getPage(this.pageIndex)
+
+        if (this.tableData)
+            this.data = this.tableData,
+            this.isLoading = false
     }
+}
 </script>
 
 <style lang="scss" scoped>
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
 
-    .datatable {
-        height: 100%;
-    }
+.datatable {
+    height: 100%;
+}
 
-    .table-row {
-        @include transition;
-    }
+.table-row {
+    @include transition;
+}
 
-    .table-row-enter,
-    .table-row-leave-to {
-        opacity: 0;
-        @include transform(translateY(-100%));
-    }
+.table-row-enter,
+.table-row-leave-to {
+    opacity: 0;
+    @include transform(translateY(-100%));
+}
 
-    .table-row-leave-active {
-        position: absolute;
-    }
+.table-row-leave-active {
+    position: absolute;
+}
 
-    .table {
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    overflow-x: auto;
+
+    tr {
         width: 100%;
-        border-collapse: collapse;
-        overflow-x: auto;
+
+        td, th {
+            &:first-child {
+                padding-left: 15px;
+            }
+
+            &:last-child {
+                padding-right: 15px;
+                text-align: right;
+            }
+        }
+    }
+
+    .table-header {
+        margin-bottom: 10px;
 
         tr {
-            width: 100%;
-
             td, th {
-                &:first-child {
-                    padding-left: 15px;
+                padding: 12px;
+                text-align: left;
+
+                span {
+                    color: $theme;
+                    font-weight: 700;
+                    @include font-size(12);
+                    white-space: nowrap;
+                }
+
+                &.sortable {
+                    cursor: pointer;
+
+                    &:hover {
+                        .filter-arrow {
+                            opacity: 1;
+                        }
+                    }
                 }
 
                 &:last-child {
-                    padding-right: 15px;
                     text-align: right;
                 }
             }
         }
 
+        .filter-arrow {
+            vertical-align: middle;
+            margin-left: 8px;
+            @include transition;
+            opacity: 0;
+
+            path {
+                fill: $text-muted;
+            }
+
+            &.arrow-down {
+                @include transform(rotate(180deg));
+            }
+        }
+
+        span {
+            font-size: 13px;
+            color: $text-muted;
+            font-weight: bold;
+        }
+    }
+
+    .table-body {
+        tr {
+            border-radius: 8px;
+            //border-bottom: 1px solid #f5f5f5;
+
+            &:hover {
+                background: $light_background;
+            }
+
+            td, th {
+                padding: 12px;
+
+                &:last-child {
+                    button {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        span, a.page-link {
+            @include font-size(15);
+            font-weight: 700;
+            padding: 10px 35px 10px 0;
+            display: block;
+            white-space: nowrap;
+        }
+    }
+}
+
+.pagination {
+    .page-item {
+        padding: 3px;
+        display: inline-block;
+    }
+
+    .page-link {
+        width: 30px;
+        height: 30px;
+        display: block;
+        color: $text;
+        border-radius: 6px;
+        text-align: center;
+        line-height: 2.4;
+        font-weight: bold;
+        font-size: 13px;
+        cursor: pointer;
+        @include transition(0.15s);
+
+        .icon {
+            vertical-align: middle;
+            margin-top: -2px;
+        }
+
+        &:hover:not(.disabled) {
+            background: $light_background;
+            color: $text;
+        }
+
+        &.active {
+            color: $text;
+            background: $light_background;
+        }
+
+        &.disabled {
+            background: transparent;
+            cursor: default;
+
+            svg path {
+                fill: $text-muted;
+            }
+        }
+    }
+}
+
+.paginator-wrapper {
+    margin-top: 30px;
+    margin-bottom: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .paginator-info {
+        font-size: 13px;
+        color: $text-muted;
+    }
+}
+
+.user-preview {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    img {
+        width: 45px;
+        margin-right: 22px;
+    }
+}
+
+@media only screen and (max-width: 690px) {
+    .paginator-wrapper {
+        display: block;
+        text-align: center;
+
+        .paginator-info {
+            margin-top: 10px;
+            display: block;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    .table {
+
         .table-header {
-            margin-bottom: 10px;
 
             tr {
                 td, th {
-                    padding: 12px;
-                    text-align: left;
 
                     span {
                         color: $theme;
-                        font-weight: 700;
-                        @include font-size(12);
-                        white-space: nowrap;
-                    }
-
-                    &.sortable {
-                        cursor: pointer;
-                    }
-
-                    &:last-child {
-                        text-align: right;
                     }
                 }
             }
-
-            .filter-arrow {
-                vertical-align: middle;
-                margin-left: 8px;
-                @include transition;
-
-                path {
-                    fill: $text-muted;
-                }
-
-                &.arrow-down {
-                    @include transform(rotate(180deg));
-                }
-            }
-
-            span {
-                font-size: 13px;
-                color: $text-muted;
-                font-weight: bold;
-            }
         }
 
         .table-body {
-            tr {
-                border-radius: 8px;
-                //border-bottom: 1px solid #f5f5f5;
-
+            tr, th {
                 &:hover {
-                    background: $light_background;
-                }
-
-                td, th {
-                    padding: 12px;
-
-                    &:last-child {
-                        button {
-                            margin-right: 0;
-                        }
-                    }
-                }
-            }
-
-            span, a.page-link {
-                @include font-size(15);
-                font-weight: 700;
-                padding: 10px 35px 10px 0;
-                display: block;
-                white-space: nowrap;
-            }
-        }
-    }
-
-    .pagination {
-        .page-item {
-            padding: 3px;
-            display: inline-block;
-        }
-
-        .page-link {
-            width: 30px;
-            height: 30px;
-            display: block;
-            color: $text;
-            border-radius: 6px;
-            text-align: center;
-            line-height: 2.4;
-            font-weight: bold;
-            font-size: 13px;
-            cursor: pointer;
-            @include transition(0.15s);
-
-            .icon {
-                vertical-align: middle;
-                margin-top: -2px;
-            }
-
-            &:hover:not(.disabled) {
-                background: $light_background;
-                color: $text;
-            }
-
-            &.active {
-                color: $text;
-                background: $light_background;
-            }
-
-            &.disabled {
-                background: transparent;
-                cursor: default;
-
-                svg path {
-                    fill: $text-muted;
+                    background: $dark_mode_foreground;
                 }
             }
         }
     }
 
     .paginator-wrapper {
-        margin-top: 30px;
-        margin-bottom: 40px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
 
         .paginator-info {
-            font-size: 13px;
-            color: $text-muted;
+            color: $dark_mode_text_secondary;
         }
     }
 
-    .user-preview {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
+    .pagination {
 
-        img {
-            width: 45px;
-            margin-right: 22px;
-        }
-    }
+        .page-link {
+            color: $dark_mode_text_secondary;
 
-    @media only screen and (max-width: 690px) {
-        .paginator-wrapper {
-            display: block;
-            text-align: center;
-
-            .paginator-info {
-                margin-top: 10px;
-                display: block;
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-        .table {
-
-            .table-header {
-
-                tr {
-                    td, th {
-
-                        span {
-                            color: $theme;
-                        }
-                    }
-                }
+            svg polyline {
+                stroke: $dark_mode_text_primary;
             }
 
-            .table-body {
-                tr, th {
-                    &:hover {
-                        background: $dark_mode_foreground;
-                    }
-                }
+            &:hover:not(.disabled) {
+                color: $theme;
+                background: rgba($theme, 0.1);
             }
-        }
 
-        .paginator-wrapper {
-
-            .paginator-info {
-                color: $dark_mode_text_secondary;
+            &.active {
+                color: $theme;
+                background: rgba($theme, 0.1);
             }
-        }
 
-        .pagination {
-
-            .page-link {
-                color: $dark_mode_text_secondary;
+            &.disabled {
+                background: transparent;
+                cursor: default;
 
                 svg polyline {
-                    stroke: $dark_mode_text_primary;
-                }
-
-                &:hover:not(.disabled) {
-                    color: $theme;
-                    background: rgba($theme, 0.1);
-                }
-
-                &.active {
-                    color: $theme;
-                    background: rgba($theme, 0.1);
-                }
-
-                &.disabled {
-                    background: transparent;
-                    cursor: default;
-
-                    svg polyline {
-                        stroke: $dark_mode_text_secondary;
-                    }
+                    stroke: $dark_mode_text_secondary;
                 }
             }
         }
     }
+}
 </style>
diff --git a/resources/js/components/Others/UpgradeSIdebarBanner.vue b/resources/js/components/Others/UpgradeSidebarBanner.vue
similarity index 100%
rename from resources/js/components/Others/UpgradeSIdebarBanner.vue
rename to resources/js/components/Others/UpgradeSidebarBanner.vue
diff --git a/resources/js/views/Admin/Invoices.vue b/resources/js/views/Admin/Invoices.vue
index 8c185979..25e3ff3b 100644
--- a/resources/js/views/Admin/Invoices.vue
+++ b/resources/js/views/Admin/Invoices.vue
@@ -2,12 +2,12 @@
     <div id="single-page">
 
         <!--Page Content-->
-        <div id="page-content" v-if="! isLoading && invoices.length > 0">
+        <div id="page-content" v-show="! isLoading && config.stripe_public_key">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
             <PageHeader :title="$router.currentRoute.meta.title"/>
 
             <div class="content-page">
-                <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
+                <DatatableWrapper @data="invoices = $event" @init="isLoading = false" api="/api/invoices" :paginator="false" :columns="columns" class="table">
                     <template slot-scope="{ row }">
                         <tr>
                             <td>
@@ -126,27 +126,27 @@
                     {
                         label: this.$t('admin_page_invoices.table.number'),
                         field: 'data.attributes.order',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_invoices.table.total'),
                         field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_invoices.table.plan'),
                         field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_invoices.table.payed'),
                         field: 'data.attributes.created_at',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_invoices.table.user'),
                         field: 'relationships.user.data.attributes.name',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -156,15 +156,8 @@
             }
         },
         created() {
-            if (this.config.stripe_public_key) {
-                axios.get('/api/invoices')
-                    .then(response => {
-                        this.invoices = response.data.data
-                        this.isLoading = false
-                    })
-            } else {
+            if (! this.config.stripe_public_key)
                 this.isLoading = false
-            }
         }
     }
 </script>
diff --git a/resources/js/views/Admin/Pages.vue b/resources/js/views/Admin/Pages.vue
index 19af0d01..88f0e464 100644
--- a/resources/js/views/Admin/Pages.vue
+++ b/resources/js/views/Admin/Pages.vue
@@ -1,11 +1,11 @@
 <template>
     <div id="single-page">
-        <div id="page-content" v-if="! isLoading && pages.length > 0">
+        <div id="page-content" v-show="! isLoading">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
             <PageHeader :title="$router.currentRoute.meta.title"/>
 
             <div class="content-page">
-                <DatatableWrapper :paginator="false" :columns="columns" :data="pages" class="table table-users">
+                <DatatableWrapper @init="isLoading = false" api="/api/pages" :paginator="false" :columns="columns" class="table table-users">
                     <template slot-scope="{ row }">
                         <tr>
                             <td class="name" style="min-width: 200px">
@@ -75,21 +75,20 @@
         data() {
             return {
                 isLoading: true,
-                pages: undefined,
                 columns: [
                     {
                         label: this.$t('admin_pages.table.page'),
-                        field: 'data.attributes.title',
+                        field: 'title',
                         sortable: true
                     },
                     {
                         label: this.$t('admin_pages.table.slug'),
-                        field: 'data.attributes.slug',
+                        field: 'slug',
                         sortable: true
                     },
                     {
                         label: this.$t('admin_pages.table.status'),
-                        field: 'data.attributes.visibility',
+                        field: 'visibility',
                         sortable: true
                     },
                     {
@@ -104,13 +103,6 @@
                 this.$updateText('/pages/' + slug, 'visibility', val)
             }
         },
-        created() {
-            axios.get('/api/pages')
-                .then(response => {
-                    this.pages = response.data.data
-                    this.isLoading = false
-                })
-        }
     }
 </script>
 
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index f276ab38..164d1393 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
 
-        <!--Page Content-->
-        <div id="page-content" v-if="! isLoading && plans.length > 0">
+        <!--Stripe plans-->
+        <div id="page-content" v-show="stripeConfiguredWithPlans">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
             <PageHeader :title="$router.currentRoute.meta.title"/>
 
@@ -19,7 +19,7 @@
 
                     </div>
                 </div>
-                <DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
+                <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/plans" :paginator="false" :columns="columns" class="table table-users">
                     <template slot-scope="{ row }">
                         <tr>
                             <td style="max-width: 80px">
@@ -64,9 +64,9 @@
             </div>
         </div>
 
-        <!--Empty plans-->
+        <!--Stripe configured but has empty plans-->
         <EmptyPageContent
-                v-if="! isLoading && plans.length === 0 && config.stripe_public_key"
+                v-if="isEmptyPlans"
                 icon="file"
                 :title="$t('admin_page_plans.empty.title')"
                 :description="$t('admin_page_plans.empty.description')"
@@ -76,9 +76,9 @@
             </router-link>
         </EmptyPageContent>
 
-        <!--Stripe Not Configured-->
+        <!--Stripe is Not Configured-->
         <EmptyPageContent
-                v-if="! config.stripe_public_key"
+                v-if="stripeIsNotConfigured"
                 icon="settings"
                 :title="$t('activation.stripe.title')"
                 :description="$t('activation.stripe.description')"
@@ -126,6 +126,18 @@
             Edit2Icon,
             Spinner,
         },
+        computed: {
+            ...mapGetters(['config']),
+            isEmptyPlans() {
+                return ! this.isLoading && this.plans.length === 0 && this.config.stripe_public_key
+            },
+            stripeIsNotConfigured() {
+                return ! this.config.stripe_public_key
+            },
+            stripeConfiguredWithPlans() {
+                return ! this.isLoading && this.config.stripe_public_key
+            }
+        },
         data() {
             return {
                 isLoading: true,
@@ -134,27 +146,27 @@
                     {
                         label: this.$t('admin_page_plans.table.status'),
                         field: 'data.attributes.status',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_plans.table.name'),
                         field: 'data.attributes.name',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_plans.table.subscribers'),
                         field: 'data.attributes.subscribers',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_plans.table.price'),
                         field: 'data.attributes.price',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_plans.table.storage_capacity'),
                         field: 'data.attributes.capacity',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -163,24 +175,14 @@
                 ],
             }
         },
-        computed: {
-            ...mapGetters(['config']),
-        },
         methods: {
             changeStatus(val, id) {
                 this.$updateText('/plans/' + id + '/update', 'is_active', val)
             }
         },
         created() {
-            if (this.config.stripe_public_key) {
-                axios.get('/api/plans')
-                    .then(response => {
-                        this.plans = response.data.data
-                        this.isLoading = false
-                    })
-            } else {
+            if (! this.config.stripe_public_key)
                 this.isLoading = false
-            }
         }
     }
 </script>
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
index 95f3cb31..e606369e 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
@@ -1,7 +1,9 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="subscribers && subscribers.length > 0">
-            <DatatableWrapper :paginator="true" :columns="columns" :data="subscribers" class="table">
+        <PageTabGroup>
+            <DatatableWrapper @init="isLoading = false" :api="'/api/plans/' + this.$route.params.id + '/subscribers'" :paginator="false" :columns="columns" :data="subscribers" class="table">
+
+                <!--Table data content-->
                 <template slot-scope="{ row }">
                     <tr>
                         <td>
@@ -30,11 +32,15 @@
                         </td>
                     </tr>
                 </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
+                    </InfoBox>
+                </template>
             </DatatableWrapper>
         </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
-        </InfoBox>
     </PageTab>
 </template>
 
@@ -62,17 +68,17 @@
         data() {
             return {
                 subscribers: undefined,
-                isLoading: false,
+                isLoading: true,
                 columns: [
                     {
                         label: this.$t('admin_page_user.table.name'),
-                        field: 'data.attributes.name',
+                        field: 'name',
                         sortable: true
                     },
                     {
                         label: this.$t('admin_page_user.table.storage_used'),
-                        field: 'data.relationships.storage.data.attributes.used',
-                        sortable: true
+                        field: 'used',
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -81,13 +87,6 @@
                 ],
             }
         },
-        created() {
-            axios.get('/api/plans/' + this.$route.params.id + '/subscribers')
-                .then(response => {
-                    this.subscribers = response.data.data
-                    this.isLoading = false
-                })
-        }
     }
 </script>
 
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index a37fb230..8f4b1e68 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -1,10 +1,12 @@
 <template>
     <div id="single-page">
-        <div id="page-content" v-if="! isLoading">
+        <div id="page-content">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
             <PageHeader :title="$router.currentRoute.meta.title"/>
 
             <div class="content-page">
+
+                <!--Table tools-->
                 <div class="table-tools">
                     <div class="buttons">
                         <router-link :to="{name: 'UserCreate'}">
@@ -13,11 +15,10 @@
                             </MobileActionButton>
                         </router-link>
                     </div>
-                    <div class="searching">
-
-                    </div>
                 </div>
-                <DatatableWrapper :paginator="true" :columns="columns" :data="users" class="table table-users">
+
+                <!--Datatable-->
+                <DatatableWrapper @init="isLoading = false" api="/api/users" :paginator="true" :columns="columns" class="table table-users">
                     <template slot-scope="{ row }">
                         <tr>
                             <td style="min-width: 320px">
@@ -113,7 +114,6 @@
         data() {
             return {
                 isLoading: true,
-                users: [],
                 columns: undefined,
             }
         },
@@ -133,34 +133,34 @@
             this.columns = [
                 {
                     label: this.$t('admin_page_user.table.name'),
-                    field: 'data.attributes.name',
+                    field: 'name',
                     sortable: true
                 },
                 {
                     label: this.$t('admin_page_user.table.role'),
-                    field: 'data.attributes.role',
+                    field: 'role',
                     sortable: true
                 },
                 {
                     label: this.$t('admin_page_user.table.plan'),
-                    field: 'data.attributes.subscription',
-                    sortable: true,
+                    field: 'subscription',
+                    sortable: false,
                     hidden: ! this.config.isSaaS,
                 },
                 {
                     label: this.$t('admin_page_user.table.storage_used'),
-                    field: 'relationships.storage.data.attributes.used',
+                    field: 'used',
                     sortable: true
                 },
                 {
                     label: this.$t('admin_page_user.table.storage_capacity'),
-                    field: 'relationships.storage.data.attributes.capacity',
+                    field: 'settings.storage_capacity',
                     sortable: true,
                     hidden: ! this.config.storageLimit,
                 },
                 {
                     label: this.$t('admin_page_user.table.created_at'),
-                    field: 'data.attributes.created_at_formatted',
+                    field: 'created_at',
                     sortable: true
                 },
                 {
@@ -169,12 +169,6 @@
                     sortable: false
                 },
             ]
-
-            axios.get('/api/users')
-                .then(response => {
-                    this.users = response.data.data
-                    this.isLoading = false
-                })
         }
     }
 </script>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue b/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
index 4d9a1685..cd04bdd4 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
@@ -1,7 +1,15 @@
 <template>
-    <PageTab :is-loading="isLoading" :class="{'form-fixed-width': ! isLoading && invoices.length === 0}">
-        <PageTabGroup v-if="invoices && invoices.length > 0">
-            <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
+    <PageTab :is-loading="isLoading">
+        <PageTabGroup>
+            <DatatableWrapper
+                @init="isLoading = false"
+                :api="'/api/users/' + this.$route.params.id + '/invoices'"
+                :paginator="false"
+                :columns="columns"
+                class="table"
+            >
+
+                <!--Table data content-->
                 <template slot-scope="{ row }">
                     <tr>
                         <td>
@@ -33,11 +41,15 @@
                         </td>
                     </tr>
                 </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox class="form-fixed-width">
+                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
+                    </InfoBox>
+                </template>
             </DatatableWrapper>
         </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('admin_page_user.invoices.empty') }}</p>
-        </InfoBox>
     </PageTab>
 </template>
 
@@ -63,27 +75,26 @@
         data() {
             return {
                 isLoading: true,
-                invoices: undefined,
                 columns: [
                     {
                         label: this.$t('admin_page_invoices.table.number'),
                         field: 'data.attributes.order',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_invoices.table.total'),
                         field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_invoices.table.plan'),
                         field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_invoices.table.payed'),
                         field: 'data.attributes.created_at',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -92,13 +103,6 @@
                 ],
             }
         },
-        created() {
-            axios.get('/api/users/' + this.$route.params.id + '/invoices')
-                .then(response => {
-                    this.invoices = response.data.data
-                    this.isLoading = false
-                })
-        }
     }
 </script>
 
diff --git a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
index 1d116b6d..650dbe9f 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
@@ -1,6 +1,6 @@
 <template>
     <PageTab :is-loading="isLoading" class="form-fixed-width">
-        <PageTabGroup v-if="subscription">
+        <PageTabGroup v-if="subscription && !isLoading">
             <FormLabel>
                 {{ $t('user_subscription.title') }}
             </FormLabel>
@@ -27,7 +27,7 @@
                 </ListInfo>
             </div>
         </PageTabGroup>
-        <PageTabGroup v-if="! subscription">
+        <PageTabGroup v-if="! subscription && !isLoading">
             <InfoBox>
                 <p>{{ $t('admin_page_user.subscription.empty') }}</p>
             </InfoBox>
diff --git a/resources/js/views/SetupWIzard/AdminAccount.vue b/resources/js/views/SetupWizard/AdminAccount.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/AdminAccount.vue
rename to resources/js/views/SetupWizard/AdminAccount.vue
diff --git a/resources/js/views/SetupWIzard/AppSetup.vue b/resources/js/views/SetupWizard/AppSetup.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/AppSetup.vue
rename to resources/js/views/SetupWizard/AppSetup.vue
diff --git a/resources/js/views/SetupWIzard/BillingsDetail.vue b/resources/js/views/SetupWizard/BillingsDetail.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/BillingsDetail.vue
rename to resources/js/views/SetupWizard/BillingsDetail.vue
diff --git a/resources/js/views/SetupWIzard/Database.vue b/resources/js/views/SetupWizard/Database.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/Database.vue
rename to resources/js/views/SetupWizard/Database.vue
diff --git a/resources/js/views/SetupWIzard/EnvironmentSetup.vue b/resources/js/views/SetupWizard/EnvironmentSetup.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/EnvironmentSetup.vue
rename to resources/js/views/SetupWizard/EnvironmentSetup.vue
diff --git a/resources/js/views/SetupWIzard/InstallationDisclaimer.vue b/resources/js/views/SetupWizard/InstallationDisclaimer.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/InstallationDisclaimer.vue
rename to resources/js/views/SetupWizard/InstallationDisclaimer.vue
diff --git a/resources/js/views/SetupWIzard/PurchaseCode.vue b/resources/js/views/SetupWizard/PurchaseCode.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/PurchaseCode.vue
rename to resources/js/views/SetupWizard/PurchaseCode.vue
diff --git a/resources/js/views/SetupWIzard/StripeCredentials.vue b/resources/js/views/SetupWizard/StripeCredentials.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/StripeCredentials.vue
rename to resources/js/views/SetupWizard/StripeCredentials.vue
diff --git a/resources/js/views/SetupWIzard/SubscriptionPlans.vue b/resources/js/views/SetupWizard/SubscriptionPlans.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/SubscriptionPlans.vue
rename to resources/js/views/SetupWizard/SubscriptionPlans.vue
diff --git a/resources/js/views/SetupWIzard/SubscriptionService.vue b/resources/js/views/SetupWizard/SubscriptionService.vue
similarity index 100%
rename from resources/js/views/SetupWIzard/SubscriptionService.vue
rename to resources/js/views/SetupWizard/SubscriptionService.vue
diff --git a/resources/js/views/Upgrade/UpgradeBilling.vue b/resources/js/views/Upgrade/UpgradeBilling.vue
index fa9fc650..f1c12172 100644
--- a/resources/js/views/Upgrade/UpgradeBilling.vue
+++ b/resources/js/views/Upgrade/UpgradeBilling.vue
@@ -358,6 +358,7 @@
                     this.errorMessage = error.response.data.message
                 }
 
+                // Show server error
                 if (error.response.status === 500) {
                     this.isError = true
                     this.errorMessage = error.response.data.message
@@ -452,16 +453,22 @@
 
             // Get setup intent for stripe
             axios.get('/api/stripe/setup-intent')
-                .then(response => this.clientSecret = response.data.client_secret)
+                .then(response => {
+                    this.clientSecret = response.data.client_secret
+                })
+                .catch(() => this.$isSomethingWrong())
 
             axios.get('/api/user/payments')
                 .then(response => {
 
                     this.defaultPaymentMethod = response.data.default
                     this.PaymentMethods = response.data.others
-
-                    this.isLoading = false
                 })
+                .catch(() => this.$isSomethingWrong())
+                .finally(() => {
+                        this.isLoading = false
+                    }
+                )
         }
     }
 </script>
diff --git a/resources/js/views/User/Invoices.vue b/resources/js/views/User/Invoices.vue
index aa6228a0..85be1ed6 100644
--- a/resources/js/views/User/Invoices.vue
+++ b/resources/js/views/User/Invoices.vue
@@ -1,8 +1,10 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="invoices && invoices.length > 0">
+        <PageTabGroup v-show="! isLoading">
             <FormLabel>{{ $t('user_invoices.title') }}</FormLabel>
-            <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
+            <DatatableWrapper @init="isLoading = false" api="/api/user/invoices" :paginator="false" :columns="columns" class="table">
+
+                <!--Table data content-->
                 <template slot-scope="{ row }">
                     <tr>
                         <td>
@@ -34,11 +36,15 @@
                         </td>
                     </tr>
                 </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('user_invoices.empty') }}</p>
+                    </InfoBox>
+                </template>
             </DatatableWrapper>
         </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('user_invoices.empty') }}</p>
-        </InfoBox>
     </PageTab>
 </template>
 
@@ -69,22 +75,22 @@
                     {
                         label: this.$t('rows.invoice.number'),
                         field: 'data.attributes.order',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('rows.invoice.total'),
                         field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('rows.invoice.plan'),
                         field: 'data.attributes.bag.amount',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('rows.invoice.payed'),
                         field: 'data.attributes.created_at',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -93,13 +99,6 @@
                 ],
             }
         },
-        created() {
-            axios.get('/api/user/invoices')
-                .then(response => {
-                    this.invoices = response.data.data
-                    this.isLoading = false
-                })
-        }
     }
 </script>
 
diff --git a/resources/js/views/User/PaymentMethods.vue b/resources/js/views/User/PaymentMethods.vue
index b2b5a949..652308d9 100644
--- a/resources/js/views/User/PaymentMethods.vue
+++ b/resources/js/views/User/PaymentMethods.vue
@@ -1,7 +1,11 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
+
+            <!--Page title-->
             <FormLabel>{{ $t('user_payments.title') }}</FormLabel>
+
+            <!--Add payment method button-->
             <div class="page-actions">
                 <router-link :to="{name: 'CreatePaymentMethod'}">
                     <MobileActionButton icon="credit-card">
@@ -9,7 +13,11 @@
                     </MobileActionButton>
                 </router-link>
             </div>
-            <DatatableWrapper :paginator="false" :columns="columns" :data="PaymentMethods" class="table">
+
+            <!--Payment methods table-->
+            <DatatableWrapper :table-data="{data: PaymentMethods}" :paginator="false" :columns="columns" class="table">
+
+                <!--Table data content-->
                 <template slot-scope="{ row }">
                     <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
                         <td style="width: 300px">
@@ -24,11 +32,6 @@
                                 </div>
                             </span>
                         </td>
-                        <!--<td>
-                            <span class="cell-item">
-                                <ColorLabel :color="getCardStatusColor(row.data.attributes.status)">{{ getCardStatus(row.data.attributes.status) }}</ColorLabel>
-                            </span>
-                        </td>-->
                         <td>
                             <span class="cell-item">
                                 {{ row.data.attributes.exp_month }} / {{ row.data.attributes.exp_year }}
@@ -46,11 +49,15 @@
                         </td>
                     </tr>
                 </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
+                    </InfoBox>
+                </template>
             </DatatableWrapper>
         </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
-        </InfoBox>
     </PageTab>
 </template>
 
@@ -92,17 +99,12 @@
                     {
                         label: this.$t('rows.card.number'),
                         field: 'data.attributes.total',
-                        sortable: true
+                        sortable: false
                     },
-                    /*{
-                        label: this.$t('rows.card.status'),
-                        field: 'data.attributes.status',
-                        sortable: true
-                    },*/
                     {
                         label: this.$t('rows.card.expiration'),
                         field: 'data.attributes.total',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -170,15 +172,15 @@
                         }
 
                         if (response.status == 200) {
-
                             this.defaultPaymentCard = response.data.default
 
                             this.PaymentMethods = response.data.others.data
                             this.PaymentMethods.push(response.data.default)
                         }
-
+                    }).finally(() => {
                         this.isLoading = false
-                    })
+                    }
+                )
             }
         },
         created() {
diff --git a/resources/js/views/User/Subscription.vue b/resources/js/views/User/Subscription.vue
index 0fcafadc..f337aaa5 100644
--- a/resources/js/views/User/Subscription.vue
+++ b/resources/js/views/User/Subscription.vue
@@ -1,6 +1,6 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="subscription">
+        <PageTabGroup v-if="subscription && !isLoading">
             <FormLabel>
                 {{ $t('user_subscription.title') }}
             </FormLabel>
@@ -45,7 +45,7 @@
                 </div>
             </div>
         </PageTabGroup>
-        <InfoBox v-else>
+        <InfoBox v-if="! subscription && !isLoading">
             <p>{{ $t('user_subscription.empty') }}</p>
         </InfoBox>
     </PageTab>