From e1bb4b2cbe9279bb37f0d3d90d4e38558c4e7eaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Wed, 12 Jan 2022 08:28:12 +0100
Subject: [PATCH] mobile admin menu refactoring

---
 public/mix-manifest.json                      |  45 +++++-
 .../js/components/Others/MobileNavigation.vue |  16 ++-
 .../js/components/Spotlight/KeyboardHints.vue |  40 ++++++
 .../js/components/Spotlight/Spotlight.vue     | 129 ++++++++----------
 resources/js/views/Admin.vue                  |  74 +++++-----
 resources/js/views/Admin/Plans.vue            |   2 +-
 6 files changed, 196 insertions(+), 110 deletions(-)
 create mode 100644 resources/js/components/Spotlight/KeyboardHints.vue

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 63ad6d0b..0c58cd3b 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -2,7 +2,7 @@
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/chunks/admin.js": "/chunks/admin.js?id=7bbe7606c72cadb63541",
+    "/chunks/admin.js": "/chunks/admin.js?id=325a08c41ce31220f816",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=c83a81863882b9478feb",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~640155e3.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~640155e3.js?id=0da5779ae51439de762d",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~5c92142b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~5c92142b.js?id=64515032580a7453047f",
@@ -11,9 +11,9 @@
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=7b94fd0c332ed326530d",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=9535568da44844c1bf50",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
-    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=9c8f8fd06e11f1a690e8",
+    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=354c892546e5c369a749",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=30e106dacad45945a1f8",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=2187a2b91141ffdcc478",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=f83cd7a31e2a057fcc6a",
     "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=afeba4ebd13af7e995be",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=8c2056d19d6d40d79cb7",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~217928f6.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~217928f6.js?id=9c4d17d768dc543a0e4b",
@@ -62,7 +62,7 @@
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=0adbf034fb9558f34aaa",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=ae7ad95a9bc68e394c62",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=743b5670a3f87609f9b8",
-    "/chunks/plans.js": "/chunks/plans.js?id=e792af207747f612d62f",
+    "/chunks/plans.js": "/chunks/plans.js?id=e97cd80733d7e60189e6",
     "/chunks/platform.js": "/chunks/platform.js?id=f87ec44cdb5b120f1258",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=56ff7e5469e693363eb7",
     "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=ca9ca67afd5839597647",
@@ -872,5 +872,40 @@
     "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/payments/settings~chunks/plan-su~cdf8788b.js": "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/payments/settings~chunks/plan-su~cdf8788b.js?id=d56f3c7df8d8dd9caaaf",
     "/chunks/payments/settings.js": "/chunks/payments/settings.js?id=224245106718ef9d4128",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~7523d900.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~7523d900.js?id=02104d6d78a8ffe97c12",
-    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~d86004d6.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~d86004d6.js?id=b40f5f673ec2ab7de20b"
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~d86004d6.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~d86004d6.js?id=b40f5f673ec2ab7de20b",
+    "/chunks/admin.73d979937b86f25c4da6.hot-update.js": "/chunks/admin.73d979937b86f25c4da6.hot-update.js",
+    "/chunks/admin.296f5cfdbb3803717105.hot-update.js": "/chunks/admin.296f5cfdbb3803717105.hot-update.js",
+    "/chunks/admin.779f3fd3800e2f17b0d4.hot-update.js": "/chunks/admin.779f3fd3800e2f17b0d4.hot-update.js",
+    "/chunks/admin.4fef61d77af6dc652430.hot-update.js": "/chunks/admin.4fef61d77af6dc652430.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4796e6878137611c10f1.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4796e6878137611c10f1.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.6f4c324c1bc1a9c42426.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.6f4c324c1bc1a9c42426.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a1aec560058465052473.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a1aec560058465052473.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c803337a75290bf305e1.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c803337a75290bf305e1.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c059d7018ba42e38956c.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c059d7018ba42e38956c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8dc553b3acd79cc9a63d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8dc553b3acd79cc9a63d.hot-update.js",
+    "/js/main.e34d7e338b8162414d04.hot-update.js": "/js/main.e34d7e338b8162414d04.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4fba070508a5d12e0c84.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4fba070508a5d12e0c84.hot-update.js",
+    "/js/main.7c768efe19f7eaf82c0e.hot-update.js": "/js/main.7c768efe19f7eaf82c0e.hot-update.js",
+    "/js/main.398c5d294d52a1d8d849.hot-update.js": "/js/main.398c5d294d52a1d8d849.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f0c01681c4437f29ca71.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f0c01681c4437f29ca71.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.179cd2a9bbac3214d79d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.179cd2a9bbac3214d79d.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.dd69ab139daf8a8cb735.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.dd69ab139daf8a8cb735.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d753467ccad7585ffd67.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d753467ccad7585ffd67.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d5b5fdcc42eb29b7128c.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d5b5fdcc42eb29b7128c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.67f86a22d05ecf5c5ef9.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.67f86a22d05ecf5c5ef9.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.aa330ab3729abd6bff49.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.aa330ab3729abd6bff49.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d7716ca5ffc04bdba366.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d7716ca5ffc04bdba366.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8c4b25f377d69d8ce340.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8c4b25f377d69d8ce340.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.049cb25bc77157b9dc13.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.049cb25bc77157b9dc13.hot-update.js",
+    "/chunks/plans.674b9dbf3b0158617390.hot-update.js": "/chunks/plans.674b9dbf3b0158617390.hot-update.js",
+    "/chunks/plans.4da29ee32e7c88dd01d8.hot-update.js": "/chunks/plans.4da29ee32e7c88dd01d8.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7094107c4aa509b7f837.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7094107c4aa509b7f837.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.446e6289443399fc4f71.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.446e6289443399fc4f71.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b1cdc93172ec22aa4dba.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b1cdc93172ec22aa4dba.hot-update.js",
+    "/chunks/admin~chunks/platform.fd2d145c7bb0d3df5daa.hot-update.js": "/chunks/admin~chunks/platform.fd2d145c7bb0d3df5daa.hot-update.js",
+    "/chunks/admin~chunks/platform.060426ff6dbad1924d3b.hot-update.js": "/chunks/admin~chunks/platform.060426ff6dbad1924d3b.hot-update.js",
+    "/chunks/admin~chunks/platform.9bf47939ccf78b247009.hot-update.js": "/chunks/admin~chunks/platform.9bf47939ccf78b247009.hot-update.js",
+    "/chunks/admin~chunks/platform.c44712988be56b9bd218.hot-update.js": "/chunks/admin~chunks/platform.c44712988be56b9bd218.hot-update.js",
+    "/chunks/admin~chunks/platform.fd764530984ca73c2fc7.hot-update.js": "/chunks/admin~chunks/platform.fd764530984ca73c2fc7.hot-update.js",
+    "/chunks/admin~chunks/platform.d90bd70f67cdde67eb28.hot-update.js": "/chunks/admin~chunks/platform.d90bd70f67cdde67eb28.hot-update.js"
 }
diff --git a/resources/js/components/Others/MobileNavigation.vue b/resources/js/components/Others/MobileNavigation.vue
index 20ff339f..c31734fc 100644
--- a/resources/js/components/Others/MobileNavigation.vue
+++ b/resources/js/components/Others/MobileNavigation.vue
@@ -4,7 +4,7 @@
         <!--User avatar-->
         <UserHeadline v-if="!clickedSubmenu" class="user-info" />
 
-		<div v-if="config.subscriptionType === 'metered' && user" class="block px-5 pt-2">
+		<div v-if="config.subscriptionType === 'metered' && user && !clickedSubmenu" class="block px-5 pt-2">
 			<div class="bg-light-background px-3 py-1.5 rounded-lg">
 				<span class="text-sm font-semibold">
 					{{ $t('Your current estimated usage:') }}
@@ -37,8 +37,8 @@
             <!--Submenu: User settings-->
             <OptionGroup v-if="clickedSubmenu === 'settings'">
                 <Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" is-hover-disabled="true" />
                 <Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" is-hover-disabled="true" />
+                <Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" is-hover-disabled="true" />
 				<Option @click.native="goToRoute('Billing')" v-if="config.isSaaS" :title="$t('Billing')" icon="cloud" is-hover-disabled="true" />
             </OptionGroup>
 
@@ -47,12 +47,20 @@
                 <Option @click.native="goToRoute('Dashboard')" :title="$t('admin_menu.dashboard')" icon="box" is-hover-disabled="true" />
                 <Option @click.native="goToRoute('Users')" :title="$t('admin_menu.users')" icon="users" is-hover-disabled="true" />
                 <Option @click.native="goToRoute('AppOthers')" :title="$t('admin_menu.settings')" icon="settings" is-hover-disabled="true" />
+            </OptionGroup>
+
+            <!--Submenu: Content settings-->
+            <OptionGroup v-if="clickedSubmenu === 'admin'">
                 <Option @click.native="goToRoute('Pages')" :title="$t('admin_menu.pages')" icon="monitor" is-hover-disabled="true" />
                 <Option @click.native="goToRoute('Language')" :title="$t('languages')" icon="globe" is-hover-disabled="true" />
             </OptionGroup>
+
+            <!--Submenu: Billing settings-->
             <OptionGroup v-if="clickedSubmenu === 'admin' && config.isSaaS">
-                <Option v-if="" @click.native="goToRoute('Plans')" :title="$t('admin_menu.plans')" icon="database" is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Invoices')" :title="$t('admin_menu.invoices')" icon="file-text" is-hover-disabled="true" />
+                <Option @click.native="goToRoute('AppPayments')" :title="$t('Payments')" icon="credit-card" is-hover-disabled="true" />
+                <Option @click.native="goToRoute('Subscriptions')" v-if="config.subscriptionType === 'fixed'" :title="$t('Subscriptions')" icon="credit-card" is-hover-disabled="true" />
+                <Option @click.native="goToRoute('Plans')" :title="$t('admin_menu.plans')" icon="database" is-hover-disabled="true" />
+                <Option @click.native="goToRoute('Invoices')" :title="$t('Transactions')" icon="file-text" is-hover-disabled="true" />
             </OptionGroup>
         </MenuMobileGroup>
     </MenuMobile>
diff --git a/resources/js/components/Spotlight/KeyboardHints.vue b/resources/js/components/Spotlight/KeyboardHints.vue
new file mode 100644
index 00000000..1fc56656
--- /dev/null
+++ b/resources/js/components/Spotlight/KeyboardHints.vue
@@ -0,0 +1,40 @@
+<template>
+	<div v-if="! $isMobile()" class="flex items-center px-5 pb-2">
+
+		<!--Arrow key navigation-->
+		<div class="flex items-center mr-4">
+			<ArrowUpIcon size="12" class="vue-feather text-gray-400" />
+			<ArrowDownIcon size="12" class="vue-feather text-gray-400" />
+
+			<span class="text-xs ml-1.5 text-gray-400">
+				{{ $t('Navigate') }}
+			</span>
+		</div>
+
+		<!--Submit key-->
+		<div class="flex items-center">
+			<CornerDownLeftIcon size="12" class="vue-feather text-gray-400" />
+
+			<span class="text-xs ml-1.5 text-gray-400">
+				{{ $t('Go') }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		CornerDownLeftIcon,
+		ArrowDownIcon,
+		ArrowUpIcon,
+	} from 'vue-feather-icons'
+
+	export default {
+		name: 'KeyboardHints',
+		components: {
+			CornerDownLeftIcon,
+			ArrowDownIcon,
+			ArrowUpIcon,
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index 00130eb4..3f5a25a8 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -80,6 +80,7 @@
 							:class="{'dark:bg-4x-dark-foreground bg-light-background rounded-xl': i === index}"
 						>
 							<settings-icon v-if="['AppOthers', 'Profile', 'Password'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
+							<credit-card-icon v-if="result.action.value === 'AppPayments'" size="18" class="vue-feather text-theme"/>
 							<home-icon v-if="result.action.value === 'Files'" size="18" class="vue-feather text-theme"/>
 							<trash2-icon v-if="result.action.value === 'Trash'" size="18" class="vue-feather text-theme"/>
 							<database-icon v-if="['CreateFixedPlan', 'CreateMeteredPlan'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
@@ -164,43 +165,24 @@
 			</div>
 
 			<!--Hints-->
-			<div v-if="! $isMobile()" class="flex items-center px-5 pb-2">
-				<div class="flex items-center mr-4">
-					<ArrowUpIcon size="12" class="vue-feather text-gray-400"/>
-					<ArrowDownIcon size="12" class="vue-feather text-gray-400"/>
-
-					<span class="text-xs ml-1.5 text-gray-400">
-						{{ $t('Navigate') }}
-					</span>
-				</div>
-
-				<div class="flex items-center">
-					<CornerDownLeftIcon size="12" class="vue-feather text-gray-400"/>
-
-					<span class="text-xs ml-1.5 text-gray-400">
-						{{ $t('Go') }}
-					</span>
-				</div>
-			</div>
+			<KeyboardHints />
 		</div>
 	</div>
 </template>
 
 <script>
 import {
-	GridIcon,
-	Maximize2Icon,
-	ArrowDownIcon,
-	ArrowUpIcon,
 	BoxIcon,
-	CornerDownLeftIcon,
+	CreditCardIcon,
 	DatabaseIcon,
 	DollarSignIcon,
 	FileTextIcon,
 	GlobeIcon,
+	GridIcon,
 	HardDriveIcon,
 	HomeIcon,
 	LinkIcon,
+	Maximize2Icon,
 	MonitorIcon,
 	MoonIcon,
 	PowerIcon,
@@ -223,10 +205,13 @@ import {events} from '/resources/js/bus'
 import {mapGetters} from 'vuex'
 import {debounce} from 'lodash'
 import axios from "axios"
+import KeyboardHints from "./KeyboardHints";
 
 export default {
 	name: 'Spotlight',
 	components: {
+		KeyboardHints,
+		CreditCardIcon,
 		GridIcon,
 		CategoryName,
 		FilterSuggestion,
@@ -244,9 +229,6 @@ export default {
 		UsersIcon,
 		UserCheckIcon,
 		LinkIcon,
-		CornerDownLeftIcon,
-		ArrowDownIcon,
-		ArrowUpIcon,
 		SettingsIcon,
 		HomeIcon,
 		DatabaseIcon,
@@ -265,25 +247,6 @@ export default {
 			'user',
 		]),
 		actionList() {
-			let adminActions = [
-				{
-					title: this.$t('Create User'),
-					action: {
-						type: 'route',
-						value: 'UserCreate',
-					},
-				},
-				{
-					title: this.$t('Create Plan'),
-					action: {
-						type: 'route',
-						value: this.config.subscriptionType === 'fixed'
-							? 'CreateFixedPlan'
-							: 'CreateMeteredPlan',
-					},
-				},
-			]
-
 			let adminLocations = [
 				{
 					title: this.$t('Go To Dashboard'),
@@ -299,6 +262,13 @@ export default {
 						value: 'AppOthers',
 					},
 				},
+				{
+					title: this.$t('Go To Payments'),
+					action: {
+						type: 'route',
+						value: 'AppPayments',
+					},
+				},
 				{
 					title: this.$t('Go To Pages'),
 					action: {
@@ -320,13 +290,6 @@ export default {
 						value: 'Users',
 					},
 				},
-				{
-					title: this.$t('Show all Subscriptions'),
-					action: {
-						type: 'route',
-						value: 'Subscriptions',
-					},
-				},
 				{
 					title: this.$t('Show all Plans'),
 					action: {
@@ -335,7 +298,7 @@ export default {
 					},
 				},
 				{
-					title: this.$t('Show all Transactions'),
+					title: this.$t('Show Transactions'),
 					action: {
 						type: 'route',
 						value: 'Invoices',
@@ -388,6 +351,16 @@ export default {
 				},
 			]
 
+			let adminActions = [
+				{
+					title: this.$t('Create User'),
+					action: {
+						type: 'route',
+						value: 'UserCreate',
+					},
+				},
+			]
+
 			let userSettings = [
 				{
 					title: this.$t('Update Profile Settings'),
@@ -404,26 +377,19 @@ export default {
 					},
 				},
 				{
-					title: this.$t('Show My Storage Details'),
+					title: this.$t('Show Storage Details'),
 					action: {
 						type: 'route',
 						value: 'Storage',
 					},
 				},
 				{
-					title: this.$t('Show my Billing'),
+					title: this.$t('Show Billing'),
 					action: {
 						type: 'route',
 						value: 'Billing',
 					},
 				},
-				{
-					title: this.$t('Show My Transactions'),
-					action: {
-						type: 'route',
-						value: 'Invoice',
-					},
-				},
 			]
 
 			let functionList = [
@@ -448,13 +414,6 @@ export default {
 						value: 'full-screen-mode',
 					},
 				},
-				{
-					title: this.$t('Log Out'),
-					action: {
-						type: 'function',
-						value: 'log-out',
-					},
-				},
 				{
 					title: this.$t('Empty Your Trash'),
 					action: {
@@ -462,9 +421,41 @@ export default {
 						value: 'empty-trash',
 					},
 				},
+				{
+					title: this.$t('Log Out'),
+					action: {
+						type: 'function',
+						value: 'log-out',
+					},
+				},
 			]
 
 			if (this.user.data.attributes.role === 'admin') {
+
+				// Available only for fixed subscription
+				if (this.config.subscriptionType === 'fixed') {
+					adminLocations.push({
+						title: this.$t('Show all Subscriptions'),
+						action: {
+							type: 'route',
+							value: 'Subscriptions',
+						},
+					})
+				}
+
+				// Available only when is metered billing and plan doesnt exist or when is fixed billing
+				if ((this.config.subscriptionType === 'metered' && ! this.config.isCreatedMeteredPlan) || this.config.subscriptionType === 'fixed') {
+					adminActions.push({
+						title: this.$t('Create Plan'),
+						action: {
+							type: 'route',
+							value: this.config.subscriptionType === 'fixed'
+								? 'CreateFixedPlan'
+								: 'CreateMeteredPlan',
+						},
+					})
+				}
+
 				return [].concat.apply([], [functionList, userSettings, fileLocations, adminActions, adminLocations])
 			}
 
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index 7e601703..dce32b96 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -19,30 +19,16 @@
         <ContentSidebar>
 
             <!--Admin-->
-            <ContentGroup :title="$t('global.admin')" class="navigator">
+			<ContentGroup :title="$t('global.admin')" class="navigator">
                 <div class="menu-list-wrapper vertical">
-                    <router-link :to="{name: 'Dashboard'}" class="menu-list-item link">
+					<router-link v-for="(menu, i) in admin" :key="i" :to="{name: menu.route}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <box-icon size="17" />
+                            <box-icon v-if="menu.icon === 'box'" size="17" />
+                            <users-icon v-if="menu.icon === 'users'" size="17" />
+                            <settings-icon v-if="menu.icon === 'settings'" size="17" />
                         </div>
                         <div class="label text-theme">
-                            {{ $t('admin_menu.dashboard') }}
-                        </div>
-                    </router-link>
-                    <router-link :to="{name: 'Users'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <users-icon size="17" />
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('admin_menu.users') }}
-                        </div>
-                    </router-link>
-                    <router-link :to="{name: 'AppOthers'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <settings-icon size="17" />
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('admin_menu.settings') }}
+                            {{ menu.title }}
                         </div>
                     </router-link>
                 </div>
@@ -51,20 +37,13 @@
             <!--Content-->
             <ContentGroup :title="$t('Content')" class="navigator">
                 <div class="menu-list-wrapper vertical">
-                    <router-link :to="{name: 'Pages'}" class="menu-list-item link">
+					<router-link v-for="(menu, i) in content" :key="i" :to="{name: menu.route}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <monitor-icon size="17" />
+							<monitor-icon v-if="menu.icon === 'monitor'" size="17" />
+                            <globe-icon v-if="menu.icon === 'globe'" size="17" />
                         </div>
                         <div class="label text-theme">
-                            {{ $t('admin_menu.pages') }}
-                        </div>
-                    </router-link>
-                    <router-link :to="{name: 'Language'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <globe-icon size="17" />
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('admin_menu.languages') }}
+                            {{ menu.title }}
                         </div>
                     </router-link>
                 </div>
@@ -155,6 +134,39 @@
 				}[this.config.subscriptionType]
 			}
         },
+		data() {
+			return {
+				admin: [
+					{
+						title: this.$t('admin_menu.dashboard'),
+						route: 'Dashboard',
+						icon: 'box',
+					},
+					{
+						title: this.$t('admin_menu.users'),
+						route: 'Users',
+						icon: 'users',
+					},
+					{
+						title: this.$t('admin_menu.settings'),
+						route: 'AppOthers',
+						icon: 'settings',
+					},
+				],
+				content: [
+					{
+						title: this.$t('admin_menu.pages'),
+						route: 'Pages',
+						icon: 'monitor',
+					},
+					{
+						title: this.$t('admin_menu.languages'),
+						route: 'Language',
+						icon: 'globe',
+					},
+				],
+			}
+		},
         components: {
 			FilePreview,
 			Spotlight,
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index 87822dc0..9a496e39 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -3,7 +3,7 @@
 		<div class="card shadow-card">
 
 			<!--Create button-->
-			<div v-if="! config.isCreatedMeteredPlan" class="mb-6">
+			<div v-if="! config.isCreatedMeteredPlan || config.subscriptionType === 'fixed'" class="mb-6">
 				<router-link :to="{name: createPlanRoute}">
 					<MobileActionButton icon="plus">
 						{{ $t('admin_page_plans.create_plan_button') }}