feat: export customer

app/Exports/CustomersExport.php

+<?php
+
+namespace App\Exports;
+
+use App\Models\Customer;
+use Illuminate\Contracts\Support\Responsable;
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\Request;
+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 CustomersExport implements ShouldAutoSize, Responsable, FromView, WithStyles
+{
+    use Exportable;
+
+    private $fileName = 'customers-report.xls';
+
+    public function __construct(private Request $request)
+    {}
+
+    public function view(): View
+    {
+        $customers = Customer::filter($this->request->only('search'))->get();
+        return view('excel.customer-report', compact('customers'));
+    }
+
+    public function styles(Worksheet $sheet)
+    {
+        return [
+            1 => [
+                'font' => ['bold' => true, 'size' => 12],
+                'alignment' => ['vertical' => 'center', 'horizontal' => 'center'],
+            ],
+            3 => [
+                'font' => ['bold' => true],
+            ],
+            'E' => ['alignment' => ['horizontal' => 'left']],
+        ];
+    }
+}

app/Http/Controllers/CustomerController.php

 
 namespace App\Http\Controllers;
 
+use App\Exports\CustomersExport;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Customer\StoreCustomerRequest;
 use App\Http\Requests\Customer\UpdateCustomerRequest;
 use App\Models\Customer;
+use App\Models\Transaction;
+use App\Services\TransactionService;
 
 class CustomerController extends Controller
 {
                         'transactionStatusId' => $transaction->transactionStatus->id,
                     ]),
                 'totalTransaction' => $customer->transaction->count(),
+                'totalValue' => (new TransactionService)->totalPriceGroupAsString($customer->fresh()->transaction),
+                'totalDiscountGiven' => (new TransactionService)->totalDiscountGivenGroupAsString($customer->fresh()->transaction),
             ],
         ]);
     }
 
         return to_route('customers.index')->with('success', __('messages.success.destroy.customer'));
     }
+
+    /**
+     * Export to excel
+     */
+    public function exportExcel()
+    {
+        return new CustomersExport(request());
+    }
 }

app/Models/Transaction.php

 
     public function totalDiscountGiven()
     {
-        $totalDiscountGiven = $this->getRawOriginal('discount') - $this->subTotal();
-        if ($totalDiscountGiven < 0) {
-            return abs($totalDiscountGiven);
+        if ($this->getRawOriginal('discount') >= $this->subTotal()) {
+            return $this->subTotal();
         } else {
-            return $totalDiscountGiven;
+            return $this->getRawOriginal('discount');
         }
     }
 

app/Services/TransactionService.php

         return $this->setRupiahFormat($this->totalPriceGroup($collections), true);
     }
 
+    public function totalDiscountGiven(EloquentCollection $collections)
+    {
+        return $collections->transform(fn($collect) => $collect->totalDiscountGiven());
+    }
+
+    public function totalDiscountGivenGroup(EloquentCollection $collections)
+    {
+        return $this->totalDiscountGiven($collections)->sum();
+    }
+
     public function totalDiscountGivenGroupAsString(EloquentCollection $collections)
     {
-        return $this->setRupiahFormat($collections->sum(fn($collect) => $collect->totalDiscountGiven()), true);
+        return $this->setRupiahFormat($this->totalDiscountGivenGroup($collections), true);
     }
 
     public function totalPerMonth(EloquentCollection $collections)

lang/id/words.php

     'today' => 'Hari ini',
     'this_month' => 'Bulan ini',
     'total' => 'Total',
-    'discount_given' => 'Diskon yang diberikan',
+    'discount_given' => 'Diskon diberikan',
     'transaction' => 'Transaksi',
     'expense' => 'Pengeluaran',
     'laundry_type' => 'Jenis Laundry',

public/js/resources_js_pages_customer_Edit_vue.js

   "class": "grid mt-3 ml-1"
 };
 var _hoisted_13 = {
-  "class": "col-auto"
+  "class": "col-auto mr-7"
 };
 
 var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
   "class": "text-xl font-bold"
 };
 var _hoisted_17 = {
+  "class": "col-auto mr-7"
+};
+
+var _hoisted_18 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-shopping-cart"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Total Nilai")], -1
+/* HOISTED */
+);
+
+var _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_20 = {
+  "class": "text-xl font-bold"
+};
+var _hoisted_21 = {
+  "class": "col-auto"
+};
+
+var _hoisted_22 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base"
+}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
+  "class": "pi pi-shopping-cart"
+}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Total Diskon didapatkan")], -1
+/* HOISTED */
+);
+
+var _hoisted_23 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_24 = {
+  "class": "text-xl font-bold"
+};
+var _hoisted_25 = {
   "class": "grid"
 };
-var _hoisted_18 = {
+var _hoisted_26 = {
   "class": "col-12"
 };
-var _hoisted_19 = {
+var _hoisted_27 = {
   "class": "font-bold"
 };
-var _hoisted_20 = {
+var _hoisted_28 = {
   "class": "font-bold"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       })])]), _hoisted_11, $props.transactions.totalTransaction ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_14, _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactions.totalTransaction), 1
       /* TEXT */
-      )])])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+      )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_18, _hoisted_19, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_20, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactions.totalValue), 1
+      /* TEXT */
+      )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_21, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_22, _hoisted_23, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_24, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.transactions.totalDiscountGiven), 1
+      /* TEXT */
+      )])])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_25, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_26, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_DataTable, {
             "responsive-layout": "scroll",
                         field = _ref.field;
                     return [field === 'transactionNumber' ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                       key: 0
-                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_19, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data[field]), 1
+                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_27, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data[field]), 1
                     /* TEXT */
                     ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.createdAt), 1
                     /* TEXT */
                     /* STABLE_FRAGMENT */
                     )) : field === 'customer' ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                       key: 1
-                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_20, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.number), 1
+                    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_28, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.number), 1
                     /* TEXT */
                     ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.name), 1
                     /* TEXT */

public/js/resources_js_pages_customer_Index_vue.js

       }), {
         preserveState: true
       });
+      var params = window.location.search;
+      exportExcelLink.value = "/reports/customers/export/excel".concat(params);
     }, 300));
+    var exportExcelLink = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)('/reports/customers/export/excel');
     var __returned__ = {
       props: props,
       filterForm: filterForm,
+      exportExcelLink: exportExcelLink,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
+      ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
       Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.Head,
-      Link: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.Link,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm,
       throttle: (lodash_throttle__WEBPACK_IMPORTED_MODULE_3___default()),
       pickBy: (lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()),
   "class": "col-12 md:col-8"
 };
 var _hoisted_4 = {
-  "class": "flex align-items-center"
+  "class": "grid"
 };
 var _hoisted_5 = {
+  "class": "col-12 md:col-3"
+};
+var _hoisted_6 = {
+  key: 0,
+  "class": "col-12 md:col-3"
+};
+var _hoisted_7 = {
   "class": "col-12 md:col-4 flex flex-column md:flex-row justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
         stripedRows: true
       }, {
         header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_InputText, {
-            "class": "w-full md:w-27rem",
+          return [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_InputText, {
+            "class": "w-full",
             placeholder: "cari...",
             modelValue: $setup.filterForm.search,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
             })
           }, null, 8
           /* PROPS */
-          , ["modelValue"])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
+          , ["modelValue"])]), $props.customers.data ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
+            label: "Export excel",
+            "class-button": "p-button-outlined w-full md:w-16rem",
+            icon: "pi pi-file-excel",
+            "inertia-link": false,
+            href: $setup.exportExcelLink
+          }, null, 8
+          /* PROPS */
+          , ["href"])])) : (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__.createVNode)($setup["AppButton"], {
             href: _ctx.route('customers.create'),
             label: "Tambah Customer",
             icon: "pi pi-pencil",

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":"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":"2e900ea05a1e7b5c","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":"bb71c64039e173a1","resources_js_pages_customer_Index_vue":"52a1110802b6b996","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":"2e900ea05a1e7b5c","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/customer/Edit.vue

 
     <h2>Riwayat Transaksi</h2>
     <div v-if="transactions.totalTransaction" class="grid mt-3 ml-1">
-      <div class="col-auto">
+      <div class="col-auto mr-7">
         <h2>
           <span class="text-base"> <i class="pi pi-shopping-cart" /> Total Transaksi</span>
 
           <span class="text-xl font-bold">{{ transactions.totalTransaction }}</span>
         </h2>
       </div>
+      <div class="col-auto mr-7">
+        <h2>
+          <span class="text-base"> <i class="pi pi-shopping-cart" /> Total Nilai</span>
+
+          <br />
+
+          <span class="text-xl font-bold">{{ transactions.totalValue }}</span>
+        </h2>
+      </div>
+      <div class="col-auto">
+        <h2>
+          <span class="text-base"> <i class="pi pi-shopping-cart" /> Total Diskon didapatkan</span>
+
+          <br />
+
+          <span class="text-xl font-bold">{{ transactions.totalDiscountGiven }}</span>
+        </h2>
+      </div>
     </div>
     <div class="grid">
       <div class="col-12">

resources/js/pages/customer/Index.vue

 <script setup>
-import { watch } from 'vue'
+import { watch, ref } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
-import { Head, Link, useForm } from '@inertiajs/inertia-vue3'
+import { Head, useForm } from '@inertiajs/inertia-vue3'
 import throttle from 'lodash/throttle'
 import pickBy from 'lodash/pickBy'
 import AppButton from '@/components/AppButton.vue'
   filterForm,
   throttle(() => {
     Inertia.get('/customers', pickBy({ search: filterForm.search }), { preserveState: true })
+
+    const params = window.location.search
+    exportExcelLink.value = `/reports/customers/export/excel${params}`
   }, 300)
 )
+
+const exportExcelLink = ref('/reports/customers/export/excel')
 </script>
 
 <template>
 
         <div class="grid">
           <div class="col-12 md:col-8">
-            <div class="flex align-items-center">
-              <InputText class="w-full md:w-27rem" placeholder="cari..." v-model="filterForm.search" />
+            <div class="grid">
+              <div class="col-12 md:col-3">
+                <InputText class="w-full" placeholder="cari..." v-model="filterForm.search" />
+              </div>
+              <div v-if="customers.data" class="col-12 md:col-3">
+                <AppButton
+                  label="Export excel"
+                  class-button="p-button-outlined w-full md:w-16rem"
+                  icon="pi pi-file-excel"
+                  :inertia-link="false"
+                  :href="exportExcelLink"
+                />
+              </div>
             </div>
           </div>
 

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

+<table>
+    <thead>
+        <tr>
+            <th colspan="7">Detail History Transaksi Customer</th>
+        </tr>
+        <tr></tr>
+        <tr>
+            <th>#</th>
+            <th>Id Customer</th>
+            <th>Nama</th>
+            <th>HP</th>
+            <th>Total Transaksi</th>
+            <th>Total Nilai</th>
+            <th>Total Diskon didapat</th>
+        </tr>
+    </thead>
+    <tbody>
+        @foreach ($customers->chunk(100) as $chunk)
+            @foreach ($chunk as $index => $customer)
+                <tr>
+                    <td>{{ ++$index }}</td>
+                    <td>{{ $customer->customer_number }}</td>
+                    <td>{{ $customer->name }}</td>
+                    <td>{{ $customer->phone }}</td>
+                    <td>{{ $customer->transaction->count() }}</td>
+                    <td>
+                        {{ (new App\Services\TransactionService())->totalPriceGroupAsString($customer->fresh()->transaction) }}
+                    </td>
+                    <td>
+                        {{ (new App\Services\TransactionService())->totalDiscountGivenGroupAsString($customer->fresh()->transaction) }}
+                    </td>
+                </tr>
+            @endforeach
+        @endforeach
+    </tbody>
+</table>

routes/web.php

     Route::resource('/users', UserController::class);
 
     Route::resource('/customers', CustomerController::class);
+    Route::get('/reports/customers/export/excel', [CustomerController::class, 'exportExcel'])->name('customers.excel');
 
     Route::resource('/outlets', OutletController::class);