MuhammadIqbalAfandi
/
bambslaundry-new
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

fix: chart dashboard

Muhammad Iqbal Afandi 3 years ago
parent
2517ef5eb9
commit
992c6a0fa1
9 changed files with 127 additions and 61 deletions
Split View Show Diff Stats
  1. 32
    18
      app/Http/Controllers/DashboardController.php
  2. 2
    2
      app/Services/ExpenseService.php
  3. 19
    6
      app/Services/MutationService.php
  4. 2
    2
      app/Services/TransactionService.php
  5. 2
    1
      lang/en/words.php
  6. 2
    1
      lang/id/words.php
  7. 39
    17
      public/js/resources_js_pages_home_Index_vue.js
  8. 1
    1
      public/js/vue.js
  9. 28
    13
      resources/js/pages/home/Index.vue

+ 32
- 18
app/Http/Controllers/DashboardController.php View File 

@@ -2,11 +2,14 @@
2 2
3 3 
 namespace App\Http\Controllers;
4 4
5 
+use App\Http\Controllers\Controller;
5 6 
 use App\Models\Expense;
6 7 
 use App\Models\Laundry;
8 
+use App\Models\Mutation;
7 9 
 use App\Models\Product;
8 10 
 use App\Models\Transaction;
9 11 
 use App\Services\ExpenseService;
12 
+use App\Services\MutationService;
10 13 
 use App\Services\TransactionService;
11 14 
 use Carbon\Carbon;
12 15 
 use Illuminate\Http\Request;
 
@@ -22,25 +25,33 @@ class DashboardController extends Controller
22 25 
      */
23 26 
     public function __invoke(Request $request)
24 27 
     {
25 
-        $transactions = Transaction::filter(['startDate' => today()])->get();
28 
+        $transactions = Transaction::whereDate('created_at', date('Y-m-d'))->get();
26 29
27 
-        $expenses = Expense::filter(['startDate' => today()])->get();
30 
+        $expenses = Expense::whereDate('created_at', date('Y-m-d'))->get();
28 31
29 32 
         $laundries = Laundry::get();
30 33
31 34 
         $products = Product::get();
32 35
33 
-        $transactionChartStatistic = Transaction::get()->groupBy([
36 
+        $transactionChart = Transaction::get()->groupBy([
34 37 
             fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('Y'),
35 38 
             fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('M'),
36 39 
         ]);
37 40
38 
-        $expenseChartStatistic = Expense::get()->groupBy([
39 
-            fn($expense) => Carbon::parse($expense->getRawOriginal('created_at'))->format('Y'),
40 
-            fn($expense) => Carbon::parse($expense->getRawOriginal('created_at'))->format('M'),
41 
-        ]);
41 
+        $mutationChart = Mutation::whereYear('created_at', date('Y'))
42 
+            ->get()
43 
+            ->groupBy([
44 
+                fn($mutation) => $mutation->type,
45 
+                fn($mutation) => Carbon::parse($mutation->getRawOriginal('created_at'))->format('M'),
46 
+            ]);
42 47
43 
-        $transactionOutletChartStatistic = Transaction::get()->groupBy('outlet.name');
48 
+        $transactionOutletChart = Transaction::whereYear('created_at', date('Y'))
49 
+            ->whereMonth('created_at', date('m'))
50 
+            ->get()
51 
+            ->groupBy([
52 
+                fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('M'),
53 
+                fn($transaction) => $transaction->outlet->name,
54 
+            ]);
44 55
45 56 
         return inertia('home/Index', [
46 57 
             'cardStatistics' => [
 
@@ -61,29 +72,32 @@ class DashboardController extends Controller
61 72 
                 [
62 73 
                     'title' => __('words.laundry_type'),
63 74 
                     'icon' => 'pi pi-table',
64 
-                    'amountLabel' => __('words.total'),
65 75 
                     'amount' => $laundries->count(),
76 
+                    'amountLabel' => __('words.total'),
66 77 
                 ],
67 78 
                 [
68 79 
                     'title' => __('words.product_type'),
69 80 
                     'icon' => 'pi pi-table',
70 
-                    'amountLabel' => __('words.total'),
71 81 
                     'amount' => $products->count(),
82 
+                    'amountLabel' => __('words.total'),
72 83 
                 ],
73 84 
             ],
74 
-            'transactionStatistics' => [
75 
-                [
85 
+            'chartTransactionStatistics' => [
86 
+                'transaction' => [
76 87 
                     'title' => __('words.transaction_statistic'),
77 
-                    'data' => (new TransactionService)->statisticData($transactionChartStatistic),
88 
+                    'description' => __('words.per_year') . ' ' . now()->subYear(1)->format('Y') . '-' . date('Y'),
89 
+                    'data' => (new TransactionService)->statisticData($transactionChart, -2),
78 90 
                 ],
79 
-                [
80 
-                    'title' => __('words.expense_statistic'),
81 
-                    'data' => (new ExpenseService)->statisticData($expenseChartStatistic),
91 
+                'transactionMutation' => [
92 
+                    'title' => __('words.mutation_statistic'),
93 
+                    'description' => __('words.per_year') . ' ' . date('Y'),
94 
+                    'data' => (new MutationService)->statisticData($mutationChart, -2),
82 95 
                 ],
83 96 
             ],
84 
-            'transactionOutletStatistics' => [
97 
+            'chartOutletStatistic' => [
85 98 
                 'title' => __('words.transaction_outlet_statistic'),
86 
-                'data' => (new TransactionService)->totalPerMonth($transactionOutletChartStatistic),
99 
+                'description' => Carbon::parse(date('Y-m-d'))->translatedFormat('F, Y'),
100 
+                'data' => (new TransactionService)->statisticData($transactionOutletChart)->first(),
87 101 
             ],
88 102 
         ]);
89 103 
     }

+ 2
- 2
app/Services/ExpenseService.php View File 

@@ -22,9 +22,9 @@ class ExpenseService extends CurrencyFormatService
22 22 
         return $collections->transform(fn($collection) => $collection->count());
23 23 
     }
24 24
25 
-    public function statisticData(SupportCollection $collections)
25 
+    public function statisticData(SupportCollection $collections, int $take = -1)
26 26 
     {
27 
-        $collections = $collections->take(-2);
27 
+        $collections = $collections->take($take);
28 28 
         $collections->transform(fn($collections) => $this->totalPerMonth($collections));
29 29 
         return $collections;
30 30 
     }

+ 19
- 6
app/Services/MutationService.php View File 

@@ -2,11 +2,12 @@
2 2
3 3 
 namespace App\Services;
4 4
5 
-use Illuminate\Database\Eloquent\Collection;
5 
+use Illuminate\Database\Eloquent\Collection as EloquentCollection;
6 
+use Illuminate\Support\Collection as SupportCollection;
6 7
7 8 
 class MutationService extends CurrencyFormatService
8 9 
 {
9 
-    public function totalIncome(Collection $collections)
10 
+    public function totalIncome(EloquentCollection $collections)
10 11 
     {
11 12 
         foreach ($collections->chunk(100) as $chunk) {
12 13 
             return $chunk->sum(function ($collect) {
 
@@ -17,7 +18,7 @@ class MutationService extends CurrencyFormatService
17 18 
         }
18 19 
     }
19 20
20 
-    public function totalExpense(Collection $collections)
21 
+    public function totalExpense(EloquentCollection $collections)
21 22 
     {
22 23 
         foreach ($collections->chunk(100) as $chunk) {
23 24 
             return $chunk->sum(function ($collect) {
 
@@ -28,19 +29,31 @@ class MutationService extends CurrencyFormatService
28 29 
         }
29 30 
     }
30 31
31 
-    public function totalIncomeAsString(Collection $collections)
32 
+    public function totalIncomeAsString(EloquentCollection $collections)
32 33 
     {
33 34 
         return $this->setRupiahFormat($this->totalIncome($collections), true);
34 35 
     }
35 36
36 
-    public function totalExpenseAsString(Collection $collections)
37 
+    public function totalExpenseAsString(EloquentCollection $collections)
37 38 
     {
38 39 
         return $this->setRupiahFormat($this->totalExpense($collections), true);
39 40 
     }
40 41
41 
-    public function totalAmount(Collection $collections)
42 
+    public function totalAmount(EloquentCollection $collections)
42 43 
     {
43 44 
         $amount = $this->totalIncome($collections) - $this->totalExpense($collections);
44 45 
         return $this->setRupiahFormat($amount, true);
45 46 
     }
47 
+
48 
+    public function totalPerMonth(EloquentCollection $collections)
49 
+    {
50 
+        return $collections->transform(fn($collection) => $collection->sum(fn($collect) => $collect->getRawOriginal('amount')));
51 
+    }
52 
+
53 
+    public function statisticData(SupportCollection $collections, int $take = -1)
54 
+    {
55 
+        $collections = $collections->take($take);
56 
+        $collections->transform(fn($collections) => $this->totalPerMonth($collections));
57 
+        return $collections;
58 
+    }
46 59 
 }

+ 2
- 2
app/Services/TransactionService.php View File 

@@ -43,9 +43,9 @@ class TransactionService
43 43 
         return $collections->transform(fn($collection) => $collection->count());
44 44 
     }
45 45
46 
-    public function statisticData(SupportCollection $collections)
46 
+    public function statisticData(SupportCollection $collections, int $take = -1)
47 47 
     {
48 
-        $collections = $collections->take(-2);
48 
+        $collections = $collections->take($take);
49 49 
         $collections->transform(fn($collections) => $this->totalPerMonth($collections));
50 50 
         return $collections;
51 51 
     }

+ 2
- 1
lang/en/words.php View File 

@@ -24,7 +24,8 @@ return [
24 24 
     'laundry_type' => 'Laundry Type',
25 25 
     'product_type' => 'Product Type',
26 26 
     'transaction_statistic' => 'Transaction Statistic',
27 
-    'expense_statistic' => 'Expense Statistic',
27 
+    'mutation_statistic' => 'Mutations Statistic',
28 28 
     'transaction_outlet_statistic' => 'Transaction Statistic/Outlet',
29 
+    'per_year' => 'Per Year',
29 30
30 31 
 ];

+ 2
- 1
lang/id/words.php View File 

@@ -24,7 +24,8 @@ return [
24 24 
     'laundry_type' => 'Jenis Laundry',
25 25 
     'product_type' => 'Jenis Product',
26 26 
     'transaction_statistic' => 'Statistik Transaksi',
27 
-    'expense_statistic' => 'Statistik Pengeluaran',
27 
+    'mutation_statistic' => 'Statistik Mutasi',
28 28 
     'transaction_outlet_statistic' => 'Statistik Transaksi/Outlet',
29 
+    'per_year' => 'Pertahun',
29 30
30 31 
 ];

+ 39
- 17
public/js/resources_js_pages_home_Index_vue.js View File 

@@ -318,12 +318,17 @@ __webpack_require__.r(__webpack_exports__);
318 318 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
319 319 
   props: {
320 320 
     cardStatistics: Object,
321 
-    transactionStatistics: Object,
322 
-    transactionOutletStatistics: Object
321 
+    chartTransactionStatistics: Object,
322 
+    chartOutletStatistic: Object
323 323 
   },
324 324 
   setup: function setup(__props, _ref) {
325 325 
     var expose = _ref.expose;
326 326 
     expose();
327 
+    var props = __props;
328 
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
329 
+      console.log(props.chartTransactionStatistics);
330 
+      console.log(props.chartOutletStatistic);
331 
+    });
327 332
328 333 
     var transactionBarData = function transactionBarData(chartData) {
329 334 
       var colors = ['#17b6ff', '#ffb51c'];
 
@@ -344,7 +349,7 @@ __webpack_require__.r(__webpack_exports__);
344 349 
       return data;
345 350 
     };
346 351
347 
-    var transactionBarOption = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)({
352 
+    var transactionBarOption = {
348 353 
       responsive: true,
349 354 
       maintainAspectRatio: false,
350 355 
       datasetFill: false,
 
@@ -360,7 +365,7 @@ __webpack_require__.r(__webpack_exports__);
360 365 
           }
361 366 
         }
362 367 
       }
363 
-    });
368 
+    };
364 369
365 370 
     var transactionOutletPieData = function transactionOutletPieData(chartData) {
366 371 
       var labels = [];
 
@@ -380,7 +385,7 @@ __webpack_require__.r(__webpack_exports__);
380 385 
       };
381 386 
     };
382 387
383 
-    var transactionOutletPieOption = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)({
388 
+    var transactionOutletPieOption = {
384 389 
       maintainAspectRatio: false,
385 390 
       datasetFill: false,
386 391 
       plugins: {
 
@@ -390,13 +395,14 @@ __webpack_require__.r(__webpack_exports__);
390 395 
           }
391 396 
         }
392 397 
       }
393 
-    });
398 
+    };
394 399 
     var __returned__ = {
400 
+      props: props,
395 401 
       transactionBarData: transactionBarData,
396 402 
       transactionBarOption: transactionBarOption,
397 403 
       transactionOutletPieData: transactionOutletPieData,
398 404 
       transactionOutletPieOption: transactionOutletPieOption,
399 
-      ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
405 
+      onMounted: vue__WEBPACK_IMPORTED_MODULE_0__.onMounted,
400 406 
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
401 407 
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
402 408 
     };
 
@@ -936,8 +942,20 @@ var _hoisted_9 = {
936 942 
   "class": "col-12 md:col-6"
937 943 
 };
938 944 
 var _hoisted_10 = {
945 
+  "class": "flex flex-column"
946 
+};
947 
+var _hoisted_11 = {
948 
+  "class": "text-base font-normal"
949 
+};
950 
+var _hoisted_12 = {
939 951 
   "class": "col-12 md:col-6"
940 952 
 };
953 
+var _hoisted_13 = {
954 
+  "class": "flex flex-column"
955 
+};
956 
+var _hoisted_14 = {
957 
+  "class": "text-base font-normal"
958 
+};
941 959 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
942 960 
   var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
943 961 
 
@@ -974,21 +992,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
974 992 
         )]);
975 993 
       }), 256
976 994 
       /* UNKEYED_FRAGMENT */
977 
-      )), ((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) {
995 
+      )), ((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) {
978 996 
         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, {
979 997 
           title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
980 
-            return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(transactionStatistic.title), 1
998 
+            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
981 999 
             /* TEXT */
982 
-            )];
1000 
+            ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(statistic.description), 1
1001 
+            /* TEXT */
1002 
+            )])];
983 1003 
           }),
984 1004 
           content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
985 1005 
             return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Chart, {
986 1006 
               type: "bar",
987 
-              data: $setup.transactionBarData(transactionStatistic.data),
1007 
+              data: $setup.transactionBarData(statistic.data),
988 1008 
               options: $setup.transactionBarOption
989 1009 
             }, null, 8
990 1010 
             /* PROPS */
991 
-            , ["data", "options"])];
1011 
+            , ["data"])];
992 1012 
           }),
993 1013 
           _: 2
994 1014 
           /* DYNAMIC */
 
@@ -998,22 +1018,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
998 1018 
         )]);
999 1019 
       }), 256
1000 1020 
       /* UNKEYED_FRAGMENT */
1001 
-      )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
1021 
+      )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
1002 1022 
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
1003 
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactionOutletStatistics.title), 1
1023 
+          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
1024 
+          /* TEXT */
1025 
+          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartOutletStatistic.description), 1
1004 1026 
           /* TEXT */
1005 
-          )];
1027 
+          )])];
1006 1028 
         }),
1007 1029 
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
1008 1030 
           return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Chart, {
1009 1031 
             type: "pie",
1010 1032 
             width: 600,
1011 1033 
             height: 300,
1012 
-            data: $setup.transactionOutletPieData($props.transactionOutletStatistics.data),
1034 
+            data: $setup.transactionOutletPieData($props.chartOutletStatistic.data),
1013 1035 
             options: $setup.transactionOutletPieOption
1014 1036 
           }, null, 8
1015 1037 
           /* PROPS */
1016 
-          , ["data", "options"])];
1038 
+          , ["data"])];
1017 1039 
         }),
1018 1040 
         _: 1
1019 1041 
         /* STABLE */

+ 1
- 1
public/js/vue.js View File 

@@ -58088,7 +58088,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
58088 58088 
 /******/ 		// This function allow to reference async chunks
58089 58089 
 /******/ 		__webpack_require__.u = (chunkId) => {
58090 58090 
 /******/ 			// return url for filenames based on template
58091 
-/******/ 			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] + "";
58091 
+/******/ 			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] + "";
58092 58092 
 /******/ 		};
58093 58093 
 /******/ 	})();
58094 58094 
 /******/

+ 28
- 13
resources/js/pages/home/Index.vue View File 

@@ -1,12 +1,17 @@
1 1 
 <script setup>
2 
-import { ref } from 'vue'
2 
+import { onMounted } from 'vue'
3 3 
 import { Head } from '@inertiajs/inertia-vue3'
4 4 
 import AppLayout from '@/layouts/AppLayout.vue'
5 5
6 
-defineProps({
6 
+const props = defineProps({
7 7 
   cardStatistics: Object,
8 
-  transactionStatistics: Object,
9 
-  transactionOutletStatistics: Object,
8 
+  chartTransactionStatistics: Object,
9 
+  chartOutletStatistic: Object,
10 
+})
11 
+
12 
+onMounted(() => {
13 
+  console.log(props.chartTransactionStatistics)
14 
+  console.log(props.chartOutletStatistic)
10 15 
 })
11 16
12 17 
 const transactionBarData = (chartData) => {
 
@@ -30,7 +35,7 @@ const transactionBarData = (chartData) => {
30 35 
   return data
31 36 
 }
32 37
33 
-const transactionBarOption = ref({
38 
+const transactionBarOption = {
34 39 
   responsive: true,
35 40 
   maintainAspectRatio: false,
36 41 
   datasetFill: false,
 
@@ -46,7 +51,7 @@ const transactionBarOption = ref({
46 51 
       },
47 52 
     },
48 53 
   },
49 
-})
54 
+}
50 55
51 56 
 const transactionOutletPieData = (chartData) => {
52 57 
   const labels = []
 
@@ -68,7 +73,7 @@ const transactionOutletPieData = (chartData) => {
68 73 
   }
69 74 
 }
70 75
71 
-const transactionOutletPieOption = ref({
76 
+const transactionOutletPieOption = {
72 77 
   maintainAspectRatio: false,
73 78 
   datasetFill: false,
74 79 
   plugins: {
 
@@ -78,7 +83,7 @@ const transactionOutletPieOption = ref({
78 83 
       },
79 84 
     },
80 85 
   },
81 
-})
86 
+}
82 87 
 </script>
83 88
84 89 
 <template>
 
@@ -107,24 +112,34 @@ const transactionOutletPieOption = ref({
107 112 
         </Card>
108 113 
       </div>
109 114
110 
-      <div v-for="transactionStatistic in transactionStatistics" class="col-12 md:col-6">
115 
+      <div v-for="statistic in chartTransactionStatistics" class="col-12 md:col-6">
111 116 
         <Card>
112 
-          <template #title>{{ transactionStatistic.title }}</template>
117 
+          <template #title>
118 
+            <div class="flex flex-column">
119 
+              <span>{{ statistic.title }}</span>
120 
+              <span class="text-base font-normal">{{ statistic.description }}</span>
121 
+            </div>
122 
+          </template>
113 123 
           <template #content>
114 
-            <Chart type="bar" :data="transactionBarData(transactionStatistic.data)" :options="transactionBarOption" />
124 
+            <Chart type="bar" :data="transactionBarData(statistic.data)" :options="transactionBarOption" />
115 125 
           </template>
116 126 
         </Card>
117 127 
       </div>
118 128
119 129 
       <div class="col-12 md:col-6">
120 130 
         <Card>
121 
-          <template #title>{{ transactionOutletStatistics.title }}</template>
131 
+          <template #title>
132 
+            <div class="flex flex-column">
133 
+              <span>{{ chartOutletStatistic.title }}</span>
134 
+              <span class="text-base font-normal">{{ chartOutletStatistic.description }}</span>
135 
+            </div>
136 
+          </template>
122 137 
           <template #content>
123 138 
             <Chart
124 139 
               type="pie"
125 140 
               :width="600"
126 141 
               :height="300"
127 
-              :data="transactionOutletPieData(transactionOutletStatistics.data)"
142 
+              :data="transactionOutletPieData(chartOutletStatistic.data)"
128 143 
               :options="transactionOutletPieOption"
129 144 
             />
130 145 
           </template>