invoice admin page

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=2ab21de500ba46c3b968",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=88e23f3ae68d1f756585",
     "/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",
@@ -306,5 +306,26 @@
     "/chunks/settings-subscription.2d2377ef6c3afe3b2372.hot-update.js": "/chunks/settings-subscription.2d2377ef6c3afe3b2372.hot-update.js",
     "/chunks/settings-subscription.fbdb601f69743346e1ac.hot-update.js": "/chunks/settings-subscription.fbdb601f69743346e1ac.hot-update.js",
     "/chunks/settings-subscription.1b49f84be4621400e601.hot-update.js": "/chunks/settings-subscription.1b49f84be4621400e601.hot-update.js",
-    "/chunks/settings-subscription.b1058a810eac3ba8b2ff.hot-update.js": "/chunks/settings-subscription.b1058a810eac3ba8b2ff.hot-update.js"
+    "/chunks/settings-subscription.b1058a810eac3ba8b2ff.hot-update.js": "/chunks/settings-subscription.b1058a810eac3ba8b2ff.hot-update.js",
+    "/chunks/invoices.8584909f48b11f747374.hot-update.js": "/chunks/invoices.8584909f48b11f747374.hot-update.js",
+    "/chunks/invoices.96249a9564968485c7f6.hot-update.js": "/chunks/invoices.96249a9564968485c7f6.hot-update.js",
+    "/chunks/invoices.9fefd00f92997da11f24.hot-update.js": "/chunks/invoices.9fefd00f92997da11f24.hot-update.js",
+    "/chunks/invoices.fc99c14e7610d4715b8f.hot-update.js": "/chunks/invoices.fc99c14e7610d4715b8f.hot-update.js",
+    "/chunks/invoices.3169b9632902986f09da.hot-update.js": "/chunks/invoices.3169b9632902986f09da.hot-update.js",
+    "/chunks/invoices.3de0314ff9475547d344.hot-update.js": "/chunks/invoices.3de0314ff9475547d344.hot-update.js",
+    "/chunks/invoices.958f04e69981622f0233.hot-update.js": "/chunks/invoices.958f04e69981622f0233.hot-update.js",
+    "/chunks/invoices.3a2bb159fdc2919f33cb.hot-update.js": "/chunks/invoices.3a2bb159fdc2919f33cb.hot-update.js",
+    "/chunks/invoices.73f8b8dee70a4de5e2fb.hot-update.js": "/chunks/invoices.73f8b8dee70a4de5e2fb.hot-update.js",
+    "/chunks/invoices.0112adf4ef24586459bd.hot-update.js": "/chunks/invoices.0112adf4ef24586459bd.hot-update.js",
+    "/chunks/invoices.19b522815008e530d2dd.hot-update.js": "/chunks/invoices.19b522815008e530d2dd.hot-update.js",
+    "/chunks/invoices.6d4742a629d92e91126f.hot-update.js": "/chunks/invoices.6d4742a629d92e91126f.hot-update.js",
+    "/chunks/invoices.9f85192f0aaf7cd85094.hot-update.js": "/chunks/invoices.9f85192f0aaf7cd85094.hot-update.js",
+    "/chunks/invoices.d90604b775fff866759c.hot-update.js": "/chunks/invoices.d90604b775fff866759c.hot-update.js",
+    "/chunks/invoices.86952467d22ce34c864e.hot-update.js": "/chunks/invoices.86952467d22ce34c864e.hot-update.js",
+    "/chunks/invoices.171fb27bd240e5944022.hot-update.js": "/chunks/invoices.171fb27bd240e5944022.hot-update.js",
+    "/chunks/invoices.e0dc1f84c48c96190c8a.hot-update.js": "/chunks/invoices.e0dc1f84c48c96190c8a.hot-update.js",
+    "/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"
 }

resources/js/views/Admin/Invoices.vue

@@ -1,71 +1,65 @@
 <template>
-    <div id="single-page">
+    <div>
-
+		<PageTab :is-loading="isLoading">
-        <!--Page Content-->
+			<div class="card shadow-card">
-        <div id="page-content" v-show="! isLoading && config.stripe_public_key">
+				<DatatableWrapper
-            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+					@init="isLoading = false"
-            <PageHeader :title="$t($router.currentRoute.meta.title)"/>
+					api="/api/subscription/transactions"
-
+					:paginator="true"
-            <div class="content-page" v-if="config.stripe_public_key">
+					:columns="columns"
-                <DatatableWrapper @data="invoices = $event" @init="isLoading = false" api="/api/admin/invoices" :paginator="false" :columns="columns" class="table">
+				>
-                    <template slot-scope="{ row }">
+					<template slot-scope="{ row }">
-                        <tr>
+						<tr style="border-bottom: 1px dashed #f3f3f3;">
-                            <td>
+							<td class="py-3">
-                                <a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank" class="cell-item">
-                                    {{ row.data.attributes.order }}
-                                </a>
-                            </td>
-                            <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.total }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.bag.description }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.created_at_formatted }}
-                                </span>
-                            </td>
-                            <td>
-                                <router-link v-if="row.relationships" :to="{name: 'UserInvoices', params: {id: row.relationships.user.data.id}}">
-                                    <DatatableCellImage
-                                            image-size="small"
-                                            :image="row.relationships.user.data.attributes.avatar.sm"
-                                            :title="row.relationships.user.data.attributes.name"
-                                    />
-                                </router-link>
-                                <span v-else class="cell-item">
-                                    -
-                                </span>
-                            </td>
-                            <td>
-                                <div class="action-icons">
-                                    <a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank">
-                                        <external-link-icon size="15" class="icon"></external-link-icon>
-                                    </a>
-                                </div>
-                            </td>
-                        </tr>
-                    </template>
-                </DatatableWrapper>
-            </div>
-        </div>
 
+								<!--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>
+							</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 class="text-right">
+								<span class="text-sm font-bold w-full">
+									{{ row.data.attributes.driver }}
+								</span>
+							</td>
+						</tr>
+					</template>
+				</DatatableWrapper>
+			</div>
+		</PageTab>
         <!--Empty invoices-->
-        <EmptyPageContent
+		<!--<EmptyPageContent
                 v-if="! isLoading && invoices.length === 0 && config.stripe_public_key"
                 icon="file-text"
                 :title="$t('admin_page_invoices.empty.title')"
                 :description="$t('admin_page_invoices.empty.description')"
         >
-        </EmptyPageContent>
+        </EmptyPageContent>-->
 
         <!--Stripe Not Configured-->
-        <EmptyPageContent
+		<!--<EmptyPageContent
                 v-if="! config.stripe_public_key"
                 icon="settings"
                 :title="$t('activation.stripe.title')"
@@ -74,7 +68,7 @@
             <router-link :to="{name: 'AppPayments'}">
                 <ButtonBase button-style="theme">{{ $t('activation.stripe.button') }}</ButtonBase>
             </router-link>
-        </EmptyPageContent>
+        </EmptyPageContent>-->
 
         <!--Spinner-->
         <div id="loader" v-if="isLoading">
@@ -84,6 +78,7 @@
 </template>
 
 <script>
+	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'
     import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -113,46 +108,49 @@
             PageHeader,
             ButtonBase,
             ColorLabel,
+			PageTab,
             Spinner,
         },
         computed: {
-            ...mapGetters(['config']),
+            ...mapGetters([
+				'config'
+			]),
         },
         data() {
             return {
                 isLoading: true,
                 invoices: [],
-                columns: [
+				columns: [
-                    {
+					{
-                        label: this.$t('admin_page_invoices.table.number'),
+						label: this.$t('User'),
-                        field: 'data.attributes.order',
+						field: 'user',
-                        sortable: false
+						sortable: true
-                    },
+					},
-                    {
+					{
-                        label: this.$t('admin_page_invoices.table.total'),
+						label: this.$t('Plan'),
-                        field: 'data.attributes.bag.amount',
+						field: 'plan_name',
-                        sortable: false
+						sortable: true
-                    },
+					},
-                    {
+					{
-                        label: this.$t('admin_page_invoices.table.plan'),
+						label: this.$t('Status'),
-                        field: 'data.attributes.bag.amount',
+						field: 'status',
-                        sortable: false
+						sortable: true
-                    },
+					},
-                    {
+					{
-                        label: this.$t('admin_page_invoices.table.payed'),
+						label: this.$t('admin_page_invoices.table.total'),
-                        field: 'data.attributes.created_at',
+						field: 'amount',
-                        sortable: false
+						sortable: true
-                    },
+					},
-                    {
+					{
-                        label: this.$t('admin_page_invoices.table.user'),
+						label: this.$t('Payed At'),
-                        field: 'relationships.user.data.attributes.name',
+						field: 'created_at',
-                        sortable: false
+						sortable: true
-                    },
+					},
-                    {
+					{
-                        label: this.$t('admin_page_user.table.action'),
+						label: this.$t('Service'),
-                        sortable: false
+						sortable: true
-                    },
+					},
-                ],
+				],
             }
         },
         created() {
@@ -166,95 +164,4 @@
     @import '/resources/sass/vuefilemanager/_variables';
     @import '/resources/sass/vuefilemanager/_mixins';
 
-    .user-thumbnail {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        .avatar {
-            margin-right: 20px;
-            line-height: 0;
-
-            img {
-                line-height: 0;
-                width: 48px;
-                height: 48px;
-                border-radius: 8px;
-            }
-        }
-
-        .info {
-
-            .name {
-                max-width: 150px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: block;
-            }
-
-            .name {
-                @include font-size(15);
-                line-height: 1;
-            }
-        }
-    }
-
-    .table-tools {
-        background: white;
-        display: flex;
-        justify-content: space-between;
-        padding: 15px 0 10px;
-        position: sticky;
-        top: 40px;
-        z-index: 9;
-    }
-
-    .table {
-
-        .cell-item {
-            @include font-size(15);
-            white-space: nowrap;
-        }
-
-        .name {
-            font-weight: 700;
-            cursor: pointer;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-        .table-tools {
-            padding: 0 0 5px;
-        }
-    }
-
-    .dark {
-
-        .table-tools {
-            background: $dark_mode_background;
-        }
-
-        .action-icons {
-
-            .icon {
-                cursor: pointer;
-
-                circle, path, line, polyline {
-                    stroke: $dark_mode_text_primary;
-                }
-            }
-        }
-
-        .user-thumbnail {
-
-            .info {
-
-                .email {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
-    }
-
 </style>