added user into transaction list

public/mix-manifest.json

@@ -49,7 +49,7 @@
     "/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=1579259e826aa89fb00a",
     "/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=88e23f3ae68d1f756585",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=43a984647aacaca85202",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=b0235e76cbd41a62a331",
@@ -103,7 +103,7 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=0e46d73f77f2778bb395",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e0a857f37b2bc6df43ca",
-    "/chunks/users.js": "/chunks/users.js?id=43d63dcd2782caf9425d",
+    "/chunks/users.js": "/chunks/users.js?id=d68e88b81c1c67bc96be",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
     "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
@@ -327,5 +327,25 @@
     "/chunks/invoices.5a782be7f767491658c3.hot-update.js": "/chunks/invoices.5a782be7f767491658c3.hot-update.js",
     "/chunks/invoices.62eab272a85c044f88a6.hot-update.js": "/chunks/invoices.62eab272a85c044f88a6.hot-update.js",
     "/chunks/invoices.3fdc85dd2dc704e90d41.hot-update.js": "/chunks/invoices.3fdc85dd2dc704e90d41.hot-update.js",
-    "/chunks/invoices.39ee24d1936c51f6cae1.hot-update.js": "/chunks/invoices.39ee24d1936c51f6cae1.hot-update.js"
+    "/chunks/invoices.39ee24d1936c51f6cae1.hot-update.js": "/chunks/invoices.39ee24d1936c51f6cae1.hot-update.js",
+    "/chunks/users.491c32f75aab1d0a9e7b.hot-update.js": "/chunks/users.491c32f75aab1d0a9e7b.hot-update.js",
+    "/chunks/users.795f16bf0da477cabb68.hot-update.js": "/chunks/users.795f16bf0da477cabb68.hot-update.js",
+    "/chunks/users.c5a3afccc97200475621.hot-update.js": "/chunks/users.c5a3afccc97200475621.hot-update.js",
+    "/chunks/users.dd34766060bcca33b453.hot-update.js": "/chunks/users.dd34766060bcca33b453.hot-update.js",
+    "/chunks/users.69bc0dd79c9a0966fd56.hot-update.js": "/chunks/users.69bc0dd79c9a0966fd56.hot-update.js",
+    "/chunks/users.d3b72f5eabc00829fd30.hot-update.js": "/chunks/users.d3b72f5eabc00829fd30.hot-update.js",
+    "/chunks/users.072a0ba08cdc2e2d8b85.hot-update.js": "/chunks/users.072a0ba08cdc2e2d8b85.hot-update.js",
+    "/chunks/users.3b42650061abdb6d0cf2.hot-update.js": "/chunks/users.3b42650061abdb6d0cf2.hot-update.js",
+    "/chunks/users.5af3f3fd3f646a213b62.hot-update.js": "/chunks/users.5af3f3fd3f646a213b62.hot-update.js",
+    "/chunks/users.c24dc8bc2a7eea075806.hot-update.js": "/chunks/users.c24dc8bc2a7eea075806.hot-update.js",
+    "/chunks/users.d7c33ac16f89710de120.hot-update.js": "/chunks/users.d7c33ac16f89710de120.hot-update.js",
+    "/chunks/users.f62a88084ba36d08e67e.hot-update.js": "/chunks/users.f62a88084ba36d08e67e.hot-update.js",
+    "/chunks/invoices.382bca7ddc58900b29f3.hot-update.js": "/chunks/invoices.382bca7ddc58900b29f3.hot-update.js",
+    "/chunks/invoices.8640bf00b66a1fb2d375.hot-update.js": "/chunks/invoices.8640bf00b66a1fb2d375.hot-update.js",
+    "/chunks/invoices.eae6025a4352c853494d.hot-update.js": "/chunks/invoices.eae6025a4352c853494d.hot-update.js",
+    "/chunks/invoices.4b6e5c174b1ce1b7c01e.hot-update.js": "/chunks/invoices.4b6e5c174b1ce1b7c01e.hot-update.js",
+    "/chunks/invoices.1aef7deb67ef65aeb339.hot-update.js": "/chunks/invoices.1aef7deb67ef65aeb339.hot-update.js",
+    "/chunks/invoices.a29c9972833bb21149aa.hot-update.js": "/chunks/invoices.a29c9972833bb21149aa.hot-update.js",
+    "/chunks/invoices.09e2c38307f512cf79b6.hot-update.js": "/chunks/invoices.09e2c38307f512cf79b6.hot-update.js",
+    "/chunks/invoices.dd471d0bd9e128b10e12.hot-update.js": "/chunks/invoices.dd471d0bd9e128b10e12.hot-update.js"
 }

resources/js/views/Admin/Invoices.vue

@@ -10,16 +10,7 @@
 				>
 					<template slot-scope="{ row }">
 						<tr style="border-bottom: 1px dashed #f3f3f3;">
-							<td class="py-3">
+							<td class="py-5">
-
-								<!--Todo: refactor this component-->
-								<DatatableCellImage
-									:member="row.data.relationships.user"
-									:title="row.data.relationships.user.data.attributes.name"
-									:description="row.data.relationships.user.data.attributes.email"
-								/>
-							</td>
-							<td class="py-4">
 								<span class="text-sm font-bold">
 									{{ row.data.attributes.plan_name }}
 								</span>
@@ -39,6 +30,23 @@
 									{{ row.data.attributes.created_at }}
 								</span>
 							</td>
+							<td>
+								<div 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>
+							</td>
 							<td class="text-right">
 								<span class="text-sm font-bold w-full">
 									{{ row.data.attributes.driver }}
@@ -78,6 +86,7 @@
 </template>
 
 <script>
+	import MemberAvatar from "../../components/FilesView/MemberAvatar";
 	import PageTab from "../../components/Others/Layout/PageTab";
     import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
     import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
@@ -97,6 +106,7 @@
     export default {
         name: 'Invoices',
         components: {
+			MemberAvatar,
             DatatableCellImage,
             MobileActionButton,
             ExternalLinkIcon,
@@ -121,11 +131,6 @@
                 isLoading: true,
                 invoices: [],
 				columns: [
-					{
-						label: this.$t('User'),
-						field: 'user',
-						sortable: true
-					},
 					{
 						label: this.$t('Plan'),
 						field: 'plan_name',
@@ -146,6 +151,11 @@
 						field: 'created_at',
 						sortable: true
 					},
+					{
+						label: this.$t('User'),
+						field: 'user',
+						sortable: true
+					},
 					{
 						label: this.$t('Service'),
 						sortable: true

resources/js/views/Admin/Users.vue

@@ -13,13 +13,23 @@
                 <template slot-scope="{ row }">
                     <tr style="border-bottom: 1px dashed #f3f3f3;">
                         <td class="py-3">
-                            <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
+							<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-                                <DatatableCellImage
+								<div class="flex items-center">
-									:member="row"
+									<MemberAvatar
-									:title="row.data.relationships.settings.data.attributes.name"
+										:is-border="false"
-									:description="row.data.attributes.email"
+										:size="44"
-								/>
+										:member="row.data.relationships.settings"
-                            </router-link>
+									/>
+									<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.settings.data.attributes.name }}
+										</b>
+										<span class="block text-xs dark:text-gray-500 text-gray-600">
+											{{ row.data.attributes.email }}
+										</span>
+									</div>
+								</div>
+							</router-link>
                         </td>
                         <td>
                             <ColorLabel :color="getRoleColor(row.data.attributes.role)">
@@ -76,6 +86,7 @@
 </template>
 
 <script>
+	import MemberAvatar from "../../components/FilesView/MemberAvatar";
     import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
     import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
     import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -95,6 +106,7 @@
             DatatableCellImage,
             MobileActionButton,
             DatatableWrapper,
+			MemberAvatar,
             SectionTitle,
             MobileHeader,
             Trash2Icon,