feat: master mutation

app/Exports/MutationExport.php

+<?php
+
+namespace App\Exports;
+
+use App\Models\Mutation;
+use Illuminate\Contracts\Support\Responsable;
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\Request;
+use Maatwebsite\Excel\Concerns\Exportable;
+use Maatwebsite\Excel\Concerns\FromView;
+use Maatwebsite\Excel\Concerns\ShouldAutoSize;
+use Maatwebsite\Excel\Concerns\WithStyles;
+use PhpOffice\PhpSpreadsheet\Worksheet\Worksheet;
+
+class MutationExport implements ShouldAutoSize, Responsable, FromView, WithStyles
+{
+    use Exportable;
+
+    private $fileName = 'mutation-report.xls';
+
+    public function __construct(private Request $request)
+    {}
+
+    public function view(): View
+    {
+        $mutations = Mutation::filter($this->request->only('startDate', 'endDate'))->get();
+        return view('excel.mutation-report', compact('mutations'));
+    }
+
+    public function styles(Worksheet $sheet)
+    {
+        $lastRow = $sheet->getHighestDataRow();
+        $lastSecondRow = $lastRow - 1;
+        $lastThirdRow = $lastSecondRow - 1;
+        $lastFourRow = $lastThirdRow - 1;
+
+        return [
+            1 => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['vertical' => 'center', 'horizontal' => 'center'],
+            ],
+            2 => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['vertical' => 'center', 'horizontal' => 'center'],
+            ],
+            4 => [
+                'font' => ['bold' => true],
+            ],
+            $lastRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+            $lastSecondRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+            $lastThirdRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+            $lastFourRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+        ];
+    }
+}

app/Http/Controllers/ReportMutationController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use App\Exports\MutationExport;
+use App\Models\Mutation;
+use App\Services\MutationService;
+use Inertia\Inertia;
+
+class ReportMutationController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function index()
+    {
+        $mutations = Mutation::filter(request()->only('startDate', 'endDate'));
+
+        return inertia('mutation/Report', [
+            'filters' => request()->all('startDate', 'endDate', 'outlet'),
+            'mutations' => Inertia::lazy(
+                fn() => [
+                    'totalIncome' => (new MutationService)->totalIncomeAsString($mutations->get()),
+                    'totalExpense' => (new MutationService)->totalExpenseAsString($mutations->get()),
+                    'totalAmount' => (new MutationService)->totalAmountAsString($mutations->get()),
+                    'details' => $mutations
+                        ->latest()
+                        ->paginate(10)
+                        ->withQueryString()
+                        ->through(fn($mutation) => [
+                            'createdAt' => $mutation->created_at,
+                            'amount' => $mutation->amount,
+                            'type' => $mutation->type,
+                            'transactionOutId' => $mutation->transaction_out,
+                            'expenseId' => $mutation->expense_id,
+                            'topupId' => $mutation->top_up_id,
+                        ]),
+                ]
+            ),
+        ]);
+    }
+
+    /**
+     * Export to excel
+     */
+    public function exportExcel()
+    {
+        return new MutationExport(request());
+    }
+}

app/Models/Mutation.php

 
 namespace App\Models;
 
+use App\Services\CurrencyFormatService;
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 
     protected $fillable = [
         'type',
         'amount',
-        'transaction_id',
+        'transaction_out_id',
         'expense_id',
         'topup_id',
     ];
+
+    protected function createdAt(): Attribute
+    {
+        return Attribute::make(
+            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y')
+        );
+    }
+
+    protected function amount(): Attribute
+    {
+        return Attribute::make(
+            get:function ($value) {
+                if ($this->getRawOriginal('type') == 1) {
+                    return (new CurrencyFormatService)->setRupiahFormat($value, true);
+                } else {
+                    return (new CurrencyFormatService)->setRupiahFormat(-$value, true);
+                }
+            },
+        );
+    }
+
+    protected function type(): Attribute
+    {
+        return Attribute::make(
+            get:fn($value) => $value == 1 ? __('words.income') : __('words.expense')
+        );
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['startDate'] ?? null, function ($query, $date) {
+            $query->whereDate('created_at', '>=', $date);
+        })->when($filters['endDate'] ?? null, function ($query, $date) {
+            $query->whereDate('created_at', '<=', $date);
+        })->when($filters['outlet'] ?? null, function ($query, $outlet) {
+            $query->where('outlet_id', $outlet);
+        });
+    }
 }

app/Services/MutationService.php

+<?php
+
+namespace App\Services;
+
+use Illuminate\Database\Eloquent\Collection as EloquentCollection;
+use Illuminate\Support\Collection as SupportCollection;
+
+class MutationService extends CurrencyFormatService
+{
+    public function totalIncome(EloquentCollection $collections)
+    {
+        foreach ($collections->chunk(100) as $chunk) {
+            return $chunk->sum(function ($collect) {
+                if ($collect->getRawOriginal('type') == 1) {
+                    return $collect->getRawOriginal('amount');
+                }
+            });
+        }
+    }
+
+    public function totalExpense(EloquentCollection $collections)
+    {
+        foreach ($collections->chunk(100) as $chunk) {
+            return $chunk->sum(function ($collect) {
+                if ($collect->getRawOriginal('type') == 2) {
+                    return $collect->getRawOriginal('amount');
+                }
+            });
+        }
+    }
+
+    public function totalIncomeAsString(EloquentCollection $collections)
+    {
+        if ($collections->count()) {
+            return $this->setRupiahFormat($this->totalIncome($collections), true);
+        } else {
+            return $this->setRupiahFormat(0, true);
+        }
+    }
+
+    public function totalExpenseAsString(EloquentCollection $collections)
+    {
+        if ($collections->count()) {
+            return $this->setRupiahFormat($this->totalExpense($collections), true);
+        } else {
+            return $this->setRupiahFormat(0, true);
+        }
+    }
+
+    public function totalAmountAsString(EloquentCollection $collections)
+    {
+        if ($collections->count()) {
+            $amount = $this->totalIncome($collections) - $this->totalExpense($collections);
+        } else {
+            $amount = 0;
+        }
+
+        return $this->setRupiahFormat($amount, true);
+    }
+
+    public function totalPerMonth(EloquentCollection $collections)
+    {
+        return $collections->transform(fn($collection) => $collection->sum(fn($collect) => $collect->getRawOriginal('amount')));
+    }
+
+    public function statisticData(SupportCollection $collections, int $take = -1)
+    {
+        $collections = $collections->take($take);
+        $collections->transform(fn($collections) => $this->totalPerMonth($collections));
+        return $collections;
+    }
+}

composer.json

     "laravel/framework": "^9.0",
     "laravel/sanctum": "^2.14",
     "laravel/tinker": "^2.7",
-    "maatwebsite/excel": "3.1.38",
+    "maatwebsite/excel": "^3.1",
     "psr/simple-cache": "^1.0",
     "tightenco/ziggy": "^1.4"
   },

composer.lock

         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9a2698e624f694cb0e44c83110cbc609",
+    "content-hash": "c95b0e2a152a8654b1f0ff918e5d0d09",
     "packages": [
         {
             "name": "asm89/stack-cors",
         },
         {
             "name": "maatwebsite/excel",
-            "version": "3.1.38",
+            "version": "3.1.40",
             "source": {
                 "type": "git",
                 "url": "https://github.com/SpartnerNL/Laravel-Excel.git",
-                "reference": "dff132ce4d30b19863f4e84de1613fca99604992"
+                "reference": "8a54972e3d616c74687c3cbff15765555761885c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/SpartnerNL/Laravel-Excel/zipball/dff132ce4d30b19863f4e84de1613fca99604992",
-                "reference": "dff132ce4d30b19863f4e84de1613fca99604992",
+                "url": "https://api.github.com/repos/SpartnerNL/Laravel-Excel/zipball/8a54972e3d616c74687c3cbff15765555761885c",
+                "reference": "8a54972e3d616c74687c3cbff15765555761885c",
                 "shasum": ""
             },
             "require": {
             ],
             "support": {
                 "issues": "https://github.com/SpartnerNL/Laravel-Excel/issues",
-                "source": "https://github.com/SpartnerNL/Laravel-Excel/tree/3.1.38"
+                "source": "https://github.com/SpartnerNL/Laravel-Excel/tree/3.1.40"
             },
             "funding": [
                 {
                     "type": "github"
                 }
             ],
-            "time": "2022-03-24T16:00:29+00:00"
+            "time": "2022-05-02T13:50:01+00:00"
         },
         {
             "name": "maennchen/zipstream-php",

database/migrations/2022_04_23_130216_create_mutations_table.php

     {
         Schema::create('mutations', function (Blueprint $table) {
             $table->id();
-            $table->string('type');
+            $table->enum('type', [1, 2]); // 1(income) 2(expense)
             $table->unsignedInteger('amount');
-            $table->foreignId('transaction_out')->nullable()->default(null)->constrained();
+            $table->foreignId('transaction_out_id')->nullable()->default(null)->constrained();
             $table->foreignId('expense_id')->nullable()->default(null)->constrained();
             $table->foreignId('top_up_id')->nullable()->default(null)->constrained();
             $table->timestamps();

public/js/resources_js_pages_auth_VerifyEmail_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),

public/js/resources_js_pages_expense_Create_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_expense_Index_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_expense_Show_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_home_Index_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_member_Create_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_member_Edit_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_member_Index_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_mutation_Index_vue.js

+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_mutation_Index_vue"],{
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/mutation/Index.vue?vue&type=template&id=38c13d75":
+/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/mutation/Index.vue?vue&type=template&id=38c13d75 ***!
+  \*******************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+function render(_ctx, _cache) {
+  return null;
+}
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/dist/exportHelper.js":
+/*!******************************************************!*\
+  !*** ./node_modules/vue-loader/dist/exportHelper.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+// runtime helper for setting properties on components
+// in a tree-shakable way
+exports["default"] = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+        target[key] = val;
+    }
+    return target;
+};
+
+
+/***/ }),
+
+/***/ "./resources/js/pages/mutation/Index.vue":
+/*!***********************************************!*\
+  !*** ./resources/js/pages/mutation/Index.vue ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _Index_vue_vue_type_template_id_38c13d75__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Index.vue?vue&type=template&id=38c13d75 */ "./resources/js/pages/mutation/Index.vue?vue&type=template&id=38c13d75");
+/* harmony import */ var _home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+const script = {}
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_1__["default"])(script, [['render',_Index_vue_vue_type_template_id_38c13d75__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/pages/mutation/Index.vue"]])
+/* hot reload */
+if (false) {}
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ }),
+
+/***/ "./resources/js/pages/mutation/Index.vue?vue&type=template&id=38c13d75":
+/*!*****************************************************************************!*\
+  !*** ./resources/js/pages/mutation/Index.vue?vue&type=template&id=38c13d75 ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_template_id_38c13d75__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_template_id_38c13d75__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Index.vue?vue&type=template&id=38c13d75 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/mutation/Index.vue?vue&type=template&id=38c13d75");
+
+
+/***/ })
+
+}]);

public/js/resources_js_pages_mutation_Show_vue.js

+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_mutation_Show_vue"],{
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/mutation/Show.vue?vue&type=template&id=00b8c2ac":
+/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/mutation/Show.vue?vue&type=template&id=00b8c2ac ***!
+  \******************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+function render(_ctx, _cache) {
+  return null;
+}
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/dist/exportHelper.js":
+/*!******************************************************!*\
+  !*** ./node_modules/vue-loader/dist/exportHelper.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+// runtime helper for setting properties on components
+// in a tree-shakable way
+exports["default"] = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+        target[key] = val;
+    }
+    return target;
+};
+
+
+/***/ }),
+
+/***/ "./resources/js/pages/mutation/Show.vue":
+/*!**********************************************!*\
+  !*** ./resources/js/pages/mutation/Show.vue ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _Show_vue_vue_type_template_id_00b8c2ac__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Show.vue?vue&type=template&id=00b8c2ac */ "./resources/js/pages/mutation/Show.vue?vue&type=template&id=00b8c2ac");
+/* harmony import */ var _home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+const script = {}
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_1__["default"])(script, [['render',_Show_vue_vue_type_template_id_00b8c2ac__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/pages/mutation/Show.vue"]])
+/* hot reload */
+if (false) {}
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ }),
+
+/***/ "./resources/js/pages/mutation/Show.vue?vue&type=template&id=00b8c2ac":
+/*!****************************************************************************!*\
+  !*** ./resources/js/pages/mutation/Show.vue?vue&type=template&id=00b8c2ac ***!
+  \****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Show_vue_vue_type_template_id_00b8c2ac__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Show_vue_vue_type_template_id_00b8c2ac__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Show.vue?vue&type=template&id=00b8c2ac */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/mutation/Show.vue?vue&type=template&id=00b8c2ac");
+
+
+/***/ })
+
+}]);

public/js/resources_js_pages_mutation_TableHeader_js.js

+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_mutation_TableHeader_js"],{
+
+/***/ "./resources/js/pages/mutation/TableHeader.js":
+/*!****************************************************!*\
+  !*** ./resources/js/pages/mutation/TableHeader.js ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'createdAt',
+  header: 'Tanggal'
+}, {
+  field: 'type',
+  header: 'Tipe'
+}, {
+  field: 'amount',
+  header: 'Nilai'
+}]);
+
+/***/ })
+
+}]);

public/js/resources_js_pages_topup_Create_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_topup_Index_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_topup_Show_vue.js

 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
-/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
-/* harmony import */ var _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/components/AppPagination.vue */ "./resources/js/components/AppPagination.vue");
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
-/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/topup/TableHeader.js");
-
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+/* harmony import */ var _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/components/AppPagination.vue */ "./resources/js/components/AppPagination.vue");
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/topup/TableHeader.js");
 
 
 
   setup: function setup(__props, _ref) {
     var expose = _ref.expose;
     expose();
-    var props = __props;
-    (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
-      console.info(props.member);
-      console.table(props.topUp);
-    });
     var __returned__ = {
-      props: props,
-      onMounted: vue__WEBPACK_IMPORTED_MODULE_0__.onMounted,
-      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
-      AppPagination: _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
-      TopUpsTable: _TableHeader__WEBPACK_IMPORTED_MODULE_4__.TopUpsTable
+      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.Head,
+      AppPagination: _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
+      TopUpsTable: _TableHeader__WEBPACK_IMPORTED_MODULE_3__.TopUpsTable
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_typemember_Create_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_typemember_Edit_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_typemember_Index_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_typevehicle_Create_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_typevehicle_Edit_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_typevehicle_Index_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_user_Create_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_user_Edit_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_user_Index_vue.js

   "class": "p-button-label"
 };
 var _hoisted_2 = {
-  key: 1
-};
-var _hoisted_3 = {
   key: 1,
   "class": "p-button-label"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   return $props.inertiaLink ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Link"], {
     key: 0,
     "class": "p-button p-component",
     _: 1
     /* STABLE */
 
-  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.classButton)
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
-        key: 0,
-        "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
-      }, null, 2
-      /* CLASS */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["class"])]));
+  })) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("a", {
+    key: 1,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([$props.classButton, "p-button p-component"])
+  }, [$props.icon ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", {
+    key: 0,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["p-button-icon p-button-icon-left", $props.icon])
+  }, null, 2
+  /* CLASS */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.label ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("span", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ));
 }
 
 /***/ }),
       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/resources_js_pages_user_Show_vue.js

       icon: 'pi pi-wallet',
       to: '/expenses',
       component: 'expense/Index'
+    }, {
+      label: 'Laporan',
+      icon: 'pi pi-book',
+      items: [{
+        label: 'Mutasi',
+        icon: 'pi pi-circle',
+        to: '/reports/mutations',
+        component: 'mutation/Report'
+      }]
     }]
   }, {
     label: 'Master',

public/js/vue.js

 		"./resources/js/pages/member/TableHeader.js",
 		"resources_js_pages_member_TableHeader_js"
 	],
+	"./mutation/Report": [
+		"./resources/js/pages/mutation/Report.vue",
+		"resources_js_pages_mutation_Report_vue"
+	],
+	"./mutation/Report.vue": [
+		"./resources/js/pages/mutation/Report.vue",
+		"resources_js_pages_mutation_Report_vue"
+	],
+	"./mutation/TableHeader": [
+		"./resources/js/pages/mutation/TableHeader.js",
+		"resources_js_pages_mutation_TableHeader_js"
+	],
+	"./mutation/TableHeader.js": [
+		"./resources/js/pages/mutation/TableHeader.js",
+		"resources_js_pages_mutation_TableHeader_js"
+	],
 	"./topup/Create": [
 		"./resources/js/pages/topup/Create.vue",
 		"resources_js_pages_topup_Create_vue"
 /******/ 		// 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":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"a7b9a99e5a331088","resources_js_pages_expense_Create_vue":"66e7c99b236f0deb","resources_js_pages_expense_Index_vue":"f85b8a458475c32f","resources_js_pages_expense_Show_vue":"c6be13ef48f14ee2","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"77d2cc7e0ffbf90e","resources_js_pages_member_Create_vue":"00e438eb5da902ce","resources_js_pages_member_Edit_vue":"48baae4f4480f54d","resources_js_pages_member_Index_vue":"220ea5d5cd363228","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_topup_Create_vue":"d9727aeb522f7d0e","resources_js_pages_topup_Index_vue":"4213bf188c295a33","resources_js_pages_topup_Show_vue":"a8c55ac0b35fc72b","resources_js_pages_topup_TableHeader_js":"601b7c0a855ce64e","resources_js_pages_typemember_Create_vue":"a79f5122dd4d955c","resources_js_pages_typemember_Edit_vue":"339a293819be91a7","resources_js_pages_typemember_Index_vue":"b6d16dc9b5f2b3b6","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"913e399451308fbb","resources_js_pages_typevehicle_Edit_vue":"659302538c3304bb","resources_js_pages_typevehicle_Index_vue":"a5da2be987ea0ce5","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"9407a7ca1e9268c7","resources_js_pages_user_Edit_vue":"68b60f3e274f7cd8","resources_js_pages_user_Index_vue":"f3269e9d78d4fe78","resources_js_pages_user_Show_vue":"e1c2622b8345f329","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"d9853eae0a0235f2","resources_js_pages_expense_Create_vue":"310e7d98ea6b356a","resources_js_pages_expense_Index_vue":"bc7ec2fb070cf568","resources_js_pages_expense_Show_vue":"877a19596ee241b4","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"4c4f4fe595ce63c4","resources_js_pages_member_Create_vue":"838296974c6b4913","resources_js_pages_member_Edit_vue":"bc2c701451f6a653","resources_js_pages_member_Index_vue":"caaaba41d56c9f67","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_mutation_Report_vue":"6e9122d512297940","resources_js_pages_mutation_TableHeader_js":"7822e888aa3c52fc","resources_js_pages_topup_Create_vue":"958203b0038681b5","resources_js_pages_topup_Index_vue":"ccfe12c579a19810","resources_js_pages_topup_Show_vue":"4d5dea1719d4048e","resources_js_pages_topup_TableHeader_js":"601b7c0a855ce64e","resources_js_pages_typemember_Create_vue":"5bba3a97069a1889","resources_js_pages_typemember_Edit_vue":"8ab79ae9735ce84f","resources_js_pages_typemember_Index_vue":"1310a39e399f214c","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"4799ba8b5384d9a3","resources_js_pages_typevehicle_Edit_vue":"1ec4ba3e7994e2bc","resources_js_pages_typevehicle_Index_vue":"69ab68f9968f9aff","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"ed7565eb901e854c","resources_js_pages_user_Edit_vue":"4948ac292320388a","resources_js_pages_user_Index_vue":"552950b60f6dbb1b","resources_js_pages_user_Show_vue":"1d1d7702785d1470","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/AppButton.vue

     <span v-if="icon" class="p-button-icon p-button-icon-left" :class="icon"></span>
     <span v-if="label" class="p-button-label">{{ label }}</span>
   </Link>
-  <a v-else>
-    <Button :class="classButton">
+  <template v-else>
+    <a :class="classButton" class="p-button p-component">
       <span v-if="icon" class="p-button-icon p-button-icon-left" :class="icon"></span>
       <span v-if="label" class="p-button-label">{{ label }}</span>
-    </Button>
-  </a>
+    </a>
+  </template>
 </template>

resources/js/pages/mutation/Report.vue

+<script setup>
+import { watch, onMounted, ref } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, useForm } from '@inertiajs/inertia-vue3'
+import dayjs from 'dayjs'
+import { pickBy } from 'lodash'
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppPagination from '@/components/AppPagination.vue'
+import AppButton from '@/components/AppButton.vue'
+
+import TableHeader from './TableHeader'
+
+const props = defineProps({
+  mutations: {
+    type: Object,
+    default: {
+      details: {
+        data: [],
+        links: [],
+        total: 0,
+      },
+    },
+  },
+  filters: Object,
+})
+
+const filterForm = useForm({
+  dates: null,
+  startDate: props.filters.startDate,
+  endDate: props.filters.endDate,
+})
+
+onMounted(() => {
+  if (props.filters.startDate || props.filters.endDate) {
+    if (props.filters.endDate) {
+      filterForm.dates = [new Date(props.filters.startDate), new Date(props.filters.endDate)]
+    } else {
+      filterForm.dates = [new Date(props.filters.startDate), null]
+    }
+  }
+})
+
+watch(filterForm, () => {
+  if (filterForm.dates) {
+    if (filterForm.dates[1]) {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
+    } else {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = null
+    }
+  } else {
+    filterForm.endDate = null
+    filterForm.startDate = null
+  }
+
+  Inertia.reload({
+    data: pickBy({
+      startDate: filterForm.startDate,
+      endDate: filterForm.endDate,
+    }),
+    only: ['mutations'],
+  })
+
+  const params = window.location.search
+  exportExcelLink.value = `/reports/mutations/export/excel${params}`
+})
+
+const filterReset = () => {
+  Inertia.get('/reports/mutations')
+}
+
+const linkReference = (data) => {
+  if (data.topupId) {
+    return route('top-ups.show', data.topupId)
+  } else if (data.expenseId) {
+    return route('expenses.show', data.expenseId)
+  } else {
+    console.info('under construction')
+    // return route('expenses.show', data.expenseId)
+  }
+}
+
+const exportExcelLink = ref('/reports/mutations/export/excel')
+</script>
+
+<template>
+  <AppLayout>
+    <Head title="Laporan Mutasi" />
+
+    <DataTable
+      responsive-layout="scroll"
+      column-resize-mode="expand"
+      :value="mutations.details.data"
+      :row-hover="true"
+      :striped-rows="true"
+    >
+      <template #header>
+        <h1>Laporan Mutasi</h1>
+
+        <div class="grid">
+          <div class="col-12 md:col-8">
+            <div class="grid">
+              <div class="col-12 md:col-4">
+                <Calendar
+                  class="w-full"
+                  v-model="filterForm.dates"
+                  selection-mode="range"
+                  placeholder="filter waktu..."
+                  date-format="dd/mm/yy"
+                  :manual-input="false"
+                />
+              </div>
+              <div class="col-auto mt-2 ml-2">
+                <Button label="reset" class="p-button-link" @click="filterReset" />
+              </div>
+            </div>
+          </div>
+          <div class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end">
+            <AppButton
+              v-if="mutations.details.total"
+              label="Export excel"
+              class-button="p-button-outlined md:w-16rem"
+              icon="pi pi-file-excel"
+              :inertia-link="false"
+              :href="exportExcelLink"
+            />
+          </div>
+        </div>
+
+        <div v-if="mutations.totalAmount" class="grid mt-5 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 Pendapatan </span>
+
+              <br />
+
+              <span class="text-xl font-bold">{{ mutations.totalAmount }}</span>
+            </h2>
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="tableHeader in TableHeader"
+        :field="tableHeader.field"
+        :header="tableHeader.header"
+        :key="tableHeader.field"
+      />
+
+      <Column>
+        <template #body="{ data }">
+          <AppButton
+            icon="pi pi-link"
+            class="p-button-text p-button-icon-only p-button-rounded p-button-text"
+            :href="linkReference(data)"
+          />
+        </template>
+      </Column>
+    </DataTable>
+
+    <AppPagination :links="mutations.details.links" />
+  </AppLayout>
+</template>

resources/js/pages/mutation/TableHeader.js

+export default [
+  { field: 'createdAt', header: 'Tanggal' },
+  { field: 'type', header: 'Tipe' },
+  { field: 'amount', header: 'Nilai' },
+]

resources/js/pages/topup/Show.vue

 <script setup>
-import { onMounted } from 'vue'
 import { Head } from '@inertiajs/inertia-vue3'
 import AppPagination from '@/components/AppPagination.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 import { TopUpsTable } from './TableHeader'
 
-const props = defineProps({
+defineProps({
   member: Object,
   topUp: Object,
 })
-
-onMounted(() => {
-  console.info(props.member)
-  console.table(props.topUp)
-})
 </script>
 
 <template>

resources/js/utils/menu.js

     },
     {
       label: 'Menu',
-      items: [{ label: 'Pengeluaran', icon: 'pi pi-wallet', to: '/expenses', component: 'expense/Index' }],
+      items: [
+        { label: 'Pengeluaran', icon: 'pi pi-wallet', to: '/expenses', component: 'expense/Index' },
+        {
+          label: 'Laporan',
+          icon: 'pi pi-book',
+          items: [{ label: 'Mutasi', icon: 'pi pi-circle', to: '/reports/mutations', component: 'mutation/Report' }],
+        },
+      ],
     },
     {
       label: 'Master',

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

+<table>
+    <thead>
+        <tr>
+            <th colspan="5">Laporan Mutasi</th>
+        </tr>
+        <tr>
+            <th colspan="5" rowspan="2">Periode {{ $mutations->first()->created_at }} -
+                {{ $mutations->last()->created_at }} </th>
+        </tr>
+        <tr></tr>
+        <tr>
+            <th>#</th>
+            <th>Tanggal</th>
+            <th>Tipe</th>
+            <th>Nilai</th>
+        </tr>
+    </thead>
+    <tbody>
+        @foreach ($mutations->chunk(100) as $chunk)
+            @foreach ($chunk as $index => $mutation)
+                <tr>
+                    <td>{{ ++$index }}</td>
+                    <td>{{ $mutation->created_at }}</td>
+                    <td>{{ $mutation->type }}</td>
+                    <td>{{ $mutation->amount }}</td>
+                </tr>
+            @endforeach
+        @endforeach
+        <tr>
+            <td colspan="3">Total</td>
+        </tr>
+        <tr>
+            <td colspan="3">Pendapatan</td>
+            <td>{{ (new App\Services\MutationService())->totalIncomeAsString($mutations) }}</td>
+        </tr>
+        <tr>
+            <td colspan="3">Pengeluran</td>
+            <td>{{ (new App\Services\MutationService())->totalExpenseAsString($mutations) }}</td>
+        </tr>
+        <tr>
+            <td colspan="3">Jumlah Pendapatan</td>
+            <td>{{ (new App\Services\MutationService())->totalAmountAsString($mutations) }}</td>
+        </tr>
+    </tbody>
+</table>

routes/web.php

 use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\ExpenseController;
 use App\Http\Controllers\MemberController;
+use App\Http\Controllers\ReportMutationController;
 use App\Http\Controllers\TopUpController;
 use App\Http\Controllers\TypeMemberController;
 use App\Http\Controllers\TypeVehicleController;
 
     Route::resource('/expenses', ExpenseController::class);
 
+    Route::get('/reports/mutations', [ReportMutationController::class, 'index']);
+    Route::get('/reports/mutations/export/excel', [ReportMutationController::class, 'exportExcel'])->name('mutations.excel');
+
     Route::resource('/members', MemberController::class);
 
     Route::resource('/top-ups', TopUpController::class);