fix: styling excel and color progressbar

app/Exports/MutationExport.php

@@ -3,53 +3,65 @@
 namespace App\Exports;
 
 use App\Models\Mutation;
+use Illuminate\Contracts\Support\Responsable;
+use Illuminate\Contracts\View\View;
 use Illuminate\Http\Request;
-use Maatwebsite\Excel\Concerns\FromCollection;
+use Maatwebsite\Excel\Concerns\Exportable;
+use Maatwebsite\Excel\Concerns\FromView;
 use Maatwebsite\Excel\Concerns\ShouldAutoSize;
+use Maatwebsite\Excel\Concerns\WithStyles;
+use PhpOffice\PhpSpreadsheet\Worksheet\Worksheet;
 
-class MutationExport implements ShouldAutoSize, FromCollection
+class MutationExport implements ShouldAutoSize, Responsable, FromView, WithStyles
 {
+    use Exportable;
+
+    private $fileName = 'mutation-report.xls';
+
     public function __construct(private Request $request)
     {}
 
-    public function collection()
+    public function view(): View
     {
         $mutations = Mutation::filter($this->request->only('startDate', 'endDate', 'outlet'))->get();
-
-        return $mutations;
+        return view('excel.mutation-report', compact('mutations'));
     }
 
-    // public function view(): View
-    // {
-    //     $startDate = $this->request->startDate;
-    //     $endDate = $this->request->endDate;
-    //     $mutations = Mutation::filter($startDate, $endDate)->get();
-
-    //     return inertia('excel.dashboard.payment-report.index', [
-    //         'mutations' => $mutations,
-    //         'startDate' => Carbon::parse($startDate)->format('d/m/Y'),
-    //         'endDate' => Carbon::parse($endDate)->subDay()->format('d/m/Y'),
-    //     ]);
-    // }
-
-    // public function styles(Worksheet $sheet)
-    // {
-    //     $lastRow = $sheet->getHighestDataRow();
-    //     $lastSecondRow = $lastRow - 1;
-
-    //     $sheet->getRowDimension($lastSecondRow)->setRowHeight(16);
-
-    //     return [
-    //         1 => [
-    //             'font' => ['bold' => true, 'size' => 16],
-    //             'alignment' => ['vertical' => 'center', 'horizontal' => 'center'],
-    //         ],
-    //         3 => ['font' => ['bold' => true]],
-    //         $lastSecondRow => ['font' => ['bold' => true, 'size' => 12]],
-    //         $lastRow => [
-    //             'font' => ['bold' => true, 'size' => 12],
-    //             'alignment' => ['horizontal' => 'left'],
-    //         ],
-    //     ];
-    // }
+    public function styles(Worksheet $sheet)
+    {
+        $lastRow = $sheet->getHighestDataRow();
+        $lastSecondRow = $lastRow - 1;
+        $lastThirdRow = $lastSecondRow - 1;
+        $lastFourRow = $lastThirdRow - 1;
+
+        return [
+            1 => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['vertical' => 'center', 'horizontal' => 'center'],
+            ],
+            2 => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['vertical' => 'center', 'horizontal' => 'center'],
+            ],
+            4 => [
+                'font' => ['bold' => true],
+            ],
+            $lastRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+            $lastSecondRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+            $lastThirdRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+            $lastFourRow => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['horizontal' => 'left'],
+            ],
+        ];
+    }
 }

app/Http/Controllers/ReportMutationController.php

@@ -6,8 +6,6 @@ use App\Exports\MutationExport;
 use App\Http\Controllers\Controller;
 use App\Models\Mutation;
 use App\Models\Outlet;
-use Illuminate\Http\Request;
-use Maatwebsite\Excel\Facades\Excel;
 
 class ReportMutationController extends Controller
 {
@@ -45,6 +43,6 @@ class ReportMutationController extends Controller
      */
     public function exportExcel()
     {
-        return Excel::download(new MutationExport(request()), 'report-mutation.xls');
+        return new MutationExport(request());
     }
 }

app/Models/Expense.php

@@ -32,7 +32,7 @@ class Expense extends Model
     public function amount(): Attribute
     {
         return Attribute::make(
-            get:fn($value) => '- ' . $this->setRupiahFormat($value, 2, true)
+            get:fn($value) => '- ' . $this->setRupiahFormat($value, 0, true)
         );
     }
 

app/Models/Helpers/HasMutation.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Models\Helpers;
+
+use Illuminate\Database\Eloquent\Collection;
+
+trait HasMutation
+{
+    use CurrencyFormat;
+
+    protected static function totalIncome(Collection $collections)
+    {
+        foreach ($collections->chunk(100) as $chunk) {
+            return $chunk->sum(function ($collect) {
+                if ($collect->getRawOriginal('type') == 1) {
+                    return $collect->getRawOriginal('amount');
+                }
+            });
+        }
+    }
+
+    protected static function totalExpense(Collection $collections)
+    {
+        foreach ($collections->chunk(100) as $chunk) {
+            return $chunk->sum(function ($collect) {
+                if ($collect->getRawOriginal('type') == 2) {
+                    return $collect->getRawOriginal('amount');
+                }
+            });
+        }
+    }
+
+    protected static function totalIncomeAsString(Collection $collections)
+    {
+        return parent::setRupiahFormat(self::totalIncome($collections), 0, true);
+
+    }
+
+    protected static function totalExpenseAsString(Collection $collections)
+    {
+        return '- ' . parent::setRupiahFormat(self::totalExpense($collections), 0, true);
+    }
+
+    protected static function totalAmount(Collection $collections)
+    {
+        $amount = self::totalIncome($collections) - self::totalExpense($collections);
+        if ($amount < 0) {
+            return '- ' . parent::setRupiahFormat(abs($amount), 0, true);
+        } else {
+            return parent::setRupiahFormat($amount, 0, true);
+        }
+    }
+}

app/Models/Laundry.php

@@ -34,7 +34,7 @@ class Laundry extends Model
     protected function price(): Attribute
     {
         return Attribute::make(
-            get:fn($value) => $this->setRupiahFormat($value, 2, true)
+            get:fn($value) => $this->setRupiahFormat($value, 0, true)
         );
     }
 

app/Models/Mutation.php

@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use App\Models\Helpers\CurrencyFormat;
+use App\Models\Helpers\HasMutation;
 use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -10,7 +11,7 @@ use Illuminate\Database\Eloquent\Model;
 
 class Mutation extends Model
 {
-    use HasFactory, CurrencyFormat;
+    use HasFactory, CurrencyFormat, HasMutation;
 
     protected $fillable = [
         'type',
@@ -30,8 +31,8 @@ class Mutation extends Model
     public function amount(): Attribute
     {
         return Attribute::make(
-            get:fn($value) => $this->transaction_id ? $this->setRupiahFormat($value, 2, true)
-            : '- ' . $this->setRupiahFormat($value, 2, true)
+            get:fn($value) => $this->transaction_id ? $this->setRupiahFormat($value, 0, true)
+            : '- ' . $this->setRupiahFormat($value, 0, true)
         );
     }
 

app/Models/Product.php

@@ -34,7 +34,7 @@ class Product extends Model
     protected function price(): Attribute
     {
         return Attribute::make(
-            get:fn($value) => $this->setRupiahFormat($value, 2, true)
+            get:fn($value) => $this->setRupiahFormat($value, 0, true)
         );
     }
 

app/Models/Transaction.php

@@ -107,7 +107,7 @@ class Transaction extends Model
 
     public function totalPriceAsFullString()
     {
-        return $this->setRupiahFormat($this->totalPrice(), 2, true);
+        return $this->setRupiahFormat($this->totalPrice(), 0, true);
     }
 
     public function subTotal()

app/Models/TransactionDetail.php

@@ -26,7 +26,7 @@ class TransactionDetail extends Model
     protected function price(): Attribute
     {
         return Attribute::make(
-            get:fn($value) => $this->setRupiahFormat($value, 2, true)
+            get:fn($value) => $this->setRupiahFormat($value, 0, true)
         );
     }
 
@@ -67,6 +67,6 @@ class TransactionDetail extends Model
 
     public function totalPriceAsFullString()
     {
-        return $this->setRupiahFormat($this->totalPrice(), 2, true);
+        return $this->setRupiahFormat($this->totalPrice(), 0, true);
     }
 }

public/js/resources_js_pages_excel_mutation_vue.js

@@ -0,0 +1,83 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_excel_mutation_vue"],{
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/excel/mutation.vue?vue&type=template&id=b8a5a7ac":
+/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/excel/mutation.vue?vue&type=template&id=b8a5a7ac ***!
+  \*******************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+function render(_ctx, _cache) {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("h1", null, "asdf");
+}
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/dist/exportHelper.js":
+/*!******************************************************!*\
+  !*** ./node_modules/vue-loader/dist/exportHelper.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+// runtime helper for setting properties on components
+// in a tree-shakable way
+exports["default"] = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+        target[key] = val;
+    }
+    return target;
+};
+
+
+/***/ }),
+
+/***/ "./resources/js/pages/excel/mutation.vue":
+/*!***********************************************!*\
+  !*** ./resources/js/pages/excel/mutation.vue ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _mutation_vue_vue_type_template_id_b8a5a7ac__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mutation.vue?vue&type=template&id=b8a5a7ac */ "./resources/js/pages/excel/mutation.vue?vue&type=template&id=b8a5a7ac");
+/* harmony import */ var _home_dijitalcode_Projects_dev_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+const script = {}
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_dev_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_1__["default"])(script, [['render',_mutation_vue_vue_type_template_id_b8a5a7ac__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/pages/excel/mutation.vue"]])
+/* hot reload */
+if (false) {}
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ }),
+
+/***/ "./resources/js/pages/excel/mutation.vue?vue&type=template&id=b8a5a7ac":
+/*!*****************************************************************************!*\
+  !*** ./resources/js/pages/excel/mutation.vue?vue&type=template&id=b8a5a7ac ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_mutation_vue_vue_type_template_id_b8a5a7ac__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_mutation_vue_vue_type_template_id_b8a5a7ac__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]!./mutation.vue?vue&type=template&id=b8a5a7ac */ "./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/excel/mutation.vue?vue&type=template&id=b8a5a7ac");
+
+
+/***/ })
+
+}]);

public/js/vue.js

@@ -57712,7 +57712,7 @@ __webpack_require__.r(__webpack_exports__);
   }
 });
 _inertiajs_progress__WEBPACK_IMPORTED_MODULE_7__.InertiaProgress.init({
-  color: '#eb4432'
+  color: '#4F46E5'
 });
 })();
 

resources/js/vue.js

@@ -60,5 +60,5 @@ createInertiaApp({
 })
 
 InertiaProgress.init({
-  color: '#eb4432',
+  color: '#4F46E5',
 })

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

@@ -0,0 +1,47 @@
+<table>
+    <thead>
+        <tr>
+            <th colspan="5">Laporan Mutasi</th>
+        </tr>
+        <tr>
+            <th colspan="5" rowspan="2">Periode {{ $mutations->first()->created_at }} -
+                {{ $mutations->last()->created_at }} </th>
+        </tr>
+        <tr></tr>
+        <tr>
+            <th>#</th>
+            <th>Tanggal</th>
+            <th>Tipe</th>
+            <th>Nilai</th>
+            <th>Outlet</th>
+        </tr>
+    </thead>
+    <tbody>
+        @foreach ($mutations->chunk(100) as $chunk)
+            @foreach ($chunk as $index => $mutation)
+                <tr>
+                    <td>{{ ++$index }}</td>
+                    <td>{{ $mutation->created_at }}</td>
+                    <td>{{ $mutation->type }}</td>
+                    <td>{{ $mutation->amount }}</td>
+                    <td>{{ $mutation->outlet->name }}</td>
+                </tr>
+            @endforeach
+        @endforeach
+        <tr>
+            <td colspan="3">Total</td>
+        </tr>
+        <tr>
+            <td colspan="3">Pendapatan</td>
+            <td>{{ App\Models\Mutation::totalIncomeAsString($mutations) }}</td>
+        </tr>
+        <tr>
+            <td colspan="3">Pengeluran</td>
+            <td>{{ App\Models\Mutation::totalExpenseAsString($mutations) }}</td>
+        </tr>
+        <tr>
+            <td colspan="3">Jumlah</td>
+            <td>{{ App\Models\Mutation::totalAmount($mutations) }}</td>
+        </tr>
+    </tbody>
+</table>

webpack.mix.js

@@ -15,7 +15,7 @@ mix
   .js('resources/js/vue.js', 'public/js')
   .webpackConfig(require('./webpack.config'))
   .vue()
-  .browserSync('http://dev.test/')
+  .browserSync('http://bamslaundry.test/')
   .disableNotifications()
 
 if (mix.inProduction()) {

yarn.lock

@@ -2032,9 +2032,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001317:
-  version "1.0.30001323"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001323.tgz#a451ff80dec7033016843f532efda18f02eec011"
-  integrity sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA==
+  version "1.0.30001324"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001324.tgz#e17c3a8b34822b02d5d15639d570057550074884"
+  integrity sha512-/eYp1J6zYh1alySQB4uzYFkLmxxI8tk0kxldbNHXp8+v+rdMKdUBNjRLz7T7fz6Iox+1lIdYpc7rq6ZcXfTukg==
 
 chalk@^1.1.3:
   version "1.1.3"