- balance implementation

- invoice refactoring

resources/js/views/User/BarChart.vue

@@ -1,19 +0,0 @@
-<template>
-	<div class="flex items-end justify-between h-28">
-		<span
-			class="w-2.5 block rounded-lg lg:mr-2 mr-1.5"
-			:style="{height: height + '%', backgroundColor: color}"
-			v-for="(height, i) in data"
-			:key="i">
-		</span>
-	</div>
-</template>
-<script>
-export default {
-	name: 'BarChart',
-	props: {
-		data: {},
-		color: {},
-	}
-}
-</script>

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: {