feat: master customer

app/Http/Controllers/CustomerController.php

@@ -2,8 +2,9 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\Customer\StoreCustomerRequest;
+use App\Http\Requests\Customer\UpdateCustomerRequest;
 use App\Models\Customer;
-use Illuminate\Http\Request;
 
 class CustomerController extends Controller
 {
@@ -19,7 +20,20 @@ class CustomerController extends Controller
      */
     public function index()
     {
-        return inertia('Customers/Index.vue');
+        return inertia('Customers/Index.vue', [
+            'initialSearch' => request('search'),
+            'customers' => Customer::filter(request()->only('search'))
+                ->latest()
+                ->paginate(10)
+                ->withQueryString()
+                ->through(fn($customer) => [
+                    'id' => $customer->id,
+                    'name' => $customer->name,
+                    'address' => $customer->address,
+                    'phone' => $customer->phone,
+                    'npwp' => $customer->npwp
+                ])
+        ]);
     }
 
     /**
@@ -29,7 +43,7 @@ class CustomerController extends Controller
      */
     public function create()
     {
-        //
+        return inertia('Customers/Create');
     }
 
     /**
@@ -38,9 +52,11 @@ class CustomerController extends Controller
      * @param  \Illuminate\Http\Request  $request
      * @return \Illuminate\Http\Response
      */
-    public function store(Request $request)
+    public function store(StoreCustomerRequest $request)
     {
-        //
+        Customer::create($request->validated());
+
+        return back()->with('success', __('messages.success.store.customer'));
     }
 
     /**
@@ -57,24 +73,26 @@ class CustomerController extends Controller
     /**
      * Show the form for editing the specified resource.
      *
-     * @param  int  $id
+     * @param  Customer  $customer
      * @return \Illuminate\Http\Response
      */
-    public function edit($id)
+    public function edit(Customer $customer)
     {
-        //
+        return inertia('Customers/Edit.vue', compact('customer'));
     }
 
     /**
      * Update the specified resource in storage.
      *
      * @param  \Illuminate\Http\Request  $request
-     * @param  int  $id
+     * @param  Customer  $customer
      * @return \Illuminate\Http\Response
      */
-    public function update(Request $request, $id)
+    public function update(UpdateCustomerRequest $request, Customer $customer)
     {
-        //
+        $customer->update($request->validated());
+
+        return back()->with('success', __('messages.success.update.customer'));
     }
 
     /**

app/Http/Requests/Customer/StoreCustomerRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\Customer;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreCustomerRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, mixed>
+     */
+    public function rules()
+    {
+        return [
+            'name' => 'required|string|max:50',
+            'address' => 'required|string',
+            'phone' => 'required|numeric|digits_between:12,15|unique:customers,phone',
+            'npwp' => 'required|numeric|digits_between:15,20|unique:customers,npwp'
+        ];
+    }
+}

app/Http/Requests/Customer/UpdateCustomerRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\Customer;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateCustomerRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, mixed>
+     */
+    public function rules()
+    {
+        return [
+            'name' => 'required|string|max:50',
+            'address' => 'required|string',
+            'phone' => 'required|numeric|digits_between:12,15|unique:customers,phone,' . $this->customer->id,
+            'npwp' => 'required|numeric|digits_between:15,20|unique:customers,npwp,' . $this->customer->id
+        ];
+    }
+}

app/Models/Customer.php

@@ -15,4 +15,17 @@ class Customer extends Model
         'phone',
         'npwp'
     ];
+
+    protected $hidden = ['created_at', 'updated_at'];
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->where(function ($query) use ($search) {
+                $query->where('name', 'like', '%' . $search . '%')
+                    ->orWhere('phone', 'like', '%' . $search . '%')
+                    ->orWhere('npwp', 'like', '%' . $search . '%');
+            });
+        });
+    }
 }

lang/en/messages.php

@@ -31,7 +31,8 @@ return [
             'expense' => 'Expense successfully added',
             'transaction' => 'Transaction successfully added',
             'user' => 'User Account successfully added',
-            'reset_password' => 'Password successfully reset'
+            'reset_password' => 'Password successfully reset',
+            'customer' => 'Customer successfully addedd'
         ],
         'update' => [
             'type_vehicle' => 'Type vehicle successfully changed',
@@ -40,7 +41,8 @@ return [
             'type_member' => 'Jenis member successfully changed',
             'change_password' => 'Password successfully changed',
             'transaction_status' => 'Transaction Status successfully changed',
-            'user' => 'User Account successfully changed'
+            'user' => 'User Account successfully changed',
+            'customer' => 'Customer successfully changed'
         ],
         'destroy' => [
             'type_member' => 'Jenis member successfully deleted',

lang/id/messages.php

@@ -31,7 +31,8 @@ return [
             'expense' => 'Pengeluaran berhasil ditambahkan',
             'transaction' => 'Transaksi berhasil ditambahkan',
             'user' => 'Akun user berhasil ditambahkan',
-            'reset_password' => 'Kata sandi berhasil di reset'
+            'reset_password' => 'Kata sandi berhasil di reset',
+            'customer' => 'Pelanggan berhasil ditambahkan'
         ],
         'update' => [
             'type_vehicle' => 'Jenis kendaraan berhasil diubah',
@@ -40,7 +41,8 @@ return [
             'type_member' => 'Jenis member berhasil diubah',
             'change_password' => 'Password berhasil diubah',
             'transaction_status' => 'Status transaksi berhasil diubah',
-            'user' => 'Akun user berhasil diubah'
+            'user' => 'Akun user berhasil diubah',
+            'customer' => 'Pelanggan berhasil diubah'
         ],
         'destroy' => [
             'type_member' => 'Jenis member berhasil dihapus',

public/js/resources_js_pages_Auth_Login_vue.js

@@ -28,6 +28,10 @@ __webpack_require__.r(__webpack_exports__);
       type: String,
       required: true
     },
+    type: {
+      type: String,
+      "default": 'text'
+    },
     error: {
       type: String,
       "default": null
@@ -285,7 +289,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
       'p-invalid': $setup.isError
     }]),
-    type: "text",
+    type: $props.type,
     id: $setup.forLabel,
     "aria-describedby": $setup.ariaDescribedbyLabel,
     "model-value": $props.modelValue,
@@ -297,7 +301,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 8
   /* PROPS */
-  , ["class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+  , ["type", "class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
     key: 0,
     id: $setup.ariaDescribedbyLabel,
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)({

public/js/resources_js_pages_Customers_tableHeader_js.js

@@ -0,0 +1,30 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_Customers_tableHeader_js"],{
+
+/***/ "./resources/js/pages/Customers/tableHeader.js":
+/*!*****************************************************!*\
+  !*** ./resources/js/pages/Customers/tableHeader.js ***!
+  \*****************************************************/
+/***/ ((__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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'name',
+  header: 'Nama'
+}, {
+  field: 'address',
+  header: 'Alamat'
+}, {
+  field: 'phone',
+  header: 'No HP'
+}, {
+  field: 'npwp',
+  header: 'NPWP'
+}]);
+
+/***/ })
+
+}]);

public/js/resources_js_pages_Users_Create_vue.js

@@ -128,6 +128,10 @@ __webpack_require__.r(__webpack_exports__);
       type: String,
       required: true
     },
+    type: {
+      type: String,
+      "default": 'text'
+    },
     error: {
       type: String,
       "default": null
@@ -606,7 +610,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
       'p-invalid': $setup.isError
     }]),
-    type: "text",
+    type: $props.type,
     id: $setup.forLabel,
     "aria-describedby": $setup.ariaDescribedbyLabel,
     "model-value": $props.modelValue,
@@ -618,7 +622,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 8
   /* PROPS */
-  , ["class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+  , ["type", "class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
     key: 0,
     id: $setup.ariaDescribedbyLabel,
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)({

public/js/resources_js_pages_Users_Edit_vue.js

@@ -167,6 +167,10 @@ __webpack_require__.r(__webpack_exports__);
       type: String,
       required: true
     },
+    type: {
+      type: String,
+      "default": 'text'
+    },
     error: {
       type: String,
       "default": null
@@ -729,7 +733,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
       'p-invalid': $setup.isError
     }]),
-    type: "text",
+    type: $props.type,
     id: $setup.forLabel,
     "aria-describedby": $setup.ariaDescribedbyLabel,
     "model-value": $props.modelValue,
@@ -741,7 +745,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 8
   /* PROPS */
-  , ["class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+  , ["type", "class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
     key: 0,
     id: $setup.ariaDescribedbyLabel,
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)({

public/js/resources_js_pages_Users_Show_vue.js

@@ -28,6 +28,10 @@ __webpack_require__.r(__webpack_exports__);
       type: String,
       required: true
     },
+    type: {
+      type: String,
+      "default": 'text'
+    },
     error: {
       type: String,
       "default": null
@@ -503,7 +507,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["w-full", {
       'p-invalid': $setup.isError
     }]),
-    type: "text",
+    type: $props.type,
     id: $setup.forLabel,
     "aria-describedby": $setup.ariaDescribedbyLabel,
     "model-value": $props.modelValue,
@@ -515,7 +519,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 8
   /* PROPS */
-  , ["class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+  , ["type", "class", "id", "aria-describedby", "model-value", "placeholder", "value", "disabled"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
     key: 0,
     id: $setup.ariaDescribedbyLabel,
     "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)({

public/js/vue.js

@@ -58308,6 +58308,22 @@ var map = {
 		"./resources/js/pages/Auth/Login.vue",
 		"resources_js_pages_Auth_Login_vue"
 	],
+	"./Customers/Create": [
+		"./resources/js/pages/Customers/Create.vue",
+		"resources_js_pages_Customers_Create_vue"
+	],
+	"./Customers/Create.vue": [
+		"./resources/js/pages/Customers/Create.vue",
+		"resources_js_pages_Customers_Create_vue"
+	],
+	"./Customers/Edit": [
+		"./resources/js/pages/Customers/Edit.vue",
+		"resources_js_pages_Customers_Edit_vue"
+	],
+	"./Customers/Edit.vue": [
+		"./resources/js/pages/Customers/Edit.vue",
+		"resources_js_pages_Customers_Edit_vue"
+	],
 	"./Customers/Index": [
 		"./resources/js/pages/Customers/Index.vue",
 		"resources_js_pages_Customers_Index_vue"
@@ -58316,6 +58332,14 @@ var map = {
 		"./resources/js/pages/Customers/Index.vue",
 		"resources_js_pages_Customers_Index_vue"
 	],
+	"./Customers/tableHeader": [
+		"./resources/js/pages/Customers/tableHeader.js",
+		"resources_js_pages_Customers_tableHeader_js"
+	],
+	"./Customers/tableHeader.js": [
+		"./resources/js/pages/Customers/tableHeader.js",
+		"resources_js_pages_Customers_tableHeader_js"
+	],
 	"./Dashboards/Index": [
 		"./resources/js/pages/Dashboards/Index.vue",
 		"resources_js_pages_Dashboards_Index_vue"
@@ -58513,7 +58537,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":"9296b829a7757dee","resources_js_pages_Auth_Login_vue":"cb7d9267c0b9275e","resources_js_pages_Customers_Index_vue":"eb78407dfd08456f","resources_js_pages_Dashboards_Index_vue":"7f4150c836fe81d8","resources_js_pages_Purchases_Index_vue":"41fddd7f79c7a85d","resources_js_pages_Sales_Index_vue":"1da65c4ce926abbc","resources_js_pages_StockProducts_Index_vue":"74a65be5ec079b3f","resources_js_pages_Suppliers_Index_vue":"0f2fb6e79fdbec94","resources_js_pages_Users_Create_vue":"d77599e458334081","resources_js_pages_Users_Edit_vue":"e0eb01c3dc9f721f","resources_js_pages_Users_Index_vue":"575b2403097c7e16","resources_js_pages_Users_Show_vue":"5c32daddba0a1355","resources_js_pages_Users_tableHeader_js":"48f19bd820caf015"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"9296b829a7757dee","resources_js_pages_Auth_Login_vue":"8e53429f130c83f5","resources_js_pages_Customers_Create_vue":"1ec93aefdbb7bac8","resources_js_pages_Customers_Edit_vue":"47650583b348b8eb","resources_js_pages_Customers_Index_vue":"527935b3268e6218","resources_js_pages_Customers_tableHeader_js":"7a40a3d5ad60171c","resources_js_pages_Dashboards_Index_vue":"7f4150c836fe81d8","resources_js_pages_Purchases_Index_vue":"41fddd7f79c7a85d","resources_js_pages_Sales_Index_vue":"1da65c4ce926abbc","resources_js_pages_StockProducts_Index_vue":"74a65be5ec079b3f","resources_js_pages_Suppliers_Index_vue":"0f2fb6e79fdbec94","resources_js_pages_Users_Create_vue":"290f8cea7ecbd8da","resources_js_pages_Users_Edit_vue":"4f8b3ff98efb4ef3","resources_js_pages_Users_Index_vue":"575b2403097c7e16","resources_js_pages_Users_Show_vue":"5561027a65c32ca4","resources_js_pages_Users_tableHeader_js":"48f19bd820caf015"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/AppInputText.vue

@@ -14,6 +14,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  type: {
+    type: String,
+    default: 'text',
+  },
   error: {
     type: String,
     default: null,
@@ -38,7 +42,7 @@ const ariaDescribedbyLabel = computed(
 
     <InputText
       class="w-full"
-      type="text"
+      :type="type"
       :class="{ 'p-invalid': isError }"
       :id="forLabel"
       :aria-describedby="ariaDescribedbyLabel"

resources/js/pages/Customers/Create.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { useFormErrorReset } from '@/components/useFormErrorReset'
+import AppInputText from '@/components/AppInputText.vue'
+import DashboardLayout from '@/layouts/DashboardLayout.vue'
+
+const form = useForm({
+  name: null,
+  address: null,
+  phone: null,
+  npwp: null,
+})
+
+useFormErrorReset(form)
+
+const onSubmit = () => {
+  form.post(route('customers.store'), { onSuccess: () => form.reset() })
+}
+</script>
+
+<template>
+  <Head title="Tambah Pelanggan" />
+
+  <DashboardLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #title> Tambah Pelanggan </template>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Nama"
+                  placeholder="nama"
+                  :error="form.errors.name"
+                  v-model="form.name"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Alamat"
+                  placeholder="alamat"
+                  :error="form.errors.address"
+                  v-model="form.address"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="No HP"
+                  placeholder="no hp"
+                  type="number"
+                  :error="form.errors.phone"
+                  v-model="form.phone"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="NPWP"
+                  placeholder="npwp"
+                  type="number"
+                  :error="form.errors.npwp"
+                  v-model="form.npwp"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Simpan"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="onSubmit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>

resources/js/pages/Customers/Edit.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { useFormErrorReset } from '@/components/useFormErrorReset'
+import AppInputText from '@/components/AppInputText.vue'
+import DashboardLayout from '@/layouts/DashboardLayout.vue'
+
+const props = defineProps({
+  customer: Object,
+})
+
+const form = useForm({
+  name: props.customer.name,
+  address: props.customer.address,
+  phone: props.customer.phone,
+  npwp: props.customer.npwp,
+})
+
+useFormErrorReset(form)
+
+const onSubmit = () => {
+  form.put(route('customers.update', props.customer.id))
+}
+</script>
+
+<template>
+  <Head title="Tambah Pelanggan" />
+
+  <DashboardLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #title> Tambah Pelanggan </template>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Nama"
+                  placeholder="nama"
+                  :error="form.errors.name"
+                  v-model="form.name"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Alamat"
+                  placeholder="alamat"
+                  :error="form.errors.address"
+                  v-model="form.address"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="No HP"
+                  placeholder="no hp"
+                  type="number"
+                  :error="form.errors.phone"
+                  v-model="form.phone"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="NPWP"
+                  placeholder="npwp"
+                  type="number"
+                  :error="form.errors.npwp"
+                  v-model="form.npwp"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Simpan"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="onSubmit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>

resources/js/pages/Customers/Index.vue

@@ -1,10 +1,85 @@
 <script setup>
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
 import { Head } from '@inertiajs/inertia-vue3'
+import { pickBy } from 'lodash'
+import tableHeader from './tableHeader'
+import { useSearchText } from '@/components/useSearchText'
 import DashboardLayout from '@/layouts/DashboardLayout.vue'
+import AppButtonLink from '@/components/AppButtonLink.vue'
+import AppPagination from '@/components/AppPagination.vue'
+
+const props = defineProps({
+  customers: Object,
+  initialSearch: String,
+})
+
+const { search } = useSearchText(props)
+
+watch(search, () => {
+  Inertia.get('/customers', pickBy({ search: search.value }), {
+    preserveState: true,
+  })
+})
 </script>
 
 <template>
-  <Head title="Halaman Pelangan" />
+  <Head title="Daftar User" />
+
+  <DashboardLayout>
+    <DataTable
+      responsiveLayout="scroll"
+      columnResizeMode="expand"
+      :value="customers.data"
+      :rowHover="true"
+      :stripedRows="true"
+    >
+      <template #header>
+        <h1>Pelanggan</h1>
+
+        <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, contoh: tina, 08xx, 0x"
+                v-model="search"
+              />
+            </div>
+          </div>
+
+          <div
+            class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end"
+          >
+            <AppButtonLink
+              label="Tambah User"
+              icon="pi pi-pencil"
+              class="p-button-outlined"
+              :href="route('customers.create')"
+            />
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="value in tableHeader"
+        :field="value.field"
+        :header="value.header"
+        :key="value.field"
+      />
+
+      <Column>
+        <template #body="{ data }">
+          <AppButtonLink
+            icon="pi pi-pencil"
+            class="p-button-icon-only p-button-rounded p-button-text"
+            v-tooltip.bottom="'Ubah User'"
+            :href="route('customers.edit', data.id)"
+          />
+        </template>
+      </Column>
+    </DataTable>
 
-  <DashboardLayout> Halaman Pelangan </DashboardLayout>
+    <AppPagination :links="customers.links" />
+  </DashboardLayout>
 </template>

resources/js/pages/Customers/tableHeader.js

@@ -0,0 +1,6 @@
+export default [
+  { field: 'name', header: 'Nama' },
+  { field: 'address', header: 'Alamat' },
+  { field: 'phone', header: 'No HP' },
+  { field: 'npwp', header: 'NPWP' },
+]