fix: master topup

app/Http/Controllers/TopUpController.php

 use App\Http\Requests\TopUp\UpdateTopUpRequest;
 use App\Models\Member;
 use App\Models\TopUp;
+use App\Models\TypeMember;
+use Carbon\Carbon;
+use Illuminate\Database\QueryException;
+use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
 
 class TopUpController extends Controller
                     'phone' => $member->phone,
                     'platNumber' => $member->vehicleDetail(),
                     'type' => $member->typeMember->type,
+                    'price' => $member->typeMember->price,
                     'expDate' => $member->exp_date,
                 ])
             ),
      */
     public function store(StoreTopUpRequest $request)
     {
-        TopUp::create([
-            'balance' => $request->balance,
-            'exp_date' => $request->exp_date,
-            'member_id' => $request->member_id,
-            'user_id' => auth()->user()->id,
-        ]);
+        $member = Member::find($request->member_id);
+
+        $latest = $member->topUps->last()->getRawOriginal('exp_date');
+
+        DB::beginTransaction();
+
+        try {
+            $topUp = $member->topUps()->create([
+                'amount' => TypeMember::find($member->typeMember->id)->getRawOriginal('price'),
+                'exp_date' => Carbon::create($latest)->addDays(30),
+                'user_id' => auth()->user()->id,
+            ]);
+
+            $topUp->mutation()->create([
+                'type' => 1,
+                'amount' => TypeMember::find($member->typeMember->id)->getRawOriginal('price'),
+            ]);
+
+            DB::commit();
 
-        return back()->with('success', __('messages.success.store.top_up'));
+            return back()->with('success', __('messages.success.store.top_up'));
+        } catch (QueryException $qe) {
+            DB::rollBack();
+
+            return back()->with('error', __('messages.error.store.top_up'));
+        }
     }
 
     /**
      */
     public function show(TopUp $topUp)
     {
+        $member = $topUp->member;
+
         return inertia('topup/Show', [
-            'topUp' => [
-                'updatedAt' => $topUp->updated_at,
-                'name' => $topUp->member->name,
-                'phone' => $topUp->member->phone,
-                'platNumber' => $topUp->member->plat_number,
-                'balance' => $topUp->balance,
-                'expDate' => $topUp->exp_date,
-                'user' => [
+            'member' => [
+                'name' => $member->name,
+                'phone' => $member->phone,
+            ],
+            'topUp' => $member->topUps
+                ->last()
+                ->paginate(15)
+                ->withQueryString()
+                ->through(fn($topUp) => [
+                    'id' => $topUp->id,
+                    'updatedAt' => $topUp->updated_at,
                     'name' => $topUp->user->name,
                     'phone' => $topUp->user->phone,
-                    'email' => $topUp->user->email,
-                ],
-            ],
+                    'platNumber' => $topUp->member->vehicleDetail(),
+                    'amount' => $topUp->amount,
+                    'type' => $topUp->member->typeMember->type,
+                    'expDate' => $topUp->exp_date,
+                ]),
         ]);
     }
 

app/Http/Requests/TopUp/StoreTopUpRequest.php

     public function rules()
     {
         return [
-            'balance' => 'required|numeric',
             'member_id' => 'required|numeric',
         ];
     }

app/Models/TopUp.php

         $query->when($filters['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
                 $query->orWhereHas('member', function ($query) use ($search) {
-                    $query->where('plat_number', 'like', '%' . $search . '%')
+                    $query->where('name', 'like', '%' . $search . '%')
                         ->orWhere('phone', 'like', '%' . $search . '%');
                 });
             });

lang/en/messages.php

 
     'error' => [
         'store' => [
+            'top_up' => 'Top up failed to be added',
             'type_member' => 'Type member failed to be added',
             'member' => 'member failed to be added',
             'change_password' => 'Password invalid',

lang/id/messages.php

 
     'error' => [
         'store' => [
+            'top_up' => 'Top up gagal ditambahkan',
             'type_member' => 'Jenis member gagal ditambahkan',
             'member' => 'Member gagal ditambahkan',
             'change_password' => 'Password lama salah',

public/js/resources_js_pages_member_Create_vue.js

 
     var submit = function submit() {
       confirm.require({
-        message: "Tagihan dikenakan untuk member baru sebesar ".concat(props.typeMember.price),
+        message: "Dikenakan tagihan untuk member baru sebesar ".concat(props.typeMember.price),
         header: 'Tagihan',
         acceptLabel: 'Bayar dan simpan',
         rejectLabel: 'Batalkan',
           formSent();
         },
         reject: function reject() {
-          console.info('transaksi digagalkan');
+          console.info('transaksi dibatalkan');
         }
       });
     };

public/js/resources_js_pages_topup_Create_vue.js

 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 /* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js");
 /* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
-/* harmony import */ var _components_AppAutocompleteBasic_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/components/AppAutocompleteBasic.vue */ "./resources/js/components/AppAutocompleteBasic.vue");
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+/* harmony import */ var primevue_useconfirm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! primevue/useconfirm */ "./node_modules/primevue/useconfirm/useconfirm.esm.js");
+/* harmony import */ var _components_AppAutocompleteBasic_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/components/AppAutocompleteBasic.vue */ "./resources/js/components/AppAutocompleteBasic.vue");
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+
 
 
 
     var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm)({
       member: null
     });
-
-    var submit = function submit() {
-      form.post(route('top-ups.store'), {
+    var confirm = (0,primevue_useconfirm__WEBPACK_IMPORTED_MODULE_3__.useConfirm)();
+
+    var formSent = function formSent() {
+      form.transform(function (data) {
+        return {
+          member_id: data.member.id
+        };
+      }).post(route('top-ups.store'), {
         onSuccess: function onSuccess() {
           return form.reset();
         }
       });
     };
 
+    var submit = function submit() {
+      confirm.require({
+        message: "Dikenakan tagihan sebesar ".concat(form.member.price),
+        header: 'Top Up',
+        acceptLabel: 'Bayar dan simpan',
+        rejectLabel: 'Batalkan',
+        accept: function accept() {
+          formSent();
+        },
+        reject: function reject() {
+          console.info('transaksi dibatalkan');
+        }
+      });
+    };
+
     var __returned__ = {
       errors: errors,
       memberOnComplete: memberOnComplete,
       memberOnSelected: memberOnSelected,
       gotoMember: gotoMember,
       form: form,
+      confirm: confirm,
+      formSent: formSent,
       submit: submit,
       computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
       watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.Head,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm,
       usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage,
-      AppAutocompleteBasic: _components_AppAutocompleteBasic_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_4__["default"]
+      useConfirm: primevue_useconfirm__WEBPACK_IMPORTED_MODULE_3__.useConfirm,
+      AppAutocompleteBasic: _components_AppAutocompleteBasic_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
 
 var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Detail Member");
 
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
-  "class": "text-base font-bold mb-0"
-}, "Nama", -1
+var _hoisted_4 = {
+  key: 0
+};
+
+var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base font-bold"
+}, " Nama ", -1
+/* HOISTED */
+);
+
+var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
 /* HOISTED */
 );
 
-var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
-  "class": "text-base font-bold mb-0"
-}, "Nomor HP", -1
+var _hoisted_7 = {
+  key: 1
+};
+
+var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base font-bold"
+}, " Nomor HP ", -1
 /* HOISTED */
 );
 
-var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
-  "class": "text-base font-bold mb-0"
-}, "Plat Kendaraan", -1
+var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
 /* HOISTED */
 );
 
-var _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
-  "class": "text-base font-bold mb-0"
-}, "Jenis Member", -1
+var _hoisted_10 = {
+  key: 2
+};
+
+var _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base font-bold"
+}, " Jenis Member ", -1
 /* HOISTED */
 );
 
-var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
-  "class": "text-base font-bold mb-0"
-}, "Berakhir", -1
+var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
 /* HOISTED */
 );
 
-var _hoisted_9 = {
+var _hoisted_13 = {
+  key: 3
+};
+
+var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base font-bold"
+}, " Tarif Member ", -1
+/* HOISTED */
+);
+
+var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_16 = {
+  key: 4
+};
+
+var _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
+  "class": "text-base font-bold"
+}, " Berakhir ", -1
+/* HOISTED */
+);
+
+var _hoisted_18 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+var _hoisted_19 = {
   "class": "grid"
 };
-var _hoisted_10 = {
+var _hoisted_20 = {
   "class": "col-12 md:col-8"
 };
 
-var _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Top Up ");
+var _hoisted_21 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Top Up ");
 
-var _hoisted_12 = {
+var _hoisted_22 = {
   "class": "grid"
 };
-var _hoisted_13 = {
+var _hoisted_23 = {
   "class": "col-12 md:col-6"
 };
-var _hoisted_14 = {
+var _hoisted_24 = {
   key: 0,
   "class": "flex flex-column"
 };
-var _hoisted_15 = {
+var _hoisted_25 = {
   "class": "font-bold"
 };
-var _hoisted_16 = {
+var _hoisted_26 = {
   "class": "font-bold"
 };
+var _hoisted_27 = {
+  "class": "flex flex-column md:flex-row justify-content-end"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ConfirmDialog = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("ConfirmDialog");
+
   var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
 
-  var _component_Divider = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Divider");
+  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
 
   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: "Top Up"
   }), (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, {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_ConfirmDialog), (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, {
         "class": "surface-200"
       }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createSlots)({
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       }, [$setup.form.member ? {
         name: "content",
         fn: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.name), 1
+          return [$setup.form.member.name ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_4, [_hoisted_5, _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.name), 1
           /* TEXT */
-          ), _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.phone), 1
+          )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $setup.form.member.phone ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_7, [_hoisted_8, _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.phone), 1
           /* TEXT */
-          ), _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.platNumber), 1
+          )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $setup.form.member.type ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_10, [_hoisted_11, _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.type), 1
           /* TEXT */
-          ), _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.type), 1
+          )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $setup.form.member.price ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_13, [_hoisted_14, _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.price), 1
           /* TEXT */
-          ), _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.expDate), 1
+          )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $setup.form.member.expDate ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_16, [_hoisted_17, _hoisted_18, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.expDate), 1
           /* TEXT */
-          )];
+          )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
         })
       } : undefined]), 1024
       /* DYNAMIC_SLOTS */
-      )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+      )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_19, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_20, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [_hoisted_11];
+          return [_hoisted_21];
         }),
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppAutocompleteBasic"], {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_22, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_23, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppAutocompleteBasic"], {
             empty: "",
             label: "Member",
             field: "name",
             onItemSelect: $setup.memberOnSelected
           }, {
             item: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function (slotProps) {
-              return [slotProps.item ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.name), 1
+              return [slotProps.item ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_24, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.name), 1
               /* TEXT */
-              ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.phone), 1
+              ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_25, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.phone), 1
               /* TEXT */
-              ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.type), 1
+              ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_26, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.type), 1
               /* TEXT */
               )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
             }),
 
           }, 8
           /* PROPS */
-          , ["modelValue", "error", "suggestions"])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Divider, {
-            type: "dashed"
-          })];
+          , ["modelValue", "error", "suggestions"])])])];
+        }),
+        footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_27, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "Topup",
+            icon: "pi pi-check",
+            "class": "p-button-outlined",
+            disabled: $setup.form.processing,
+            onClick: $setup.submit
+          }, null, 8
+          /* PROPS */
+          , ["disabled"])])];
         }),
         _: 1
         /* STABLE */

public/js/resources_js_pages_topup_Index_vue.js

       AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
       AppPagination: _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_6__["default"],
       AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_7__["default"],
-      TableHeader: _TableHeader__WEBPACK_IMPORTED_MODULE_8__["default"]
+      IndexTable: _TableHeader__WEBPACK_IMPORTED_MODULE_8__.IndexTable
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
           , ["href"])])])];
         }),
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.TableHeader, function (tableHeader) {
+          return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.IndexTable, function (indexTable) {
             return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Column, {
-              field: tableHeader.field,
-              header: tableHeader.header,
-              key: tableHeader.field
+              field: indexTable.field,
+              header: indexTable.header,
+              key: indexTable.field
             }, null, 8
             /* PROPS */
             , ["field", "header"]);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   "IndexTable": () => (/* binding */ IndexTable),
+/* harmony export */   "TopUpsTable": () => (/* binding */ TopUpsTable)
 /* harmony export */ });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+var IndexTable = [{
   field: 'updatedAt',
   header: 'Diperbaharui'
 }, {
 }, {
   field: 'expDate',
   header: 'Berakhir'
-}]);
+}];
+var TopUpsTable = [{
+  field: 'updatedAt',
+  header: 'Diperbaharui'
+}, {
+  field: 'name',
+  header: 'Nama User'
+}, {
+  field: 'phone',
+  header: 'Nomor HP User'
+}, {
+  field: 'platNumber',
+  header: 'Plat Kendaraan'
+}, {
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'amount',
+  header: 'Tarif Member'
+}, {
+  field: 'expDate',
+  header: 'Berakhir'
+}];
 
 /***/ }),
 

public/js/resources_js_pages_topup_TableHeader_js.js

 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   "IndexTable": () => (/* binding */ IndexTable),
+/* harmony export */   "TopUpsTable": () => (/* binding */ TopUpsTable)
 /* harmony export */ });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+var IndexTable = [{
   field: 'updatedAt',
   header: 'Diperbaharui'
 }, {
 }, {
   field: 'expDate',
   header: 'Berakhir'
-}]);
+}];
+var TopUpsTable = [{
+  field: 'updatedAt',
+  header: 'Diperbaharui'
+}, {
+  field: 'name',
+  header: 'Nama User'
+}, {
+  field: 'phone',
+  header: 'Nomor HP User'
+}, {
+  field: 'platNumber',
+  header: 'Plat Kendaraan'
+}, {
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'amount',
+  header: 'Tarif Member'
+}, {
+  field: 'expDate',
+  header: 'Berakhir'
+}];
 
 /***/ })
 

public/js/vue.js

 		"./resources/js/pages/topup/Create.vue",
 		"resources_js_pages_topup_Create_vue"
 	],
-	"./topup/Edit": [
-		"./resources/js/pages/topup/Edit.vue",
-		"resources_js_pages_topup_Edit_vue"
-	],
-	"./topup/Edit.vue": [
-		"./resources/js/pages/topup/Edit.vue",
-		"resources_js_pages_topup_Edit_vue"
-	],
 	"./topup/Index": [
 		"./resources/js/pages/topup/Index.vue",
 		"resources_js_pages_topup_Index_vue"
 /******/ 		// 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":"66e7c99b236f0deb","resources_js_pages_expense_Index_vue":"f85b8a458475c32f","resources_js_pages_expense_Show_vue":"8aec315380095efc","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"77d2cc7e0ffbf90e","resources_js_pages_member_Create_vue":"095d1e304d77aaa8","resources_js_pages_member_Edit_vue":"48baae4f4480f54d","resources_js_pages_member_Index_vue":"220ea5d5cd363228","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_topup_Create_vue":"5699ce5235a0af54","resources_js_pages_topup_Edit_vue":"258c3b0746574dc0","resources_js_pages_topup_Index_vue":"f3a415d3c1ec52df","resources_js_pages_topup_Show_vue":"cb35ad21e9ce163f","resources_js_pages_topup_TableHeader_js":"c0dc89df0e3b8b7d","resources_js_pages_typemember_Create_vue":"a79f5122dd4d955c","resources_js_pages_typemember_Edit_vue":"339a293819be91a7","resources_js_pages_typemember_Index_vue":"b6d16dc9b5f2b3b6","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"913e399451308fbb","resources_js_pages_typevehicle_Edit_vue":"659302538c3304bb","resources_js_pages_typevehicle_Index_vue":"a5da2be987ea0ce5","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"9407a7ca1e9268c7","resources_js_pages_user_Edit_vue":"68b60f3e274f7cd8","resources_js_pages_user_Index_vue":"f3269e9d78d4fe78","resources_js_pages_user_Show_vue":"e1c2622b8345f329","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":"66e7c99b236f0deb","resources_js_pages_expense_Index_vue":"f85b8a458475c32f","resources_js_pages_expense_Show_vue":"8aec315380095efc","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"77d2cc7e0ffbf90e","resources_js_pages_member_Create_vue":"9b0395de1134f447","resources_js_pages_member_Edit_vue":"48baae4f4480f54d","resources_js_pages_member_Index_vue":"220ea5d5cd363228","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_topup_Create_vue":"73efcea746438335","resources_js_pages_topup_Index_vue":"4213bf188c295a33","resources_js_pages_topup_Show_vue":"a8c55ac0b35fc72b","resources_js_pages_topup_TableHeader_js":"601b7c0a855ce64e","resources_js_pages_typemember_Create_vue":"a79f5122dd4d955c","resources_js_pages_typemember_Edit_vue":"339a293819be91a7","resources_js_pages_typemember_Index_vue":"b6d16dc9b5f2b3b6","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"913e399451308fbb","resources_js_pages_typevehicle_Edit_vue":"659302538c3304bb","resources_js_pages_typevehicle_Index_vue":"a5da2be987ea0ce5","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"9407a7ca1e9268c7","resources_js_pages_user_Edit_vue":"68b60f3e274f7cd8","resources_js_pages_user_Index_vue":"f3269e9d78d4fe78","resources_js_pages_user_Show_vue":"e1c2622b8345f329","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/member/Create.vue

 
 const submit = () => {
   confirm.require({
-    message: `Tagihan dikenakan untuk member baru sebesar ${props.typeMember.price}`,
+    message: `Dikenakan tagihan untuk member baru sebesar ${props.typeMember.price}`,
     header: 'Tagihan',
     acceptLabel: 'Bayar dan simpan',
     rejectLabel: 'Batalkan',
       formSent()
     },
     reject: () => {
-      console.info('transaksi digagalkan')
+      console.info('transaksi dibatalkan')
     },
   })
 }

resources/js/pages/topup/Create.vue

 import { computed, watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
 import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
+import { useConfirm } from 'primevue/useconfirm'
 import AppAutocompleteBasic from '@/components/AppAutocompleteBasic.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
   member: null,
 })
 
+const confirm = useConfirm()
+
+const formSent = () => {
+  form
+    .transform((data) => ({
+      member_id: data.member.id,
+    }))
+    .post(route('top-ups.store'), { onSuccess: () => form.reset() })
+}
+
 const submit = () => {
-  form.post(route('top-ups.store'), { onSuccess: () => form.reset() })
+  confirm.require({
+    message: `Dikenakan tagihan sebesar ${form.member.price}`,
+    header: 'Top Up',
+    acceptLabel: 'Bayar dan simpan',
+    rejectLabel: 'Batalkan',
+    accept: () => {
+      formSent()
+    },
+    reject: () => {
+      console.info('transaksi dibatalkan')
+    },
+  })
 }
 </script>
 
   <Head title="Top Up" />
 
   <AppLayout>
+    <ConfirmDialog></ConfirmDialog>
+
     <div class="grid">
       <div class="col-12 md:col-8">
         <Card class="surface-200">
           <template #title>Detail Member</template>
           <template v-if="form.member" #content>
-            <h3 class="text-base font-bold mb-0">Nama</h3>
-            <p>{{ form.member.name }}</p>
+            <p v-if="form.member.name">
+              <span class="text-base font-bold"> Nama </span>
+
+              <br />
+
+              {{ form.member.name }}
+            </p>
+
+            <p v-if="form.member.phone">
+              <span class="text-base font-bold"> Nomor HP </span>
+
+              <br />
+
+              {{ form.member.phone }}
+            </p>
+
+            <p v-if="form.member.type">
+              <span class="text-base font-bold"> Jenis Member </span>
+
+              <br />
+
+              {{ form.member.type }}
+            </p>
+
+            <p v-if="form.member.price">
+              <span class="text-base font-bold"> Tarif Member </span>
 
-            <h3 class="text-base font-bold mb-0">Nomor HP</h3>
-            <p>{{ form.member.phone }}</p>
+              <br />
 
-            <h3 class="text-base font-bold mb-0">Plat Kendaraan</h3>
-            <p>
-              {{ form.member.platNumber }}
+              {{ form.member.price }}
             </p>
 
-            <h3 class="text-base font-bold mb-0">Jenis Member</h3>
-            <p>{{ form.member.type }}</p>
+            <p v-if="form.member.expDate">
+              <span class="text-base font-bold"> Berakhir </span>
 
-            <h3 class="text-base font-bold mb-0">Berakhir</h3>
-            <p>{{ form.member.expDate }}</p>
+              <br />
+
+              {{ form.member.expDate }}
+            </p>
           </template>
         </Card>
       </div>
                 </AppAutocompleteBasic>
               </div>
             </div>
-
-            <Divider type="dashed" />
+          </template>
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Topup"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="submit"
+              />
+            </div>
           </template>
         </Card>
       </div>

resources/js/pages/topup/Index.vue

 import AppPagination from '@/components/AppPagination.vue'
 import AppButton from '@/components/AppButton.vue'
 
-import TableHeader from './TableHeader'
+import { IndexTable } from './TableHeader'
 
 const props = defineProps({
   topUp: Object,
       </template>
 
       <Column
-        v-for="tableHeader in TableHeader"
-        :field="tableHeader.field"
-        :header="tableHeader.header"
-        :key="tableHeader.field"
+        v-for="indexTable in IndexTable"
+        :field="indexTable.field"
+        :header="indexTable.header"
+        :key="indexTable.field"
       />
 
       <Column>

resources/js/pages/topup/Show.vue

+<script setup>
+import { onMounted } from 'vue'
+import { Head } from '@inertiajs/inertia-vue3'
+import AppPagination from '@/components/AppPagination.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+import { TopUpsTable } from './TableHeader'
+
+const props = defineProps({
+  member: Object,
+  topUp: Object,
+})
+
+onMounted(() => {
+  console.info(props.member)
+  console.table(props.topUp)
+})
+</script>
+
+<template>
+  <Head title="Detail Top Up" />
+
+  <AppLayout>
+    <DataTable
+      responsive-layout="scroll"
+      column-resize-mode="expand"
+      :value="topUp.data"
+      :row-hover="true"
+      :striped-rows="true"
+    >
+      <template #header>
+        <h1 class="text-2xl font-bold">Detail Top Up</h1>
+
+        <div class="grid px-2">
+          <div class="col-auto mr-7">
+            <h2>
+              <span class="text-base"> <i class="pi pi-user" /> Nama</span>
+
+              <br />
+
+              <span class="text-lg">{{ member.name }}</span>
+            </h2>
+          </div>
+
+          <div class="col-auto">
+            <h2>
+              <span class="text-base"> <i class="pi pi-phone" /> Nomor HP </span>
+
+              <br />
+
+              <span class="text-lg">{{ member.phone }}</span>
+            </h2>
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="topUpsTable in TopUpsTable"
+        :field="topUpsTable.field"
+        :header="topUpsTable.header"
+        :key="topUpsTable.field"
+      />
+    </DataTable>
+
+    <AppPagination :links="topUp.links" />
+  </AppLayout>
+</template>

resources/js/pages/topup/TableHeader.js

-export default [
+export const IndexTable = [
   { field: 'updatedAt', header: 'Diperbaharui' },
   { field: 'name', header: 'Nama' },
   { field: 'phone', header: 'Nomor HP' },
   { field: 'amount', header: 'Tarif Member' },
   { field: 'expDate', header: 'Berakhir' },
 ]
+
+export const TopUpsTable = [
+  { field: 'updatedAt', header: 'Diperbaharui' },
+  { field: 'name', header: 'Nama User' },
+  { field: 'phone', header: 'Nomor HP User' },
+  { field: 'platNumber', header: 'Plat Kendaraan' },
+  { field: 'type', header: 'Jenis Member' },
+  { field: 'amount', header: 'Tarif Member' },
+  { field: 'expDate', header: 'Berakhir' },
+]