- Flat fee implementation

- Fixed/Metered plan pages

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

@@ -0,0 +1,66 @@
+<template>
+    <div>
+		<div v-if="plan" class="card shadow-card pb-0 sticky top-0 z-10">
+
+			<div class="mb-2">
+				<h1 class="font-bold text-xl">
+					{{ plan.attributes.name }}
+				</h1>
+				<small class="text-sm font-bold text-gray-500">
+					{{ $t('30 Days intervals') }}
+				</small>
+			</div>
+
+			<CardNavigation :pages="pages" class="-mx-1.5" />
+		</div>
+
+		<router-view v-if="! isLoading" :plan="plan" />
+
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+	import CardNavigation from "../../../components/Admin/CardNavigation"
+	import Spinner from '/resources/js/components/FilesView/Spinner'
+	import axios from 'axios'
+
+	export default {
+		name: 'MeteredPlan',
+		components: {
+			CardNavigation,
+			Spinner,
+		},
+		data() {
+			return {
+				isLoading: true,
+				plan: undefined,
+				pages: [
+					{
+						title: this.$t('admin_page_plans.tabs.settings'),
+						route: 'PlanMeteredSettings',
+					},
+					{
+						title: this.$t('admin_page_plans.tabs.subscribers'),
+						route: 'PlanMeteredSubscribers',
+					},
+					{
+						title: this.$t('admin_page_plans.tabs.delete'),
+						route: 'PlanMeteredDelete',
+					},
+				]
+			}
+		},
+		created() {
+			axios.get('/api/subscriptions/admin/plans/' + this.$route.params.id)
+				.then(response => {
+					this.plan = response.data.data
+				})
+				.finally(() => {
+					this.isLoading = false
+				})
+		}
+	}
+</script>