feat: top customer and report info

app/Http/Controllers/CustomerController.php

@@ -97,24 +97,27 @@ class CustomerController extends Controller
                 ['label' => 'Perempuan', 'value' => 1],
                 ['label' => 'Laki-laki', 'value' => 2],
             ],
-            'transactions' => $customer->transaction()
-                ->latest()
-                ->paginate(10)
-                ->withQueryString()
-                ->through(fn($transaction) => [
-                    'id' => $transaction->id,
-                    'transactionNumber' => $transaction->transaction_number,
-                    'createdAt' => $transaction->created_at,
-                    'customer' => [
-                        'number' => $customer->customer_number,
-                        'name' => $customer->name,
-                        'phone' => $customer->phone,
-                    ],
-                    'price' => $transaction->totalPriceAsFullString(),
-                    'outlet' => $transaction->outlet->name,
-                    'transactionStatusName' => $transaction->transactionStatus->name,
-                    'transactionStatusId' => $transaction->transactionStatus->id,
-                ]),
+            'transactions' => [
+                'details' => $customer->transaction()
+                    ->latest()
+                    ->paginate(10)
+                    ->withQueryString()
+                    ->through(fn($transaction) => [
+                        'id' => $transaction->id,
+                        'transactionNumber' => $transaction->transaction_number,
+                        'createdAt' => $transaction->created_at,
+                        'customer' => [
+                            'number' => $customer->customer_number,
+                            'name' => $customer->name,
+                            'phone' => $customer->phone,
+                        ],
+                        'price' => $transaction->totalPriceAsFullString(),
+                        'outlet' => $transaction->outlet->name,
+                        'transactionStatusName' => $transaction->transactionStatus->name,
+                        'transactionStatusId' => $transaction->transactionStatus->id,
+                    ]),
+                'totalTransaction' => $customer->transaction->count(),
+            ],
         ]);
     }
 

app/Http/Controllers/DashboardController.php

@@ -33,10 +33,11 @@ class DashboardController extends Controller
 
         $products = Product::get();
 
-        $transactionChart = Transaction::get()->groupBy([
-            fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('Y'),
-            fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('M'),
-        ]);
+        $transactionChart = Transaction::get()
+            ->groupBy([
+                fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('Y'),
+                fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('M'),
+            ]);
 
         $mutationChart = Mutation::whereYear('created_at', date('Y'))
             ->get()
@@ -53,6 +54,9 @@ class DashboardController extends Controller
                 fn($transaction) => $transaction->outlet->name,
             ]);
 
+        $topTransactionChart = Transaction::get()
+            ->groupBy('customer_number');
+
         return inertia('home/Index', [
             'cardStatistics' => [
                 [
@@ -99,6 +103,11 @@ class DashboardController extends Controller
                 'description' => Carbon::parse(date('Y-m-d'))->translatedFormat('F, Y'),
                 'data' => (new TransactionService)->statisticData($transactionOutletChart)->first(),
             ],
+            'chartTopTransactionStatistic' => [
+                'title' => __('words.top_customer'),
+                'description' => __('words.top_number_customer', ['number' => 5]),
+                'data' => (new TransactionService)->topTransaction($topTransactionChart),
+            ],
         ]);
     }
 }

app/Http/Controllers/ReportMutationController.php

@@ -6,6 +6,7 @@ use App\Exports\MutationExport;
 use App\Http\Controllers\Controller;
 use App\Models\Mutation;
 use App\Models\Outlet;
+use App\Services\MutationService;
 use Illuminate\Support\Facades\Gate;
 use Inertia\Inertia;
 
@@ -24,21 +25,28 @@ class ReportMutationController extends Controller
             request()->merge(['outlet' => request()->user()->outlet_id]);
         }
 
+        $mutations = Mutation::filter(request()->only('startDate', 'endDate', 'outlet'));
+
         return inertia('mutation/Report', [
             'filters' => request()->all('startDate', 'endDate', 'outlet'),
             'mutations' => Inertia::lazy(
-                fn() => Mutation::filter(request()->only('startDate', 'endDate', 'outlet'))
-                    ->latest()
-                    ->paginate(10)
-                    ->withQueryString()
-                    ->through(fn($mutation) => [
-                        'createdAt' => $mutation->created_at,
-                        'outlet' => $mutation->outlet->name,
-                        'amount' => $mutation->amount,
-                        'type' => $mutation->type,
-                        'transactionId' => $mutation->transaction_id,
-                        'expenseId' => $mutation->expense_id,
-                    ])
+                fn() => [
+                    'details' => $mutations
+                        ->latest()
+                        ->paginate(10)
+                        ->withQueryString()
+                        ->through(fn($mutation) => [
+                            'createdAt' => $mutation->created_at,
+                            'outlet' => $mutation->outlet->name,
+                            'amount' => $mutation->amount,
+                            'type' => $mutation->type,
+                            'transactionId' => $mutation->transaction_id,
+                            'expenseId' => $mutation->expense_id,
+                        ]),
+                    'totalIncome' => (new MutationService)->totalIncomeAsString($mutations->get()),
+                    'totalExpense' => (new MutationService)->totalExpenseAsString($mutations->get()),
+                    'totalAmount' => (new MutationService)->totalAmountAsString($mutations->get()),
+                ]
             ),
             'outlets' => Outlet::all()
                 ->transform(fn($outlet) => [

app/Http/Controllers/ReportTransactionController.php

@@ -25,9 +25,9 @@ class ReportTransactionController extends Controller
             request()->merge(['outlet' => request()->user()->outlet_id]);
         }
 
-        $transactions = Transaction::filter(request()->only('startDate', 'endDate', 'outlet'))
-            ->get()
-            ->groupBy('created_at')
+        $transactions = Transaction::filter(request()->only('startDate', 'endDate', 'outlet'))->get();
+
+        $transactionGroupBy = $transactions->groupBy('created_at')
             ->transform(fn($transactions) => [[
                 'date' => $transactions->first()->getRawOriginal('created_at'),
                 'createdAt' => $transactions->first()->created_at,
@@ -37,12 +37,16 @@ class ReportTransactionController extends Controller
             ->flatten(1)
             ->toArray();
 
-        $transaction = (new TransactionService)->getPaginator($transactions);
+        $transaction = (new TransactionService)->getPaginator($transactionGroupBy);
 
         return inertia('transaction/Report', [
             'filters' => request()->all('startDate', 'endDate', 'outlet'),
             'transactions' => Inertia::lazy(
-                fn() => $transaction
+                fn() => [
+                    'details' => $transaction,
+                    'totalTransaction' => $transactions->count(),
+                    'totalAmount' => (new TransactionService)->totalPriceGroupAsString($transactions),
+                ]
             ),
             'outlets' => Outlet::all()
                 ->transform(fn($outlet) => [

app/Services/ExpenseService.php

@@ -14,7 +14,7 @@ class ExpenseService extends CurrencyFormatService
 
     public function totalPriceAsString(EloquentCollection $collection)
     {
-        return (new CurrencyFormatService)->setRupiahFormat($this->totalPrice($collection), true);
+        return $this->setRupiahFormat($this->totalPrice($collection), true);
     }
 
     public function totalPerMonth(EloquentCollection $collections)

app/Services/MutationService.php

@@ -39,7 +39,7 @@ class MutationService extends CurrencyFormatService
         return $this->setRupiahFormat($this->totalExpense($collections), true);
     }
 
-    public function totalAmount(EloquentCollection $collections)
+    public function totalAmountAsString(EloquentCollection $collections)
     {
         $amount = $this->totalIncome($collections) - $this->totalExpense($collections);
         return $this->setRupiahFormat($amount, true);

app/Services/TransactionService.php

@@ -49,4 +49,17 @@ class TransactionService
         $collections->transform(fn($collections) => $this->totalPerMonth($collections));
         return $collections;
     }
+
+    public function topTransaction(EloquentCollection $collections, int $take = 5)
+    {
+        return $collections
+            ->transform(fn($collect) => [[
+                'customerNumber' => $collect->first()->customer->customer_number,
+                'name' => $collect->first()->customer->name,
+                'totalPrice' => $this->totalPriceGroup($collect),
+            ]])
+            ->sortByDesc('totalPrice')
+            ->take($take)
+            ->flatten(1);
+    }
 }

lang/en/words.php

@@ -27,5 +27,7 @@ return [
     'mutation_statistic' => 'Mutations Statistic',
     'transaction_outlet_statistic' => 'Transaction Statistic/Outlet',
     'per_year' => 'Per Year',
+    'top_customer' => 'Top customer',
+    'top_number_customer' => 'Top :number Customer',
 
 ];

lang/id/words.php

@@ -27,5 +27,7 @@ return [
     'mutation_statistic' => 'Statistik Mutasi',
     'transaction_outlet_statistic' => 'Statistik Transaksi/Outlet',
     'per_year' => 'Pertahun',
+    'top_customer' => 'Top Pelanggan',
+    'top_number_customer' => 'Top :number Pelanggan',
 
 ];

public/js/resources_js_pages_customer_Edit_vue.js

@@ -1535,15 +1535,38 @@ var _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElement
 );
 
 var _hoisted_12 = {
-  "class": "grid"
+  key: 0,
+  "class": "grid mt-3 ml-1"
 };
 var _hoisted_13 = {
+  "class": "col-auto"
+};
+
+var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-shopping-cart"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Total Transaksi")], -1
+/* HOISTED */
+);
+
+var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_16 = {
+  "class": "text-xl font-bold"
+};
+var _hoisted_17 = {
+  "class": "grid"
+};
+var _hoisted_18 = {
   "class": "col-12"
 };
-var _hoisted_14 = {
+var _hoisted_19 = {
   "class": "font-bold"
 };
-var _hoisted_15 = {
+var _hoisted_20 = {
   "class": "font-bold"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1635,12 +1658,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
         /* STABLE */
 
-      })])]), _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+      })])]), _hoisted_11, $props.transactions.totalTransaction ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_14, _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactions.totalTransaction), 1
+      /* TEXT */
+      )])])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_DataTable, {
             "responsive-layout": "scroll",
             "column-resize-mode": "expand",
-            value: $props.transactions.data,
+            value: $props.transactions.details.data,
             "row-hover": true,
             "striped-rows": true
           }, {
@@ -1656,7 +1681,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         field = _ref.field;
                     return [field === 'transactionNumber' ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                       key: 0
-                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data[field]), 1
+                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_19, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data[field]), 1
                     /* TEXT */
                     ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.createdAt), 1
                     /* TEXT */
@@ -1664,7 +1689,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     /* STABLE_FRAGMENT */
                     )) : field === 'customer' ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                       key: 1
-                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.number), 1
+                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_20, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.number), 1
                     /* TEXT */
                     ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.name), 1
                     /* TEXT */
@@ -1731,7 +1756,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8
           /* PROPS */
           , ["value"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppPagination"], {
-            links: $props.transactions.links
+            links: $props.transactions.details.links
           }, null, 8
           /* PROPS */
           , ["links"])];

public/js/resources_js_pages_mutation_Report_vue.js

@@ -386,8 +386,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js");
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js");
 /* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! dayjs */ "./node_modules/dayjs/dayjs.min.js");
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_3__);
@@ -411,9 +411,11 @@ __webpack_require__.r(__webpack_exports__);
     mutations: {
       type: Object,
       "default": {
-        data: [],
-        links: [],
-        total: 0
+        details: {
+          data: [],
+          links: [],
+          total: 0
+        }
       }
     },
     filters: Object,
@@ -429,7 +431,7 @@ __webpack_require__.r(__webpack_exports__);
       endDate: props.filters.endDate,
       outlet: props.filters.outlet
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_1__.onMounted)(function () {
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
       if (props.filters.startDate || props.filters.endDate) {
         if (props.filters.endDate) {
           filterForm.dates = [new Date(props.filters.startDate), new Date(props.filters.endDate)];
@@ -438,7 +440,7 @@ __webpack_require__.r(__webpack_exports__);
         }
       }
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_1__.watch)(filterForm, function () {
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(filterForm, function () {
       if (filterForm.dates) {
         if (filterForm.dates[1]) {
           filterForm.startDate = dayjs__WEBPACK_IMPORTED_MODULE_3___default()(filterForm.dates[0]).format('YYYY-MM-DD');
@@ -452,7 +454,7 @@ __webpack_require__.r(__webpack_exports__);
         filterForm.startDate = null;
       }
 
-      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia.reload({
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia.reload({
         data: lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()({
           startDate: filterForm.startDate,
           endDate: filterForm.endDate,
@@ -465,7 +467,7 @@ __webpack_require__.r(__webpack_exports__);
     });
 
     var filterReset = function filterReset() {
-      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia.get('/reports/mutations');
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia.get('/reports/mutations');
     };
 
     var linkReference = function linkReference(data) {
@@ -476,21 +478,19 @@ __webpack_require__.r(__webpack_exports__);
       }
     };
 
-    var exportExcelLink = (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)('/reports/mutations/export/excel');
+    var exportExcelLink = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)('/reports/mutations/export/excel');
     var __returned__ = {
       props: props,
       filterForm: filterForm,
       filterReset: filterReset,
       linkReference: linkReference,
       exportExcelLink: exportExcelLink,
-      Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia,
-      watch: vue__WEBPACK_IMPORTED_MODULE_1__.watch,
-      computed: vue__WEBPACK_IMPORTED_MODULE_1__.computed,
-      onMounted: vue__WEBPACK_IMPORTED_MODULE_1__.onMounted,
-      ref: vue__WEBPACK_IMPORTED_MODULE_1__.ref,
+      watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
+      onMounted: vue__WEBPACK_IMPORTED_MODULE_0__.onMounted,
+      ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
+      Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.Head,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm,
-      usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage,
       dayjs: (dayjs__WEBPACK_IMPORTED_MODULE_3___default()),
       pickBy: (lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()),
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
@@ -1154,6 +1154,67 @@ var _hoisted_7 = {
 var _hoisted_8 = {
   "class": "col-12 md:col-4 flex flex-column md:flex-row justify-content-end"
 };
+var _hoisted_9 = {
+  key: 0,
+  "class": "grid mt-3 ml-1"
+};
+var _hoisted_10 = {
+  "class": "col-auto mr-7"
+};
+
+var _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-wallet"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Pendapatan")], -1
+/* HOISTED */
+);
+
+var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_13 = {
+  "class": "text-xl font-bold"
+};
+var _hoisted_14 = {
+  "class": "col-auto mr-7"
+};
+
+var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-wallet"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Pengeluaran")], -1
+/* HOISTED */
+);
+
+var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_17 = {
+  "class": "text-xl font-bold"
+};
+var _hoisted_18 = {
+  "class": "col-auto"
+};
+
+var _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-wallet"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Total")], -1
+/* HOISTED */
+);
+
+var _hoisted_20 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_21 = {
+  "class": "text-xl font-bold"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Calendar = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Calendar");
 
@@ -1172,7 +1233,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_DataTable, {
         "responsive-layout": "scroll",
         "column-resize-mode": "expand",
-        value: $props.mutations.data,
+        value: $props.mutations.details.data,
         "row-hover": true,
         "striped-rows": true
       }, {
@@ -1205,7 +1266,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             label: "reset",
             "class": "p-button-link",
             onClick: $setup.filterReset
-          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [$props.mutations.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
+          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [$props.mutations.details.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
             key: 0,
             label: "Export excel",
             "class-button": "p-button-outlined md:w-16rem",
@@ -1214,7 +1275,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             href: $setup.exportExcelLink
           }, null, 8
           /* PROPS */
-          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])];
+          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])]), $props.mutations.totalAmount ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_11, _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.mutations.totalIncome), 1
+          /* TEXT */
+          )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_15, _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_17, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.mutations.totalExpense), 1
+          /* TEXT */
+          )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_19, _hoisted_20, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_21, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.mutations.totalAmount), 1
+          /* TEXT */
+          )])])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
         }),
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.TableHeader, function (tableHeader) {
@@ -1249,7 +1316,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8
       /* PROPS */
       , ["value"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppPagination"], {
-        links: $props.mutations.links
+        links: $props.mutations.details.links
       }, null, 8
       /* PROPS */
       , ["links"])];

public/js/resources_js_pages_transaction_Report_vue.js

@@ -411,9 +411,11 @@ __webpack_require__.r(__webpack_exports__);
     transactions: {
       type: Object,
       "default": {
-        data: [],
-        links: [],
-        total: 0
+        details: {
+          data: [],
+          links: [],
+          total: 0
+        }
       }
     },
     filters: Object,
@@ -475,13 +477,11 @@ __webpack_require__.r(__webpack_exports__);
       filterReset: filterReset,
       exportExcelLink: exportExcelLink,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
-      computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
       onMounted: vue__WEBPACK_IMPORTED_MODULE_0__.onMounted,
       ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
       Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.Head,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm,
-      usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage,
       dayjs: (dayjs__WEBPACK_IMPORTED_MODULE_3___default()),
       pickBy: (lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()),
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
@@ -1145,6 +1145,48 @@ var _hoisted_7 = {
 var _hoisted_8 = {
   "class": "col-12 md:col-4 flex flex-column md:flex-row justify-content-end"
 };
+var _hoisted_9 = {
+  key: 0,
+  "class": "grid mt-3 ml-1"
+};
+var _hoisted_10 = {
+  "class": "col-auto mr-7"
+};
+
+var _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-shopping-cart"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Total Transaksi")], -1
+/* HOISTED */
+);
+
+var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_13 = {
+  "class": "text-xl font-bold"
+};
+var _hoisted_14 = {
+  "class": "col-auto"
+};
+
+var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-wallet"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Total Nilai")], -1
+/* HOISTED */
+);
+
+var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_17 = {
+  "class": "text-xl font-bold"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Calendar = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Calendar");
 
@@ -1163,7 +1205,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_DataTable, {
         "responsive-layout": "scroll",
         "column-resize-mode": "expand",
-        value: $props.transactions.data,
+        value: $props.transactions.details.data,
         "row-hover": true,
         "striped-rows": true
       }, {
@@ -1196,7 +1238,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             label: "reset",
             "class": "p-button-link",
             onClick: $setup.filterReset
-          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [$props.transactions.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
+          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [$props.transactions.details.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
             key: 0,
             label: "Export excel",
             "class-button": "p-button-outlined md:w-16rem",
@@ -1205,7 +1247,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             href: $setup.exportExcelLink
           }, null, 8
           /* PROPS */
-          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])];
+          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])]), $props.transactions.totalAmount ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_11, _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactions.totalTransaction), 1
+          /* TEXT */
+          )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_15, _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_17, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactions.totalAmount), 1
+          /* TEXT */
+          )])])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
         }),
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.TransactionReportTable, function (tableHeader) {
@@ -1240,7 +1286,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8
       /* PROPS */
       , ["value"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppPagination"], {
-        links: $props.transactions.links
+        links: $props.transactions.details.links
       }, null, 8
       /* PROPS */
       , ["links"])];

public/js/vue.js

@@ -58088,7 +58088,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"06e3fde2f6b5dfa3","resources_js_pages_auth_Login_vue":"0d70b4f828bb2ae3","resources_js_pages_auth_ResetPassword_vue":"2ba70d514b47ecff","resources_js_pages_auth_VerifyEmail_vue":"ebac28cf5fb51cfc","resources_js_pages_customer_Create_vue":"1220be5949d46569","resources_js_pages_customer_Edit_vue":"7571072c6961cb67","resources_js_pages_customer_Index_vue":"89aeb69bc7bf9125","resources_js_pages_customer_TableHeader_js":"71be5afdca048a9c","resources_js_pages_discount_Index_vue":"7a73e2119e6e6c6f","resources_js_pages_error_Error_vue":"39121f9961877130","resources_js_pages_expense_Create_vue":"8fa047c8fcff0fa3","resources_js_pages_expense_Index_vue":"b56d8a0027fef24c","resources_js_pages_expense_Show_vue":"e46cf4a28b9e732b","resources_js_pages_expense_TableHeader_js":"72e3dee74175b1c0","resources_js_pages_home_Index_vue":"1802df7736a203e0","resources_js_pages_laundry_Create_vue":"f5731b3f078c4bff","resources_js_pages_laundry_Edit_vue":"430f285b197d2fc1","resources_js_pages_laundry_Index_vue":"ee761f9e7d6e4502","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_mutation_Report_vue":"f53d6840d3891069","resources_js_pages_mutation_TableHeader_js":"82c2999bd7d098a1","resources_js_pages_outlet_Create_vue":"4958b1a88d1e03d1","resources_js_pages_outlet_Edit_vue":"3ce4dea5bd8e134a","resources_js_pages_outlet_Index_vue":"f58972cb6db52f4a","resources_js_pages_outlet_TableHeader_js":"498bf7e64bc0d0c4","resources_js_pages_product_Create_vue":"6f7ae2bf0addfd2c","resources_js_pages_product_Edit_vue":"aec56d000e33fbe6","resources_js_pages_product_Index_vue":"e73d3cd965bdbfb3","resources_js_pages_product_TableHeader_js":"b8eaaa9de25a2322","resources_js_pages_transaction_Create_vue":"04881653c83db0e8","resources_js_pages_transaction_Index_vue":"54a40dce85162abd","resources_js_pages_transaction_Report_vue":"8b3c37b617041b96","resources_js_pages_transaction_Show_vue":"bc1cb7b5161b5386","resources_js_pages_transaction_TableHeader_js":"be63e672e103818b","resources_js_pages_user_Create_vue":"9328027e33f14038","resources_js_pages_user_Edit_vue":"5e97bc1dbb553877","resources_js_pages_user_Index_vue":"bc60d10f530734f1","resources_js_pages_user_Show_vue":"0acbc3d158904cf1","resources_js_pages_user_TableHeader_js":"5653ecbcd70fd235"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"06e3fde2f6b5dfa3","resources_js_pages_auth_Login_vue":"0d70b4f828bb2ae3","resources_js_pages_auth_ResetPassword_vue":"2ba70d514b47ecff","resources_js_pages_auth_VerifyEmail_vue":"ebac28cf5fb51cfc","resources_js_pages_customer_Create_vue":"1220be5949d46569","resources_js_pages_customer_Edit_vue":"9b1098714289a805","resources_js_pages_customer_Index_vue":"89aeb69bc7bf9125","resources_js_pages_customer_TableHeader_js":"71be5afdca048a9c","resources_js_pages_discount_Index_vue":"7a73e2119e6e6c6f","resources_js_pages_error_Error_vue":"39121f9961877130","resources_js_pages_expense_Create_vue":"8fa047c8fcff0fa3","resources_js_pages_expense_Index_vue":"b56d8a0027fef24c","resources_js_pages_expense_Show_vue":"e46cf4a28b9e732b","resources_js_pages_expense_TableHeader_js":"72e3dee74175b1c0","resources_js_pages_home_Index_vue":"bf3cb4af92334410","resources_js_pages_laundry_Create_vue":"f5731b3f078c4bff","resources_js_pages_laundry_Edit_vue":"430f285b197d2fc1","resources_js_pages_laundry_Index_vue":"ee761f9e7d6e4502","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_mutation_Report_vue":"0c16f00427eb4815","resources_js_pages_mutation_TableHeader_js":"82c2999bd7d098a1","resources_js_pages_outlet_Create_vue":"4958b1a88d1e03d1","resources_js_pages_outlet_Edit_vue":"3ce4dea5bd8e134a","resources_js_pages_outlet_Index_vue":"f58972cb6db52f4a","resources_js_pages_outlet_TableHeader_js":"498bf7e64bc0d0c4","resources_js_pages_product_Create_vue":"6f7ae2bf0addfd2c","resources_js_pages_product_Edit_vue":"aec56d000e33fbe6","resources_js_pages_product_Index_vue":"e73d3cd965bdbfb3","resources_js_pages_product_TableHeader_js":"b8eaaa9de25a2322","resources_js_pages_transaction_Create_vue":"04881653c83db0e8","resources_js_pages_transaction_Index_vue":"54a40dce85162abd","resources_js_pages_transaction_Report_vue":"a3646e1ede56ed0d","resources_js_pages_transaction_Show_vue":"bc1cb7b5161b5386","resources_js_pages_transaction_TableHeader_js":"be63e672e103818b","resources_js_pages_user_Create_vue":"9328027e33f14038","resources_js_pages_user_Edit_vue":"5e97bc1dbb553877","resources_js_pages_user_Index_vue":"bc60d10f530734f1","resources_js_pages_user_Show_vue":"0acbc3d158904cf1","resources_js_pages_user_TableHeader_js":"5653ecbcd70fd235"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/customer/Edit.vue

@@ -112,6 +112,17 @@ const onCancel = () => (visibleDialog.value = false)
     </div>
 
     <h2>Riwayat Transaksi</h2>
+    <div v-if="transactions.totalTransaction" class="grid mt-3 ml-1">
+      <div class="col-auto">
+        <h2>
+          <span class="text-base"> <i class="pi pi-shopping-cart" /> Total Transaksi</span>
+
+          <br />
+
+          <span class="text-xl font-bold">{{ transactions.totalTransaction }}</span>
+        </h2>
+      </div>
+    </div>
     <div class="grid">
       <div class="col-12">
         <Card>
@@ -119,7 +130,7 @@ const onCancel = () => (visibleDialog.value = false)
             <DataTable
               responsive-layout="scroll"
               column-resize-mode="expand"
-              :value="transactions.data"
+              :value="transactions.details.data"
               :row-hover="true"
               :striped-rows="true"
             >
@@ -165,7 +176,7 @@ const onCancel = () => (visibleDialog.value = false)
               </Column>
             </DataTable>
 
-            <AppPagination :links="transactions.links" />
+            <AppPagination :links="transactions.details.links" />
           </template>
         </Card>
       </div>

resources/js/pages/home/Index.vue

@@ -1,21 +1,30 @@
 <script setup>
-import { onMounted } from 'vue'
 import { Head } from '@inertiajs/inertia-vue3'
+import orderBy from 'lodash/orderBy'
 import AppLayout from '@/layouts/AppLayout.vue'
 
-const props = defineProps({
+defineProps({
   cardStatistics: Object,
   chartTransactionStatistics: Object,
   chartOutletStatistic: Object,
+  chartTopTransactionStatistic: Object,
 })
 
-onMounted(() => {
-  console.log(props.chartTransactionStatistics)
-  console.log(props.chartOutletStatistic)
-})
+const colors = [
+  '#349dcf',
+  '#00b2da',
+  '#00c7dd',
+  '#1fdbdb',
+  '#57eed3',
+  '#88ffc9',
+  '#96ed9a',
+  '#a8d96c',
+  '#bbc242',
+  '#cda91d',
+]
 
 const transactionBarData = (chartData) => {
-  const colors = ['#17b6ff', '#ffb51c']
+  const colors = ['#349dcf', '#a8d96c']
 
   const data = {
     datasets: [],
@@ -36,21 +45,8 @@ const transactionBarData = (chartData) => {
 }
 
 const transactionBarOption = {
-  responsive: true,
   maintainAspectRatio: false,
   datasetFill: false,
-  scales: {
-    y: {
-      ticks: {
-        beginAtZero: true,
-        callback: function (label) {
-          if (Math.floor(label) === label) {
-            return label
-          }
-        },
-      },
-    },
-  },
 }
 
 const transactionOutletPieData = (chartData) => {
@@ -67,7 +63,7 @@ const transactionOutletPieData = (chartData) => {
     datasets: [
       {
         data: data,
-        backgroundColor: ['#17b6ff', '#00c3f7', '#00cbdc', '#00d1b2', '#2bd281', '#86cf50', '#c5c623', '#ffb51c'],
+        backgroundColor: colors,
       },
     ],
   }
@@ -76,11 +72,35 @@ const transactionOutletPieData = (chartData) => {
 const transactionOutletPieOption = {
   maintainAspectRatio: false,
   datasetFill: false,
+}
+
+const topTransactionData = (chartData) => {
+  const labels = []
+  const data = []
+
+  for (const chartData of orderBy(chartData, ['totalPrice'], ['desc'])) {
+    labels.push([chartData.customerNumber, chartData.name])
+    data.push(chartData.totalPrice)
+  }
+
+  return {
+    labels: labels,
+    datasets: [
+      {
+        data: data,
+        backgroundColor: colors,
+      },
+    ],
+  }
+}
+
+const topTransactionOption = {
+  maintainAspectRatio: false,
+  datasetFill: false,
+  indexAxis: 'y',
   plugins: {
     legend: {
-      labels: {
-        color: '#495057',
-      },
+      display: false,
     },
   },
 }
@@ -145,6 +165,26 @@ const transactionOutletPieOption = {
           </template>
         </Card>
       </div>
+
+      <div class="col-12 md:col-6">
+        <Card>
+          <template #title>
+            <div class="flex flex-column">
+              <span>{{ chartTopTransactionStatistic.title }}</span>
+              <span class="text-base font-normal">{{ chartTopTransactionStatistic.description }}</span>
+            </div>
+          </template>
+          <template #content>
+            <Chart
+              type="bar"
+              :width="600"
+              :height="300"
+              :data="topTransactionData(chartTopTransactionStatistic.data)"
+              :options="topTransactionOption"
+            />
+          </template>
+        </Card>
+      </div>
     </div>
   </AppLayout>
 </template>

resources/js/pages/mutation/Report.vue

@@ -1,7 +1,7 @@
 <script setup>
+import { watch, onMounted, ref } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
-import { watch, computed, onMounted, ref } from 'vue'
-import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
+import { Head, useForm } from '@inertiajs/inertia-vue3'
 import dayjs from 'dayjs'
 import pickBy from 'lodash/pickBy'
 import AppLayout from '@/layouts/AppLayout.vue'
@@ -14,9 +14,11 @@ const props = defineProps({
   mutations: {
     type: Object,
     default: {
-      data: [],
-      links: [],
-      total: 0,
+      details: {
+        data: [],
+        links: [],
+        total: 0,
+      },
     },
   },
   filters: Object,
@@ -89,7 +91,7 @@ const exportExcelLink = ref('/reports/mutations/export/excel')
     <DataTable
       responsive-layout="scroll"
       column-resize-mode="expand"
-      :value="mutations.data"
+      :value="mutations.details.data"
       :row-hover="true"
       :striped-rows="true"
     >
@@ -126,7 +128,7 @@ const exportExcelLink = ref('/reports/mutations/export/excel')
           </div>
           <div class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end">
             <AppButton
-              v-if="mutations.total"
+              v-if="mutations.details.total"
               label="Export excel"
               class-button="p-button-outlined md:w-16rem"
               icon="pi pi-file-excel"
@@ -135,6 +137,36 @@ const exportExcelLink = ref('/reports/mutations/export/excel')
             />
           </div>
         </div>
+
+        <div v-if="mutations.totalAmount" class="grid mt-3 ml-1">
+          <div class="col-auto mr-7">
+            <h2>
+              <span class="text-base"> <i class="pi pi-wallet" /> Pendapatan</span>
+
+              <br />
+
+              <span class="text-xl font-bold">{{ mutations.totalIncome }}</span>
+            </h2>
+          </div>
+          <div class="col-auto mr-7">
+            <h2>
+              <span class="text-base"> <i class="pi pi-wallet" /> Pengeluaran</span>
+
+              <br />
+
+              <span class="text-xl font-bold">{{ mutations.totalExpense }}</span>
+            </h2>
+          </div>
+          <div class="col-auto">
+            <h2>
+              <span class="text-base"> <i class="pi pi-wallet" /> Total</span>
+
+              <br />
+
+              <span class="text-xl font-bold">{{ mutations.totalAmount }}</span>
+            </h2>
+          </div>
+        </div>
       </template>
 
       <Column
@@ -155,6 +187,6 @@ const exportExcelLink = ref('/reports/mutations/export/excel')
       </Column>
     </DataTable>
 
-    <AppPagination :links="mutations.links" />
+    <AppPagination :links="mutations.details.links" />
   </AppLayout>
 </template>

resources/js/pages/transaction/Report.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { watch, computed, onMounted, ref } from 'vue'
+import { watch, onMounted, ref } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
-import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
+import { Head, useForm } from '@inertiajs/inertia-vue3'
 import dayjs from 'dayjs'
 import pickBy from 'lodash/pickBy'
 import AppLayout from '@/layouts/AppLayout.vue'
@@ -14,9 +14,11 @@ const props = defineProps({
   transactions: {
     type: Object,
     default: {
-      data: [],
-      links: [],
-      total: 0,
+      details: {
+        data: [],
+        links: [],
+        total: 0,
+      },
     },
   },
   filters: Object,
@@ -81,7 +83,7 @@ const exportExcelLink = ref('/reports/transactions/export/excel')
     <DataTable
       responsive-layout="scroll"
       column-resize-mode="expand"
-      :value="transactions.data"
+      :value="transactions.details.data"
       :row-hover="true"
       :striped-rows="true"
     >
@@ -118,7 +120,7 @@ const exportExcelLink = ref('/reports/transactions/export/excel')
           </div>
           <div class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end">
             <AppButton
-              v-if="transactions.total"
+              v-if="transactions.details.total"
               label="Export excel"
               class-button="p-button-outlined md:w-16rem"
               icon="pi pi-file-excel"
@@ -127,6 +129,26 @@ const exportExcelLink = ref('/reports/transactions/export/excel')
             />
           </div>
         </div>
+        <div v-if="transactions.totalAmount" class="grid mt-3 ml-1">
+          <div class="col-auto mr-7">
+            <h2>
+              <span class="text-base"> <i class="pi pi-shopping-cart" /> Total Transaksi</span>
+
+              <br />
+
+              <span class="text-xl font-bold">{{ transactions.totalTransaction }}</span>
+            </h2>
+          </div>
+          <div class="col-auto">
+            <h2>
+              <span class="text-base"> <i class="pi pi-wallet" /> Total Nilai</span>
+
+              <br />
+
+              <span class="text-xl font-bold">{{ transactions.totalAmount }}</span>
+            </h2>
+          </div>
+        </div>
       </template>
 
       <Column
@@ -147,6 +169,6 @@ const exportExcelLink = ref('/reports/transactions/export/excel')
       </Column>
     </DataTable>
 
-    <AppPagination :links="transactions.links" />
+    <AppPagination :links="transactions.details.links" />
   </AppLayout>
 </template>

resources/views/excel/mutation-report.blade.php

@@ -33,15 +33,15 @@
         </tr>
         <tr>
             <td colspan="3">Pendapatan</td>
-            <td>{{ (new App\Services\MutationService)->totalIncomeAsString($mutations) }}</td>
+            <td>{{ (new App\Services\MutationService())->totalIncomeAsString($mutations) }}</td>
         </tr>
         <tr>
             <td colspan="3">Pengeluran</td>
-            <td>{{ (new App\Services\MutationService)->totalExpenseAsString($mutations) }}</td>
+            <td>{{ (new App\Services\MutationService())->totalExpenseAsString($mutations) }}</td>
         </tr>
         <tr>
             <td colspan="3">Jumlah</td>
-            <td>{{ (new App\Services\MutationService)->totalAmount($mutations) }}</td>
+            <td>{{ (new App\Services\MutationService())->totalAmountAsString($mutations) }}</td>
         </tr>
     </tbody>
 </table>