feat: master member

app/Http/Controllers/MemberController.php

@@ -0,0 +1,125 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\Member\StoreMemberRequest;
+use App\Http\Requests\Member\UpdateMemberRequest;
+use App\Models\Member;
+use App\Models\TypeMember;
+
+class MemberController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function index()
+    {
+        return inertia('member/Index', [
+            'filters' => request()->all('search'),
+            'members' => Member::filter(request()->only('search'))
+                ->latest()
+                ->paginate(10)
+                ->withQueryString()
+                ->through(fn($member) => [
+                    'id' => $member->id,
+                    'updatedAt' => $member->updated_at,
+                    'name' => $member->name,
+                    'phone' => $member->phone,
+                    'platNumber' => $member->plat_number,
+                    'type' => $member->typeMember->type,
+                    'price' => $member->typeMember->price,
+                ]),
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function create()
+    {
+        return inertia('member/Create', [
+            'typeMembers' => TypeMember::get()->transform(fn($typeMember) => [
+                'label' => $typeMember->type,
+                'value' => $typeMember->id,
+            ]),
+        ]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(StoreMemberRequest $request)
+    {
+        Member::create($request->validated());
+
+        return back()->with('success', __('messages.success.store.member'));
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  Member  $member
+     * @return \Inertia\Response
+     */
+    public function show(Member $member)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  Member  $member
+     * @return \Inertia\Response
+     */
+    public function edit(Member $member)
+    {
+        return inertia('member/Edit', [
+            'member' => [
+                'id' => $member->id,
+                'name' => $member->name,
+                'phone' => $member->phone,
+                'plat_number' => $member->plat_number,
+                'type_member_id' => $member->type_member_id,
+            ],
+            'typeMembers' => TypeMember::get()->transform(fn($typeMember) => [
+                'label' => $typeMember->type,
+                'value' => $typeMember->id,
+            ]),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  Member  $member
+     * @return \Illuminate\Http\Response
+     */
+    public function update(UpdateMemberRequest $request, Member $member)
+    {
+        $member->update($request->validated());
+
+        return back()->with('success', __('messages.success.update.member'));
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  Member  $member
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($member)
+    {
+        $member->delete();
+
+        return to_route('members.index')->with('success', __('messages.success.destroy.member'));
+    }
+}

app/Http/Requests/Member/StoreMemberRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\Member;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreMemberRequest 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
+     */
+    public function rules()
+    {
+        return [
+            'name' => 'required|string|max:50',
+            'phone' => 'required|numeric|min:12|unique:members,phone',
+            'plat_number' => 'required|string|unique:members,plat_number',
+            'type_member_id' => 'required|numeric',
+        ];
+    }
+}

app/Http/Requests/Member/UpdateMemberRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\Member;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateMemberRequest 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
+     */
+    public function rules()
+    {
+        return [
+            'name' => 'required|string|max:50',
+            'phone' => 'required|numeric|min:12|unique:members,phone,' . $this->member->id,
+            'plat_number' => 'required|string|unique:members,plat_number,' . $this->member->id,
+            'type_member_id' => 'required|numeric',
+        ];
+    }
+}

app/Models/Member.php

@@ -2,6 +2,8 @@
 
 namespace App\Models;
 
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 
@@ -13,5 +15,29 @@ class Member extends Model
         'name',
         'phone',
         'plat_number',
+        'type_member_id',
     ];
+
+    protected function updatedAt(): Attribute
+    {
+        return Attribute::make(
+            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y')
+        );
+    }
+
+    public function typeMember()
+    {
+        return $this->belongsTo(TypeMember::class);
+    }
+
+    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('plat_number', 'like', '%' . $search . '%');
+            });
+        });
+    }
 }

app/Models/TypeMember.php

@@ -30,5 +30,4 @@ class TypeMember extends Model
             get:fn($value) => (new CurrencyFormatService)->setRupiahFormat($value, true)
         );
     }
-
 }

designs/diagrams/database.puml

@@ -43,14 +43,14 @@ entity ParkingFee {
 entity Transaction {
   * id
   __
-  * login_time
-  * time_out
-  * plat_number
-  * price
-  * input_by
   * capture_vehicle
-  * type_vehicle_id
-  * user_id
+  * transaction_number
+  * login_time
+  time_out
+  plat_number
+  price
+  type_vehicle_id
+  user_id
   member_id
 }
 

lang/id/messages.php

@@ -22,6 +22,7 @@ return [
             'verify_email' => 'Link verifikasi email berhasil terkirim',
         ],
         'store' => [
+            'member' => 'Member berhasil ditambahkan',
             'type-member' => 'Jenis member berhasil ditambahkan',
             'discount' => 'Diskon berhasil diubah',
             'expense' => 'Pengeluaran berhasil ditambahkan',
@@ -29,12 +30,14 @@ return [
             'user' => 'Akun user berhasil ditambahkan',
         ],
         'update' => [
+            'member' => 'Member berhasil diubah',
             'type-member' => 'Jenis member berhasil diubah',
             'change-password' => 'Password berhasil diubah',
             'transaction_status' => 'Status transaksi berhasil diubah',
             'user' => 'Akun user berhasil diubah',
         ],
         'destroy' => [
+            'member' => 'Akun member berhasil dihapus',
             'user' => 'Akun user berhasil dihapus',
         ],
     ],

public/js/resources_js_pages_expense_Create_vue.js

@@ -1392,6 +1392,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1403,6 +1408,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_expense_Index_vue.js

@@ -1334,6 +1334,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1345,6 +1350,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_expense_Show_vue.js

@@ -1058,6 +1058,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1069,6 +1074,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_home_Index_vue.js

@@ -931,6 +931,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -942,6 +947,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_member_TableHeader_js.js

@@ -0,0 +1,36 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_member_TableHeader_js"],{
+
+/***/ "./resources/js/pages/member/TableHeader.js":
+/*!**************************************************!*\
+  !*** ./resources/js/pages/member/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: 'updatedAt',
+  header: 'Diperbaharui'
+}, {
+  field: 'name',
+  header: 'Nama'
+}, {
+  field: 'phone',
+  header: 'Nomor HP'
+}, {
+  field: 'platNumber',
+  header: 'Plat Kendaraan'
+}, {
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'price',
+  header: 'Tarif Member'
+}]);
+
+/***/ })
+
+}]);

public/js/resources_js_pages_typemember_Create_vue.js

@@ -579,6 +579,7 @@ __webpack_require__.r(__webpack_exports__);
       submit: submit,
       computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
+      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm,
       usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage,
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
@@ -1245,7 +1246,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppLayout"], null, {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Head"], {
+    title: "Tambah Jenis Member"
+  }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppLayout"], null, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(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__.createVNode)(_component_Card, null, {
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
@@ -1293,7 +1296,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
     /* STABLE */
 
-  });
+  })], 64
+  /* STABLE_FRAGMENT */
+  );
 }
 
 /***/ }),
@@ -1348,6 +1353,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1359,6 +1369,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_typemember_Edit_vue.js

@@ -570,11 +570,7 @@ __webpack_require__.r(__webpack_exports__);
     });
 
     var submit = function submit() {
-      form.put(route('type-members.update', props.typeMember.id), {
-        onSuccess: function onSuccess() {
-          return form.reset();
-        }
-      });
+      form.put(route('type-members.update', props.typeMember.id));
     };
 
     var __returned__ = {
@@ -584,6 +580,7 @@ __webpack_require__.r(__webpack_exports__);
       submit: submit,
       computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
+      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm,
       usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage,
       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
@@ -1250,7 +1247,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppLayout"], null, {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Head"], {
+    title: "Ubah Jenis Member"
+  }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppLayout"], null, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(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__.createVNode)(_component_Card, null, {
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
@@ -1298,7 +1297,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
     /* STABLE */
 
-  });
+  })], 64
+  /* STABLE_FRAGMENT */
+  );
 }
 
 /***/ }),
@@ -1353,6 +1354,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1364,6 +1370,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_typemember_Index_vue.js

@@ -380,9 +380,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/components/AppButton.vue */ "./resources/js/components/AppButton.vue");
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
-/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/typemember/TableHeader.js");
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+/* harmony import */ var _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/components/AppButton.vue */ "./resources/js/components/AppButton.vue");
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/typemember/TableHeader.js");
+
 
 
 
@@ -394,9 +396,10 @@ __webpack_require__.r(__webpack_exports__);
     var expose = _ref.expose;
     expose();
     var __returned__ = {
-      AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
-      TableHeader: _TableHeader__WEBPACK_IMPORTED_MODULE_2__["default"]
+      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.Head,
+      AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
+      TableHeader: _TableHeader__WEBPACK_IMPORTED_MODULE_3__["default"]
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
@@ -994,7 +997,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_DataTable = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("DataTable");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppLayout"], null, {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Head"], {
+    title: "Daftar Jenis Member"
+  }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppLayout"], null, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_DataTable, {
         "responsive-layout": "scroll",
@@ -1050,7 +1055,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
     /* STABLE */
 
-  });
+  })], 64
+  /* STABLE_FRAGMENT */
+  );
 }
 
 /***/ }),
@@ -1128,6 +1135,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1139,6 +1151,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_user_Create_vue.js

@@ -1357,6 +1357,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1368,6 +1373,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_user_Edit_vue.js

@@ -607,46 +607,46 @@ __webpack_require__.r(__webpack_exports__);
     var expose = _ref.expose;
     expose();
     var props = __props;
-    var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm)({
-      name: props.user.name,
-      phone: props.user.phone,
-      email: props.user.email,
-      role_id: props.user.role_id
+    var errors = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage)().props.value.errors;
+    });
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(errors, function () {
+      form.clearErrors();
     });
-
-    var submit = function submit() {
-      form.put(route('users.update', props.user.id));
-    };
-
     var visibleDialog = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(false);
 
     var confirmDialog = function confirmDialog() {
       visibleDialog.value = true;
     };
 
-    var onAgree = function onAgree(id) {
-      return _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia["delete"](route('users.destroy', id));
+    var onAgree = function onAgree() {
+      return _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia["delete"](route('users.destroy', props.user.id));
     };
 
     var onCancel = function onCancel() {
       return visibleDialog.value = false;
     };
 
-    var errors = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
-      return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage)().props.value.errors;
-    });
-    (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(errors, function () {
-      form.clearErrors();
+    var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm)({
+      name: props.user.name,
+      phone: props.user.phone,
+      email: props.user.email,
+      role_id: props.user.role_id
     });
+
+    var submit = function submit() {
+      form.put(route('users.update', props.user.id));
+    };
+
     var __returned__ = {
       props: props,
-      form: form,
-      submit: submit,
+      errors: errors,
       visibleDialog: visibleDialog,
       confirmDialog: confirmDialog,
       onAgree: onAgree,
       onCancel: onCancel,
-      errors: errors,
+      form: form,
+      submit: submit,
       ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
       computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
@@ -1554,9 +1554,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "onUpdate:visible": _cache[4] || (_cache[4] = function ($event) {
               return $setup.visibleDialog = $event;
             }),
-            onAgree: _cache[5] || (_cache[5] = function ($event) {
-              return $setup.onAgree($props.user.id);
-            }),
+            onAgree: $setup.onAgree,
             onCancel: $setup.onCancel
           }, null, 8
           /* PROPS */
@@ -1649,6 +1647,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1660,6 +1663,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_user_Index_vue.js

@@ -1293,6 +1293,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1304,6 +1309,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/resources_js_pages_user_Show_vue.js

@@ -1377,6 +1377,11 @@ __webpack_require__.r(__webpack_exports__);
       icon: 'pi pi-id-card',
       to: '/type-members',
       component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
     }]
   }],
   // Operator
@@ -1388,6 +1393,24 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }, {
+      label: 'Jenis Member',
+      icon: 'pi pi-id-card',
+      to: '/type-members',
+      component: 'typemember/Index'
+    }, {
+      label: 'Member',
+      icon: 'pi pi-id-card',
+      to: '/members',
+      component: 'member/Index'
+    }]
   }]
 });
 

public/js/vue.js

@@ -57659,6 +57659,38 @@ var map = {
 		"./resources/js/pages/home/Index.vue",
 		"resources_js_pages_home_Index_vue"
 	],
+	"./member/Create": [
+		"./resources/js/pages/member/Create.vue",
+		"resources_js_pages_member_Create_vue"
+	],
+	"./member/Create.vue": [
+		"./resources/js/pages/member/Create.vue",
+		"resources_js_pages_member_Create_vue"
+	],
+	"./member/Edit": [
+		"./resources/js/pages/member/Edit.vue",
+		"resources_js_pages_member_Edit_vue"
+	],
+	"./member/Edit.vue": [
+		"./resources/js/pages/member/Edit.vue",
+		"resources_js_pages_member_Edit_vue"
+	],
+	"./member/Index": [
+		"./resources/js/pages/member/Index.vue",
+		"resources_js_pages_member_Index_vue"
+	],
+	"./member/Index.vue": [
+		"./resources/js/pages/member/Index.vue",
+		"resources_js_pages_member_Index_vue"
+	],
+	"./member/TableHeader": [
+		"./resources/js/pages/member/TableHeader.js",
+		"resources_js_pages_member_TableHeader_js"
+	],
+	"./member/TableHeader.js": [
+		"./resources/js/pages/member/TableHeader.js",
+		"resources_js_pages_member_TableHeader_js"
+	],
 	"./typemember/Create": [
 		"./resources/js/pages/typemember/Create.vue",
 		"resources_js_pages_typemember_Create_vue"
@@ -57848,7 +57880,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":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"a7b9a99e5a331088","resources_js_pages_expense_Create_vue":"bfc05aeb74c8ce1f","resources_js_pages_expense_Index_vue":"7a309f6d0d26a727","resources_js_pages_expense_Show_vue":"789baa23c94364cd","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"b14a4dbf22a954c7","resources_js_pages_typemember_Create_vue":"d826978506678e41","resources_js_pages_typemember_Edit_vue":"90ecf14e63ffd3c7","resources_js_pages_typemember_Index_vue":"cac37ec778c618a8","resources_js_pages_typemember_TableHeader_js":"8d2fb11e94b09b43","resources_js_pages_user_Create_vue":"fc5e95e89a96238a","resources_js_pages_user_Edit_vue":"af45e9f32617313e","resources_js_pages_user_Index_vue":"d159f071cd244236","resources_js_pages_user_Show_vue":"15c066cf5714885a","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"a7b9a99e5a331088","resources_js_pages_expense_Create_vue":"d3f715d838d15236","resources_js_pages_expense_Index_vue":"96e8d68371ce7d99","resources_js_pages_expense_Show_vue":"4b85cc3e6e442070","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"8b3afe9151f60605","resources_js_pages_member_Create_vue":"c549bc2212a615c3","resources_js_pages_member_Edit_vue":"06c149d64ffc2793","resources_js_pages_member_Index_vue":"3d3ee415a9616cf1","resources_js_pages_member_TableHeader_js":"5148a502565e8023","resources_js_pages_typemember_Create_vue":"367262813dd38a32","resources_js_pages_typemember_Edit_vue":"7946208d9548e498","resources_js_pages_typemember_Index_vue":"34f670992e953910","resources_js_pages_typemember_TableHeader_js":"8d2fb11e94b09b43","resources_js_pages_user_Create_vue":"044835f5c4f7d9a1","resources_js_pages_user_Edit_vue":"c8c7d6749311d95f","resources_js_pages_user_Index_vue":"454ef4d9a4f8ba89","resources_js_pages_user_Show_vue":"906b6b7d596a3be8","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/member/Create.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, watch } from 'vue'
+import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppDropdown from '@/components/AppDropdown.vue'
+import AppInputText from '@/components/AppInputText.vue'
+
+defineProps({
+  typeMembers: Array,
+})
+
+const errors = computed(() => usePage().props.value.errors)
+
+watch(errors, () => {
+  form.clearErrors()
+})
+
+const form = useForm({
+  name: null,
+  phone: null,
+  plat_number: null,
+  type_member_id: null,
+})
+
+const submit = () => {
+  form.post(route('members.store'), { onSuccess: () => form.reset() })
+}
+</script>
+
+<template>
+  <Head title="Tambah Member" />
+
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 md:col-8">
+        <Card>
+          <template #title> Tambah Member </template>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText v-model="form.name" label="Nama" placeholder="nama" :error="form.errors.name" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText v-model="form.phone" label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  v-model="form.plat_number"
+                  label="Plat Kendaraan"
+                  placeholder="plat kendaraan"
+                  :error="form.errors.plat_number"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppDropdown
+                  label="Jenis member"
+                  placeholder="pilih satu"
+                  v-model="form.type_member_id"
+                  :options="typeMembers"
+                  :error="form.errors.type_member_id"
+                />
+              </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="submit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/pages/member/Edit.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { computed, watch, ref } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppDialog from '@/components/AppDialog.vue'
+import AppDropdown from '@/components/AppDropdown.vue'
+import AppInputText from '@/components/AppInputText.vue'
+
+const props = defineProps({
+  member: Object,
+  typeMembers: Array,
+})
+
+const errors = computed(() => usePage().props.value.errors)
+
+watch(errors, () => {
+  form.clearErrors()
+})
+
+const visibleDialog = ref(false)
+
+const confirmDialog = () => {
+  visibleDialog.value = true
+}
+
+const onAgree = () => Inertia.delete(route('users.destroy', props.member.id))
+
+const onCancel = () => (visibleDialog.value = false)
+
+const form = useForm({
+  name: props.member.name,
+  phone: props.member.phone,
+  plat_number: props.member.plat_number,
+  type_member_id: props.member.type_member_id,
+})
+
+const submit = () => {
+  form.put(route('members.update', props.member.id))
+}
+</script>
+
+<template>
+  <Head title="Ubah Member" />
+
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 md:col-8">
+        <Card>
+          <template #title> Ubah Member </template>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText v-model="form.name" label="Nama" placeholder="nama" :error="form.errors.name" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText v-model="form.phone" label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  v-model="form.plat_number"
+                  label="Plat Kendaraan"
+                  placeholder="plat kendaraan"
+                  :error="form.errors.plat_number"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppDropdown
+                  label="Jenis member"
+                  placeholder="pilih satu"
+                  v-model="form.type_member_id"
+                  :options="typeMembers"
+                  :error="form.errors.type_member_id"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="grid">
+              <div class="col-12 md:col-6 flex flex-column md:flex-row justify-content-center md:justify-content-start">
+                <AppDialog
+                  message="Yakin akan menghapus data ini?"
+                  v-model:visible="visibleDialog"
+                  @agree="onAgree"
+                  @cancel="onCancel"
+                />
+
+                <Button
+                  label="Hapus"
+                  icon="pi pi-trash"
+                  class="p-button-outlined p-button-danger"
+                  @click="confirmDialog"
+                />
+              </div>
+
+              <div class="col-12 md:col-6 flex flex-column md:flex-row justify-content-center md:justify-content-end">
+                <Button
+                  label="Simpan"
+                  icon="pi pi-check"
+                  class="p-button-outlined"
+                  :disabled="form.processing"
+                  @click="submit"
+                />
+              </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/pages/member/Index.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, useForm } from '@inertiajs/inertia-vue3'
+import throttle from 'lodash/throttle'
+import pickBy from 'lodash/pickBy'
+import AppButton from '@/components/AppButton.vue'
+import AppPagination from '@/components/AppPagination.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+import TableHeader from './TableHeader'
+
+const props = defineProps({
+  members: Object,
+  filters: Object,
+})
+
+const filterForm = useForm({
+  search: props.filters.search,
+})
+
+watch(
+  filterForm,
+  throttle(() => {
+    Inertia.get('/members', pickBy({ search: filterForm.search }), { preserveState: true })
+  }, 300)
+)
+</script>
+
+<template>
+  <Head title="Daftar Member" />
+
+  <AppLayout>
+    <DataTable
+      responsive-layout="scroll"
+      column-resize-mode="expand"
+      :value="members.data"
+      :row-hover="true"
+      :striped-rows="true"
+    >
+      <template #header>
+        <h1>Jenis Member</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..." v-model="filterForm.search" />
+            </div>
+          </div>
+
+          <div class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end">
+            <AppButton
+              label="Tambah Member"
+              class="p-button-outlined"
+              icon="pi pi-pencil"
+              :href="route('members.create')"
+            />
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="tableHeader in TableHeader"
+        :field="tableHeader.field"
+        :header="tableHeader.header"
+        :key="tableHeader.field"
+      />
+
+      <Column>
+        <template #body="{ data }">
+          <AppButton
+            icon="pi pi-angle-double-right"
+            class="p-button-text p-button-icon-only p-button-rounded p-button-text"
+            :href="route('members.edit', data.id)"
+          />
+        </template>
+      </Column>
+    </DataTable>
+
+    <AppPagination :links="members.links" />
+  </AppLayout>
+</template>

resources/js/pages/member/TableHeader.js

@@ -0,0 +1,8 @@
+export default [
+  { field: 'updatedAt', header: 'Diperbaharui' },
+  { field: 'name', header: 'Nama' },
+  { field: 'phone', header: 'Nomor HP' },
+  { field: 'platNumber', header: 'Plat Kendaraan' },
+  { field: 'type', header: 'Jenis Member' },
+  { field: 'price', header: 'Tarif Member' },
+]

resources/js/pages/typemember/Create.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, watch } from 'vue'
-import { useForm, usePage } from '@inertiajs/inertia-vue3'
+import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
@@ -22,6 +22,8 @@ const submit = () => {
 </script>
 
 <template>
+  <Head title="Tambah Jenis Member" />
+
   <AppLayout>
     <div class="grid">
       <div class="col-12 md:col-8">

resources/js/pages/typemember/Edit.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, watch } from 'vue'
-import { useForm, usePage } from '@inertiajs/inertia-vue3'
+import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
@@ -21,11 +21,13 @@ const form = useForm({
 })
 
 const submit = () => {
-  form.put(route('type-members.update', props.typeMember.id), { onSuccess: () => form.reset() })
+  form.put(route('type-members.update', props.typeMember.id))
 }
 </script>
 
 <template>
+  <Head title="Ubah Jenis Member" />
+
   <AppLayout>
     <div class="grid">
       <div class="col-12 md:col-8">

resources/js/pages/typemember/Index.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Head } from '@inertiajs/inertia-vue3'
 import AppButton from '@/components/AppButton.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
@@ -10,6 +11,8 @@ defineProps({
 </script>
 
 <template>
+  <Head title="Daftar Jenis Member" />
+
   <AppLayout>
     <DataTable
       responsive-layout="scroll"

resources/js/pages/user/Edit.vue

@@ -13,16 +13,11 @@ const props = defineProps({
   roles: Array,
 })
 
-const form = useForm({
-  name: props.user.name,
-  phone: props.user.phone,
-  email: props.user.email,
-  role_id: props.user.role_id,
-})
+const errors = computed(() => usePage().props.value.errors)
 
-const submit = () => {
-  form.put(route('users.update', props.user.id))
-}
+watch(errors, () => {
+  form.clearErrors()
+})
 
 const visibleDialog = ref(false)
 
@@ -30,15 +25,20 @@ const confirmDialog = () => {
   visibleDialog.value = true
 }
 
-const onAgree = (id) => Inertia.delete(route('users.destroy', id))
+const onAgree = () => Inertia.delete(route('users.destroy', props.user.id))
 
 const onCancel = () => (visibleDialog.value = false)
 
-const errors = computed(() => usePage().props.value.errors)
-
-watch(errors, () => {
-  form.clearErrors()
+const form = useForm({
+  name: props.user.name,
+  phone: props.user.phone,
+  email: props.user.email,
+  role_id: props.user.role_id,
 })
+
+const submit = () => {
+  form.put(route('users.update', props.user.id))
+}
 </script>
 
 <template>
@@ -99,7 +99,7 @@ watch(errors, () => {
                 <AppDialog
                   message="Yakin akan menghapus data ini?"
                   v-model:visible="visibleDialog"
-                  @agree="onAgree(user.id)"
+                  @agree="onAgree"
                   @cancel="onCancel"
                 />
 

resources/js/utils/menu.js

@@ -22,6 +22,7 @@ export default {
       items: [
         { label: 'Pengeluaran', icon: 'pi pi-wallet', to: '/expenses', component: 'expense/Index' },
         { label: 'Jenis Member', icon: 'pi pi-id-card', to: '/type-members', component: 'typemember/Index' },
+        { label: 'Member', icon: 'pi pi-id-card', to: '/members', component: 'member/Index' },
       ],
     },
   ],
@@ -32,5 +33,13 @@ export default {
       label: 'Home',
       items: [{ label: 'Dashboard', icon: 'pi pi-home', to: '/dashboards', component: 'home/Index' }],
     },
+    {
+      label: 'Menu',
+      items: [
+        { label: 'Pengeluaran', icon: 'pi pi-wallet', to: '/expenses', component: 'expense/Index' },
+        { label: 'Jenis Member', icon: 'pi pi-id-card', to: '/type-members', component: 'typemember/Index' },
+        { label: 'Member', icon: 'pi pi-id-card', to: '/members', component: 'member/Index' },
+      ],
+    },
   ],
 }

routes/web.php

@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\ExpenseController;
+use App\Http\Controllers\MemberController;
 use App\Http\Controllers\TypeMemberController;
 use App\Http\Controllers\UserController;
 use Illuminate\Support\Facades\Route;
@@ -29,6 +30,8 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::resource('/expenses', ExpenseController::class);
 
     Route::resource('/type-members', TypeMemberController::class);
+
+    Route::resource('/members', MemberController::class);
 });
 
 require __DIR__ . '/auth.php';