feat: chart discount given

app/Http/Controllers/DashboardController.php

@@ -33,6 +33,8 @@ class DashboardController extends Controller
 
         $products = Product::get();
 
+        $transactionDiscount = Transaction::whereMonth('created_at', date('m'))->whereNotIn('discount', [0])->get();
+
         $transactionChart = Transaction::get()
             ->groupBy([
                 fn($transaction) => Carbon::parse($transaction->getRawOriginal('created_at'))->format('Y'),
@@ -73,6 +75,13 @@ class DashboardController extends Controller
                     'amountLabel' => __('words.today'),
                     'value' => (new ExpenseService)->totalPriceAsString($expenses),
                 ],
+                [
+                    'title' => __('words.discount_given'),
+                    'icon' => 'pi pi-percentage',
+                    'amount' => $transactionDiscount->count(),
+                    'amountLabel' => __('words.this_month'),
+                    'value' => (new TransactionService)->totalDiscountGivenGroupAsString($transactionDiscount),
+                ],
                 [
                     'title' => __('words.laundry_type'),
                     'icon' => 'pi pi-table',

app/Models/Transaction.php

@@ -116,6 +116,16 @@ class Transaction extends Model
         }
     }
 
+    public function totalDiscountGiven()
+    {
+        $totalDiscountGiven = $this->getRawOriginal('discount') - $this->subTotal();
+        if ($totalDiscountGiven < 0) {
+            return abs($totalDiscountGiven);
+        } else {
+            return $totalDiscountGiven;
+        }
+    }
+
     public function totalPriceAsString()
     {
         return (new CurrencyFormatService)->setRupiahFormat($this->totalPrice());

app/Services/TransactionService.php

@@ -7,7 +7,7 @@ use Illuminate\Database\Eloquent\Collection as EloquentCollection;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Collection as SupportCollection;
 
-class TransactionService
+class TransactionService extends CurrencyFormatService
 {
     public function getPaginator(array $items)
     {
@@ -25,7 +25,7 @@ class TransactionService
 
     public function totalPrice(EloquentCollection $collections)
     {
-        return $collections->transform(fn($transactions) => $transactions->totalPrice());
+        return $collections->transform(fn($collect) => $collect->totalPrice());
     }
 
     public function totalPriceGroup(EloquentCollection $collections)
@@ -35,7 +35,12 @@ class TransactionService
 
     public function totalPriceGroupAsString(EloquentCollection $collections)
     {
-        return (new CurrencyFormatService)->setRupiahFormat($this->totalPriceGroup($collections), true);
+        return $this->setRupiahFormat($this->totalPriceGroup($collections), true);
+    }
+
+    public function totalDiscountGivenGroupAsString(EloquentCollection $collections)
+    {
+        return $this->setRupiahFormat($collections->sum(fn($collect) => $collect->totalDiscountGiven()), true);
     }
 
     public function totalPerMonth(EloquentCollection $collections)

lang/en/words.php

@@ -18,7 +18,9 @@ return [
     'income' => 'Income',
     'expense' => 'Expense',
     'today' => 'Today',
+    'this_month' => 'This Month',
     'total' => 'Total',
+    'discount_given' => 'Discount Given',
     'transaction' => 'Transaction',
     'expense' => 'Expense',
     'laundry_type' => 'Laundry Type',

lang/id/words.php

@@ -18,7 +18,9 @@ return [
     'income' => 'Pendapatan',
     'expense' => 'Pengeluaran',
     'today' => 'Hari ini',
+    'this_month' => 'Bulan ini',
     'total' => 'Total',
+    'discount_given' => 'Diskon yang diberikan',
     'transaction' => 'Transaksi',
     'expense' => 'Pengeluaran',
     'laundry_type' => 'Jenis Laundry',

public/js/resources_js_pages_home_Index_vue.js

@@ -933,10 +933,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
-/***/ "./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/home/Index.vue?vue&type=template&id=9329f6aa":
-/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./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/home/Index.vue?vue&type=template&id=9329f6aa ***!
-  \***************************************************************************************************************************************************************************************************************************************************************************/
+/***/ "./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/home/Index.vue?vue&type=template&id=9329f6aa&scoped=true":
+/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/home/Index.vue?vue&type=template&id=9329f6aa&scoped=true ***!
+  \***************************************************************************************************************************************************************************************************************************************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -946,60 +946,68 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
+
+var _withScopeId = function _withScopeId(n) {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.pushScopeId)("data-v-9329f6aa"), n = n(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.popScopeId)(), n;
+};
+
 var _hoisted_1 = {
   "class": "grid"
 };
 var _hoisted_2 = {
-  "class": "col-12 md:col-3"
+  "class": "col-12 flex flex-wrap justify-content-between card-statistic"
 };
 var _hoisted_3 = {
-  "class": "flex justify-content-between mb-3"
+  "class": "flex-grow-1"
 };
 var _hoisted_4 = {
-  "class": "block text-500 font-medium mb-3"
+  "class": "flex justify-content-between mb-3"
 };
 var _hoisted_5 = {
+  "class": "block text-500 font-medium mb-3"
+};
+var _hoisted_6 = {
   key: 0,
   "class": "text-900 font-medium text-xl"
 };
-var _hoisted_6 = {
+var _hoisted_7 = {
   "class": "flex align-items-center justify-content-center bg-orange-100 border-round",
   style: {
     "width": "2.5rem",
     "height": "2.5rem"
   }
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   "class": "text-green-500 font-medium"
 };
-var _hoisted_8 = {
+var _hoisted_9 = {
   "class": "text-500"
 };
-var _hoisted_9 = {
+var _hoisted_10 = {
   "class": "col-12 md:col-6"
 };
-var _hoisted_10 = {
+var _hoisted_11 = {
   "class": "flex flex-column"
 };
-var _hoisted_11 = {
+var _hoisted_12 = {
   "class": "text-base font-normal"
 };
-var _hoisted_12 = {
+var _hoisted_13 = {
   "class": "col-12 md:col-6"
 };
-var _hoisted_13 = {
+var _hoisted_14 = {
   "class": "flex flex-column"
 };
-var _hoisted_14 = {
+var _hoisted_15 = {
   "class": "text-base font-normal"
 };
-var _hoisted_15 = {
+var _hoisted_16 = {
   "class": "col-12 md:col-6"
 };
-var _hoisted_16 = {
+var _hoisted_17 = {
   "class": "flex flex-column"
 };
-var _hoisted_17 = {
+var _hoisted_18 = {
   "class": "text-base font-normal"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1011,22 +1019,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Head"], {
         title: "Dashboard"
-      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [((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.cardStatistics, function (cardStatistic) {
-        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, {
+      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [((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.cardStatistics, function (cardStatistic) {
+        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, {
           "class": "h-full"
         }, {
           content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-            return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(cardStatistic.title), 1
+            return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(cardStatistic.title), 1
             /* TEXT */
-            ), cardStatistic.value ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(cardStatistic.value), 1
+            ), cardStatistic.value ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(cardStatistic.value), 1
             /* TEXT */
-            )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+            )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
               "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["text-orange-500 text-xl", cardStatistic.icon])
             }, null, 2
             /* CLASS */
-            )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(cardStatistic.amount), 1
+            )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(cardStatistic.amount), 1
             /* TEXT */
-            ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(' ' + cardStatistic.amountLabel), 1
+            ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(' ' + cardStatistic.amountLabel), 1
             /* TEXT */
             )];
           }),
@@ -1038,12 +1046,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         )]);
       }), 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.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, {
+      ))]), ((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_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__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(statistic.title), 1
+            return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(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
+            ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(statistic.description), 1
             /* TEXT */
             )])];
           }),
@@ -1064,11 +1072,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         )]);
       }), 256
       /* UNKEYED_FRAGMENT */
-      )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+      )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(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__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartOutletStatistic.title), 1
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(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
+          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartOutletStatistic.description), 1
           /* TEXT */
           )])];
         }),
@@ -1086,11 +1094,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
         /* STABLE */
 
-      })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+      })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_16, [(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__.createElementVNode)("div", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartTopTransactionStatistic.title), 1
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartTopTransactionStatistic.title), 1
           /* TEXT */
-          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_17, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartTopTransactionStatistic.description), 1
+          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_18, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.chartTopTransactionStatistic.description), 1
           /* TEXT */
           )])];
         }),
@@ -1313,6 +1321,30 @@ __webpack_require__.r(__webpack_exports__);
   }]
 });
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css":
+/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css ***!
+  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, "\n.card-statistic[data-v-9329f6aa] {\n  gap: 1rem;\n}\n", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/lodash/_DataView.js":
@@ -5900,6 +5932,36 @@ function toString(value) {
 module.exports = toString;
 
 
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css":
+/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_clonedRuleSet_8_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_8_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_style_index_0_id_9329f6aa_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!../../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!../../../../node_modules/vue-loader/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css */ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css");
+
+            
+
+var options = {};
+
+options.insert = "head";
+options.singleton = false;
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_clonedRuleSet_8_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_8_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_style_index_0_id_9329f6aa_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_1__["default"], options);
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_clonedRuleSet_8_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_8_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_style_index_0_id_9329f6aa_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_1__["default"].locals || {});
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/dist/exportHelper.js":
@@ -6101,15 +6163,18 @@ __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_9329f6aa__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Index.vue?vue&type=template&id=9329f6aa */ "./resources/js/pages/home/Index.vue?vue&type=template&id=9329f6aa");
+/* harmony import */ var _Index_vue_vue_type_template_id_9329f6aa_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Index.vue?vue&type=template&id=9329f6aa&scoped=true */ "./resources/js/pages/home/Index.vue?vue&type=template&id=9329f6aa&scoped=true");
 /* harmony import */ var _Index_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Index.vue?vue&type=script&setup=true&lang=js */ "./resources/js/pages/home/Index.vue?vue&type=script&setup=true&lang=js");
-/* harmony import */ var _home_dijitalcode_Projects_bambslaundry_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+/* harmony import */ var _Index_vue_vue_type_style_index_0_id_9329f6aa_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css */ "./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css");
+/* harmony import */ var _home_dijitalcode_Projects_bambslaundry_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
 
 
 
 
 ;
-const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_bambslaundry_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_Index_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_Index_vue_vue_type_template_id_9329f6aa__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/pages/home/Index.vue"]])
+
+
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_bambslaundry_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__["default"])(_Index_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_Index_vue_vue_type_template_id_9329f6aa_scoped_true__WEBPACK_IMPORTED_MODULE_0__.render],['__scopeId',"data-v-9329f6aa"],['__file',"resources/js/pages/home/Index.vue"]])
 /* hot reload */
 if (false) {}
 
@@ -6310,18 +6375,31 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./resources/js/pages/home/Index.vue?vue&type=template&id=9329f6aa":
-/*!*************************************************************************!*\
-  !*** ./resources/js/pages/home/Index.vue?vue&type=template&id=9329f6aa ***!
-  \*************************************************************************/
+/***/ "./resources/js/pages/home/Index.vue?vue&type=template&id=9329f6aa&scoped=true":
+/*!*************************************************************************************!*\
+  !*** ./resources/js/pages/home/Index.vue?vue&type=template&id=9329f6aa&scoped=true ***!
+  \*************************************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __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_9329f6aa__WEBPACK_IMPORTED_MODULE_0__.render)
+/* 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_9329f6aa_scoped_true__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_9329f6aa__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=9329f6aa */ "./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/home/Index.vue?vue&type=template&id=9329f6aa");
+/* 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_9329f6aa_scoped_true__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=9329f6aa&scoped=true */ "./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/home/Index.vue?vue&type=template&id=9329f6aa&scoped=true");
+
+
+/***/ }),
+
+/***/ "./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css":
+/*!***************************************************************************************************!*\
+  !*** ./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css ***!
+  \***************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_clonedRuleSet_8_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_8_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_style_index_0_id_9329f6aa_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/style-loader/dist/cjs.js!../../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!../../../../node_modules/vue-loader/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css */ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/home/Index.vue?vue&type=style&index=0&id=9329f6aa&scoped=true&lang=css");
 
 
 /***/ })

public/js/vue.js

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

resources/js/pages/home/Index.vue

@@ -111,27 +111,28 @@ const topTransactionOption = {
     <Head title="Dashboard" />
 
     <div class="grid">
-      <div v-for="cardStatistic in cardStatistics" class="col-12 md:col-3">
-        <Card class="h-full">
-          <template #content>
-            <div class="flex justify-content-between mb-3">
-              <div>
-                <span class="block text-500 font-medium mb-3">{{ cardStatistic.title }}</span>
-                <div v-if="cardStatistic.value" class="text-900 font-medium text-xl">{{ cardStatistic.value }}</div>
-              </div>
-              <div
-                class="flex align-items-center justify-content-center bg-orange-100 border-round"
-                style="width: 2.5rem; height: 2.5rem"
-              >
-                <i class="text-orange-500 text-xl" :class="cardStatistic.icon"></i>
+      <div class="col-12 flex flex-wrap justify-content-between card-statistic">
+        <div v-for="cardStatistic in cardStatistics" class="flex-grow-1">
+          <Card class="h-full">
+            <template #content>
+              <div class="flex justify-content-between mb-3">
+                <div>
+                  <span class="block text-500 font-medium mb-3">{{ cardStatistic.title }}</span>
+                  <div v-if="cardStatistic.value" class="text-900 font-medium text-xl">{{ cardStatistic.value }}</div>
+                </div>
+                <div
+                  class="flex align-items-center justify-content-center bg-orange-100 border-round"
+                  style="width: 2.5rem; height: 2.5rem"
+                >
+                  <i class="text-orange-500 text-xl" :class="cardStatistic.icon"></i>
+                </div>
               </div>
-            </div>
-            <span class="text-green-500 font-medium">{{ cardStatistic.amount }} </span>
-            <span class="text-500"> {{ ' ' + cardStatistic.amountLabel }}</span>
-          </template>
-        </Card>
+              <span class="text-green-500 font-medium">{{ cardStatistic.amount }} </span>
+              <span class="text-500"> {{ ' ' + cardStatistic.amountLabel }}</span>
+            </template>
+          </Card>
+        </div>
       </div>
-
       <div v-for="statistic in chartTransactionStatistics" class="col-12 md:col-6">
         <Card>
           <template #title>
@@ -188,3 +189,9 @@ const topTransactionOption = {
     </div>
   </AppLayout>
 </template>
+
+<style scoped>
+.card-statistic {
+  gap: 1rem;
+}
+</style>