frontend update

app/Http/Controllers/Admin/GatewayController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class GatewayController extends Controller
+{
+    public function update(Request $request, $gateway)
+    {
+        return $request->all();
+    }
+}

app/Http/Controllers/Admin/PlanController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class PlanController extends Controller
+{
+    public function create(Request $request)
+    {
+        return $request->all();
+    }
+
+    public function update(Request $request)
+    {
+        return $request->all();
+    }
+}

public/mix-manifest.json

@@ -1,158 +1,47 @@
 {
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
-    "/js/main.d7957c876d9ba1a28acf.hot-update.js": "/js/main.d7957c876d9ba1a28acf.hot-update.js",
+    "/js/main.a501882e1824ddb9d44c.hot-update.js": "/js/main.a501882e1824ddb9d44c.hot-update.js",
-    "/js/main.4e890d86ed022b924615.hot-update.js": "/js/main.4e890d86ed022b924615.hot-update.js",
+    "/js/main.23d5523fe23375a88651.hot-update.js": "/js/main.23d5523fe23375a88651.hot-update.js",
-    "/js/main.406974838684d3773447.hot-update.js": "/js/main.406974838684d3773447.hot-update.js",
+    "/js/main.00c3f4d09159cfd1a99e.hot-update.js": "/js/main.00c3f4d09159cfd1a99e.hot-update.js",
-    "/js/main.f17c18aae6f004d2e19f.hot-update.js": "/js/main.f17c18aae6f004d2e19f.hot-update.js",
+    "/js/main.cc7a72c7a3ebde670abe.hot-update.js": "/js/main.cc7a72c7a3ebde670abe.hot-update.js",
-    "/js/main.b2210354354904bce88b.hot-update.js": "/js/main.b2210354354904bce88b.hot-update.js",
+    "/js/main.112e117babc9a8bd4993.hot-update.js": "/js/main.112e117babc9a8bd4993.hot-update.js",
-    "/js/main.e196bfd2f5640ac421e6.hot-update.js": "/js/main.e196bfd2f5640ac421e6.hot-update.js",
+    "/js/main.e786ee001157ac675460.hot-update.js": "/js/main.e786ee001157ac675460.hot-update.js",
-    "/js/main.235e38e85b8ea0a2d5d5.hot-update.js": "/js/main.235e38e85b8ea0a2d5d5.hot-update.js",
+    "/js/main.6dff06d6eb3e7c04b692.hot-update.js": "/js/main.6dff06d6eb3e7c04b692.hot-update.js",
-    "/js/main.d182164a8fa938d010c1.hot-update.js": "/js/main.d182164a8fa938d010c1.hot-update.js",
+    "/js/main.5258b1b99b6a9e67182d.hot-update.js": "/js/main.5258b1b99b6a9e67182d.hot-update.js",
-    "/js/main.17a733153f2066d5a794.hot-update.js": "/js/main.17a733153f2066d5a794.hot-update.js",
+    "/js/main.5cd86eeb5dfa909343a3.hot-update.js": "/js/main.5cd86eeb5dfa909343a3.hot-update.js",
-    "/js/main.0bff6239f282813df5af.hot-update.js": "/js/main.0bff6239f282813df5af.hot-update.js",
+    "/js/main.7f2dd3aad59432926740.hot-update.js": "/js/main.7f2dd3aad59432926740.hot-update.js",
-    "/js/main.6d0fb5c2b8a6ab1145a7.hot-update.js": "/js/main.6d0fb5c2b8a6ab1145a7.hot-update.js",
+    "/js/main.4192c6d91f1c3993c8f1.hot-update.js": "/js/main.4192c6d91f1c3993c8f1.hot-update.js",
-    "/js/main.d3594fdee4597bd29370.hot-update.js": "/js/main.d3594fdee4597bd29370.hot-update.js",
+    "/js/main.fbd9f9e95eae83a1f42e.hot-update.js": "/js/main.fbd9f9e95eae83a1f42e.hot-update.js",
-    "/js/main.216266fda0b18a2befe8.hot-update.js": "/js/main.216266fda0b18a2befe8.hot-update.js",
+    "/js/main.88e77f7efb28af45a444.hot-update.js": "/js/main.88e77f7efb28af45a444.hot-update.js",
-    "/js/main.e3cc83010ecd9e9ed286.hot-update.js": "/js/main.e3cc83010ecd9e9ed286.hot-update.js",
+    "/js/main.c4a876e3474204aa1718.hot-update.js": "/js/main.c4a876e3474204aa1718.hot-update.js",
-    "/js/main.21909be5e014008e717c.hot-update.js": "/js/main.21909be5e014008e717c.hot-update.js",
+    "/js/main.6e9ce229ff233a01ca26.hot-update.js": "/js/main.6e9ce229ff233a01ca26.hot-update.js",
-    "/js/main.f3ed01137423c3827454.hot-update.js": "/js/main.f3ed01137423c3827454.hot-update.js",
+    "/js/main.0723f3fb2dd2f5541629.hot-update.js": "/js/main.0723f3fb2dd2f5541629.hot-update.js",
-    "/js/main.aaae9760f5d7471cb1eb.hot-update.js": "/js/main.aaae9760f5d7471cb1eb.hot-update.js",
+    "/js/main.af706670bbde4b96968d.hot-update.js": "/js/main.af706670bbde4b96968d.hot-update.js",
-    "/js/main.b1773999204ba472dba4.hot-update.js": "/js/main.b1773999204ba472dba4.hot-update.js",
+    "/js/main.efdabbf9dec9f8faa560.hot-update.js": "/js/main.efdabbf9dec9f8faa560.hot-update.js",
-    "/js/main.0fbf14dcd6be120e44a4.hot-update.js": "/js/main.0fbf14dcd6be120e44a4.hot-update.js",
+    "/js/main.9102b6202dd1560ad523.hot-update.js": "/js/main.9102b6202dd1560ad523.hot-update.js",
-    "/js/main.f0ab3244c6eb96789913.hot-update.js": "/js/main.f0ab3244c6eb96789913.hot-update.js",
+    "/js/main.45200406e1e76097118c.hot-update.js": "/js/main.45200406e1e76097118c.hot-update.js",
-    "/js/main.5d5cc40c4f1cfa679ab6.hot-update.js": "/js/main.5d5cc40c4f1cfa679ab6.hot-update.js",
+    "/js/main.048512ed38cfb395c00f.hot-update.js": "/js/main.048512ed38cfb395c00f.hot-update.js",
-    "/js/main.4b46c7d8489a2963f782.hot-update.js": "/js/main.4b46c7d8489a2963f782.hot-update.js",
+    "/js/main.cb4787a2577affeea53b.hot-update.js": "/js/main.cb4787a2577affeea53b.hot-update.js",
-    "/js/main.1f33c17f609d7f2670cd.hot-update.js": "/js/main.1f33c17f609d7f2670cd.hot-update.js",
+    "/js/main.7db0eb421c5a4f520278.hot-update.js": "/js/main.7db0eb421c5a4f520278.hot-update.js",
-    "/js/main.a591a98dfebe1b296168.hot-update.js": "/js/main.a591a98dfebe1b296168.hot-update.js",
+    "/js/main.633408d2cac028d44bf9.hot-update.js": "/js/main.633408d2cac028d44bf9.hot-update.js",
-    "/js/main.af9565da32f2499f9f32.hot-update.js": "/js/main.af9565da32f2499f9f32.hot-update.js",
+    "/js/main.fd6456b8cc0995ffcfd0.hot-update.js": "/js/main.fd6456b8cc0995ffcfd0.hot-update.js",
-    "/js/main.995a9429f68543fcba26.hot-update.js": "/js/main.995a9429f68543fcba26.hot-update.js",
+    "/js/main.c95f3222787de9f3fc40.hot-update.js": "/js/main.c95f3222787de9f3fc40.hot-update.js",
-    "/js/main.8356fb577bf68607f9da.hot-update.js": "/js/main.8356fb577bf68607f9da.hot-update.js",
+    "/js/main.1fc1222d368a08d29f72.hot-update.js": "/js/main.1fc1222d368a08d29f72.hot-update.js",
-    "/js/main.89bae95020c01a66f07b.hot-update.js": "/js/main.89bae95020c01a66f07b.hot-update.js",
+    "/js/main.f82e1b2a21f5952f6094.hot-update.js": "/js/main.f82e1b2a21f5952f6094.hot-update.js",
-    "/js/main.958a5cd37f4e86ddc7e5.hot-update.js": "/js/main.958a5cd37f4e86ddc7e5.hot-update.js",
+    "/js/main.c8f3130cd90d5f861582.hot-update.js": "/js/main.c8f3130cd90d5f861582.hot-update.js",
-    "/js/main.a6ce1cd48e01aca7a4bb.hot-update.js": "/js/main.a6ce1cd48e01aca7a4bb.hot-update.js",
+    "/js/main.a678e1ea71adf201cc34.hot-update.js": "/js/main.a678e1ea71adf201cc34.hot-update.js",
-    "/js/main.c02a14a2215eb041c737.hot-update.js": "/js/main.c02a14a2215eb041c737.hot-update.js",
+    "/js/main.1d9c19ea30c8579c656e.hot-update.js": "/js/main.1d9c19ea30c8579c656e.hot-update.js",
-    "/js/main.00e22405fa00eb12d3f4.hot-update.js": "/js/main.00e22405fa00eb12d3f4.hot-update.js",
+    "/js/main.aaec1e4a4093928ec963.hot-update.js": "/js/main.aaec1e4a4093928ec963.hot-update.js",
-    "/js/main.b6d5b3a27efe0885fb44.hot-update.js": "/js/main.b6d5b3a27efe0885fb44.hot-update.js",
+    "/js/main.63f3de6f8a15e43d13e3.hot-update.js": "/js/main.63f3de6f8a15e43d13e3.hot-update.js",
-    "/js/main.6e6045af864dff0706f4.hot-update.js": "/js/main.6e6045af864dff0706f4.hot-update.js",
+    "/js/main.9af22655a917576ba617.hot-update.js": "/js/main.9af22655a917576ba617.hot-update.js",
-    "/js/main.8b5e496f974b80a24c29.hot-update.js": "/js/main.8b5e496f974b80a24c29.hot-update.js",
+    "/js/main.4693e155bfb0b0cd5b0b.hot-update.js": "/js/main.4693e155bfb0b0cd5b0b.hot-update.js",
-    "/js/main.2f0fcaff7c458c173a69.hot-update.js": "/js/main.2f0fcaff7c458c173a69.hot-update.js",
+    "/js/main.b193112a7666b6d18c52.hot-update.js": "/js/main.b193112a7666b6d18c52.hot-update.js",
-    "/js/main.007d5e312105e246029a.hot-update.js": "/js/main.007d5e312105e246029a.hot-update.js",
+    "/js/main.ce3a02f5cca00363fce4.hot-update.js": "/js/main.ce3a02f5cca00363fce4.hot-update.js",
-    "/js/main.dd10beff96a7b21afbf9.hot-update.js": "/js/main.dd10beff96a7b21afbf9.hot-update.js",
+    "/js/main.2523317251b311d6636d.hot-update.js": "/js/main.2523317251b311d6636d.hot-update.js",
-    "/js/main.fa6bc81224f7dd0810a6.hot-update.js": "/js/main.fa6bc81224f7dd0810a6.hot-update.js",
+    "/js/main.5c951cd3429cbcdde665.hot-update.js": "/js/main.5c951cd3429cbcdde665.hot-update.js",
-    "/js/main.b5a057b2b6a0db1245de.hot-update.js": "/js/main.b5a057b2b6a0db1245de.hot-update.js",
+    "/js/main.a1786d42feb161e19678.hot-update.js": "/js/main.a1786d42feb161e19678.hot-update.js",
-    "/js/main.0a939c3814e21613d202.hot-update.js": "/js/main.0a939c3814e21613d202.hot-update.js",
+    "/js/main.267e7c60f17176c91054.hot-update.js": "/js/main.267e7c60f17176c91054.hot-update.js",
-    "/js/main.5c85d90242cdb28c35b5.hot-update.js": "/js/main.5c85d90242cdb28c35b5.hot-update.js",
+    "/js/main.3c8086334fd08b0c9984.hot-update.js": "/js/main.3c8086334fd08b0c9984.hot-update.js",
-    "/js/main.00774663299d249acfdd.hot-update.js": "/js/main.00774663299d249acfdd.hot-update.js",
+    "/js/main.53660e63381af24743c1.hot-update.js": "/js/main.53660e63381af24743c1.hot-update.js"
-    "/js/main.cb173ba676a358025873.hot-update.js": "/js/main.cb173ba676a358025873.hot-update.js",
-    "/js/main.c61849a7dee8921d46e3.hot-update.js": "/js/main.c61849a7dee8921d46e3.hot-update.js",
-    "/js/main.d8623d8504cee2a375dd.hot-update.js": "/js/main.d8623d8504cee2a375dd.hot-update.js",
-    "/js/main.d215b7802b7c1cd9f95a.hot-update.js": "/js/main.d215b7802b7c1cd9f95a.hot-update.js",
-    "/js/main.0a55a269f88001575d61.hot-update.js": "/js/main.0a55a269f88001575d61.hot-update.js",
-    "/js/main.2f9f8d2a8df474b2341d.hot-update.js": "/js/main.2f9f8d2a8df474b2341d.hot-update.js",
-    "/js/main.bf2884d16aa9210fd381.hot-update.js": "/js/main.bf2884d16aa9210fd381.hot-update.js",
-    "/js/main.e2e117952746597a15c4.hot-update.js": "/js/main.e2e117952746597a15c4.hot-update.js",
-    "/js/main.d5bb875572c591c47a5b.hot-update.js": "/js/main.d5bb875572c591c47a5b.hot-update.js",
-    "/js/main.7fb140d0e8a234a008ba.hot-update.js": "/js/main.7fb140d0e8a234a008ba.hot-update.js",
-    "/js/main.dc4f89c89337cdf35843.hot-update.js": "/js/main.dc4f89c89337cdf35843.hot-update.js",
-    "/js/main.1e92515c79ede957817b.hot-update.js": "/js/main.1e92515c79ede957817b.hot-update.js",
-    "/js/main.5032d61205befa4ec2c8.hot-update.js": "/js/main.5032d61205befa4ec2c8.hot-update.js",
-    "/js/main.87ed7386802a5c9d729b.hot-update.js": "/js/main.87ed7386802a5c9d729b.hot-update.js",
-    "/js/main.ae92fc6a16f87c5928ee.hot-update.js": "/js/main.ae92fc6a16f87c5928ee.hot-update.js",
-    "/js/main.6a6b856011dc735059fd.hot-update.js": "/js/main.6a6b856011dc735059fd.hot-update.js",
-    "/js/main.1eb8ae64fa7e12ce0522.hot-update.js": "/js/main.1eb8ae64fa7e12ce0522.hot-update.js",
-    "/js/main.680d7cb31d67478009cf.hot-update.js": "/js/main.680d7cb31d67478009cf.hot-update.js",
-    "/js/main.55ccdbf3f71ee08e5c5a.hot-update.js": "/js/main.55ccdbf3f71ee08e5c5a.hot-update.js",
-    "/js/main.48bd4e9f7383d338d9d6.hot-update.js": "/js/main.48bd4e9f7383d338d9d6.hot-update.js",
-    "/js/main.7e4837faea1327fd0558.hot-update.js": "/js/main.7e4837faea1327fd0558.hot-update.js",
-    "/js/main.6b0b28a2695ca29a67e1.hot-update.js": "/js/main.6b0b28a2695ca29a67e1.hot-update.js",
-    "/js/main.6d404ee3d929a70f93e6.hot-update.js": "/js/main.6d404ee3d929a70f93e6.hot-update.js",
-    "/js/main.2756711f09f0cae3df54.hot-update.js": "/js/main.2756711f09f0cae3df54.hot-update.js",
-    "/js/main.0436c57836bdb9c85082.hot-update.js": "/js/main.0436c57836bdb9c85082.hot-update.js",
-    "/js/main.e0f332f5ea7dad4ed76a.hot-update.js": "/js/main.e0f332f5ea7dad4ed76a.hot-update.js",
-    "/js/main.8ba29dda57b43c22d0e5.hot-update.js": "/js/main.8ba29dda57b43c22d0e5.hot-update.js",
-    "/js/main.27fb467e6c01734bee77.hot-update.js": "/js/main.27fb467e6c01734bee77.hot-update.js",
-    "/js/main.24bb2ecc2f361e964b08.hot-update.js": "/js/main.24bb2ecc2f361e964b08.hot-update.js",
-    "/js/main.c046f5589ef378a7eedd.hot-update.js": "/js/main.c046f5589ef378a7eedd.hot-update.js",
-    "/js/main.124ecc2a54e393bd05a5.hot-update.js": "/js/main.124ecc2a54e393bd05a5.hot-update.js",
-    "/js/main.fec944d2d4120986ed76.hot-update.js": "/js/main.fec944d2d4120986ed76.hot-update.js",
-    "/js/main.87557d0f402313981ed7.hot-update.js": "/js/main.87557d0f402313981ed7.hot-update.js",
-    "/js/main.5cbc4fb5d1d5ccb6c67f.hot-update.js": "/js/main.5cbc4fb5d1d5ccb6c67f.hot-update.js",
-    "/js/main.f2302f079f17b5d8ea4f.hot-update.js": "/js/main.f2302f079f17b5d8ea4f.hot-update.js",
-    "/js/main.5e8ce1af3475e2c4fd03.hot-update.js": "/js/main.5e8ce1af3475e2c4fd03.hot-update.js",
-    "/js/main.7618fb00b4c7270e93f3.hot-update.js": "/js/main.7618fb00b4c7270e93f3.hot-update.js",
-    "/js/main.29f6da9ce9ce6d29e9a0.hot-update.js": "/js/main.29f6da9ce9ce6d29e9a0.hot-update.js",
-    "/js/main.9b65f148b0fbf422640b.hot-update.js": "/js/main.9b65f148b0fbf422640b.hot-update.js",
-    "/js/main.1ff2b5f4b07dd7ab3bf3.hot-update.js": "/js/main.1ff2b5f4b07dd7ab3bf3.hot-update.js",
-    "/js/main.bbdc5968e8099bf67d30.hot-update.js": "/js/main.bbdc5968e8099bf67d30.hot-update.js",
-    "/js/main.1d6a8e95a7e102c96034.hot-update.js": "/js/main.1d6a8e95a7e102c96034.hot-update.js",
-    "/js/main.8f9c402258b5159a3e1c.hot-update.js": "/js/main.8f9c402258b5159a3e1c.hot-update.js",
-    "/js/main.f36bcb5ff037f8383fb1.hot-update.js": "/js/main.f36bcb5ff037f8383fb1.hot-update.js",
-    "/js/main.b8300b820d69db843b36.hot-update.js": "/js/main.b8300b820d69db843b36.hot-update.js",
-    "/js/main.d2e3a6c4974a7e8ff873.hot-update.js": "/js/main.d2e3a6c4974a7e8ff873.hot-update.js",
-    "/js/main.fbedd16523ea43f39112.hot-update.js": "/js/main.fbedd16523ea43f39112.hot-update.js",
-    "/js/main.077210fa2c703275e641.hot-update.js": "/js/main.077210fa2c703275e641.hot-update.js",
-    "/js/main.6fe82ab7c1466601559d.hot-update.js": "/js/main.6fe82ab7c1466601559d.hot-update.js",
-    "/js/main.6b49cd105280c0d9eec1.hot-update.js": "/js/main.6b49cd105280c0d9eec1.hot-update.js",
-    "/js/main.d06c68b66224a3f57404.hot-update.js": "/js/main.d06c68b66224a3f57404.hot-update.js",
-    "/js/main.00e33c7f4f49d16b81c0.hot-update.js": "/js/main.00e33c7f4f49d16b81c0.hot-update.js",
-    "/js/main.4cb449cfacc1ad049b10.hot-update.js": "/js/main.4cb449cfacc1ad049b10.hot-update.js",
-    "/js/main.8a151536768e310a8be6.hot-update.js": "/js/main.8a151536768e310a8be6.hot-update.js",
-    "/js/main.b895caf874ee35ffad49.hot-update.js": "/js/main.b895caf874ee35ffad49.hot-update.js",
-    "/js/main.fedf26b87330c9d28ce6.hot-update.js": "/js/main.fedf26b87330c9d28ce6.hot-update.js",
-    "/js/main.eee182e375e0b730151b.hot-update.js": "/js/main.eee182e375e0b730151b.hot-update.js",
-    "/js/main.5a14acdac5c4e3f238fa.hot-update.js": "/js/main.5a14acdac5c4e3f238fa.hot-update.js",
-    "/js/main.91998cb13baa6fcc9e12.hot-update.js": "/js/main.91998cb13baa6fcc9e12.hot-update.js",
-    "/js/main.4364f483473c3422a3fe.hot-update.js": "/js/main.4364f483473c3422a3fe.hot-update.js",
-    "/js/main.3d2b454bd0f8433f4823.hot-update.js": "/js/main.3d2b454bd0f8433f4823.hot-update.js",
-    "/js/main.d4a4d11cdffebc8732b5.hot-update.js": "/js/main.d4a4d11cdffebc8732b5.hot-update.js",
-    "/js/main.983be6ed686be98e5dbc.hot-update.js": "/js/main.983be6ed686be98e5dbc.hot-update.js",
-    "/js/main.105b1ef9227de3315bc4.hot-update.js": "/js/main.105b1ef9227de3315bc4.hot-update.js",
-    "/js/main.feb71af0efe71368e38a.hot-update.js": "/js/main.feb71af0efe71368e38a.hot-update.js",
-    "/js/main.e22452ffaa3df68a13bb.hot-update.js": "/js/main.e22452ffaa3df68a13bb.hot-update.js",
-    "/js/main.9211640ac2b27c13036b.hot-update.js": "/js/main.9211640ac2b27c13036b.hot-update.js",
-    "/js/main.bfb622ba2160c1820dd7.hot-update.js": "/js/main.bfb622ba2160c1820dd7.hot-update.js",
-    "/js/main.5a62e36c7b60d0aec9a3.hot-update.js": "/js/main.5a62e36c7b60d0aec9a3.hot-update.js",
-    "/js/main.84390e51ac68296d613c.hot-update.js": "/js/main.84390e51ac68296d613c.hot-update.js",
-    "/js/main.c5d4758bbda279be494e.hot-update.js": "/js/main.c5d4758bbda279be494e.hot-update.js",
-    "/js/main.4ac065dcb6832f89542a.hot-update.js": "/js/main.4ac065dcb6832f89542a.hot-update.js",
-    "/js/main.bb626cbd51998139ec99.hot-update.js": "/js/main.bb626cbd51998139ec99.hot-update.js",
-    "/js/main.5e844a987d6b947820cb.hot-update.js": "/js/main.5e844a987d6b947820cb.hot-update.js",
-    "/js/main.10276fdc63c1427a7c35.hot-update.js": "/js/main.10276fdc63c1427a7c35.hot-update.js",
-    "/js/main.5470953155b8c49d75b2.hot-update.js": "/js/main.5470953155b8c49d75b2.hot-update.js",
-    "/js/main.a1847d8ccc07e9b27709.hot-update.js": "/js/main.a1847d8ccc07e9b27709.hot-update.js",
-    "/js/main.45ef729d7e90a2c182ef.hot-update.js": "/js/main.45ef729d7e90a2c182ef.hot-update.js",
-    "/js/main.65018038046a65411361.hot-update.js": "/js/main.65018038046a65411361.hot-update.js",
-    "/js/main.72654af8787c4e3d0b60.hot-update.js": "/js/main.72654af8787c4e3d0b60.hot-update.js",
-    "/js/main.531e7f60425caf85ed37.hot-update.js": "/js/main.531e7f60425caf85ed37.hot-update.js",
-    "/js/main.12ccdeac939866eef9f3.hot-update.js": "/js/main.12ccdeac939866eef9f3.hot-update.js",
-    "/js/main.cf3e841ddff22b0be3d4.hot-update.js": "/js/main.cf3e841ddff22b0be3d4.hot-update.js",
-    "/js/main.e9338e272019f23c85cd.hot-update.js": "/js/main.e9338e272019f23c85cd.hot-update.js",
-    "/js/main.0711c7f21d7fc686f0de.hot-update.js": "/js/main.0711c7f21d7fc686f0de.hot-update.js",
-    "/js/main.3e7b963de4493d7261e8.hot-update.js": "/js/main.3e7b963de4493d7261e8.hot-update.js",
-    "/js/main.0ce23740ff2afd6ca7fb.hot-update.js": "/js/main.0ce23740ff2afd6ca7fb.hot-update.js",
-    "/js/main.8c558ee8a17f29833410.hot-update.js": "/js/main.8c558ee8a17f29833410.hot-update.js",
-    "/js/main.d2f209053a4ec2a5f2cb.hot-update.js": "/js/main.d2f209053a4ec2a5f2cb.hot-update.js",
-    "/js/main.a067ed016dce4c1cbc4a.hot-update.js": "/js/main.a067ed016dce4c1cbc4a.hot-update.js",
-    "/js/main.8f4c07d1497862035a44.hot-update.js": "/js/main.8f4c07d1497862035a44.hot-update.js",
-    "/js/main.2a948f0bd086822c473b.hot-update.js": "/js/main.2a948f0bd086822c473b.hot-update.js",
-    "/js/main.1e0973fcb77de0c53b4c.hot-update.js": "/js/main.1e0973fcb77de0c53b4c.hot-update.js",
-    "/js/main.1c306f803d5092dc58e7.hot-update.js": "/js/main.1c306f803d5092dc58e7.hot-update.js",
-    "/js/main.7800f2f0da46630be27a.hot-update.js": "/js/main.7800f2f0da46630be27a.hot-update.js",
-    "/js/main.d1e07574dd7010cc4122.hot-update.js": "/js/main.d1e07574dd7010cc4122.hot-update.js",
-    "/js/main.7accb28998dd477ac303.hot-update.js": "/js/main.7accb28998dd477ac303.hot-update.js",
-    "/js/main.e160e66a41385e542810.hot-update.js": "/js/main.e160e66a41385e542810.hot-update.js",
-    "/js/main.9f6dc35302dff20e2b35.hot-update.js": "/js/main.9f6dc35302dff20e2b35.hot-update.js",
-    "/js/main.ec87834c8f3549ebf75a.hot-update.js": "/js/main.ec87834c8f3549ebf75a.hot-update.js",
-    "/js/main.cd06d1c2a7c7b9843e79.hot-update.js": "/js/main.cd06d1c2a7c7b9843e79.hot-update.js",
-    "/js/main.d6a4081a8417e7d18dd3.hot-update.js": "/js/main.d6a4081a8417e7d18dd3.hot-update.js",
-    "/js/main.d5b976745e134408d7ce.hot-update.js": "/js/main.d5b976745e134408d7ce.hot-update.js",
-    "/js/main.3aeb7f943ca75d272206.hot-update.js": "/js/main.3aeb7f943ca75d272206.hot-update.js",
-    "/js/main.3ddbe46fad29f85f428f.hot-update.js": "/js/main.3ddbe46fad29f85f428f.hot-update.js",
-    "/js/main.16f43954da58d892be9c.hot-update.js": "/js/main.16f43954da58d892be9c.hot-update.js",
-    "/js/main.3a2cc186ebd51958931f.hot-update.js": "/js/main.3a2cc186ebd51958931f.hot-update.js",
-    "/js/main.381ebae33717640ec595.hot-update.js": "/js/main.381ebae33717640ec595.hot-update.js",
-    "/js/main.33a9277a27bc43ed2a03.hot-update.js": "/js/main.33a9277a27bc43ed2a03.hot-update.js",
-    "/js/main.280a722c6db8975059a0.hot-update.js": "/js/main.280a722c6db8975059a0.hot-update.js",
-    "/js/main.22596cb51d24d038668d.hot-update.js": "/js/main.22596cb51d24d038668d.hot-update.js"
 }

resources/js/components/Mobile/MenuItemList.vue

@@ -11,6 +11,9 @@
                 <user-icon v-if="link.icon === 'user'" size="17"></user-icon>
                 <users-icon v-if="link.icon === 'users'" size="17"></users-icon>
                 <lock-icon v-if="link.icon === 'lock'" size="17"></lock-icon>
+                <file-text-icon v-if="link.icon === 'file-text'" size="17"></file-text-icon>
+                <database-icon v-if="link.icon === 'database'" size="17"></database-icon>
+                <credit-card-icon v-if="link.icon === 'credit-card'" size="17"></credit-card-icon>
             </div>
             <b class="menu-link">
                 <span>{{ link.title }}</span>
@@ -24,8 +27,11 @@
     import {
         ChevronRightIcon,
         UploadCloudIcon,
+        CreditCardIcon,
         HardDriveIcon,
+        FileTextIcon,
         SettingsIcon,
+        DatabaseIcon,
         Trash2Icon,
         PowerIcon,
         ShareIcon,
@@ -37,6 +43,9 @@
     export default {
         name: 'MenuBar',
         components: {
+            CreditCardIcon,
+            DatabaseIcon,
+            FileTextIcon,
             ChevronRightIcon,
             UploadCloudIcon,
             HardDriveIcon,
@@ -68,7 +77,7 @@
 
             .menu-icon {
 
-                path, line, polyline, rect, circle {
+                path, line, polyline, rect, circle, ellipse {
                     stroke: $red;
                 }
             }
@@ -87,7 +96,7 @@
                 vertical-align: middle;
             }
 
-            path, line, polyline, rect, circle {
+            path, line, polyline, rect, circle, ellipse {
                 stroke: $text;
             }
         }
@@ -110,7 +119,7 @@
 
             .menu-icon {
 
-                path, line, polyline, rect, circle {
+                path, line, polyline, rect, circle, ellipse {
                     stroke: $dark_mode_text_primary;
                 }
             }

resources/js/components/Others/Layout/PageTab.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="page-tab">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PageTab',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+
+</style>

resources/js/components/Others/Layout/PageTabGroup.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="page-tab-group">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PageTabGroup',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .page-tab-group {
+        margin-bottom: 45px;
+    }
+</style>

resources/js/components/Others/MobileNavigation.vue

@@ -62,15 +62,15 @@
                         isVisible: true,
                     },
                     {
-                        icon: 'settings',
+                        icon: 'user',
                         title: this.$t('menu.settings'),
                         routeName: 'Profile',
                         isVisible: true,
                     },
                     {
-                        icon: 'users',
+                        icon: 'settings',
                         title: this.$t('menu.admin'),
-                        routeName: 'Users',
+                        routeName: 'AdminMobileMenu',
                         isVisible: this.app.user.role === 'admin',
                     },
                     {

resources/js/components/Others/Tables/DatatableWrapper.vue

@@ -257,9 +257,10 @@
 
             span, a.page-link {
                 @include font-size(15);
-                font-weight: 700;
+                font-weight: 600;
-                padding: 10px 0;
+                padding: 10px 35px 10px 0;
                 display: block;
+                white-space: nowrap;
             }
         }
     }

resources/js/components/Sidebar/MenuBar.vue

@@ -32,7 +32,7 @@
                 </div>
             </router-link>
 
-            <router-link v-if="app.user.role === 'admin'" :to="{name: 'Users'}" :class="{'is-active': $isThisRoute($route, ['Users', 'User', 'UserDetail', 'UserStorage', 'UserPassword', 'UserDelete'])}" class="icon-navigation-item users">
+            <router-link v-if="app.user.role === 'admin'" :to="{name: 'Users'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" class="icon-navigation-item users">
                 <div class="button-icon">
                     <settings-icon size="19"></settings-icon>
                 </div>
@@ -76,6 +76,25 @@
         computed: {
             ...mapGetters(['app']),
         },
+        data() {
+            return {
+                adminRoutes: [
+                    'Users',
+                    'User',
+                    'UserDetail',
+                    'UserStorage',
+                    'UserPassword',
+                    'UserDelete',
+                    'Plans',
+                    'Invoices',
+                    'UserInvoices',
+                    'Gateway',
+                    'Gateways',
+                    'GatewaySettings',
+                    'GatewayTransactions',
+                ]
+            }
+        },
         mounted() {
             this.$store.dispatch('getAppData')
         }

resources/js/i18n/lang/en.json

@@ -172,7 +172,7 @@
         "profile": "Profile Settings",
         "password": "Password",
         "storage": "Storage",
-        "admin": "Admin"
+        "admin": "Administration"
     },
     "sidebar": {
         "favourites": "Favourites",

resources/js/router.js

@@ -17,17 +17,24 @@ import Files from './views/FilePages/Files'
 import Password from './views/User/Password'
 import SharedFiles from './views/FilePages/SharedFiles'
 
-import MobileSettings from './views/Mobile/MobileSettings'
+import AdminMobileMenu from './views/Mobile/AdminMobileMenu'
 
 import Admin from './views/Admin'
-import Plans from './views/Admin/Plans'
 import Invoices from './views/Admin/Invoices'
 
 // Payment Methods
-import PaymentMethods from './views/Admin/PaymentMethods'
+import Gateways from './views/Admin/Gateways'
-import PaymentMethod from './views/Admin/PaymentMethods/PaymentMethod'
+import Gateway from './views/Admin/Gateways/Gateway'
-import GatewaySettings from './views/Admin/PaymentMethods/PaymentMethodTabs/GatewaySettings'
+import GatewaySettings from './views/Admin/Gateways/GatewayTabs/GatewaySettings'
-import GatewayTransactions from './views/Admin/PaymentMethods/PaymentMethodTabs/GatewayTransactions'
+import GatewayTransactions from './views/Admin/Gateways/GatewayTabs/GatewayTransactions'
+
+// Plans
+import Plans from './views/Admin/Plans'
+import Plan from './views/Admin/Plans/Plan'
+import PlanCreate from './views/Admin/Plans/PlanCreate'
+import PlanDelete from './views/Admin/Plans/PlanTabs/PlanDelete'
+import PlanSettings from './views/Admin/Plans/PlanTabs/PlanSettings'
+import PlanTransactions from './views/Admin/Plans/PlanTabs/PlanTransactions'
 
 // Users
 import Users from './views/Admin/Users'
@@ -41,81 +48,7 @@ import UserInvoices from './views/Admin/Users/UserTabs/UserInvoices'
 
 Vue.use(Router)
 
-const router = new Router({
+const routesAdmin = [
-    mode: 'history',
-    routes: [
-        {
-            name: 'SignIn',
-            path: '/',
-            component: Index,
-            meta: {
-                requiresAuth: false
-            },
-        },
-        {
-            name: 'SignUp',
-            path: '/sign-up',
-            component: SignUp,
-            meta: {
-                requiresAuth: false
-            },
-        },
-        {
-            name: 'ForgottenPassword',
-            path: '/forgotten-password',
-            component: ForgottenPassword,
-            meta: {
-                requiresAuth: false
-            },
-        },
-        {
-            name: 'CreateNewPassword',
-            path: '/create-new-password',
-            component: CreateNewPassword,
-            meta: {
-                requiresAuth: false
-            },
-        },
-        {
-            name: 'SharedPage',
-            path: '/shared/:token',
-            component: SharedPage,
-            meta: {
-                requiresAuth: false
-            },
-        },
-        {
-            name: 'NotFoundShared',
-            path: '/shared-not-found',
-            component: NotFoundShared,
-            meta: {
-                requiresAuth: false
-            },
-        },
-        {
-            name: 'Files',
-            path: '/files',
-            component: Files,
-            meta: {
-                requiresAuth: true
-            },
-        },
-        {
-            name: 'SharedFiles',
-            path: '/shared-files',
-            component: SharedFiles,
-            meta: {
-                requiresAuth: true
-            },
-        },
-        {
-            name: 'Trash',
-            path: '/trash',
-            component: Trash,
-            meta: {
-                requiresAuth: true
-            },
-        },
     {
         name: 'Admin',
         path: '/admin',
@@ -128,9 +61,9 @@ const router = new Router({
 
             // List Pages
             {
-                    name: 'PaymentMethods',
+                name: 'Gateways',
                 path: '/admin/payment-methods',
-                    component: PaymentMethods,
+                component: Gateways,
                 meta: {
                     requiresAuth: true,
                     title: 'Payment Methods'
@@ -174,6 +107,15 @@ const router = new Router({
                     title: i18n.t('routes_title.user_create')
                 },
             },
+            {
+                name: 'PlanCreate',
+                path: '/admin/plan/create',
+                component: PlanCreate,
+                meta: {
+                    requiresAuth: true,
+                    title: 'Create Plan'
+                },
+            },
 
             // Single pages
             {
@@ -233,23 +175,14 @@ const router = new Router({
                 ]
             },
             {
-                    name: 'PaymentMethod',
+                name: 'Gateway',
                 path: '/admin/payment-method/:name',
-                    component: PaymentMethod,
+                component: Gateway,
                 meta: {
                     requiresAuth: true,
                     title: 'Payment Method'
                 },
                 children: [
-                        {
-                            name: 'GatewaySettings',
-                            path: '/admin/payment-methods/:name/settings',
-                            component: GatewaySettings,
-                            meta: {
-                                requiresAuth: true,
-                                title: 'Settings'
-                            },
-                        },
                     {
                         name: 'GatewayTransactions',
                         path: '/admin/payment-methods/:name/transactions',
@@ -259,10 +192,128 @@ const router = new Router({
                             title: 'Transactions'
                         },
                     },
+                    {
+                        name: 'GatewaySettings',
+                        path: '/admin/payment-methods/:name/settings',
+                        component: GatewaySettings,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Settings',
+                        },
+                    },
+                ]
+            },
+            {
+                name: 'Plan',
+                path: '/admin/plan/:id',
+                component: Plan,
+                meta: {
+                    requiresAuth: true,
+                    title: 'Plan'
+                },
+                children: [
+                    {
+                        name: 'PlanTransactions',
+                        path: '/admin/plan/:id/transactions',
+                        component: PlanTransactions,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Plan Transactions'
+                        },
+                    },
+                    {
+                        name: 'PlanSettings',
+                        path: '/admin/plan/:id/settings',
+                        component: PlanSettings,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Plan Settings',
+                        },
+                    },
+                    {
+                        name: 'PlanDelete',
+                        path: '/admin/plan/:id/delete',
+                        component: PlanDelete,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Plan Delete',
+                        },
+                    },
                 ]
             },
         ]
     },
+    {
+        name: 'AdminMobileMenu',
+        path: '/admin-menu',
+        component: AdminMobileMenu,
+        meta: {
+            requiresAuth: true,
+            title: i18n.t('routes_title.settings_mobile')
+        },
+    },
+]
+const routesShared = [
+    {
+        name: 'SharedPage',
+        path: '/shared/:token',
+        component: SharedPage,
+        meta: {
+            requiresAuth: false
+        },
+    },
+    {
+        name: 'NotFoundShared',
+        path: '/shared-not-found',
+        component: NotFoundShared,
+        meta: {
+            requiresAuth: false
+        },
+    },
+    {
+        name: 'SharedFiles',
+        path: '/shared-files',
+        component: SharedFiles,
+        meta: {
+            requiresAuth: true
+        },
+    },
+]
+const routesAuth = [
+    {
+        name: 'SignIn',
+        path: '/',
+        component: Index,
+        meta: {
+            requiresAuth: false
+        },
+    },
+    {
+        name: 'SignUp',
+        path: '/sign-up',
+        component: SignUp,
+        meta: {
+            requiresAuth: false
+        },
+    },
+    {
+        name: 'ForgottenPassword',
+        path: '/forgotten-password',
+        component: ForgottenPassword,
+        meta: {
+            requiresAuth: false
+        },
+    },
+    {
+        name: 'CreateNewPassword',
+        path: '/create-new-password',
+        component: CreateNewPassword,
+        meta: {
+            requiresAuth: false
+        },
+    },
+]
+const routesUser = [
     {
         name: 'Settings',
         path: '/settings',
@@ -301,17 +352,29 @@ const router = new Router({
         ]
     },
     {
-            name: 'MobileSettings',
+        name: 'Files',
-            path: '/settings-mobile',
+        path: '/files',
-            component: MobileSettings,
+        component: Files,
         meta: {
-                requiresAuth: true,
+            requiresAuth: true
-                title: i18n.t('routes_title.settings_mobile')
         },
-        }
+    },
+    {
+        name: 'Trash',
+        path: '/trash',
+        component: Trash,
+        meta: {
+            requiresAuth: true
+        },
+    },
+]
+
+const router = new Router({
+    mode: 'history',
+    routes: [
+        ...routesAdmin, ...routesShared, ...routesAuth, ...routesUser
     ],
     scrollBehavior(to, from, savedPosition) {
-
         if (savedPosition) {
             return savedPosition
         } else {

resources/js/views/Admin.vue

@@ -27,14 +27,6 @@
 
             <ContentGroup title="SaaS" class="navigator">
                 <div class="menu-list-wrapper vertical">
-                    <router-link :to="{name: 'Invoices'}" class="menu-list-item link">
-                        <div class="icon">
-                            <file-text-icon size="17"></file-text-icon>
-                        </div>
-                        <div class="label">
-                            Invoices
-                        </div>
-                    </router-link>
                     <router-link :to="{name: 'Plans'}" class="menu-list-item link">
                         <div class="icon">
                             <database-icon size="17"></database-icon>
@@ -43,7 +35,7 @@
                             Plans
                         </div>
                     </router-link>
-                    <router-link :to="{name: 'PaymentMethods'}" class="menu-list-item link">
+                    <router-link :to="{name: 'Gateways'}" class="menu-list-item link">
                         <div class="icon">
                             <credit-card-icon size="17"></credit-card-icon>
                         </div>
@@ -51,13 +43,19 @@
                             Payment Methods
                         </div>
                     </router-link>
+                    <router-link :to="{name: 'Invoices'}" class="menu-list-item link">
+                        <div class="icon">
+                            <file-text-icon size="17"></file-text-icon>
+                        </div>
+                        <div class="label">
+                            Invoices
+                        </div>
+                    </router-link>
                 </div>
             </ContentGroup>
         </ContentSidebar>
 
-        <keep-alive>
         <router-view/>
-        </keep-alive>
     </section>
 </template>
 

resources/js/views/Admin/Gateways.vue

@@ -8,7 +8,7 @@
                 <DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
                     <template scope="{ row }">
                         <tr>
-                            <td>
+                            <td style="min-width: 200px;">
                                 <router-link :to="{name: 'GatewaySettings', params: {name: row.attributes.type}}">
                                     <DatatableCellImage
                                             :image="row.attributes.avatar"
@@ -18,7 +18,11 @@
                             </td>
                             <td>
                                 <span class="cell-item">
-                                    <SwitchInput class="switch" :state="row.attributes.status"/>
+                                    <SwitchInput
+                                            @input="changeStatus($event, row.attributes.type)"
+                                            :state="row.attributes.status"
+                                            class="switch"
+                                    />
                                 </span>
                             </td>
                             <td>
@@ -137,6 +141,11 @@
                 ],
             }
         },
+        methods: {
+            changeStatus(val, type) {
+                this.$updateText('/gateways/' + type, 'active', val)
+            }
+        },
         created() {
             /*axios.get('/api/plans')
                 .then(response => {

resources/js/views/Admin/Gateways/Gateway.vue

@@ -28,7 +28,8 @@
                         </div>
                     </router-link>
 
-                    <router-link replace :to="{name: 'GatewayTransactions', params: {name: gateway.attributes.type}}" class="menu-list-item link">
+                    <router-link replace :to="{name: 'GatewayTransactions', params: {name: gateway.attributes.type}}"
+                                 class="menu-list-item link">
                         <div class="icon">
                             <credit-card-icon size="17"></credit-card-icon>
                         </div>
@@ -58,7 +59,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'Profile',
+        name: 'Gateway',
         components: {
             SettingsIcon,
             CreditCardIcon,
@@ -70,7 +71,26 @@
         data() {
             return {
                 isLoading: false,
-                gateway: {
+                gateway: undefined,
+            }
+        },
+        created() {
+
+            if (this.$route.params.name === 'paypal') {
+                this.gateway = {
+                    id: '2',
+                    type: 'payment_method',
+                    attributes: {
+                        type: 'paypal',
+                        gateway: 'PayPal',
+                        avatar: '/assets/images/paypal-logo-thumbnail.png',
+                        status: 0,
+                        payments_processed: 234,
+                        active_subscribers: 2920,
+                    }
+                }
+            } else {
+                this.gateway = {
                     id: '1',
                     type: 'payment_method',
                     attributes: {
@@ -81,11 +101,10 @@
                         payments_processed: 798,
                         active_subscribers: 3587,
                     }
-                },
                 }
-        },
+            }
-        created() {
+
-            /*axios.get('/api/users/' + this.$route.params.id + '/detail')
+            /*axios.get('/api/gateway/' + this.$route.params.name)
                 .then(response => {
                     this.user = response.data.data
                     this.isLoading = false

resources/js/views/Admin/Gateways/GatewayTabs/GatewaySettings.vue

@@ -0,0 +1,175 @@
+<template>
+    <PageTab>
+        <ValidationObserver v-if="gateway.attributes.type === 'paypal'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
+            <PageTabGroup>
+                <b class="form-group-label">Settings</b>
+                <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <label class="input-label">Status:</label>
+                            <SwitchInput @input="$updateText('/gateways/paypal', 'status', paypal.status)" v-model="paypal.status" class="switch" :state="paypal.status"/>
+                        </div>
+                        <small class="input-help">Status of your payment gateway on website.</small>
+                    </div>
+                </div>
+                <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <label class="input-label">Sandbox Mode:</label>
+                            <SwitchInput @input="$updateText('/gateways/paypal', 'sandbox', paypal.sandbox)" v-model="paypal.sandbox" class="switch" :state="paypal.sandbox"/>
+                        </div>
+                        <small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
+                    </div>
+                </div>
+            </PageTabGroup>
+            <PageTabGroup>
+                    <b class="form-group-label">PayPal Secrets</b>
+
+                    <!--Paypal Client ID-->
+                    <div class="block-wrapper">
+                        <label>Paypal Client ID</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required"
+                                            v-slot="{ errors }">
+                            <input @keyup="$updateText('/gateways/paypal', 'client_id', paypal.client_id)" v-model="paypal.client_id" placeholder="Paste PayPal client id here" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+
+                    <!--Paypal Secret-->
+                    <div class="block-wrapper">
+                        <label>Paypal Secret</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PayPalSecret" rules="required"
+                                            v-slot="{ errors }">
+                            <input @keyup="$updateText('/gateways/paypal', 'secret', paypal.secret)" v-model="paypal.secret" placeholder="Paste PayPal secret here" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+
+                    <!--Paypal Webhook ID-->
+                    <div class="block-wrapper">
+                        <label>Paypal Webhook ID</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PayPalSecret" rules="required"
+                                            v-slot="{ errors }">
+                            <input @keyup="$updateText('/gateways/paypal', 'webhook', paypal.webhook)" v-model="paypal.webhook" placeholder="Paste PayPal webhook here" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+            </PageTabGroup>
+        </ValidationObserver>
+
+        <ValidationObserver v-if="gateway.attributes.type === 'stripe'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
+            <PageTabGroup>
+                <b class="form-group-label">Settings</b>
+                <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <label class="input-label">Status:</label>
+                            <SwitchInput @input="$updateText('/gateways/stripe', 'status', stripe.status)" v-model="stripe.status" class="switch" :state="stripe.status"/>
+                        </div>
+                        <small class="input-help">Status of your payment gateway on website.</small>
+                    </div>
+                </div>
+                <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <label class="input-label">Sandbox Mode:</label>
+                            <SwitchInput @input="$updateText('/gateways/stripe', 'sandbox', stripe.sandbox)" v-model="stripe.sandbox" class="switch" :state="stripe.sandbox"/>
+                        </div>
+                        <small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
+                    </div>
+                </div>
+            </PageTabGroup>
+            <PageTabGroup>
+                    <b class="form-group-label">Stripe Secret</b>
+
+                    <!--Stripe Client ID-->
+                    <div class="block-wrapper">
+                        <label>Stripe Client ID</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required" v-slot="{ errors }">
+                            <input @keyup="$updateText('/gateways/stripe', 'client_id', stripe.client_id)" v-model="stripe.client_id" placeholder="Paste stripe client id here" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+
+                    <!--Stripe Secret-->
+                    <div class="block-wrapper">
+                        <label>Stripe Secret</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="StripeSecret" rules="required"
+                                            v-slot="{ errors }">
+                            <input @keyup="$updateText('/gateways/stripe', 'secret', stripe.secret)" v-model="stripe.secret" placeholder="Paste stripe secret here" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+            </PageTabGroup>
+        </ValidationObserver>
+    </PageTab>
+</template>
+
+<script>
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import {required} from 'vee-validate/dist/rules'
+
+    export default {
+        name: 'GatewaySettings',
+        props: [
+            'gateway'
+        ],
+        components: {
+            SwitchInput,
+            PageTabGroup,
+            PageTab,
+            ValidationProvider,
+            ValidationObserver,
+            StorageItemDetail,
+            SelectInput,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        data() {
+            return {
+                isLoading: false,
+                isSendingRequest: false,
+                paypal: {
+                    status: 1,
+                    sandbox: 0,
+                    client_id: '',
+                    secret: '',
+                    webhook: '',
+                },
+                stripe: {
+                    status: 0,
+                    sandbox: 0,
+                    client_id: '',
+                    secret: '',
+                }
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

resources/js/views/Admin/Gateways/GatewayTabs/GatewayTransactions.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="page-tab">
+    <PageTab>
-
+        <PageTabGroup>
-        <!--Change role-->
-        <div class="page-tab-group">
             <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
                 <template scope="{ row }">
                     <tr>
@@ -29,20 +27,24 @@
                     </tr>
                 </template>
             </DatatableWrapper>
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {DownloadCloudIcon} from "vue-feather-icons";
     import axios from 'axios'
 
     export default {
-        name: 'UserStorage',
+        name: 'GatewayTransactions',
         components: {
-            DatatableWrapper,
             DownloadCloudIcon,
+            DatatableWrapper,
+            PageTabGroup,
+            PageTab,
         },
         data() {
             return {
@@ -176,13 +178,6 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    .page-tab {
-
-        .page-tab-group {
-            margin-bottom: 45px;
-        }
-    }
-
     .block-form {
         max-width: 100%;
     }

resources/js/views/Admin/Invoices.vue

@@ -99,7 +99,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/avatars/6osmoXJo-avatar-01.png',
+                                        avatar: '/avatars/6osmoXJo-avatar-01.png',
                                         name: 'Jane Doe',
                                         email: 'howdy@hi5ve.digital',
                                     }
@@ -123,7 +123,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
+                                        avatar: '/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
                                         name: 'Peter Papp',
                                         email: 'peterpapp@makingcg.com',
                                     }
@@ -147,7 +147,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/assets/images/default-avatar.png',
+                                        avatar: '/assets/images/default-avatar.png',
                                         name: 'Pavel Svintsitskiy',
                                         email: 'pashaUSA@gmail.com',
                                     }
@@ -171,7 +171,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
+                                        avatar: '/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
                                         name: 'Torsten',
                                         email: 'torsten.hoegel@go-on-net.de',
                                     }
@@ -195,7 +195,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/avatars/6osmoXJo-avatar-01.png',
+                                        avatar: '/avatars/6osmoXJo-avatar-01.png',
                                         name: 'Jane Doe',
                                         email: 'howdy@hi5ve.digital',
                                     }
@@ -219,7 +219,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
+                                        avatar: '/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
                                         name: 'Peter Papp',
                                         email: 'peterpapp@makingcg.com',
                                     }
@@ -243,7 +243,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/assets/images/default-avatar.png',
+                                        avatar: '/assets/images/default-avatar.png',
                                         name: 'Pavel Svintsitskiy',
                                         email: 'pashaUSA@gmail.com',
                                     }
@@ -267,7 +267,7 @@
                                     id: '1',
                                     type: 'users',
                                     attributes: {
-                                        avatar: 'http://localhost:8000/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
+                                        avatar: '/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
                                         name: 'Torsten',
                                         email: 'torsten.hoegel@go-on-net.de',
                                     }

resources/js/views/Admin/PaymentMethods/PaymentMethodTabs/GatewaySettings.vue

@@ -1,91 +0,0 @@
-<template>
-    <div class="page-tab">
-
-        <!--Personal Information-->
-        <div class="page-tab-group">
-            <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
-
-                <b class="form-group-label">Stripe Secret</b>
-                <!---->
-                <div class="block-wrapper">
-                    <label>Stripe Client ID</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required"
-                                        v-slot="{ errors }">
-                        <input placeholder="Paste stripe client id here" type="text" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-                <!---->
-                <div class="block-wrapper">
-                    <label>Stripe Secret</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="StripeSecret" rules="required"
-                                        v-slot="{ errors }">
-                        <input placeholder="Paste stripe secret here" type="text" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-            </ValidationObserver>
-        </div>
-    </div>
-</template>
-
-<script>
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '@/components/Others/StorageItemDetail'
-    import SelectInput from '@/components/Others/Forms/SelectInput'
-    import ButtonBase from '@/components/FilesView/ButtonBase'
-    import SetupBox from '@/components/Others/Forms/SetupBox'
-    import {required} from 'vee-validate/dist/rules'
-    import { mapGetters } from 'vuex'
-    import {events} from "@/bus"
-    import axios from 'axios'
-
-    export default {
-        name: 'UserDetail',
-        props: [
-            'user'
-        ],
-        components: {
-            ValidationProvider,
-            ValidationObserver,
-            StorageItemDetail,
-            SelectInput,
-            ButtonBase,
-            SetupBox,
-            required,
-        },
-        data() {
-            return {
-                isLoading: false,
-                isSendingRequest: false,
-            }
-        },
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
-    @import '@assets/vue-file-manager/_forms';
-
-    .page-tab {
-
-        .page-tab-group {
-            margin-bottom: 45px;
-        }
-    }
-
-    .block-form {
-        max-width: 100%;
-    }
-
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
-</style>

resources/js/views/Admin/Plans.vue

@@ -7,7 +7,7 @@
             <div class="content-page">
                 <div class="table-tools">
                     <div class="buttons">
-                        <router-link :to="{name: 'UserCreate'}">
+                        <router-link :to="{name: 'PlanCreate'}">
                             <MobileActionButton icon="plus">
                                 Create Plan
                             </MobileActionButton>
@@ -20,14 +20,14 @@
                 <DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
                     <template scope="{ row }">
                         <tr>
-                            <td class="name">
+                            <td class="name" style="min-width: 200px">
-                                <router-link :to="{name: 'UserDetail', params: {id: row.id}}" class="cell-item" tag="div">
+                                <router-link :to="{name: 'PlanSettings', params: {id: row.id}}" class="cell-item" tag="div">
                                     <span>{{ row.attributes.name }}</span>
                                 </router-link>
                             </td>
                             <td>
                                 <span class="cell-item">
-                                    <SwitchInput class="switch" :state="row.attributes.status"/>
+                                    <SwitchInput @input="changeStatus($event, row.id)" class="switch" :state="row.attributes.status"/>
                                 </span>
                             </td>
                             <td>
@@ -47,10 +47,10 @@
                             </td>
                             <td>
                                 <div class="action-icons">
-                                    <router-link :to="{name: 'UserDetail', params: {id: row.id}}">
+                                    <router-link :to="{name: 'PlanSettings', params: {id: row.id}}">
                                         <edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
                                     </router-link>
-                                    <router-link :to="{name: 'UserDelete', params: {id: row.id}}">
+                                    <router-link :to="{name: 'PlanDelete', params: {id: row.id}}">
                                         <trash2-icon size="15" class="icon icon-trash"></trash2-icon>
                                     </router-link>
                                 </div>
@@ -166,6 +166,11 @@
                 ],
             }
         },
+        methods: {
+            changeStatus(val, id) {
+                this.$updateText('/plans/' + id + '/update', 'status', val)
+            }
+        },
         created() {
             /*axios.get('/api/plans')
                 .then(response => {

resources/js/views/Admin/Plans/Plan.vue

@@ -0,0 +1,153 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" class="medium-width" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+
+                <!--Page Tab links-->
+                <div class="menu-list-wrapper horizontal">
+                    <router-link replace :to="{name: 'PlanSettings', params: {id: plan.id}}"
+                                 class="menu-list-item link">
+                        <div class="icon">
+                            <settings-icon size="17"></settings-icon>
+                        </div>
+                        <div class="label">
+                            Settings
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'PlanTransactions', params: {id: plan.id}}"
+                                 class="menu-list-item link">
+                        <div class="icon">
+                            <credit-card-icon size="17"></credit-card-icon>
+                        </div>
+                        <div class="label">
+                            Transactions
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'PlanDelete', params: {id: plan.id}}"
+                                 class="menu-list-item link">
+                        <div class="icon">
+                            <trash2-icon size="17"></trash2-icon>
+                        </div>
+                        <div class="label">
+                            Delete Plan
+                        </div>
+                    </router-link>
+                </div>
+
+                <!--Router Content-->
+                <router-view :plan="plan"/>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {CreditCardIcon, SettingsIcon, Trash2Icon} from 'vue-feather-icons'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Gateway',
+        components: {
+            Trash2Icon,
+            SettingsIcon,
+            CreditCardIcon,
+            SectionTitle,
+            MobileHeader,
+            PageHeader,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: false,
+                plan: undefined,
+            }
+        },
+        created() {
+
+            this.plan = {
+                id: '1',
+                type: 'plans',
+                attributes: {
+                    name: 'Starter Plan',
+                    description: 'This plan fits for every storage starter.',
+                    status: 1,
+                    price: 9.99,
+                    capacity: 200,
+                    subscribers: 172,
+                }
+            }
+
+            /*axios.get('/api/gateway/' + this.$route.params.name)
+                .then(response => {
+                    this.user = response.data.data
+                    this.isLoading = false
+                })*/
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .user-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .avatar {
+            margin-right: 20px;
+
+            img {
+                line-height: 0;
+                width: 62px;
+                height: 62px;
+                border-radius: 12px;
+            }
+        }
+
+        .info {
+
+            .name {
+                display: block;
+                @include font-size(17);
+                line-height: 1;
+            }
+
+            .email {
+                color: $text-muted;
+                @include font-size(14);
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</style>

resources/js/views/Admin/Plans/PlanCreate.vue

@@ -0,0 +1,177 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" class="small-width">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form">
+
+                    <div class="form-group">
+                        <b class="form-group-label">
+                            Plan Details
+                        </b>
+
+                        <!--Name-->
+                        <div class="block-wrapper">
+                            <label>Name:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
+                                <input v-model="plan.name" placeholder="Plan name" type="text" :class="{'is-error': errors[0]}"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Description-->
+                        <div class="block-wrapper">
+                            <label>Description (optional):</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
+                                <textarea v-model="plan.description" placeholder="Plan description" :class="{'is-error': errors[0]}"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Price-->
+                        <div class="block-wrapper">
+                            <label>Price:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Plan price" rules="required" v-slot="{ errors }">
+                                <input v-model="plan.price" placeholder="Plan price" type="number" step="0.01" min="1" max="99999" :class="{'is-error': errors[0]}"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Storage Capacity-->
+                        <div class="block-wrapper">
+                            <label>Storage Capacity:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
+                                <input v-model="plan.capacity" placeholder="Storage capacity" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                            <small class="input-help">You have to type only number e.g. value '5' means, user will have 5GB of storage capacity.</small>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
+                            Create Plan
+                        </ButtonBase>
+                    </div>
+                </ValidationObserver>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ImageInput from '@/components/Others/Forms/ImageInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageHeader from '@/components/Others/PageHeader'
+    import {required} from 'vee-validate/dist/rules'
+    import { mapGetters } from 'vuex'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    export default {
+        name: 'PlanCreate',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            SectionTitle,
+            MobileHeader,
+            SelectInput,
+            ButtonBase,
+            ImageInput,
+            PageHeader,
+            required,
+        },
+        data() {
+            return {
+                isLoading: false,
+                plan: {
+                    name: '',
+                    price: '',
+                    capacity: '',
+                    description: '',
+                },
+            }
+        },
+        methods: {
+            async createPlan() {
+
+                // Validate fields
+                const isValid = await this.$refs.createPlan.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get user token
+                axios
+                    .post('/api/plans/create', this.plan)
+                    .then(response => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        // Show toaster
+                        events.$emit('toaster', {
+                            type: 'success',
+                            message: 'Your plan was successfully created!',
+                        })
+
+                        // Go to User page
+                        this.$router.push({name: 'UserDetail', params: {id: response.data.data.id}})
+                    })
+                    .catch(error => {
+
+                        // Validation errors
+                        if (error.response.status == 422) {
+
+                            // Email validation error
+                            if (error.response.data.errors['email']) {
+
+                                this.$refs.createPlan.setErrors({
+                                    'email': error.response.data.errors['email']
+                                });
+                            }
+
+                            // Password validation error
+                            if (error.response.data.errors['password']) {
+
+                                this.$refs.createPlan.setErrors({
+                                    'password': error.response.data.errors['password']
+                                });
+                            }
+
+                            // Password validation error
+                            if (error.response.data.errors['storage_capacity']) {
+
+                                this.$refs.createPlan.setErrors({
+                                    'storage capacity': 'The storage capacity must be lower than 10 digit number.'
+                                });
+                            }
+                        } else {
+
+                            events.$emit('alert:open', {
+                                title: this.$t('popup_error.title'),
+                                message: this.$t('popup_error.message'),
+                            })
+                        }
+
+                        // End loading
+                        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/_forms';
+</style>

resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue

@@ -0,0 +1,126 @@
+<template>
+    <PageTab>
+        <PageTabGroup>
+            <SetupBox
+                    theme="danger"
+                    title="Delete Plan"
+                    description="You can delete plan, but, pay attention!"
+            >
+                <ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form"
+                                    class="form block-form">
+                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
+                                        name="Plan name" :rules="'required|is:' + plan.attributes.name">
+                        <label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
+                        <div class="single-line-form">
+                            <input v-model="planName"
+                                   placeholder="Type plan name"
+                                   type="text"
+                                   :class="{'is-error': errors[0]}"
+                            />
+                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
+                                        button-style="danger" class="submit-button">
+                                Delete Plan
+                            </ButtonBase>
+                        </div>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </ValidationObserver>
+            </SetupBox>
+        </PageTabGroup>
+    </PageTab>
+</template>
+
+<script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import {required, is} from 'vee-validate/dist/rules'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    export default {
+        name: 'PlanDelete',
+        props: [
+            'plan'
+        ],
+        components: {
+            PageTabGroup,
+            PageTab,
+            ValidationProvider,
+            ValidationObserver,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        data() {
+            return {
+                isSendingRequest: false,
+                isLoading: false,
+                planName: '',
+            }
+        },
+        methods: {
+            async deletePlan() {
+
+                // Validate fields
+                const isValid = await this.$refs.deletePlan.validate();
+
+                if (!isValid) return;
+
+                this.isSendingRequest = true
+
+                axios
+                    .delete(this.$store.getters.api + '/plans/' + this.$route.params.id + '/delete',
+                        {
+                            data: {
+                                name: this.planName
+                            }
+                        }
+                    )
+                    .then(() => {
+                        this.isSendingRequest = false
+
+                        // Show error message
+                        events.$emit('success:open', {
+                            emoji: '👍',
+                            title: this.$t('popup_deleted_user.title'),
+                            message: this.$t('popup_deleted_user.message'),
+                        })
+
+                        this.$router.push({name: 'Plans'})
+                    })
+                    .catch(() => {
+
+                        this.isSendingRequest = false
+
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
+                    })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue

@@ -0,0 +1,117 @@
+<template>
+    <PageTab>
+        <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
+            <PageTabGroup>
+
+                <!--Visible-->
+                <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <label class="input-label">Status:</label>
+                            <SwitchInput @input="changeStatus" class="switch" :state="plan.attributes.status"/>
+                        </div>
+                        <small class="input-help">Status of your payment gateway on website.</small>
+                    </div>
+                </div>
+
+                <!--Name-->
+                <div class="block-wrapper">
+                    <label>Name:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
+                        <input @input="$updateText('/plans/' + $route.params.id + '/update', 'name', plan.attributes.name)" v-model="plan.attributes.name" placeholder="Plan name" type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <!--Description-->
+                <div class="block-wrapper">
+                    <label>Description (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
+                        <textarea @input="$updateText('/plans/' + $route.params.id + '/update', 'description', plan.attributes.description)" v-model="plan.attributes.description" placeholder="Plan description" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <!--Price-->
+                <div class="block-wrapper">
+                    <label>Price:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Plan price" rules="required" v-slot="{ errors }">
+                        <input @input="$updateText('/plans/' + $route.params.id + '/update', 'price', plan.attributes.price)" v-model="plan.attributes.price" placeholder="Plan price" type="number" step="0.01" min="1" max="99999" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <!--Storage Capacity-->
+                <div class="block-wrapper">
+                    <label>Storage Capacity:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
+                        <input @input="$updateText('/plans/' + $route.params.id + '/update', 'capacity', plan.attributes.capacity)" v-model="plan.attributes.capacity" placeholder="Storage capacity" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                    <small class="input-help">You have to type only number e.g. value '5' means, user will have 5GB of storage capacity.</small>
+                </div>
+            </PageTabGroup>
+        </ValidationObserver>
+    </PageTab>
+</template>
+
+<script>
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import {required} from 'vee-validate/dist/rules'
+
+    export default {
+        name: 'PlanSettings',
+        props: [
+            'plan'
+        ],
+        components: {
+            SwitchInput,
+            PageTabGroup,
+            PageTab,
+            ValidationProvider,
+            ValidationObserver,
+            StorageItemDetail,
+            SelectInput,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        data() {
+            return {
+                isLoading: false,
+                isSendingRequest: false,
+            }
+        },
+        methods: {
+            changeStatus(val) {
+                this.$updateText('/plans/' + this.$route.params.id + '/update', 'state', val)
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

resources/js/views/Admin/Plans/PlanTabs/PlanTransactions.vue

@@ -0,0 +1,304 @@
+<template>
+    <PageTab>
+        <PageTabGroup>
+            <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
+                <template scope="{ row }">
+                    <tr>
+                        <td>
+                            <span class="cell-item">
+                                ${{ row.attributes.total }}
+                            </span>
+                        </td>
+                        <td>
+                            <router-link :to="{name: 'UserInvoices', params: {id: row.relationships.user.data.id}}">
+                                <DatatableCellImage
+                                        image-size="small"
+                                        :image="row.relationships.user.data.attributes.avatar"
+                                        :title="row.relationships.user.data.attributes.name"
+                                />
+                            </router-link>
+                        </td>
+                        <td>
+                            <span class="cell-item">
+                                {{ row.attributes.created_at_formatted }}
+                            </span>
+                        </td>
+                        <td>
+                            <div class="action-icons">
+                                <download-cloud-icon size="15" class="icon"></download-cloud-icon>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </DatatableWrapper>
+        </PageTabGroup>
+    </PageTab>
+</template>
+
+<script>
+    import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
+    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import {DownloadCloudIcon} from "vue-feather-icons";
+    import axios from 'axios'
+
+    export default {
+        name: 'PlanTransactions',
+        components: {
+            DatatableCellImage,
+            DownloadCloudIcon,
+            DatatableWrapper,
+            PageTabGroup,
+            PageTab,
+        },
+        data() {
+            return {
+                isLoading: false,
+                invoices: [
+                    {
+                        id: '1',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/avatars/6osmoXJo-avatar-01.png',
+                                        name: 'Jane Doe',
+                                        email: 'howdy@hi5ve.digital',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '2',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
+                                        name: 'Peter Papp',
+                                        email: 'peterpapp@makingcg.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '3',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/assets/images/default-avatar.png',
+                                        name: 'Pavel Svintsitskiy',
+                                        email: 'pashaUSA@gmail.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '4',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
+                                        name: 'Torsten',
+                                        email: 'torsten.hoegel@go-on-net.de',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '5',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/avatars/6osmoXJo-avatar-01.png',
+                                        name: 'Jane Doe',
+                                        email: 'howdy@hi5ve.digital',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '6',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
+                                        name: 'Peter Papp',
+                                        email: 'peterpapp@makingcg.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '7',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/assets/images/default-avatar.png',
+                                        name: 'Pavel Svintsitskiy',
+                                        email: 'pashaUSA@gmail.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '8',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: '/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
+                                        name: 'Torsten',
+                                        email: 'torsten.hoegel@go-on-net.de',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                ],
+                columns: [
+                    {
+                        label: 'Total',
+                        field: 'attributes.total',
+                        sortable: true
+                    },
+                    {
+                        label: 'User',
+                        field: 'attributes.plan',
+                        sortable: true
+                    },
+                    {
+                        label: 'Payed',
+                        field: 'relationships.user.data.attributes.name',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.action'),
+                        field: 'data.action',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        created() {
+            /*axios.get('/api/users/' + this.$route.params.id + '/storage')
+                .then(response => {
+                    this.storage = response.data.data
+                    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/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

resources/js/views/Admin/Users/UserTabs/UserDelete.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="page-tab">
+    <PageTab>
-
+        <PageTabGroup>
-        <!--Change role-->
-        <div class="page-tab-group">
             <SetupBox
                     theme="danger"
                     :title="$t('user_box_delete.title')"
@@ -28,11 +26,13 @@
                     </ValidationProvider>
                 </ValidationObserver>
             </SetupBox>
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import SetupBox from '@/components/Others/Forms/SetupBox'
@@ -46,6 +46,8 @@
             'user'
         ],
         components: {
+            PageTabGroup,
+            PageTab,
             ValidationProvider,
             ValidationObserver,
             ButtonBase,
@@ -108,13 +110,6 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    .page-tab {
-
-        .page-tab-group {
-            margin-bottom: 45px;
-        }
-    }
-
     .block-form {
         max-width: 100%;
     }

resources/js/views/Admin/Users/UserTabs/UserDetail.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="page-tab">
+    <PageTab>
 
         <!--Change role-->
-        <div class="page-tab-group">
+        <PageTabGroup>
             <SetupBox
                     theme="base"
                     :title="$t('user_box_role.title')"
@@ -21,10 +21,10 @@
                     </ValidationProvider>
                 </ValidationObserver>
             </SetupBox>
-        </div>
+        </PageTabGroup>
 
         <!--Personal Information-->
-        <div class="page-tab-group">
+        <PageTabGroup>
             <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
 
                 <b class="form-group-label">{{ $t('admin_page_user.label_person_info') }}</b>
@@ -53,11 +53,13 @@
                     </div>
                 </div>
             </ValidationObserver>
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
     import SelectInput from '@/components/Others/Forms/SelectInput'
@@ -74,6 +76,8 @@
             'user'
         ],
         components: {
+            PageTabGroup,
+            PageTab,
             ValidationProvider,
             ValidationObserver,
             StorageItemDetail,
@@ -142,13 +146,6 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    .page-tab {
-
-        .page-tab-group {
-            margin-bottom: 45px;
-        }
-    }
-
     .block-form {
         max-width: 100%;
     }

resources/js/views/Admin/Users/UserTabs/UserInvoices.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="page-tab">
+    <PageTab>
-
+        <PageTabGroup>
-        <!--Change role-->
-        <div class="page-tab-group">
             <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
                 <template scope="{ row }">
                     <tr>
@@ -29,11 +27,13 @@
                     </tr>
                 </template>
             </DatatableWrapper>
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import {DownloadCloudIcon} from "vue-feather-icons";
     import axios from 'axios'
@@ -41,6 +41,8 @@
     export default {
         name: 'UserStorage',
         components: {
+            PageTabGroup,
+            PageTab,
             DatatableWrapper,
             DownloadCloudIcon,
         },
@@ -176,13 +178,6 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    .page-tab {
-
-        .page-tab-group {
-            margin-bottom: 45px;
-        }
-    }
-
     .block-form {
         max-width: 100%;
     }

resources/js/views/Admin/Users/UserTabs/UserPassword.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="page-tab">
+    <PageTab>
-
+        <PageTabGroup>
-        <!--Change role-->
-        <div class="page-tab-group">
             <SetupBox
                     theme="base"
                     :title="$t('user_box_password.title')"
@@ -13,11 +11,13 @@
                     {{ $t('admin_page_user.send_password_link') }}
                 </ButtonBase>
             </SetupBox>
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import SetupBox from '@/components/Others/Forms/SetupBox'
@@ -28,6 +28,8 @@
     export default {
         name: 'UserPassword',
         components: {
+            PageTabGroup,
+            PageTab,
             ValidationProvider,
             ValidationObserver,
             ButtonBase,
@@ -76,13 +78,6 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    .page-tab {
-
-        .page-tab-group {
-            margin-bottom: 45px;
-        }
-    }
-
     .block-form {
         max-width: 100%;
     }

resources/js/views/Admin/Users/UserTabs/UserStorage.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="page-tab" v-if="storage">
+    <PageTab v-if="storage">
-
+        <PageTabGroup>
-        <!--Change role-->
-        <div class="page-tab-group">
             <StorageItemDetail
                     type="disk"
                     :title="$t('storage.total_used', {used: storage.attributes.used})"
@@ -34,20 +32,21 @@
                     </ValidationProvider>
                 </ValidationObserver>
             </SetupBox>
-        </div>
+        </PageTabGroup>
-
+        <PageTabGroup>
-        <div class="page-tab-group">
             <b class="form-group-label">{{ $t('storage.sec_details') }}</b>
             <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
             <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
             <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
             <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
             <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
     import ButtonBase from '@/components/FilesView/ButtonBase'
@@ -59,6 +58,8 @@
     export default {
         name: 'UserStorage',
         components: {
+            PageTabGroup,
+            PageTab,
             ValidationProvider,
             ValidationObserver,
             StorageItemDetail,
@@ -146,13 +147,6 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    .page-tab {
-
-        .page-tab-group {
-            margin-bottom: 45px;
-        }
-    }
-
     .block-form {
         max-width: 100%;
     }

resources/js/views/Mobile/AdminMobileMenu.vue

@@ -0,0 +1,100 @@
+<template>
+    <div id="single-page">
+        <div id="page-content">
+
+            <!--Header-->
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+
+            <!--Content-->
+            <div class="content-page">
+                <nav class="mobile-navigation">
+
+                    <!--Admin menu-->
+                    <b class="mobile-menu-label">Admin</b>
+                    <MenuItemList :navigation="AdminNavigation" />
+
+                    <!--SaaS menu-->
+                    <b class="mobile-menu-label">SaaS</b>
+                    <MenuItemList :navigation="SassNavigation" />
+                </nav>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import MenuItemList from '@/components/Mobile/MenuItemList'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import { mapGetters } from 'vuex'
+
+    export default {
+        name: 'AdminMobileMenu',
+        components: {
+            MenuItemList,
+            MobileHeader,
+        },
+        data() {
+            return {
+                AdminNavigation: [
+                    {
+                        icon: 'users',
+                        title: 'Users',
+                        routeName: 'Users',
+                        isVisible: true,
+                    },
+                    {
+                        icon: 'settings',
+                        title: 'Settings',
+                        routeName: 'User',
+                        isVisible: true,
+                    },
+                ],
+                SassNavigation: [
+                    {
+                        icon: 'database',
+                        title: 'Plans',
+                        routeName: 'Plans',
+                        isVisible: true,
+                    },
+                    {
+                        icon: 'credit-card',
+                        title: 'Payment Methods',
+                        routeName: 'Gateways',
+                        isVisible: true,
+                    },
+                    {
+                        icon: 'file-text',
+                        title: 'Invoices',
+                        routeName: 'Invoices',
+                        isVisible: true,
+                    },
+                ]
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .mobile-navigation {
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+
+        .mobile-menu-label {
+            margin-top: 30px;
+            margin-bottom: 5px;
+            @include font-size(11);
+            color: $text-muted;
+            display: block;
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+</style>

resources/js/views/Mobile/MobileSettings.vue

@@ -1,110 +0,0 @@
-<template>
-    <div id="single-page">
-        <div id="page-content" v-if="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <div class="content-page">
-                <nav class="mobile-navigation">
-
-                    <!--Navigation-->
-                    <MenuItemList :navigation="navigation" />
-                </nav>
-            </div>
-        </div>
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
-    </div>
-</template>
-
-<script>
-    import MenuItemList from '@/components/Mobile/MenuItemList'
-    import MobileHeader from '@/components/Mobile/MobileHeader'
-    import { mapGetters } from 'vuex'
-
-    export default {
-        name: 'MobileSettings',
-        components: {
-            MenuItemList,
-            MobileHeader,
-        },
-        computed: {
-            ...mapGetters(['config']),
-        },
-        data() {
-            return {
-                navigation: undefined
-            }
-        },
-        created() {
-
-            this.navigation = [
-                {
-                    icon: 'user',
-                    title: this.$t('menu.profile'),
-                    routeName: 'Profile',
-                    isVisible: true,
-                },
-                {
-                    icon: 'lock',
-                    title: this.$t('menu.password'),
-                    routeName: 'Password',
-                    isVisible: true,
-                },
-                {
-                    icon: 'hard-drive',
-                    title: this.$t('menu.storage'),
-                    routeName: 'Storage',
-                    isVisible: this.config.storageLimit,
-                },
-            ]
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
-
-    .mobile-navigation {
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 99;
-    }
-
-    @media only screen and (max-width: 690px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
-    // Transition
-    .context-menu-enter-active,
-    .fade-enter-active {
-        transition: all 200ms;
-    }
-
-    .context-menu-leave-active,
-    .fade-leave-active {
-        transition: all 200ms;
-    }
-
-    .fade-enter,
-    .fade-leave-to {
-        opacity: 0;
-    }
-
-    .context-menu-enter,
-    .context-menu-leave-to {
-        opacity: 0;
-        transform: translateY(100%);
-    }
-
-    .context-menu-leave-active {
-        position: absolute;
-    }
-
-</style>

resources/js/views/User/Password.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="page-tab">
+    <PageTab>
-        <div class="page-tab-group">
+        <PageTabGroup>
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
                                 class="form block-form">
 
@@ -32,11 +32,13 @@
                     </ButtonBase>
                 </div>
             </ValidationObserver>
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import UserImageInput from '@/components/Others/UserImageInput'
     import MobileHeader from '@/components/Mobile/MobileHeader'
@@ -51,6 +53,8 @@
     export default {
         name: 'Profile',
         components: {
+            PageTabGroup,
+            PageTab,
             ValidationProvider,
             ValidationObserver,
             UserImageInput,

resources/js/views/User/Storage.vue

@@ -1,21 +1,23 @@
 <template>
-    <div class="page-tab" v-if="storage">
+    <PageTab v-if="storage">
-        <div class="page-tab-group">
+        <PageTabGroup>
             <b class="form-group-label">{{ $t('storage.sec_capacity') }}</b>
             <StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.attributes.used})" :percentage="storage.attributes.percentage" :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"/>
-        </div>
+        </PageTabGroup>
-        <div class="page-tab-group">
+        <PageTabGroup>
             <b class="form-group-label">{{ $t('storage.sec_details') }}</b>
             <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
             <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
             <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
             <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
             <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
-        </div>
+        </PageTabGroup>
-    </div>
+    </PageTab>
 </template>
 
 <script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import SectionTitle from '@/components/Others/SectionTitle'
@@ -26,6 +28,8 @@
     export default {
         name: 'Profile',
         components: {
+            PageTabGroup,
+            PageTab,
             StorageItemDetail,
             SectionTitle,
             MobileHeader,

resources/sass/app.scss

@@ -70,6 +70,11 @@
     border-bottom: 2px solid $light_mode_border;
     margin-bottom: 30px;
     overflow-x: auto;
+    z-index: 9;
+    
+    position: sticky;
+    top: 30px;
+    background: white;
 
     &::-webkit-scrollbar {
       display: none;
@@ -241,6 +246,10 @@
       }
     }
   }
+
+  .cell-item {
+    white-space: nowrap;
+  }
 }
 
 @media only screen and (max-width: 1024px) {

resources/sass/vue-file-manager/_forms.scss

@@ -36,9 +36,9 @@
       margin-bottom: 20px;
 
       label {
-        @include font-size(12);
+        @include font-size(14);
-        color: #AFAFAF;
+        color: $text-muted;
-        font-weight: 700;
+        font-weight: 600;
         display: block;
         margin-bottom: 5px;
       }
@@ -52,6 +52,20 @@
       margin-top: 50px;
     }
   }
+
+  .inline-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .input-help {
+    @include font-size(12);
+    color: $text-muted;
+    line-height: 1.35;
+    padding-top: 10px;
+    display: block;
+  }
 }
 
 .error-message {
@@ -73,11 +87,11 @@ input[type="number"],
 input[type="email"] {
   border: 1px solid #ebebeb;
   @include transition(150ms);
-  @include font-size(15);
+  @include font-size(14);
   border-radius: 8px;
   padding: 13px 20px;
   appearance: none;
-  font-weight: 700;
+  font-weight: 600;
   outline: 0;
   width: 100%;
   background: $light_mode_input_background;

routes/api.php

@@ -94,6 +94,13 @@ Route::group(['middleware' => ['auth:api', 'auth.master', 'auth.admin', 'scope:m
     Route::delete('/users/{id}/delete', 'Admin\UserController@delete_user');
     Route::patch('/users/{id}/capacity', 'Admin\UserController@change_storage_capacity');
     Route::post('/users/{id}/send-password-email', 'Admin\UserController@send_password_reset_email');
+
+    // Gateways
+    Route::patch('/gateways/{type}', 'Admin\GatewayController@update');
+
+    // Plans
+    Route::post('/plans/create', 'Admin\PlanController@create');
+    Route::patch('/plans/{id}/update', 'Admin\PlanController@update');
 });
 
 

webpack.mix.js

@@ -23,4 +23,10 @@ mix.js('resources/js/main.js', 'public/js')
             }
         },
     })
+    .options({
+        hmrOptions: {
+            host: '172.20.10.5',
+            port: '8080'
+        },
+    })
     .disableNotifications();