added logo to the transaction service

resources/js/components/FilesView/SearchBar.vue

@@ -7,7 +7,7 @@
 					{{ $t('inputs.placeholder_search_files') }}
 				</span>
 			</div>
-			<span class="font-bold xl:text-sm text-xs dark:text-gray-600 text-gray-400 border rounded px-1 py-0.5 tracking-normal">
+			<span class="font-bold xl:text-sm text-xs dark:text-gray-600 text-gray-400 dark:border-opacity-5 border rounded px-1 py-0.5 tracking-normal">
 				{{ metaKeyIcon }}+K
 			</span>
 		</div>

resources/js/helpers/functionHelpers.js

@@ -305,6 +305,14 @@ const FunctionHelpers = {
             this.$store.dispatch(...routes[this.$router.currentRoute.name])
         }
 
+        Vue.prototype.$getPaymentLogo = function (driver) {
+
+            return {
+                'paypal': '/assets/payments/paypal.svg',
+                'paystack': '/assets/payments/paystack.svg',
+            }[driver]
+        }
+
         Vue.prototype.$goToFileView = function (id) {
 
             let locations = {

resources/js/views/Admin/Invoices.vue

@@ -15,21 +15,6 @@
 									{{ row.data.attributes.plan_name }}
 								</span>
 							</td>
-							<td>
-								<ColorLabel color="purple">
-									{{ row.data.attributes.status }}
-								</ColorLabel>
-							</td>
-							<td>
-								<span class="text-sm font-bold">
-									{{ row.data.attributes.price }}
-								</span>
-							</td>
-							<td>
-								<span class="text-sm font-bold">
-									{{ row.data.attributes.created_at }}
-								</span>
-							</td>
 							<td>
 								<div class="flex items-center">
 									<MemberAvatar
@@ -47,11 +32,24 @@
 									</div>
 								</div>
 							</td>
-							<td class="text-right">
-								<span class="text-sm font-bold w-full">
-									{{ row.data.attributes.driver }}
+							<td>
+								<ColorLabel color="purple">
+									{{ row.data.attributes.status }}
+								</ColorLabel>
+							</td>
+							<td>
+								<span class="text-sm font-bold">
+									{{ 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>
 				</DatatableWrapper>
@@ -136,6 +134,11 @@
 						field: 'plan_name',
 						sortable: true
 					},
+					{
+						label: this.$t('User'),
+						field: 'user',
+						sortable: true
+					},
 					{
 						label: this.$t('Status'),
 						field: 'status',
@@ -151,11 +154,6 @@
 						field: 'created_at',
 						sortable: true
 					},
-					{
-						label: this.$t('User'),
-						field: 'user',
-						sortable: true
-					},
 					{
 						label: this.$t('Service'),
 						sortable: true

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

@@ -30,9 +30,7 @@
                             </span>
                         </td>
                         <td class="text-right">
-                            <span class="text-sm font-bold w-full">
-                                {{ row.data.attributes.driver }}
-                            </span>
+                            <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
                         </td>
                     </tr>
                 </template>

resources/js/views/User/Invoices.vue

@@ -30,9 +30,7 @@
                             </span>
                         </td>
                         <td class="text-right">
-                            <span class="text-sm font-bold w-full">
-                                {{ row.data.attributes.driver }}
-                            </span>
+                            <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
                         </td>
                     </tr>
                 </template>