- balance implementation

- invoice refactoring

resources/js/components/Others/MobileNavigation.vue

@@ -4,7 +4,7 @@
         <!--User avatar-->
         <UserHeadline v-if="!clickedSubmenu" class="user-info" />
 
-		<div class="block px-5 pt-2">
+		<div v-if="config.subscriptionType === 'metered'" 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:') }}

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -5,14 +5,14 @@
 		<div v-if="user" class="mb-auto text-center">
 
 			<MemberAvatar
-				class="mb-1 mx-auto inline-block"
+				class="mx-auto inline-block"
 				:size="44"
 				:is-border="false"
 				:member="user"
 			/>
 
 			<!--Usage-->
-			<div class="text-center leading-3 mb-7">
+			<div v-if="config.subscriptionType === 'metered'" class="text-center leading-3 mt-1">
 				<b class="text-xs font-bold leading-3 block text-theme">
 					$22,93
 				</b>
@@ -22,19 +22,21 @@
 			</div>
 
 			<!--Navigation-->
-            <router-link
-				v-for="item in navigation"
-				:to="{name: item.route}"
-				:title="item.title"
-				:class="[{'router-link-active': isSection(item.section)}, item.icon]"
-				class="block mb-1.5"
-			>
-                <div class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 text-theme rounded-xl">
-                    <hard-drive-icon v-if="item.icon === 'home'" size="20" />
-                    <settings-icon v-if="item.icon === 'settings'" size="20" />
-                    <user-icon v-if="item.icon === 'user'" size="20" />
-                </div>
-            </router-link>
+			<div class="mt-7">
+				<router-link
+					v-for="item in navigation"
+					:to="{name: item.route}"
+					:title="item.title"
+					:class="[{'router-link-active': isSection(item.section)}, item.icon]"
+					class="block mb-1.5"
+				>
+					<div class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 text-theme rounded-xl">
+						<hard-drive-icon v-if="item.icon === 'home'" size="20" />
+						<settings-icon v-if="item.icon === 'settings'" size="20" />
+						<user-icon v-if="item.icon === 'user'" size="20" />
+					</div>
+				</router-link>
+			</div>
 
 			<!--Toggle Dark/Light mode-->
 			<div @click="toggleDarkMode" :title="$t('dark_mode_toggle')" class="block mt-6">
@@ -84,6 +86,7 @@
 		computed: {
 			...mapGetters([
 				'isDarkMode',
+				'config',
 				'user',
 			]),
 			navigation() {

resources/js/routes/routesUser.js

@@ -38,16 +38,6 @@ const routesUser = [
 					title: 'routes_title.settings_storage'
 				},
 			},
-			{
-				name: 'Invoice',
-				path: '/user/settings/invoices',
-				component: () =>
-					import(/* webpackChunkName: "chunks/settings-invoices" */ '../views/User/Invoices'),
-				meta: {
-					requiresAuth: true,
-					title: 'routes_title.invoices'
-				},
-			},
 			{
 				name: 'Subscription',
 				path: '/user/settings/subscription',

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

@@ -88,7 +88,7 @@
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
     import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
     import {required} from 'vee-validate/dist/rules'
-	import BarChart from "../../../User/BarChart"
+	import BarChart from "../../../../components/UI/BarChart"
     import {events} from '/resources/js/bus'
     import {mapGetters} from "vuex"
     import axios from 'axios'

resources/js/views/Profile.vue

@@ -149,17 +149,9 @@
 						title: this.$t('menu.subscription'),
 						route: 'Subscription',
 					},
-					{
-						title: this.$t('Transactions'),
-						route: 'Invoice',
-					},
 				]
 
 				let meteredSubscription = [
-					{
-						title: this.$t('Billing'),
-						route: 'MeteredSubscription',
-					},
 					{
 						title: this.$t('menu.profile'),
 						route: 'Profile',
@@ -172,12 +164,16 @@
 						title: this.$t('menu.storage'),
 						route: 'Storage',
 					},
+					{
+						title: this.$t('Billing'),
+						route: 'MeteredSubscription',
+					},
 				]
 
 				return {
 					fixed: fixedSubscription,
 					metered: meteredSubscription,
-				}['metered']
+				}[this.config.subscriptionType]
 			}
         },
         data() {

resources/js/views/User/Invoices.vue

@@ -1,97 +0,0 @@
-<template>
-    <PageTab :is-loading="isLoading">
-		<div class="card shadow-card">
-			<DatatableWrapper
-				@init="isLoading = false"
-				api="/api/subscriptions/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 PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-	import ColorLabel from "/resources/js/components/Others/ColorLabel"
-
-    export default {
-        name: 'UserInvoices',
-        components: {
-            DatatableWrapper,
-			ColorLabel,
-            InfoBox,
-            PageTab,
-        },
-        data() {
-            return {
-                isLoading: true,
-                invoices: undefined,
-				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/User/MeteredSubscription.vue

@@ -8,7 +8,7 @@
             </FormLabel>
 
 			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
-				$52.90
+				{{ user.data.relationships.balance.data.attributes.formatted }}
 			</b>
 
 			<ValidationObserver ref="changeStorageCapacity" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
@@ -47,7 +47,7 @@
 			</b>
 
 			<div>
-				<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="usage in usages">
+				<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in usages" :ke="i">
 					<div class="w-2/4 leading-none">
 						<b class="text-sm font-bold leading-none">
 							{{ usage.title }}
@@ -205,7 +205,39 @@
 						usage: '12',
 						amount: '$1.20',
 					},
-				]
+					{
+						title: 'Platform Fee',
+						usage: '1',
+						amount: '$2.00',
+					},
+				],
+				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
+					},
+				],
 			}
 		},
 		methods: {

resources/js/views/User/Storage.vue

@@ -53,7 +53,7 @@
 	import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
 	import PageTab from '/resources/js/components/Others/Layout/PageTab'
 	import axios from 'axios'
-	import BarChart from "./BarChart";
+	import BarChart from "../../components/UI/BarChart";
 
 	export default {
         name: 'Storage',

resources/js/views/User/Subscription.vue

@@ -62,6 +62,55 @@
 			</AppInputSwitch>
 		</div>
 
+		<!--Transactions-->
+		<div class="card shadow-card">
+			<FormLabel icon="file-text">
+                {{ $t('Transactions') }}
+            </FormLabel>
+
+			<DatatableWrapper
+				@init="isLoading = false"
+				api="/api/subscriptions/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>
+
 		<div v-if="! subscription && !isLoading" class="card shadow-card">
 			<InfoBox style="margin-bottom: 0">
 				<p>{{ $t("You don't have any subscription") }}</p>
@@ -71,6 +120,8 @@
 </template>
 
 <script>
+	import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper";
+	import ColorLabel from "../../components/Others/ColorLabel";
 	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
 	import PageTab from '/resources/js/components/Others/Layout/PageTab'
 	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
@@ -84,6 +135,8 @@
 	export default {
 		name: 'UserSubscription',
 		components: {
+			DatatableWrapper,
+			ColorLabel,
 			AppInputSwitch,
 			ProgressLine,
 			ButtonBase,
@@ -115,6 +168,33 @@
 				isCancelling: false,
 				limitations: [],
 				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
+					},
+				],
 			}
 		},
 		methods: {