feat: outlet statistics outlet

app/Http/Controllers/DashboardController.php

     public function __invoke(Request $request)
     {
         $transactions = Transaction::filter(['startDate' => today()])->get();
+
         $expenses = Expense::filter(['startDate' => today()])->get();
+
         $laundries = Laundry::get();
+
         $products = Product::get();
 
         $transactionChartStatistic = 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'),
         ]);
 
+        $transactionOutletChartStatistic = Transaction::get()->groupBy('outlet.name');
+
         return inertia('home/Index', [
             'cardStatistics' => [
                 [
                     'amount' => $products->count(),
                 ],
             ],
-            'chartStatistics' => [
+            'transactionStatistics' => [
                 [
                     'title' => __('words.transaction_statistic'),
                     'data' => (new TransactionService)->statisticData($transactionChartStatistic),
                     'data' => (new ExpenseService)->statisticData($expenseChartStatistic),
                 ],
             ],
+            'transactionOutletStatistics' => [
+                'title' => __('words.transaction_outlet_statistic'),
+                'data' => (new TransactionService)->totalPerMonth($transactionOutletChartStatistic),
+            ],
         ]);
     }
 }

lang/en/words.php

     'product_type' => 'Product Type',
     'transaction_statistic' => 'Transaction Statistic',
     'expense_statistic' => 'Expense Statistic',
+    'transaction_outlet_statistic' => 'Transaction Statistic/Outlet',
 
 ];

lang/id/words.php

     'product_type' => 'Jenis Product',
     'transaction_statistic' => 'Statistik Transaksi',
     'expense_statistic' => 'Statistik Pengeluaran',
+    'transaction_outlet_statistic' => 'Statistik Transaksi/Outlet',
 
 ];

public/js/resources_js_pages_home_Index_vue.js

 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
     cardStatistics: Object,
-    chartStatistics: Object
+    transactionStatistics: Object,
+    transactionOutletStatistics: Object
   },
   setup: function setup(__props, _ref) {
     var expose = _ref.expose;
     expose();
 
-    var chartData = function chartData(_chartData) {
-      var colors = ['#42A5F5', '#FFA726'];
+    var transactionBarData = function transactionBarData(chartData) {
+      var colors = ['#17b6ff', '#ffb51c'];
       var data = {
         datasets: []
       };
       var id = 0;
 
-      for (var key in _chartData) {
+      for (var key in chartData) {
         data.datasets.push({
           label: key,
           backgroundColor: colors[id],
-          data: _chartData[key]
+          data: chartData[key]
         });
         id++;
       }
       return data;
     };
 
-    var chartOptions = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)({
+    var transactionBarOption = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)({
       responsive: true,
       maintainAspectRatio: false,
       datasetFill: false,
         }
       }
     });
+
+    var transactionOutletPieData = function transactionOutletPieData(chartData) {
+      var labels = [];
+      var data = [];
+
+      for (var key in chartData) {
+        labels.push(key);
+        data.push(chartData[key]);
+      }
+
+      return {
+        labels: labels,
+        datasets: [{
+          data: data,
+          backgroundColor: ['#17b6ff', '#00c3f7', '#00cbdc', '#00d1b2', '#2bd281', '#86cf50', '#c5c623', '#ffb51c']
+        }]
+      };
+    };
+
+    var transactionOutletPieOption = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)({
+      maintainAspectRatio: false,
+      datasetFill: false,
+      plugins: {
+        legend: {
+          labels: {
+            color: '#495057'
+          }
+        }
+      }
+    });
     var __returned__ = {
-      chartData: chartData,
-      chartOptions: chartOptions,
+      transactionBarData: transactionBarData,
+      transactionBarOption: transactionBarOption,
+      transactionOutletPieData: transactionOutletPieData,
+      transactionOutletPieOption: transactionOutletPieOption,
       ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
 var _hoisted_9 = {
   "class": "col-12 md:col-6"
 };
+var _hoisted_10 = {
+  "class": "col-12 md:col-6"
+};
 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.chartStatistics, function (chartStatistic) {
+      )), ((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) {
         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)(chartStatistic.title), 1
+            return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(transactionStatistic.title), 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.chartData(chartStatistic.data),
-              options: $setup.chartOptions
+              data: $setup.transactionBarData(transactionStatistic.data),
+              options: $setup.transactionBarOption
             }, null, 8
             /* PROPS */
             , ["data", "options"])];
         )]);
       }), 256
       /* UNKEYED_FRAGMENT */
-      ))])];
+      )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(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
+          /* 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),
+            options: $setup.transactionOutletPieOption
+          }, null, 8
+          /* PROPS */
+          , ["data", "options"])];
+        }),
+        _: 1
+        /* STABLE */
+
+      })])])];
     }),
     _: 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":"8f0e1faaa7b884eb","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":"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] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/home/Index.vue

 
 defineProps({
   cardStatistics: Object,
-  chartStatistics: Object,
+  transactionStatistics: Object,
+  transactionOutletStatistics: Object,
 })
 
-const chartData = (chartData) => {
-  const colors = ['#42A5F5', '#FFA726']
+const transactionBarData = (chartData) => {
+  const colors = ['#17b6ff', '#ffb51c']
 
   const data = {
     datasets: [],
   return data
 }
 
-const chartOptions = ref({
+const transactionBarOption = ref({
   responsive: true,
   maintainAspectRatio: false,
   datasetFill: false,
     },
   },
 })
+
+const transactionOutletPieData = (chartData) => {
+  const labels = []
+  const data = []
+
+  for (const key in chartData) {
+    labels.push(key)
+    data.push(chartData[key])
+  }
+
+  return {
+    labels: labels,
+    datasets: [
+      {
+        data: data,
+        backgroundColor: ['#17b6ff', '#00c3f7', '#00cbdc', '#00d1b2', '#2bd281', '#86cf50', '#c5c623', '#ffb51c'],
+      },
+    ],
+  }
+}
+
+const transactionOutletPieOption = ref({
+  maintainAspectRatio: false,
+  datasetFill: false,
+  plugins: {
+    legend: {
+      labels: {
+        color: '#495057',
+      },
+    },
+  },
+})
 </script>
 
 <template>
         </Card>
       </div>
 
-      <div v-for="chartStatistic in chartStatistics" class="col-12 md:col-6">
+      <div v-for="transactionStatistic in transactionStatistics" class="col-12 md:col-6">
+        <Card>
+          <template #title>{{ transactionStatistic.title }}</template>
+          <template #content>
+            <Chart type="bar" :data="transactionBarData(transactionStatistic.data)" :options="transactionBarOption" />
+          </template>
+        </Card>
+      </div>
+
+      <div class="col-12 md:col-6">
         <Card>
-          <template #title>{{ chartStatistic.title }}</template>
+          <template #title>{{ transactionOutletStatistics.title }}</template>
           <template #content>
-            <Chart type="bar" :data="chartData(chartStatistic.data)" :options="chartOptions" />
+            <Chart
+              type="pie"
+              :width="600"
+              :height="300"
+              :data="transactionOutletPieData(transactionOutletStatistics.data)"
+              :options="transactionOutletPieOption"
+            />
           </template>
         </Card>
       </div>