fix: chart dashboard

app/Http/Controllers/DashboardController.php

 
 namespace App\Http\Controllers;
 
+use App\Http\Controllers\Controller;
 use App\Models\Expense;
 use App\Models\Laundry;
+use App\Models\Mutation;
 use App\Models\Product;
 use App\Models\Transaction;
 use App\Services\ExpenseService;
+use App\Services\MutationService;
 use App\Services\TransactionService;
 use Carbon\Carbon;
 use Illuminate\Http\Request;
      */
     public function __invoke(Request $request)
     {
-        $transactions = Transaction::filter(['startDate' => today()])->get();
+        $transactions = Transaction::whereDate('created_at', date('Y-m-d'))->get();
 
-        $expenses = Expense::filter(['startDate' => today()])->get();
+        $expenses = Expense::whereDate('created_at', date('Y-m-d'))->get();
 
         $laundries = Laundry::get();
 
         $products = Product::get();
 
-        $transactionChartStatistic = Transaction::get()->groupBy([
+        $transactionChart = Transaction::get()->groupBy([
             fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('Y'),
             fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('M'),
         ]);
 
-        $expenseChartStatistic = Expense::get()->groupBy([
-            fn($expense) => Carbon::parse($expense->getRawOriginal('created_at'))->format('Y'),
-            fn($expense) => Carbon::parse($expense->getRawOriginal('created_at'))->format('M'),
-        ]);
+        $mutationChart = Mutation::whereYear('created_at', date('Y'))
+            ->get()
+            ->groupBy([
+                fn($mutation) => $mutation->type,
+                fn($mutation) => Carbon::parse($mutation->getRawOriginal('created_at'))->format('M'),
+            ]);
 
-        $transactionOutletChartStatistic = Transaction::get()->groupBy('outlet.name');
+        $transactionOutletChart = Transaction::whereYear('created_at', date('Y'))
+            ->whereMonth('created_at', date('m'))
+            ->get()
+            ->groupBy([
+                fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('M'),
+                fn($transaction) => $transaction->outlet->name,
+            ]);
 
         return inertia('home/Index', [
             'cardStatistics' => [
                 [
                     'title' => __('words.laundry_type'),
                     'icon' => 'pi pi-table',
-                    'amountLabel' => __('words.total'),
                     'amount' => $laundries->count(),
+                    'amountLabel' => __('words.total'),
                 ],
                 [
                     'title' => __('words.product_type'),
                     'icon' => 'pi pi-table',
-                    'amountLabel' => __('words.total'),
                     'amount' => $products->count(),
+                    'amountLabel' => __('words.total'),
                 ],
             ],
-            'transactionStatistics' => [
-                [
+            'chartTransactionStatistics' => [
+                'transaction' => [
                     'title' => __('words.transaction_statistic'),
-                    'data' => (new TransactionService)->statisticData($transactionChartStatistic),
+                    'description' => __('words.per_year') . ' ' . now()->subYear(1)->format('Y') . '-' . date('Y'),
+                    'data' => (new TransactionService)->statisticData($transactionChart, -2),
                 ],
-                [
-                    'title' => __('words.expense_statistic'),
-                    'data' => (new ExpenseService)->statisticData($expenseChartStatistic),
+                'transactionMutation' => [
+                    'title' => __('words.mutation_statistic'),
+                    'description' => __('words.per_year') . ' ' . date('Y'),
+                    'data' => (new MutationService)->statisticData($mutationChart, -2),
                 ],
             ],
-            'transactionOutletStatistics' => [
+            'chartOutletStatistic' => [
                 'title' => __('words.transaction_outlet_statistic'),
-                'data' => (new TransactionService)->totalPerMonth($transactionOutletChartStatistic),
+                'description' => Carbon::parse(date('Y-m-d'))->translatedFormat('F, Y'),
+                'data' => (new TransactionService)->statisticData($transactionOutletChart)->first(),
             ],
         ]);
     }

app/Services/ExpenseService.php

         return $collections->transform(fn($collection) => $collection->count());
     }
 
-    public function statisticData(SupportCollection $collections)
+    public function statisticData(SupportCollection $collections, int $take = -1)
     {
-        $collections = $collections->take(-2);
+        $collections = $collections->take($take);
         $collections->transform(fn($collections) => $this->totalPerMonth($collections));
         return $collections;
     }

app/Services/MutationService.php

 
 namespace App\Services;
 
-use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Collection as EloquentCollection;
+use Illuminate\Support\Collection as SupportCollection;
 
 class MutationService extends CurrencyFormatService
 {
-    public function totalIncome(Collection $collections)
+    public function totalIncome(EloquentCollection $collections)
     {
         foreach ($collections->chunk(100) as $chunk) {
             return $chunk->sum(function ($collect) {
         }
     }
 
-    public function totalExpense(Collection $collections)
+    public function totalExpense(EloquentCollection $collections)
     {
         foreach ($collections->chunk(100) as $chunk) {
             return $chunk->sum(function ($collect) {
         }
     }
 
-    public function totalIncomeAsString(Collection $collections)
+    public function totalIncomeAsString(EloquentCollection $collections)
     {
         return $this->setRupiahFormat($this->totalIncome($collections), true);
     }
 
-    public function totalExpenseAsString(Collection $collections)
+    public function totalExpenseAsString(EloquentCollection $collections)
     {
         return $this->setRupiahFormat($this->totalExpense($collections), true);
     }
 
-    public function totalAmount(Collection $collections)
+    public function totalAmount(EloquentCollection $collections)
     {
         $amount = $this->totalIncome($collections) - $this->totalExpense($collections);
         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;
+    }
 }

app/Services/TransactionService.php

         return $collections->transform(fn($collection) => $collection->count());
     }
 
-    public function statisticData(SupportCollection $collections)
+    public function statisticData(SupportCollection $collections, int $take = -1)
     {
-        $collections = $collections->take(-2);
+        $collections = $collections->take($take);
         $collections->transform(fn($collections) => $this->totalPerMonth($collections));
         return $collections;
     }

lang/en/words.php

     'laundry_type' => 'Laundry Type',
     'product_type' => 'Product Type',
     'transaction_statistic' => 'Transaction Statistic',
-    'expense_statistic' => 'Expense Statistic',
+    'mutation_statistic' => 'Mutations Statistic',
     'transaction_outlet_statistic' => 'Transaction Statistic/Outlet',
+    'per_year' => 'Per Year',
 
 ];

lang/id/words.php

     'laundry_type' => 'Jenis Laundry',
     'product_type' => 'Jenis Product',
     'transaction_statistic' => 'Statistik Transaksi',
-    'expense_statistic' => 'Statistik Pengeluaran',
+    'mutation_statistic' => 'Statistik Mutasi',
     'transaction_outlet_statistic' => 'Statistik Transaksi/Outlet',
+    'per_year' => 'Pertahun',
 
 ];

public/js/resources_js_pages_home_Index_vue.js

 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
     cardStatistics: Object,
-    transactionStatistics: Object,
-    transactionOutletStatistics: Object
+    chartTransactionStatistics: Object,
+    chartOutletStatistic: Object
   },
   setup: function setup(__props, _ref) {
     var expose = _ref.expose;
     expose();
+    var props = __props;
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
+      console.log(props.chartTransactionStatistics);
+      console.log(props.chartOutletStatistic);
+    });
 
     var transactionBarData = function transactionBarData(chartData) {
       var colors = ['#17b6ff', '#ffb51c'];
       return data;
     };
 
-    var transactionBarOption = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)({
+    var transactionBarOption = {
       responsive: true,
       maintainAspectRatio: false,
       datasetFill: false,
           }
         }
       }
-    });
+    };
 
     var transactionOutletPieData = function transactionOutletPieData(chartData) {
       var labels = [];
       };
     };
 
-    var transactionOutletPieOption = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)({
+    var transactionOutletPieOption = {
       maintainAspectRatio: false,
       datasetFill: false,
       plugins: {
           }
         }
       }
-    });
+    };
     var __returned__ = {
+      props: props,
       transactionBarData: transactionBarData,
       transactionBarOption: transactionBarOption,
       transactionOutletPieData: transactionOutletPieData,
       transactionOutletPieOption: transactionOutletPieOption,
-      ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
+      onMounted: vue__WEBPACK_IMPORTED_MODULE_0__.onMounted,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
     };
   "class": "col-12 md:col-6"
 };
 var _hoisted_10 = {
+  "class": "flex flex-column"
+};
+var _hoisted_11 = {
+  "class": "text-base font-normal"
+};
+var _hoisted_12 = {
   "class": "col-12 md:col-6"
 };
+var _hoisted_13 = {
+  "class": "flex flex-column"
+};
+var _hoisted_14 = {
+  "class": "text-base font-normal"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
 
         )]);
       }), 256
       /* UNKEYED_FRAGMENT */
-      )), ((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)($props.transactionStatistics, function (transactionStatistic) {
+      )), ((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)($props.chartTransactionStatistics, function (statistic) {
         return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
           title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-            return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(transactionStatistic.title), 1
+            return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(statistic.title), 1
             /* TEXT */
-            )];
+            ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(statistic.description), 1
+            /* TEXT */
+            )])];
           }),
           content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
             return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Chart, {
               type: "bar",
-              data: $setup.transactionBarData(transactionStatistic.data),
+              data: $setup.transactionBarData(statistic.data),
               options: $setup.transactionBarOption
             }, null, 8
             /* PROPS */
-            , ["data", "options"])];
+            , ["data"])];
           }),
           _: 2
           /* DYNAMIC */
         )]);
       }), 256
       /* UNKEYED_FRAGMENT */
-      )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+      )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactionOutletStatistics.title), 1
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartOutletStatistic.title), 1
+          /* TEXT */
+          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartOutletStatistic.description), 1
           /* TEXT */
-          )];
+          )])];
         }),
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Chart, {
             type: "pie",
             width: 600,
             height: 300,
-            data: $setup.transactionOutletPieData($props.transactionOutletStatistics.data),
+            data: $setup.transactionOutletPieData($props.chartOutletStatistic.data),
             options: $setup.transactionOutletPieOption
           }, null, 8
           /* PROPS */
-          , ["data", "options"])];
+          , ["data"])];
         }),
         _: 1
         /* STABLE */

public/js/vue.js

 /******/ 		// 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":"ebcb4cef897548d8","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":"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] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/home/Index.vue

 <script setup>
-import { ref } from 'vue'
+import { onMounted } from 'vue'
 import { Head } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 
-defineProps({
+const props = defineProps({
   cardStatistics: Object,
-  transactionStatistics: Object,
-  transactionOutletStatistics: Object,
+  chartTransactionStatistics: Object,
+  chartOutletStatistic: Object,
+})
+
+onMounted(() => {
+  console.log(props.chartTransactionStatistics)
+  console.log(props.chartOutletStatistic)
 })
 
 const transactionBarData = (chartData) => {
   return data
 }
 
-const transactionBarOption = ref({
+const transactionBarOption = {
   responsive: true,
   maintainAspectRatio: false,
   datasetFill: false,
       },
     },
   },
-})
+}
 
 const transactionOutletPieData = (chartData) => {
   const labels = []
   }
 }
 
-const transactionOutletPieOption = ref({
+const transactionOutletPieOption = {
   maintainAspectRatio: false,
   datasetFill: false,
   plugins: {
       },
     },
   },
-})
+}
 </script>
 
 <template>
         </Card>
       </div>
 
-      <div v-for="transactionStatistic in transactionStatistics" class="col-12 md:col-6">
+      <div v-for="statistic in chartTransactionStatistics" class="col-12 md:col-6">
         <Card>
-          <template #title>{{ transactionStatistic.title }}</template>
+          <template #title>
+            <div class="flex flex-column">
+              <span>{{ statistic.title }}</span>
+              <span class="text-base font-normal">{{ statistic.description }}</span>
+            </div>
+          </template>
           <template #content>
-            <Chart type="bar" :data="transactionBarData(transactionStatistic.data)" :options="transactionBarOption" />
+            <Chart type="bar" :data="transactionBarData(statistic.data)" :options="transactionBarOption" />
           </template>
         </Card>
       </div>
 
       <div class="col-12 md:col-6">
         <Card>
-          <template #title>{{ transactionOutletStatistics.title }}</template>
+          <template #title>
+            <div class="flex flex-column">
+              <span>{{ chartOutletStatistic.title }}</span>
+              <span class="text-base font-normal">{{ chartOutletStatistic.description }}</span>
+            </div>
+          </template>
           <template #content>
             <Chart
               type="pie"
               :width="600"
               :height="300"
-              :data="transactionOutletPieData(transactionOutletStatistics.data)"
+              :data="transactionOutletPieData(chartOutletStatistic.data)"
               :options="transactionOutletPieOption"
             />
           </template>