fix: master topup

app/Http/Controllers/MemberController.php

@@ -33,7 +33,7 @@ class MemberController extends Controller
                     'phone' => $member->phone,
                     'platNumber' => $member->vehicleDetail(),
                     'type' => $member->typeMember->type,
-                    'price' => $member->typeMember->price,
+                    'price' => $member->topUps()->latest()->first()->amount,
                     'expDate' => $member->exp_date,
                 ]),
         ]);

public/js/resources_js_pages_expense_Show_vue.js

@@ -949,7 +949,7 @@ var _hoisted_17 = {
 var _hoisted_18 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
   "class": "text-base"
 }, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
-  "class": "pi pi-wallet red-700"
+  "class": "pi pi-wallet"
 }), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Pengeluaran ")], -1
 /* HOISTED */
 );

public/js/resources_js_pages_topup_Create_vue.js

@@ -1081,132 +1081,111 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
-
-var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h1", {
-  "class": "text-2xl font-bold"
-}, "Detail Member", -1
-/* HOISTED */
-);
-
-var _hoisted_2 = {
-  "class": "grid px-2"
+var _hoisted_1 = {
+  "class": "grid"
 };
-var _hoisted_3 = {
-  "class": "col-auto mr-7"
+var _hoisted_2 = {
+  "class": "col-12 md:col-8"
 };
 
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
-  "class": "text-base"
-}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
-  "class": "pi pi-user"
-}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Nama")], -1
-/* HOISTED */
-);
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Detail Member");
 
-var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
+  "class": "text-base font-bold mb-0"
+}, "Nama", -1
 /* HOISTED */
 );
 
-var _hoisted_6 = {
-  "class": "text-lg"
-};
-var _hoisted_7 = {
-  "class": "col-auto mr-7"
-};
-
-var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
-  "class": "text-base"
-}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
-  "class": "pi pi-mobile"
-}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" No HP")], -1
+var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
+  "class": "text-base font-bold mb-0"
+}, "Nomor HP", -1
 /* HOISTED */
 );
 
-var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
+  "class": "text-base font-bold mb-0"
+}, "Plat Kendaraan", -1
 /* HOISTED */
 );
 
-var _hoisted_10 = {
-  "class": "text-lg"
-};
-var _hoisted_11 = {
-  "class": "grid"
-};
-var _hoisted_12 = {
-  "class": "col-12"
-};
-var _hoisted_13 = {
-  "class": "mb-4"
-};
-
-var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
-  "class": "text-base"
-}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
-  "class": "pi pi-car red-700"
-}), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Detail Plat Kendaraan ")], -1
+var _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
+  "class": "text-base font-bold mb-0"
+}, "Jenis Member", -1
 /* HOISTED */
 );
 
-var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("br", null, null, -1
+var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h3", {
+  "class": "text-base font-bold mb-0"
+}, "Berakhir", -1
 /* HOISTED */
 );
 
-var _hoisted_16 = {
-  "class": "text-lg"
-};
-var _hoisted_17 = {
+var _hoisted_9 = {
   "class": "grid"
 };
-var _hoisted_18 = {
+var _hoisted_10 = {
   "class": "col-12 md:col-8"
 };
 
-var _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Top Up ");
+var _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Top Up ");
 
-var _hoisted_20 = {
+var _hoisted_12 = {
   "class": "grid"
 };
-var _hoisted_21 = {
+var _hoisted_13 = {
   "class": "col-12 md:col-6"
 };
-var _hoisted_22 = {
+var _hoisted_14 = {
   key: 0,
   "class": "flex flex-column"
 };
-var _hoisted_23 = {
+var _hoisted_15 = {
   "class": "font-bold"
 };
-var _hoisted_24 = {
+var _hoisted_16 = {
   "class": "font-bold"
 };
-var _hoisted_25 = {
-  "class": "flex flex-column md:flex-row justify-content-end"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
 
+  var _component_Divider = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Divider");
+
   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 [$setup.form.member ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-        key: 0
-      }, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_4, _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.name), 1
-      /* TEXT */
-      )])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", null, [_hoisted_8, _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.phone), 1
-      /* TEXT */
-      )])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("h2", _hoisted_13, [_hoisted_14, _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.platNumber), 1
-      /* TEXT */
-      )])])])], 64
-      /* STABLE_FRAGMENT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+      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, {
+        "class": "surface-200"
+      }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createSlots)({
+        title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [_hoisted_3];
+        }),
+        _: 2
+        /* DYNAMIC */
+
+      }, [$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
+          /* TEXT */
+          ), _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (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
+          /* TEXT */
+          ), _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.form.member.type), 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
+          /* TEXT */
+          )];
+        })
+      } : 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, {
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [_hoisted_19];
+          return [_hoisted_11];
         }),
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_20, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_21, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppAutocompleteBasic"], {
+          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"], {
             empty: "",
             label: "Member",
             field: "name",
@@ -1221,11 +1200,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             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_22, [(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_14, [(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_23, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.phone), 1
+              ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.phone), 1
               /* TEXT */
-              ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_24, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.type), 1
+              ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(slotProps.item.type), 1
               /* TEXT */
               )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
             }),
@@ -1243,18 +1222,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
           }, 8
           /* PROPS */
-          , ["modelValue", "error", "suggestions"])])])];
-        }),
-        footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_25, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-            label: "Simpan",
-            icon: "pi pi-check",
-            "class": "p-button-outlined",
-            disabled: $setup.form.processing,
-            onClick: $setup.submit
-          }, null, 8
-          /* PROPS */
-          , ["disabled"])])];
+          , ["modelValue", "error", "suggestions"])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Divider, {
+            type: "dashed"
+          })];
         }),
         _: 1
         /* STABLE */

public/js/vue.js

@@ -58101,7 +58101,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":"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] + "";
+/******/ 			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":"6200e318fe2f7fed","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":"24940afcdac09553","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/expense/Show.vue

@@ -48,7 +48,7 @@ defineProps({
       <div class="col-12">
         <h2 class="mb-4">
           <span class="text-base">
-            <i class="pi pi-wallet red-700" />
+            <i class="pi pi-wallet" />
             Pengeluaran
           </span>
 

resources/js/pages/topup/Create.vue

@@ -46,46 +46,31 @@ const submit = () => {
   <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>
+    <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>
 
-            <br />
+            <h3 class="text-base font-bold mb-0">Nomor HP</h3>
+            <p>{{ form.member.phone }}</p>
 
-            <span class="text-lg">{{ form.member.phone }}</span>
-          </h2>
-        </div>
-      </div>
+            <h3 class="text-base font-bold mb-0">Plat Kendaraan</h3>
+            <p>
+              {{ form.member.platNumber }}
+            </p>
 
-      <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>
+            <h3 class="text-base font-bold mb-0">Jenis Member</h3>
+            <p>{{ form.member.type }}</p>
 
-            <br />
-
-            <span class="text-lg">{{ form.member.platNumber }}</span>
-          </h2>
-        </div>
+            <h3 class="text-base font-bold mb-0">Berakhir</h3>
+            <p>{{ form.member.expDate }}</p>
+          </template>
+        </Card>
       </div>
-    </template>
+    </div>
 
     <div class="grid">
       <div class="col-12 md:col-8">
@@ -123,18 +108,8 @@ const submit = () => {
                 </AppAutocompleteBasic>
               </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>
+            <Divider type="dashed" />
           </template>
         </Card>
       </div>