From 68563b9e10347fb65782a22f2715fd8f37c56bf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Tue, 11 Jan 2022 15:20:33 +0100
Subject: [PATCH] Plan settings refactoring

---
 public/mix-manifest.json                      | 82 ++++++++++++++++---
 resources/js/components/Others/PageHeader.vue |  2 +-
 resources/js/helpers/functionHelpers.js       |  7 ++
 resources/js/store/modules/userAuth.js        |  1 +
 .../AppSettings/AppSettingsTabs/Payments.vue  | 51 +++++++++++-
 resources/js/views/Admin/Plans.vue            | 21 ++++-
 .../js/views/Admin/Plans/MeteredPlan.vue      | 29 +++++--
 resources/views/index.blade.php               |  8 ++
 8 files changed, 175 insertions(+), 26 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 2512561f..4ed685d0 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -24,8 +24,8 @@
     "/chunks/app-language.js": "/chunks/app-language.js?id=7c280e4c945a9650e6a4",
     "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js?id=50f7067283a882b798bd",
     "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6def0d7.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6def0d7.js?id=a1836cdd057c0e63adc0",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=58cbcc6751af2739e137",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=65acf30e084d788bd570",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=ed899e0c8ae8aa1c7741",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=c4b0f4ff26c5cd71b496",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=5968eed91e41e99efd4c",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=c3a013b11ae7bde6f39d",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js?id=5963f5d9fb4e759c600a",
@@ -37,8 +37,8 @@
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=8451872075acf5b1b9ab",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=e7df8df40a669c9f60d1",
-    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js?id=38a29ef278e752bcd895",
-    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=c4e25f3ee5acf4145ace",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js?id=16efe4d6a46edfdcae0c",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=7c627ccb1eb284aee632",
     "/chunks/database.js": "/chunks/database.js?id=d7d340b8f4de9faf0358",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=d2ad805b24006febdd9e",
@@ -55,14 +55,14 @@
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ef0a2dbe808eaee42c1f",
     "/chunks/not-found.js": "/chunks/not-found.js?id=9b179edd89e9b0544566",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=5b8a98b99be65d35bc8d",
-    "/chunks/pages.js": "/chunks/pages.js?id=8c6772e3224fadca2bf2",
-    "/chunks/plan.js": "/chunks/plan.js?id=f62a5bd64fb706b2f0e2",
+    "/chunks/pages.js": "/chunks/pages.js?id=fc4b17b939582125c0c3",
+    "/chunks/plan.js": "/chunks/plan.js?id=2887b10b3fd458412fe7",
     "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=27dd9038ebf8607e9157",
     "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=cda794b758e14e7e006b",
     "/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=7eff560fea52770a642f",
-    "/chunks/plans.js": "/chunks/plans.js?id=854c232c29d88c5b541a",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=743b5670a3f87609f9b8",
+    "/chunks/plans.js": "/chunks/plans.js?id=e792af207747f612d62f",
     "/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",
@@ -87,7 +87,7 @@
     "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=febde1d0b16cf45defd5",
     "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=6bf1a247e0fcffcfdad0",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=8ac19b3fcfd57d79e5b1",
-    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=bb462df01054c6fc0e48",
+    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=b44f135f876591688d94",
     "/chunks/team-folders.js": "/chunks/team-folders.js?id=aa0351b975cf45efac3b",
     "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=2269ad0b9a010b240838",
     "/chunks/trash.js": "/chunks/trash.js?id=1f5f349fb9ec23ba2e93",
@@ -98,7 +98,7 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=a51851961c9f6eab7edf",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=a765100ff7814b034649",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=cadf4829b824fd761c13",
-    "/chunks/users.js": "/chunks/users.js?id=ab7eeac6e8559dc1eb2b",
+    "/chunks/users.js": "/chunks/users.js?id=0af0b6c8e77b042faa84",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~25430133.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~25430133.js?id=1128eb985c40638c7015",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b1b635d5.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b1b635d5.js?id=c0a6986094a06f3d7543",
     "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=ab29ab0a0c2d5a40b39d",
@@ -753,5 +753,65 @@
     "/chunks/email-verified.0d66633b914aca3374f6.hot-update.js": "/chunks/email-verified.0d66633b914aca3374f6.hot-update.js",
     "/js/main.afaa2fb85c15ca045e27.hot-update.js": "/js/main.afaa2fb85c15ca045e27.hot-update.js",
     "/chunks/email-verified.65c03e0cd1f4817e7928.hot-update.js": "/chunks/email-verified.65c03e0cd1f4817e7928.hot-update.js",
-    "/chunks/email-verified.104e4f3069aab413cd4c.hot-update.js": "/chunks/email-verified.104e4f3069aab413cd4c.hot-update.js"
+    "/chunks/email-verified.104e4f3069aab413cd4c.hot-update.js": "/chunks/email-verified.104e4f3069aab413cd4c.hot-update.js",
+    "/chunks/app-payments.8af2815f53600a18dff7.hot-update.js": "/chunks/app-payments.8af2815f53600a18dff7.hot-update.js",
+    "/js/main.d4d76f7b3bdae83b01b4.hot-update.js": "/js/main.d4d76f7b3bdae83b01b4.hot-update.js",
+    "/chunks/app-payments.d4d76f7b3bdae83b01b4.hot-update.js": "/chunks/app-payments.d4d76f7b3bdae83b01b4.hot-update.js",
+    "/chunks/app-payments~chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscri~897a525f.js": "/chunks/app-payments~chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscri~897a525f.js?id=b94f4da1df918289af04",
+    "/chunks/app-payments.8156ba169eaf78be95b2.hot-update.js": "/chunks/app-payments.8156ba169eaf78be95b2.hot-update.js",
+    "/chunks/app-payments.aebdd52aeafb37fd63f2.hot-update.js": "/chunks/app-payments.aebdd52aeafb37fd63f2.hot-update.js",
+    "/chunks/app-payments.a41eee538dc5b7ca293b.hot-update.js": "/chunks/app-payments.a41eee538dc5b7ca293b.hot-update.js",
+    "/chunks/app-payments.3f58a0019f30d44f6a73.hot-update.js": "/chunks/app-payments.3f58a0019f30d44f6a73.hot-update.js",
+    "/chunks/app-payments.6f9e9bbfbb2f8b50b3fb.hot-update.js": "/chunks/app-payments.6f9e9bbfbb2f8b50b3fb.hot-update.js",
+    "/chunks/app-payments.473a241c78e413b6fde4.hot-update.js": "/chunks/app-payments.473a241c78e413b6fde4.hot-update.js",
+    "/chunks/app-payments.390bd6e884305a4a87bf.hot-update.js": "/chunks/app-payments.390bd6e884305a4a87bf.hot-update.js",
+    "/chunks/app-payments.746881fc869308c1b14f.hot-update.js": "/chunks/app-payments.746881fc869308c1b14f.hot-update.js",
+    "/chunks/app-payments.1b4810221db8fde224f9.hot-update.js": "/chunks/app-payments.1b4810221db8fde224f9.hot-update.js",
+    "/js/main.11373b2973adae8b47d5.hot-update.js": "/js/main.11373b2973adae8b47d5.hot-update.js",
+    "/chunks/app-others.11373b2973adae8b47d5.hot-update.js": "/chunks/app-others.11373b2973adae8b47d5.hot-update.js",
+    "/chunks/app-others~chunks/app-payments.js": "/chunks/app-others~chunks/app-payments.js?id=a338b6a159cae084e83e",
+    "/chunks/app-payments.11373b2973adae8b47d5.hot-update.js": "/chunks/app-payments.11373b2973adae8b47d5.hot-update.js",
+    "/chunks/app-payments.7beb162f8006ec82a9a8.hot-update.js": "/chunks/app-payments.7beb162f8006ec82a9a8.hot-update.js",
+    "/chunks/app-payments.568898ce89a5acfb8569.hot-update.js": "/chunks/app-payments.568898ce89a5acfb8569.hot-update.js",
+    "/chunks/app-payments.7aac4907740de577a7fd.hot-update.js": "/chunks/app-payments.7aac4907740de577a7fd.hot-update.js",
+    "/chunks/app-payments.97ea20bc4923db43da1c.hot-update.js": "/chunks/app-payments.97ea20bc4923db43da1c.hot-update.js",
+    "/chunks/app-payments.2479c23d0078b1b4ef53.hot-update.js": "/chunks/app-payments.2479c23d0078b1b4ef53.hot-update.js",
+    "/chunks/app-payments.0c2eb052b348fb93bf53.hot-update.js": "/chunks/app-payments.0c2eb052b348fb93bf53.hot-update.js",
+    "/chunks/app-payments.e11307387604e4e0af60.hot-update.js": "/chunks/app-payments.e11307387604e4e0af60.hot-update.js",
+    "/chunks/app-payments.7d49a46325b3c1789107.hot-update.js": "/chunks/app-payments.7d49a46325b3c1789107.hot-update.js",
+    "/chunks/app-payments.ca5fbdac5ab44e4b3d8a.hot-update.js": "/chunks/app-payments.ca5fbdac5ab44e4b3d8a.hot-update.js",
+    "/chunks/app-payments.60de509ea378b34ddb1d.hot-update.js": "/chunks/app-payments.60de509ea378b34ddb1d.hot-update.js",
+    "/chunks/app-payments.4f091cd562c988c90722.hot-update.js": "/chunks/app-payments.4f091cd562c988c90722.hot-update.js",
+    "/chunks/app-payments.a63b206eb0e47a65a091.hot-update.js": "/chunks/app-payments.a63b206eb0e47a65a091.hot-update.js",
+    "/chunks/app-payments.4368356d73bba789d436.hot-update.js": "/chunks/app-payments.4368356d73bba789d436.hot-update.js",
+    "/chunks/app-payments.e4b913e5575c930e30bd.hot-update.js": "/chunks/app-payments.e4b913e5575c930e30bd.hot-update.js",
+    "/chunks/app-payments.d21319bd69fed81cc476.hot-update.js": "/chunks/app-payments.d21319bd69fed81cc476.hot-update.js",
+    "/chunks/app-payments.edabb5ba92832f4136f0.hot-update.js": "/chunks/app-payments.edabb5ba92832f4136f0.hot-update.js",
+    "/chunks/app-payments.696b3e10bf5e3e2babc9.hot-update.js": "/chunks/app-payments.696b3e10bf5e3e2babc9.hot-update.js",
+    "/chunks/app-payments.753eb258af5cbde5e8b9.hot-update.js": "/chunks/app-payments.753eb258af5cbde5e8b9.hot-update.js",
+    "/chunks/app-payments.fd3d943f9075192c7b4e.hot-update.js": "/chunks/app-payments.fd3d943f9075192c7b4e.hot-update.js",
+    "/chunks/app-payments.bdef768835dad17127eb.hot-update.js": "/chunks/app-payments.bdef768835dad17127eb.hot-update.js",
+    "/chunks/app-payments.0c8f56eddb29f610ac5e.hot-update.js": "/chunks/app-payments.0c8f56eddb29f610ac5e.hot-update.js",
+    "/chunks/app-payments.b0d1275bc305867ee44f.hot-update.js": "/chunks/app-payments.b0d1275bc305867ee44f.hot-update.js",
+    "/chunks/app-payments.4a336df4caab195f222e.hot-update.js": "/chunks/app-payments.4a336df4caab195f222e.hot-update.js",
+    "/chunks/app-payments.bddb11d23d334cff833c.hot-update.js": "/chunks/app-payments.bddb11d23d334cff833c.hot-update.js",
+    "/chunks/app-payments.82273c49ad53c4d1730d.hot-update.js": "/chunks/app-payments.82273c49ad53c4d1730d.hot-update.js",
+    "/js/main.c327a03e9871933f19ce.hot-update.js": "/js/main.c327a03e9871933f19ce.hot-update.js",
+    "/chunks/plans.a3b7a91e59717b9ff17b.hot-update.js": "/chunks/plans.a3b7a91e59717b9ff17b.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.6f2f641780b601b2515d.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.6f2f641780b601b2515d.hot-update.js",
+    "/chunks/pages.6f2f641780b601b2515d.hot-update.js": "/chunks/pages.6f2f641780b601b2515d.hot-update.js",
+    "/chunks/plans.6f2f641780b601b2515d.hot-update.js": "/chunks/plans.6f2f641780b601b2515d.hot-update.js",
+    "/chunks/subscriptions.6f2f641780b601b2515d.hot-update.js": "/chunks/subscriptions.6f2f641780b601b2515d.hot-update.js",
+    "/js/main.c33de614f7c758a71ad8.hot-update.js": "/js/main.c33de614f7c758a71ad8.hot-update.js",
+    "/chunks/plans.88941e0149b1bbf63e9b.hot-update.js": "/chunks/plans.88941e0149b1bbf63e9b.hot-update.js",
+    "/chunks/plans.2e4eb0c8141d8448cee9.hot-update.js": "/chunks/plans.2e4eb0c8141d8448cee9.hot-update.js",
+    "/chunks/plans.33548312dadb6d3248e7.hot-update.js": "/chunks/plans.33548312dadb6d3248e7.hot-update.js",
+    "/chunks/plans.434e413a997dbc79f086.hot-update.js": "/chunks/plans.434e413a997dbc79f086.hot-update.js",
+    "/chunks/plans.59f0efd32c6c41981112.hot-update.js": "/chunks/plans.59f0efd32c6c41981112.hot-update.js",
+    "/chunks/plans.bf3223b1e56b11429076.hot-update.js": "/chunks/plans.bf3223b1e56b11429076.hot-update.js",
+    "/chunks/plans.4ca893ed6403ba4e3638.hot-update.js": "/chunks/plans.4ca893ed6403ba4e3638.hot-update.js",
+    "/chunks/plan.0c8d4a81a2aa99d4079f.hot-update.js": "/chunks/plan.0c8d4a81a2aa99d4079f.hot-update.js",
+    "/chunks/plan.2b32d62cd4711a46f1bd.hot-update.js": "/chunks/plan.2b32d62cd4711a46f1bd.hot-update.js",
+    "/chunks/plan.872c79d6415d66c43bde.hot-update.js": "/chunks/plan.872c79d6415d66c43bde.hot-update.js",
+    "/chunks/plan.74e9e37c0694609d6373.hot-update.js": "/chunks/plan.74e9e37c0694609d6373.hot-update.js"
 }
diff --git a/resources/js/components/Others/PageHeader.vue b/resources/js/components/Others/PageHeader.vue
index da10b77a..cab39d9c 100644
--- a/resources/js/components/Others/PageHeader.vue
+++ b/resources/js/components/Others/PageHeader.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="page-header">
         <div class="go-back" v-if="canBack" @click="$router.back()">
-            <chevron-left-icon size="17"></chevron-left-icon>
+            <chevron-left-icon size="17" />
         </div>
         <div class="content">
             <h1 class="title">{{ title }}</h1>
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 458f2f61..822649a6 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -392,6 +392,13 @@ const FunctionHelpers = {
             }[type]
         }
 
+        Vue.prototype.$getPlanStatusColor = function (type) {
+            return {
+                'active': 'green',
+                'archived': 'red',
+            }[type]
+        }
+
         Vue.prototype.$getTransactionTypeTextColor = function (type) {
 
             return {
diff --git a/resources/js/store/modules/userAuth.js b/resources/js/store/modules/userAuth.js
index e6b0f420..66d4054f 100644
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -46,6 +46,7 @@ const actions = {
             .then(() => {
                 clearTimeout(popup)
                 commit('DESTROY_DATA')
+                commit('SET_AUTHORIZED', false)
 
                 router.push({name: 'Homepage'})
             })
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
index cc8ac801..9183db35 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
@@ -21,13 +21,27 @@
 				{{ $t('Metered Billing Settings') }}
 			</FormLabel>
 
-			<AppInputSwitch :title="$t('Allow Registration Bonus')" :description="$t('User credit automatically user bonus to the balance after user registration.')" :is-last="! allowedRegistrationBonus">
+			<AppInputSwitch :title="$t('Allow Registration Bonus')" :description="$t('Credit user automatically bonus to his balance after registration.')">
 				<SwitchInput @input="$updateText('/admin/settings', 'allowed_registration_bonus', allowedRegistrationBonus)" v-model="allowedRegistrationBonus" :state="allowedRegistrationBonus" />
 			</AppInputSwitch>
 
-			<AppInputText v-if="allowedRegistrationBonus" :title="$t('Registration Bonus Amount')" :description="this.$t('This bonus will be automatically added when user successfully register his account.')" :is-last="true">
+			<AppInputText v-if="allowedRegistrationBonus" :title="$t('The Amount of Registration Bonus')" :description="$t('This bonus will be automatically added when user successfully register his account.')">
 				<input @input="$updateText('/admin/settings', 'registration_bonus_amount', registrationBonusAmount)" v-model="registrationBonusAmount" :placeholder="$t('Type registration bonus amount...')" type="number" class="focus-border-theme input-dark" />
 			</AppInputText>
+
+			<AppInputButton :title="$t('Metered Plan')" :description="$t('Your price set up for billing multiple features by user usage.')" :is-last="true">
+				<router-link v-if="config.isCreatedMeteredPlan" :to="{name: 'PlanMeteredSettings', params: {id: config.meteredPlanId}}">
+					<ButtonBase v-if="config.isCreatedMeteredPlan" class="sm:w-auto w-full" button-style="theme">
+						{{ $t('Plan Details') }}
+					</ButtonBase>
+				</router-link>
+
+				<router-link v-if="! config.isCreatedMeteredPlan" :to="{name: 'CreateMeteredPlan'}">
+					<ButtonBase class="sm:w-auto w-full" button-style="theme-solid">
+						{{ $t('Create Plan') }}
+					</ButtonBase>
+				</router-link>
+			</AppInputButton>
 		</div>
 
 		<!--Stripe method configuration-->
@@ -199,8 +213,10 @@
 
 <script>
     import {
-		Edit2Icon,
+		Edit2Icon, Trash2Icon,
 	} from 'vue-feather-icons'
+	import AppInputButton from "../../../../components/Admin/AppInputButton";
+	import DatatableWrapper from "../../../../components/Others/Tables/DatatableWrapper";
 	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
@@ -222,6 +238,8 @@
 	export default {
 		name: 'AppPayments',
 		components: {
+			AppInputButton,
+			DatatableWrapper,
 			ValidationObserver,
 			ValidationProvider,
 			AppInputSwitch,
@@ -233,6 +251,7 @@
 			ButtonBase,
 			CopyInput,
 			FormLabel,
+			Trash2Icon,
 			Edit2Icon,
 			SetupBox,
 			required,
@@ -288,6 +307,32 @@
 						secret: undefined,
 					}
 				},
+
+				columns: [
+					{
+						label: this.$t('Name'),
+						field: 'name',
+						sortable: true
+					},
+					{
+						label: this.$t('Currency'),
+						field: 'currency',
+						sortable: true
+					},
+					{
+						label: this.$t('Interval'),
+						field: 'interval',
+						sortable: true
+					},
+					{
+						label: this.$t('admin_page_plans.table.subscribers'),
+						sortable: false
+					},
+					{
+						label: this.$t('admin_page_user.table.action'),
+						sortable: false
+					},
+				]
 			}
 		},
 		methods: {
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index 38d02fba..87822dc0 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -1,7 +1,9 @@
 <template>
     <div>
 		<div class="card shadow-card">
-			<div class="mb-6">
+
+			<!--Create button-->
+			<div v-if="! config.isCreatedMeteredPlan" class="mb-6">
 				<router-link :to="{name: createPlanRoute}">
 					<MobileActionButton icon="plus">
 						{{ $t('admin_page_plans.create_plan_button') }}
@@ -15,11 +17,16 @@
 
 					<!--Metered subscription-->
                     <tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td>
+                        <td class="py-4">
 							<router-link class="text-sm font-bold" :to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}">
                             	{{ row.data.attributes.name }}
 							</router-link>
                         </td>
+						<td>
+							<ColorLabel :color="$getPlanStatusColor(row.data.attributes.status)">
+								{{ row.data.attributes.status }}
+							</ColorLabel>
+						</td>
                         <td>
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.currency }}
@@ -44,6 +51,7 @@
                                     <Edit2Icon size="15" class="opacity-75" />
                                 </router-link>
                                 <router-link
+									v-if="row.data.attributes.status !== 'archived'"
 									:to="{name: 'PlanMeteredDelete', params: {id: row.data.id}}"
 									class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors"
 								>
@@ -135,8 +143,9 @@
     import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
     import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
     import Spinner from '/resources/js/components/FilesView/Spinner'
+	import ColorLabel from "../../components/Others/ColorLabel";
+    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
     import { mapGetters } from 'vuex'
 
     export default {
@@ -146,6 +155,7 @@
             EmptyPageContent,
             DatatableWrapper,
             SwitchInput,
+			ColorLabel,
             Trash2Icon,
             ButtonBase,
             Edit2Icon,
@@ -172,6 +182,11 @@
 							field: 'name',
 							sortable: true
 						},
+						{
+							label: this.$t('Status'),
+							field: 'status',
+							sortable: true
+						},
 						{
 							label: this.$t('Currency'),
 							field: 'currency',
diff --git a/resources/js/views/Admin/Plans/MeteredPlan.vue b/resources/js/views/Admin/Plans/MeteredPlan.vue
index 3d5f039b..212e390c 100644
--- a/resources/js/views/Admin/Plans/MeteredPlan.vue
+++ b/resources/js/views/Admin/Plans/MeteredPlan.vue
@@ -26,6 +26,7 @@
 	import CardNavigation from "../../../components/Admin/CardNavigation"
 	import Spinner from '/resources/js/components/FilesView/Spinner'
 	import axios from 'axios'
+	import {mapGetters} from "vuex";
 
 	export default {
 		name: 'MeteredPlan',
@@ -33,11 +34,12 @@
 			CardNavigation,
 			Spinner,
 		},
-		data() {
-			return {
-				isLoading: true,
-				plan: undefined,
-				pages: [
+		computed: {
+			...mapGetters([
+				'config'
+			]),
+			pages() {
+				let pages = [
 					{
 						title: this.$t('admin_page_plans.tabs.settings'),
 						route: 'PlanMeteredSettings',
@@ -46,11 +48,22 @@
 						title: this.$t('admin_page_plans.tabs.subscribers'),
 						route: 'PlanMeteredSubscribers',
 					},
-					{
+				]
+
+				if (this.plan && this.plan.attributes.status === 'active') {
+					pages.push({
 						title: this.$t('admin_page_plans.tabs.delete'),
 						route: 'PlanMeteredDelete',
-					},
-				]
+					})
+				}
+
+				return pages
+			}
+		},
+		data() {
+			return {
+				isLoading: true,
+				plan: undefined,
 			}
 		},
 		created() {
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 0de8af45..d750109f 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,3 +1,9 @@
+@php
+    use VueFileManager\Subscription\Domain\Plans\Models\Plan;
+
+    $plan = Plan::where('status', 'active')->where('type', 'metered');
+@endphp
+
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
@@ -78,6 +84,8 @@
             // Metered
 			allowed_registration_bonus: {{ $settings->allowed_registration_bonus ?? 0 }},
 			registration_bonus_amount: {{ $settings->registration_bonus_amount ?? 0 }},
+			isCreatedMeteredPlan: {{ $plan->exists() ? 1 : 0 }},
+			meteredPlanId: '{{ $plan->exists() ? $plan->first()->id : null }}',
 
             // Payments
             allowed_payments: {{ $settings->allowed_payments ?? 0 }},