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 Inertia\Inertia;
 
 class TopUpController extends Controller
                 ->paginate(10)
                 ->withQueryString()
                 ->through(fn($topUp) => [
+                    'id' => $topUp->id,
                     'updatedAt' => $topUp->updated_at,
                     'name' => $topUp->member->name,
                     'phone' => $topUp->member->phone,
-                    'platNumber' => $topUp->member->plat_number,
-                    'balance' => $topUp->balance,
+                    'platNumber' => $topUp->member->vehicleDetail(),
+                    'amount' => $topUp->amount,
+                    'type' => $topUp->member->typeMember->type,
                     'expDate' => $topUp->exp_date,
                 ]),
         ]);
     public function create()
     {
         return inertia('topup/Create', [
-            'typeMembers' => TypeMember::get()->transform(fn($typeMember) => [
-                'label' => $typeMember->type,
-                'value' => $typeMember->id,
-            ]),
             'members' => Inertia::lazy(
                 fn() => Member::filter(request()->only('search'))->latest()->get()->transform(fn($member) => [
                     'id' => $member->id,
                     'name' => $member->name,
                     'phone' => $member->phone,
-                    'platNumber' => $member->plat_number,
+                    'platNumber' => $member->vehicleDetail(),
+                    'type' => $member->typeMember->type,
+                    'expDate' => $member->exp_date,
                 ])
             ),
         ]);

app/Models/Member.php

         $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 . '%');
+                    ->orWhere('phone', 'like', '%' . $search . '%');
             });
         });
     }

app/Models/TopUp.php

         );
     }
 
-    protected function balance(): Attribute
+    protected function amount(): Attribute
     {
         return Attribute::make(
             get:fn($value) => (new CurrencyFormatService)->setRupiahFormat($value, true)
         );
     }
 
+    protected function expDate(): Attribute
+    {
+        return Attribute::make(
+            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y')
+        );
+    }
+
     public function member()
     {
         return $this->belongsTo(Member::class);

public/js/resources_js_pages_topup_Index_vue.js

   field: 'platNumber',
   header: 'Plat Kendaraan'
 }, {
-  field: 'balance',
-  header: 'Saldo'
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'amount',
+  header: 'Tarif Member'
 }, {
   field: 'expDate',
-  header: 'Tanggal Kadaluarsa'
+  header: 'Berakhir'
 }]);
 
 /***/ }),

public/js/resources_js_pages_topup_TableHeader_js.js

   field: 'platNumber',
   header: 'Plat Kendaraan'
 }, {
-  field: 'balance',
-  header: 'Saldo'
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'amount',
+  header: 'Tarif Member'
 }, {
   field: 'expDate',
-  header: 'Tanggal Kadaluarsa'
+  header: 'Berakhir'
 }]);
 
 /***/ })

public/js/vue.js

 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"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":"1772093ec9ad8e1f","resources_js_pages_expense_Index_vue":"51f7facd5c3c3ea6","resources_js_pages_expense_Show_vue":"6e60ec4571b580bb","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"6cd0224828ac8129","resources_js_pages_member_Create_vue":"3ca394fe875a5c72","resources_js_pages_member_Edit_vue":"7b222567b848883e","resources_js_pages_member_Index_vue":"71a31a774bb1b571","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_topup_Create_vue":"9d958cbaf19eb892","resources_js_pages_topup_Edit_vue":"258c3b0746574dc0","resources_js_pages_topup_Index_vue":"5c7eced88af886fa","resources_js_pages_topup_Show_vue":"cb35ad21e9ce163f","resources_js_pages_topup_TableHeader_js":"c803a04362b71855","resources_js_pages_typemember_Create_vue":"79728a0314d12450","resources_js_pages_typemember_Edit_vue":"94fb9b5b49338c01","resources_js_pages_typemember_Index_vue":"cd93651ebf36d5a5","resources_js_pages_typemember_TableHeader_js":"de81088b132d3e90","resources_js_pages_typevehicle_Create_vue":"0f937d93865a1ea2","resources_js_pages_typevehicle_Edit_vue":"edba97a3715ba957","resources_js_pages_typevehicle_Index_vue":"53c702d33feb6196","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"361bf2589467f820","resources_js_pages_user_Edit_vue":"fdb844cf830ec11c","resources_js_pages_user_Index_vue":"16d93eb7e5210300","resources_js_pages_user_Show_vue":"138fd92d6ae36518","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":"1772093ec9ad8e1f","resources_js_pages_expense_Index_vue":"51f7facd5c3c3ea6","resources_js_pages_expense_Show_vue":"6e60ec4571b580bb","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"6cd0224828ac8129","resources_js_pages_member_Create_vue":"3ca394fe875a5c72","resources_js_pages_member_Edit_vue":"7b222567b848883e","resources_js_pages_member_Index_vue":"71a31a774bb1b571","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_topup_Create_vue":"8c4788849612d68f","resources_js_pages_topup_Edit_vue":"258c3b0746574dc0","resources_js_pages_topup_Index_vue":"70bcf9869c3024d0","resources_js_pages_topup_Show_vue":"cb35ad21e9ce163f","resources_js_pages_topup_TableHeader_js":"c0dc89df0e3b8b7d","resources_js_pages_typemember_Create_vue":"79728a0314d12450","resources_js_pages_typemember_Edit_vue":"94fb9b5b49338c01","resources_js_pages_typemember_Index_vue":"cd93651ebf36d5a5","resources_js_pages_typemember_TableHeader_js":"de81088b132d3e90","resources_js_pages_typevehicle_Create_vue":"0f937d93865a1ea2","resources_js_pages_typevehicle_Edit_vue":"edba97a3715ba957","resources_js_pages_typevehicle_Index_vue":"53c702d33feb6196","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"361bf2589467f820","resources_js_pages_user_Edit_vue":"fdb844cf830ec11c","resources_js_pages_user_Index_vue":"16d93eb7e5210300","resources_js_pages_user_Show_vue":"138fd92d6ae36518","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/topup/Create.vue

 <script setup>
-import { computed, watch, ref } from 'vue'
+import { computed, watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
 import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
-import AppLayout from '@/layouts/AppLayout.vue'
 import AppAutocompleteBasic from '@/components/AppAutocompleteBasic.vue'
-import AppInputNumber from '@/components/AppInputNumber.vue'
-import AppDropdown from '@/components/AppDropdown.vue'
-import AppInputText from '@/components/AppInputText.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
 
 defineProps({
   members: {
     type: Array,
     default: [],
   },
-  typeMembers: Array,
 })
 
 const errors = computed(() => usePage().props.value.errors)
   form.clearErrors()
 })
 
-const memberDialogShow = ref(false)
-
-const memberDialogOnHide = () => {
-  formMember.reset()
-
-  formMember.clearErrors()
-
-  usePage().props.value.errors = {}
-
-  usePage().props.value.flash.error = null
-}
-
 const memberOnComplete = (event) => {
   Inertia.reload({
     data: { search: event.query },
   form.member = event.value
 }
 
-const formMember = useForm({
-  name: null,
-  phone: null,
-  plat_number: null,
-  type_member_id: null,
-})
-
-const submitMember = () => {
-  formMember.post(route('members.store'), {
-    onSuccess: () => {
-      formMember.reset()
-
-      memberDialogShow.value = !memberDialogShow.value
-    },
-  })
+const gotoMember = () => {
+  return Inertia.get(route('members.create'))
 }
 
 const form = useForm({
-  balance: null,
   member: null,
 })
 
 const submit = () => {
-  form
-    .transform((data) => ({
-      balance: data.balance,
-      member_id: data.member.id,
-    }))
-    .post(route('top-ups.store'), { onSuccess: () => form.reset() })
+  form.post(route('top-ups.store'), { onSuccess: () => form.reset() })
 }
 </script>
 
   <Head title="Top Up" />
 
   <AppLayout>
+    <template v-if="form.member">
+      <h1 class="text-2xl font-bold">Detail Member</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">{{ form.member.name }}</span>
+          </h2>
+        </div>
+
+        <div class="col-auto mr-7">
+          <h2>
+            <span class="text-base"> <i class="pi pi-mobile" /> No HP</span>
+
+            <br />
+
+            <span class="text-lg">{{ form.member.phone }}</span>
+          </h2>
+        </div>
+      </div>
+
+      <div class="grid">
+        <div class="col-12">
+          <h2 class="mb-4">
+            <span class="text-base">
+              <i class="pi pi-car red-700" />
+              Detail Plat Kendaraan
+            </span>
+
+            <br />
+
+            <span class="text-lg">{{ form.member.platNumber }}</span>
+          </h2>
+        </div>
+      </div>
+    </template>
+
     <div class="grid">
       <div class="col-12 md:col-8">
         <Card>
           <template #title> Top Up </template>
           <template #content>
             <div class="grid">
-              <div class="col-12 md:col-6">
-                <AppInputNumber v-model="form.balance" label="Saldo" placeholder="saldo" :error="form.errors.balance" />
-              </div>
-
               <div class="col-12 md:col-6">
                 <AppAutocompleteBasic
                   empty
                   label="Member"
-                  field="platNumber"
+                  field="name"
                   placeholder="member"
                   v-model="form.member"
-                  :error="form.errors.member_id"
+                  :error="form.errors.member"
                   :suggestions="members"
                   @complete="memberOnComplete"
                   @item-select="memberOnSelected"
                       <div class="flex flex-column">
                         <span>{{ slotProps.item.name }}</span>
                         <span class="font-bold">{{ slotProps.item.phone }}</span>
-                        <span class="font-bold">{{ slotProps.item.platNumber }}</span>
+                        <span class="font-bold">{{ slotProps.item.type }}</span>
                       </div>
                     </template>
                   </template>
 
                   <template #empty>
-                    <span
-                      class="cursor-pointer"
-                      style="color: var(--primary-color)"
-                      @click="memberDialogShow = !memberDialogShow"
-                    >
-                      Tambah Member
+                    <span class="cursor-pointer" style="color: var(--primary-color)" @click="gotoMember">
+                      Buat Member
                     </span>
                   </template>
                 </AppAutocompleteBasic>
         </Card>
       </div>
     </div>
-
-    <Dialog
-      modal
-      v-model:visible="memberDialogShow"
-      class="p-fluid"
-      header="Tambah Member"
-      :style="{ width: '450px' }"
-      :breakpoints="{ '960px': '75vw' }"
-      @hide="memberDialogOnHide"
-    >
-      <div class="grid">
-        <div class="col-12 md:col-6">
-          <AppInputText v-model="formMember.name" label="Nama" placeholder="nama" :error="formMember.errors.name" />
-        </div>
-
-        <div class="col-12 md:col-6">
-          <AppInputText
-            v-model="formMember.phone"
-            label="Nomor HP"
-            placeholder="nomor hp"
-            :error="formMember.errors.phone"
-          />
-        </div>
-
-        <div class="col-12 md:col-6">
-          <AppInputText
-            v-model="formMember.plat_number"
-            label="Plat Kendaraan"
-            placeholder="plat kendaraan"
-            :error="formMember.errors.plat_number"
-          />
-        </div>
-
-        <div class="col-12 md:col-6">
-          <AppDropdown
-            label="Jenis member"
-            placeholder="pilih satu"
-            v-model="formMember.type_member_id"
-            :options="typeMembers"
-            :error="formMember.errors.type_member_id"
-          />
-        </div>
-      </div>
-
-      <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="formMember.processing"
-            @click="submitMember"
-          />
-        </div>
-      </template>
-    </Dialog>
   </AppLayout>
 </template>

resources/js/pages/topup/TableHeader.js

   { field: 'name', header: 'Nama' },
   { field: 'phone', header: 'Nomor HP' },
   { field: 'platNumber', header: 'Plat Kendaraan' },
-  { field: 'balance', header: 'Saldo' },
-  { field: 'expDate', header: 'Tanggal Kadaluarsa' },
+  { field: 'type', header: 'Jenis Member' },
+  { field: 'amount', header: 'Tarif Member' },
+  { field: 'expDate', header: 'Berakhir' },
 ]