added WidgetLatestTransactions

public/mix-manifest.json

@@ -35,7 +35,7 @@
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=b3feaa361fc486e6a0b3",
     "/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=31c5a9eb6dd3154e7f90",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=eda5f98a3982867337cc",
     "/chunks/dashboard~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/plan-subscribers~chunks/users.js?id=9bb04319263a6c0742f0",
     "/chunks/database.js": "/chunks/database.js?id=d469910e2c3f230d05f0",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
@@ -191,5 +191,23 @@
     "/chunks/payments/settings.6ec6ebd9434dc12d3a2b.hot-update.js": "/chunks/payments/settings.6ec6ebd9434dc12d3a2b.hot-update.js",
     "/chunks/payments/settings.f9e50fd42e9b6a20e51d.hot-update.js": "/chunks/payments/settings.f9e50fd42e9b6a20e51d.hot-update.js",
     "/chunks/payments/settings.3ad4539db6a81f4c469b.hot-update.js": "/chunks/payments/settings.3ad4539db6a81f4c469b.hot-update.js",
-    "/chunks/payments/settings.194aed09083333a609f6.hot-update.js": "/chunks/payments/settings.194aed09083333a609f6.hot-update.js"
+    "/chunks/payments/settings.194aed09083333a609f6.hot-update.js": "/chunks/payments/settings.194aed09083333a609f6.hot-update.js",
+    "/chunks/dashboard.199562476299490ea56b.hot-update.js": "/chunks/dashboard.199562476299490ea56b.hot-update.js",
+    "/chunks/dashboard.e981888df477d6249b5c.hot-update.js": "/chunks/dashboard.e981888df477d6249b5c.hot-update.js",
+    "/chunks/dashboard.8aa2f8319a3c530eb024.hot-update.js": "/chunks/dashboard.8aa2f8319a3c530eb024.hot-update.js",
+    "/chunks/dashboard.a6f46323bc308725edcc.hot-update.js": "/chunks/dashboard.a6f46323bc308725edcc.hot-update.js",
+    "/chunks/dashboard.8fe4d577c635abe21a57.hot-update.js": "/chunks/dashboard.8fe4d577c635abe21a57.hot-update.js",
+    "/chunks/dashboard.85e5cfb2266dcd56b8fb.hot-update.js": "/chunks/dashboard.85e5cfb2266dcd56b8fb.hot-update.js",
+    "/chunks/dashboard.7413166607ed5bbccf72.hot-update.js": "/chunks/dashboard.7413166607ed5bbccf72.hot-update.js",
+    "/chunks/dashboard.c356597a42f74b8a0680.hot-update.js": "/chunks/dashboard.c356597a42f74b8a0680.hot-update.js",
+    "/chunks/dashboard.781e96d1672d6862dc61.hot-update.js": "/chunks/dashboard.781e96d1672d6862dc61.hot-update.js",
+    "/chunks/dashboard.26e27d447d0145dece52.hot-update.js": "/chunks/dashboard.26e27d447d0145dece52.hot-update.js",
+    "/chunks/dashboard.3566f0996d81d317784d.hot-update.js": "/chunks/dashboard.3566f0996d81d317784d.hot-update.js",
+    "/chunks/dashboard.18096e42e0bb544bfada.hot-update.js": "/chunks/dashboard.18096e42e0bb544bfada.hot-update.js",
+    "/chunks/dashboard.cce752f8d773d152fbea.hot-update.js": "/chunks/dashboard.cce752f8d773d152fbea.hot-update.js",
+    "/chunks/dashboard.9bf150f6485464157299.hot-update.js": "/chunks/dashboard.9bf150f6485464157299.hot-update.js",
+    "/chunks/dashboard.b74701f4fc0048082c83.hot-update.js": "/chunks/dashboard.b74701f4fc0048082c83.hot-update.js",
+    "/chunks/dashboard.0a5793d3140c67329f68.hot-update.js": "/chunks/dashboard.0a5793d3140c67329f68.hot-update.js",
+    "/chunks/dashboard.355d4c1c7c311cf4d00c.hot-update.js": "/chunks/dashboard.355d4c1c7c311cf4d00c.hot-update.js",
+    "/chunks/dashboard.949feb2d4c59f318d311.hot-update.js": "/chunks/dashboard.949feb2d4c59f318d311.hot-update.js"
 }

resources/js/components/Admin/WidgetLatestTransactions.vue

@@ -0,0 +1,132 @@
+<template>
+	<DatatableWrapper
+		api="/api/admin/dashboard/transactions"
+		:columns="columns"
+	>
+		<template slot-scope="{ row }">
+			<tr class="border-b dark:border-opacity-5 border-light border-dashed">
+				<td class="py-5">
+					<span class="text-sm font-bold">
+						{{ row.data.attributes.note }}
+					</span>
+				</td>
+				<td>
+					<div v-if="row.data.relationships.user" class="flex items-center">
+						<MemberAvatar
+							:is-border="false"
+							:size="36"
+							:member="row.data.relationships.user"
+						/>
+						<div class="ml-3">
+							<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+								{{ row.data.relationships.user.data.attributes.name }}
+							</b>
+							<span class="block text-xs dark:text-gray-500 text-gray-600">
+								{{ row.data.relationships.user.data.attributes.email }}
+							</span>
+						</div>
+					</div>
+					<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
+						{{ $t('User was deleted') }}
+					</span>
+				</td>
+				<td>
+					<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
+						{{ row.data.attributes.status }}
+					</ColorLabel>
+					<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
+						{{ row.data.attributes.type }}
+					</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 style="margin-bottom: 0">
+				<p>{{ $t("There aren't any transactions.") }}</p>
+			</InfoBox>
+		</template>
+	</DatatableWrapper>
+</template>
+
+<script>
+    import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
+    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
+    import ColorLabel from '/resources/js/components/Others/ColorLabel'
+    import {Trash2Icon, Edit2Icon} from "vue-feather-icons"
+	import MemberAvatar from "../FilesView/MemberAvatar"
+	import InfoBox from "../Others/Forms/InfoBox"
+	import { mapGetters } from 'vuex'
+
+    export default {
+        name: 'WidgetLatestTransactions',
+        props: [
+			'icon',
+			'title'
+		],
+        components: {
+            DatatableCellImage,
+            DatatableWrapper,
+			MemberAvatar,
+            Trash2Icon,
+            ColorLabel,
+            Edit2Icon,
+			InfoBox,
+        },
+		computed: {
+			...mapGetters([
+				'config',
+			]),
+		},
+		data() {
+			return {
+				columns: [
+					{
+						label: this.$t('Note'),
+						field: 'note',
+						sortable: true
+					},
+					{
+						label: this.$t('User'),
+						field: 'user_id',
+						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/Dashboard.vue

@@ -131,6 +131,15 @@
 
 				<WidgetLatestRegistrations />
 			</div>
+
+			<!--Latest transactions widgets-->
+			<div v-if="['fixed', 'metered'].includes(this.config.subscriptionType)" class="card shadow-card md:mb-6 mb-4">
+				<FormLabel icon="dollar">
+					{{ $t('Latest Transactions') }}
+				</FormLabel>
+
+				<WidgetLatestTransactions />
+			</div>
         </div>
         <div id="loader" v-if="isLoading">
             <Spinner></Spinner>
@@ -148,10 +157,12 @@
 	import BarChart from "../../components/UI/BarChart"
     import { mapGetters } from 'vuex'
     import axios from 'axios'
+	import WidgetLatestTransactions from "../../components/Admin/WidgetLatestTransactions";
 
     export default {
         name: 'Dashboard',
         components: {
+			WidgetLatestTransactions,
             WidgetLatestRegistrations,
 			ChevronRightIcon,
 			WidgetWrapper,

routes/admin.php

@@ -1,5 +1,6 @@
 <?php
 
+use Domain\Admin\Controllers\Dashboard\GetLatestTransactionsController;
 use Domain\Admin\Controllers\Users\UserController;
 use Domain\Pages\Controllers\AdminPagesController;
 use Domain\Settings\Controllers\SetEmailController;
@@ -20,6 +21,7 @@ use Domain\Settings\Controllers\StorePaymentServiceCredentialsController;
 
 // Dashboard
 Route::group(['prefix' => 'dashboard'], function () {
+    Route::get('/transactions', GetLatestTransactionsController::class);
     Route::get('/newbies', GetNewbiesController::class);
     Route::get('/', GetDashboardDataController::class);
 });

src/Domain/Admin/Controllers/Dashboard/GetLatestTransactionsController.php

@@ -0,0 +1,20 @@
+<?php
+namespace Domain\Admin\Controllers\Dashboard;
+
+use App\Http\Controllers\Controller;
+use VueFileManager\Subscription\Domain\Transactions\Models\Transaction;
+use VueFileManager\Subscription\Domain\Transactions\Resources\TransactionCollection;
+
+class GetLatestTransactionsController extends Controller
+{
+    public function __invoke(): TransactionCollection
+    {
+        $transactions = Transaction::sortable([
+            'created_at' => 'desc',
+        ])
+            ->take(5)
+            ->get();
+
+        return new TransactionCollection($transactions);
+    }
+}