update/delete billing alert

resources/js/views/Admin/Users/User.vue

@@ -39,6 +39,7 @@
     import PageHeader from '/resources/js/components/Others/PageHeader'
     import ColorLabel from '/resources/js/components/Others/ColorLabel'
     import Spinner from '/resources/js/components/FilesView/Spinner'
+	import {events} from '/resources/js/bus'
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -80,13 +81,9 @@
 						route: 'UserStorage',
 					},
 					{
-						title: this.$t('admin_page_user.tabs.subscription'),
+						title: this.$t('Billing'),
 						route: 'UserSubscription',
 					},
-					{
-						title: this.$t('Transactions'),
-						route: 'UserInvoices',
-					},
 					{
 						title: this.$t('admin_page_user.tabs.password'),
 						route: 'UserPassword',
@@ -109,6 +106,8 @@
         },
         created() {
             this.fetchUser()
+
+			events.$on('reload:user', () => this.fetchUser())
         }
     }
 </script>

resources/js/views/Admin/Users/UserCreate.vue

@@ -13,14 +13,14 @@
 			<!--Email-->
             <ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
-                    <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
 
 			<!--Name-->
             <ValidationProvider tag="div" mode="passive" name="user name" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_name')" :error="errors[0]">
-                    <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
 
@@ -28,12 +28,12 @@
             <div class="flex space-x-4">
                 <ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
                     <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
-                        <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                        <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                     </AppInputText>
                 </ValidationProvider>
                 <ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
                     <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
-                        <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                        <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                     </AppInputText>
                 </ValidationProvider>
             </div>
@@ -51,7 +51,7 @@
 			<!--Storage Capacity-->
             <ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
-                    <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
         </div>

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

@@ -14,7 +14,7 @@
 							   :placeholder="$t('admin_page_user.placeholder_delete_user')"
 							   type="text"
 							   class="focus-border-theme input-dark"
-							   :class="{'is-error': errors[0]}"
+							   :class="{'border-red-700': errors[0]}"
 						/>
 						<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
 							{{ $t('admin_page_user.delete_user') }}

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

@@ -0,0 +1,96 @@
+<template>
+	<div class="card shadow-card">
+		<div class="md:flex md:space-x-10 mb-8">
+			<div class="md:mb-0 mb-6">
+				<b class="block leading-5 text-lg">
+					{{ status }}
+				</b>
+				<small class="text-gray-500">
+					{{ $t('We will send you a notification upon Subscription expiration') }}
+				</small>
+			</div>
+			<div>
+				<b class="block leading-5 text-lg">
+					{{ price }}
+				</b>
+				<small class="text-gray-500">
+					{{ subscription.relationships.plan.data.attributes.name }}
+				</small>
+			</div>
+		</div>
+
+		<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
+			<b class="mb-3 block text-sm text-gray-400">
+				{{ limit.message }}
+			</b>
+			<ProgressLine :data="limit.distribution" />
+		</div>
+	</div>
+</template>
+<script>
+	import ProgressLine from "../../../../components/Admin/ProgressLine"
+	import {mapGetters} from "vuex";
+
+	export default {
+		name: 'UserFixedSubscription',
+		props: [
+			'subscription',
+			'user',
+		],
+		components: {
+			ProgressLine
+		},
+		computed: {
+			status() {
+				return {
+					'active': `Active until ${this.subscription.attributes.renews_at}`,
+					'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
+				}[this.subscription.attributes.status]
+			},
+			price() {
+				return {
+					'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
+					'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
+				}[this.subscription.relationships.plan.data.attributes.interval]
+			},
+		},
+		data() {
+			return {
+				limitations: []
+			}
+		},
+		created() {
+			Object
+				.entries(this.user.data.meta.limitations)
+				.map(([key, item]) => {
+
+					let payload = {
+						color: {
+							'max_storage_amount': 'warning',
+							'max_team_members': 'purple',
+						},
+						message: {
+							'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
+							'max_team_members': `Total ${item.use} of ${item.total} Members`,
+						},
+						title: {
+							'max_storage_amount': `Storage`,
+							'max_team_members': `Team Members`,
+						}
+					}
+
+					this.limitations.push({
+						message: payload.message[key],
+						distribution: [
+							{
+								progress: item.percentage,
+								color: payload.color[key],
+								title: payload.title[key],
+							}
+						]
+					})
+				})
+		}
+
+	}
+</script>

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

@@ -1,96 +0,0 @@
-<template>
-    <PageTab :is-loading="isLoading">
-		<div class="card shadow-card">
-			<DatatableWrapper
-				@init="isLoading = false"
-				:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
-				:paginator="true"
-				:columns="columns"
-			>
-                <template slot-scope="{ row }">
-                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td class="py-4">
-                            <span class="text-sm font-bold">
-								{{ row.data.attributes.note }}
-							</span>
-                        </td>
-                        <td>
-							<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
-                                {{ row.data.attributes.status }}
-							</ColorLabel>
-                        </td>
-                        <td>
-                            <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
-                                {{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
-                            </span>
-                        </td>
-                        <td>
-                            <span class="text-sm font-bold">
-                                {{ row.data.attributes.created_at }}
-                            </span>
-                        </td>
-                        <td class="text-right">
-                            <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
-                        </td>
-                    </tr>
-                </template>
-
-				<!--Empty page-->
-                <template v-slot:empty-page>
-                    <InfoBox>
-                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
-                    </InfoBox>
-                </template>
-            </DatatableWrapper>
-		</div>
-    </PageTab>
-</template>
-
-<script>
-    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
-	import ColorLabel from "/resources/js/components/Others/ColorLabel"
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-
-    export default {
-        name: 'UserInvoices',
-        components: {
-            DatatableWrapper,
-			ColorLabel,
-            InfoBox,
-            PageTab,
-        },
-        data() {
-            return {
-                isLoading: true,
-                columns: [
-                    {
-                        label: this.$t('Note'),
-                        field: 'note',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('Status'),
-                        field: 'status',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('admin_page_invoices.table.total'),
-                        field: 'amount',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('Payed At'),
-                        field: 'created_at',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('Service'),
-						field: 'driver',
-                        sortable: true
-                    },
-                ],
-            }
-        },
-    }
-</script>

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

@@ -0,0 +1,150 @@
+<template>
+	<div>
+		<!--Balance-->
+		<div class="card shadow-card">
+			<FormLabel icon="hard-drive">
+				{{ $t('Balance') }}
+			</FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ user.data.relationships.balance.data.attributes.formatted }}
+			</b>
+
+			<ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
+				<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
+					<AppInputText :description="$t('User balance will be increased for the amount above.')" :error="errors[0]" :is-last="true">
+						<div class="flex space-x-4">
+							<input v-model="balanceAmount"
+								   :placeholder="$t('Increase user balance for...')"
+								   type="number"
+								   min="1"
+								   max="999999999"
+								   class="focus-border-theme input-dark"
+								   :class="{'border-red-700': errors[0]}"
+							/>
+							<ButtonBase type="submit" button-style="theme" class="submit-button"
+								:loading="isUpdatingBalanceAmount"
+								:disabled="isUpdatingBalanceAmount"
+							>
+								{{ $t('Increase Balance') }}
+							</ButtonBase>
+						</div>
+					</AppInputText>
+				</ValidationProvider>
+			</ValidationObserver>
+		</div>
+
+		<!--Usage Estimates-->
+		<div class="card shadow-card">
+			<FormLabel icon="hard-drive">
+				{{ $t('Usage Estimates') }}
+			</FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ user.data.meta.usages.costEstimate }}
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ user.data.relationships.subscription.data.attributes.updated_at }} {{ $t('till now') }}
+			</b>
+
+			<div>
+				<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
+					<div class="w-2/4 leading-none">
+						<b class="text-sm font-bold leading-none">
+							{{ $t(usage.feature) }}
+						</b>
+						<small class="text-xs text-gray-500 pt-2 leading-none block">
+							{{ $t(`feature_usage_desc_${usage.feature}`) }}
+						</small>
+					</div>
+					<div class="text-left w-1/4">
+						<span class="text-sm font-bold text-gray-560">
+							{{ usage.usage }}
+						</span>
+					</div>
+					<div class="text-right w-1/4">
+						<span class="text-sm font-bold text-theme">
+							{{ usage.cost }}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+	import AppInputText from "../../../../components/Admin/AppInputText"
+	import FormLabel from "../../../../components/Others/Forms/FormLabel"
+	import ButtonBase from "../../../../components/FilesView/ButtonBase"
+	import ColorLabel from "../../../../components/Others/ColorLabel"
+	import {mapGetters} from "vuex";
+	import axios from "axios";
+	import {events} from "../../../../bus";
+
+	export default {
+		name: 'UserMeteredSubscription',
+		props: [
+			'subscription',
+			'user',
+		],
+		components: {
+			ValidationProvider,
+			ValidationObserver,
+			AppInputText,
+			ButtonBase,
+			ColorLabel,
+			FormLabel,
+		},
+		computed: {
+			...mapGetters([
+
+			]),
+		},
+		data() {
+			return {
+				balanceAmount: undefined,
+				isUpdatingBalanceAmount: false,
+			}
+		},
+		methods: {
+			async increaseBalance() {
+				// Validate fields
+				const isValid = await this.$refs.creditUserBalance.validate();
+
+				if (!isValid) return;
+
+				this.isUpdatingBalanceAmount = true
+
+				axios
+					.post(`/api/subscriptions/admin/users/${this.user.data.id}/credit`, {
+						amount: this.balanceAmount
+					})
+					.then(() => {
+						events.$emit('reload:user')
+
+						this.balanceAmount = undefined
+
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('User balance was successfully increased'),
+						})
+					})
+					.catch(() => {
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('popup_error.title'),
+						})
+					})
+					.finally(() => {
+						this.isUpdatingBalanceAmount = false
+					})
+			}
+		},
+		created() {
+
+		}
+
+	}
+</script>

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

@@ -64,7 +64,7 @@
 								   min="1"
 								   max="999999999"
 								   class="focus-border-theme input-dark"
-								   :class="{'is-error': errors[0]}"
+								   :class="{'border-red-700': errors[0]}"
 							/>
 							<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
 								{{ $t('admin_page_user.change_capacity') }}

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

@@ -1,33 +1,68 @@
 <template>
     <PageTab :is-loading="isLoading">
-		<div v-if="subscription" class="card shadow-card">
-			<div class="md:flex md:space-x-10 mb-8">
-				<div class="md:mb-0 mb-6">
-					<b class="block leading-5 text-lg">
-						{{ status }}
-					</b>
-					<small class="text-gray-500">
-						{{ $t('We will send you a notification upon Subscription expiration') }}
-					</small>
-				</div>
-				<div>
-					<b class="block leading-5 text-lg">
-						{{ price }}
-					</b>
-					<small class="text-gray-500">
-						{{ subscription.relationships.plan.data.attributes.name }}
-					</small>
-				</div>
-			</div>
 
-			<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
-				<b class="mb-3 block text-sm text-gray-400">
-					{{ limit.message }}
-				</b>
-				<ProgressLine :data="limit.distribution" />
-			</div>
+		<UserMeteredSubscription
+			v-if="subscription && config.subscriptionType === 'metered'"
+			:subscription="subscription"
+			:user="user"
+		/>
+
+		<UserFixedSubscription
+			v-if="subscription && config.subscriptionType === 'fixed'"
+			:subscription="subscription"
+			:user="user"
+		/>
+
+		<!--Transactions-->
+		<div class="card shadow-card">
+			<FormLabel icon="file-text">
+                {{ $t('Transactions') }}
+            </FormLabel>
+
+			<DatatableWrapper
+				@init="isLoading = false"
+				:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
+				:paginator="true"
+				:columns="columns"
+			>
+                <template slot-scope="{ row }">
+                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
+                        <td class="py-4">
+                            <span class="text-sm font-bold">
+								{{ row.data.attributes.note }}
+							</span>
+                        </td>
+                        <td>
+							<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
+                                {{ row.data.attributes.status }}
+							</ColorLabel>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
+                                {{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                                {{ row.data.attributes.created_at }}
+                            </span>
+                        </td>
+                        <td class="text-right">
+                            <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+                        </td>
+                    </tr>
+                </template>
+
+				<!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
+                    </InfoBox>
+                </template>
+            </DatatableWrapper>
 		</div>
 
+		<!--Empty Message-->
 		<div v-if="! subscription && !isLoading" class="card shadow-card">
 			<InfoBox style="margin-bottom: 0">
 				<p>{{ $t("User don't have any subscription") }}</p>
@@ -37,10 +72,14 @@
 </template>
 
 <script>
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-	import ProgressLine from "../../../../components/Admin/ProgressLine"
+    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
+	import FormLabel from "../../../../components/Others/Forms/FormLabel";
+	import ColorLabel from "/resources/js/components/Others/ColorLabel"
 	import PageTab from '/resources/js/components/Others/Layout/PageTab'
 	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+	import UserMeteredSubscription from "./UserMeteredSubscription";
+	import UserFixedSubscription from "./UserFixedSubscription"
+	import {mapGetters} from "vuex";
 	import axios from 'axios'
 
 	export default {
@@ -49,30 +88,50 @@
 			'user'
 		],
 		components: {
-			ProgressLine,
-			ButtonBase,
+			UserMeteredSubscription,
+			UserFixedSubscription,
+			DatatableWrapper,
+			ColorLabel,
+			FormLabel,
 			InfoBox,
 			PageTab,
 		},
 		computed: {
-			status() {
-				return {
-					'active': `Active until ${this.subscription.attributes.renews_at}`,
-					'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
-				}[this.subscription.attributes.status]
-			},
-			price() {
-				return {
-					'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
-					'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
-				}[this.subscription.relationships.plan.data.attributes.interval]
-			},
+			...mapGetters([
+				'config',
+			]),
 		},
 		data() {
 			return {
 				subscription: undefined,
 				isLoading: true,
-				limitations: [],
+				columns: [
+					{
+						label: this.$t('Note'),
+						field: 'note',
+						sortable: true
+					},
+					{
+						label: this.$t('Status'),
+						field: 'status',
+						sortable: true
+					},
+					{
+						label: this.$t('admin_page_invoices.table.total'),
+						field: 'amount',
+						sortable: true
+					},
+					{
+						label: this.$t('Payed At'),
+						field: 'created_at',
+						sortable: true
+					},
+					{
+						label: this.$t('Service'),
+						field: 'driver',
+						sortable: true
+					},
+				],
 			}
 		},
 		created() {
@@ -80,37 +139,6 @@
 				.then(response => {
 					this.subscription = response.data.data
 
-					Object
-						.entries(this.user.data.meta.limitations)
-						.map(([key, item]) => {
-
-							let payload = {
-								color: {
-									'max_storage_amount': 'warning',
-									'max_team_members': 'purple',
-								},
-								message: {
-									'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
-									'max_team_members': `Total ${item.use} of ${item.total} Members`,
-								},
-								title: {
-									'max_storage_amount': `Storage`,
-									'max_team_members': `Team Members`,
-								}
-							}
-
-							this.limitations.push({
-								message: payload.message[key],
-								distribution: [
-									{
-										progress: item.percentage,
-										color: payload.color[key],
-										title: payload.title[key],
-									}
-								]
-							})
-						})
-
 					this.isLoading = false
 				})
 				.catch(error => {