refactor: outlet master

public/js/resources_js_pages_customer_Create_vue.js

 
 /***/ }),
 
-/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js":
-/*!**************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=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__ = ({
-  props: {
-    message: String,
-    header: {
-      type: String,
-      "default": 'Peringatan'
-    },
-    cancelLabel: {
-      type: String,
-      "default": 'Tidak'
-    },
-    agreeLabel: {
-      type: String,
-      "default": 'Ya'
-    }
-  },
-  emits: ['cancel', 'agree'],
-  setup: function setup(__props, _ref) {
-    var expose = _ref.expose;
-    expose();
-    var __returned__ = {};
-    Object.defineProperty(__returned__, '__isScriptSetup', {
-      enumerable: false,
-      value: true
-    });
-    return __returned__;
-  }
-});
-
-/***/ }),
-
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js":
 /*!****************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js ***!
 /* harmony import */ var _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/components/AppButton.vue */ "./resources/js/components/AppButton.vue");
 /* harmony import */ var _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/components/AppDropdown.vue */ "./resources/js/components/AppDropdown.vue");
 /* harmony import */ var _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/components/AppInputText.vue */ "./resources/js/components/AppInputText.vue");
-/* harmony import */ var _components_AppDialog_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/components/AppDialog.vue */ "./resources/js/components/AppDialog.vue");
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
-
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
 
 
 
       AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
       AppDropdown: _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
       AppInputText: _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
-      AppDialog: _components_AppDialog_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_4__["default"]
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
 
 /***/ }),
 
-/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e":
-/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e ***!
-  \*******************************************************************************************************************************************************************************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "render": () => (/* binding */ render)
-/* harmony export */ });
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
-
-var _hoisted_1 = {
-  "class": "flex align-items-center justify-content-center"
-};
-
-var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("i", {
-  "class": "pi pi-exclamation-triangle mr-3",
-  style: {
-    "font-size": "2rem"
-  }
-}, null, -1
-/* HOISTED */
-);
-
-var _hoisted_3 = {
-  key: 0
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
-  var _component_Dialog = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dialog");
-
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Dialog, {
-    header: $props.header,
-    style: {
-      width: '450px'
-    },
-    modal: true,
-    breakpoints: {
-      '960px': '75vw'
-    }
-  }, {
-    footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-        label: $props.cancelLabel,
-        icon: "pi pi-times",
-        "class": "p-button-text",
-        onClick: _cache[0] || (_cache[0] = function ($event) {
-          return _ctx.$emit('cancel');
-        })
-      }, null, 8
-      /* PROPS */
-      , ["label"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
-        label: $props.agreeLabel,
-        icon: "pi pi-check",
-        "class": "p-button-text",
-        onClick: _cache[1] || (_cache[1] = function ($event) {
-          return _ctx.$emit('agree');
-        })
-      }, null, 8
-      /* PROPS */
-      , ["label"])];
-    }),
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [_hoisted_2, $props.message ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("p", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.message), 1
-      /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])];
-    }),
-    _: 1
-    /* STABLE */
-
-  }, 8
-  /* PROPS */
-  , ["header"]);
-}
-
-/***/ }),
-
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992":
 /*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992 ***!
 if (false) {}
 
 
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
-
-/***/ }),
-
-/***/ "./resources/js/components/AppDialog.vue":
-/*!***********************************************!*\
-  !*** ./resources/js/components/AppDialog.vue ***!
-  \***********************************************/
-/***/ ((__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 import */ var _AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AppDialog.vue?vue&type=template&id=336aa46e */ "./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e");
-/* harmony import */ var _AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppDialog.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js");
-/* harmony import */ var _home_dijitalcode_Projects_dev_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
-
-
-
-
-;
-const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_dev_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/AppDialog.vue"]])
-/* hot reload */
-if (false) {}
-
-
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
 /***/ }),
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppButton_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppButton.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppButton.vue?vue&type=script&setup=true&lang=js");
  
 
-/***/ }),
-
-/***/ "./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js":
-/*!**********************************************************************************!*\
-  !*** ./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js ***!
-  \**********************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
-/* harmony export */ });
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDialog.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=script&setup=true&lang=js");
- 
-
 /***/ }),
 
 /***/ "./resources/js/components/AppDropdown.vue?vue&type=script&setup=true&lang=js":
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppButton_vue_vue_type_template_id_c9506d50__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppButton.vue?vue&type=template&id=c9506d50 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppButton.vue?vue&type=template&id=c9506d50");
 
 
-/***/ }),
-
-/***/ "./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e":
-/*!*****************************************************************************!*\
-  !*** ./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e ***!
-  \*****************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__.render)
-/* harmony export */ });
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppDialog_vue_vue_type_template_id_336aa46e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppDialog.vue?vue&type=template&id=336aa46e */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppDialog.vue?vue&type=template&id=336aa46e");
-
-
 /***/ }),
 
 /***/ "./resources/js/components/AppDropdown.vue?vue&type=template&id=ce0d1992":

public/js/resources_js_pages_outlet_TableHeader_js.js

+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_outlet_TableHeader_js"],{
+
+/***/ "./resources/js/pages/outlet/TableHeader.js":
+/*!**************************************************!*\
+  !*** ./resources/js/pages/outlet/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: 'outlet_number',
+  header: 'Id Outlet'
+}, {
+  field: 'name',
+  header: 'Nama'
+}, {
+  field: 'phone',
+  header: 'No HP'
+}, {
+  field: 'address',
+  header: 'Alamat'
+}]);
+
+/***/ })
+
+}]);

public/js/vue.js

 		"./resources/js/pages/outlet/Index.vue",
 		"resources_js_pages_outlet_Index_vue"
 	],
+	"./outlet/TableHeader": [
+		"./resources/js/pages/outlet/TableHeader.js",
+		"resources_js_pages_outlet_TableHeader_js"
+	],
+	"./outlet/TableHeader.js": [
+		"./resources/js/pages/outlet/TableHeader.js",
+		"resources_js_pages_outlet_TableHeader_js"
+	],
 	"./user/Create": [
 		"./resources/js/pages/user/Create.vue",
 		"resources_js_pages_user_Create_vue"
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_auth_ForgotPassword_vue":"30c9f46c66d8a730","resources_js_pages_auth_Login_vue":"83c27ad5e582a71f","resources_js_pages_auth_ResetPassword_vue":"fee80cdfce4206fb","resources_js_pages_auth_VerifyEmail_vue":"632c69e9e8e9c0af","resources_js_pages_customer_Create_vue":"70e866180ccc5c19","resources_js_pages_customer_Edit_vue":"986cfff059399280","resources_js_pages_customer_Index_vue":"89afeac23faa853b","resources_js_pages_customer_TableHeader_js":"be6685f342bbd7c2","resources_js_pages_laundry_Create_vue":"caa3a15d5de03139","resources_js_pages_laundry_Edit_vue":"0a5134292fb1ca38","resources_js_pages_laundry_Index_vue":"00bc6dad90bff53d","resources_js_pages_outlet_Create_vue":"1a75e2e200aa94c7","resources_js_pages_outlet_Edit_vue":"212797fbc07e8560","resources_js_pages_outlet_Index_vue":"2c7831891841a203","resources_js_pages_user_Create_vue":"9a026560c48a81c6","resources_js_pages_user_Edit_vue":"5910e5432eeceb00","resources_js_pages_user_Index_vue":"3dc5212ff1dc0b19","resources_js_pages_user_TableHeader_js":"c19ccf0fa7c2fb2b"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_auth_ForgotPassword_vue":"30c9f46c66d8a730","resources_js_pages_auth_Login_vue":"83c27ad5e582a71f","resources_js_pages_auth_ResetPassword_vue":"fee80cdfce4206fb","resources_js_pages_auth_VerifyEmail_vue":"632c69e9e8e9c0af","resources_js_pages_customer_Create_vue":"935626d17b99c29a","resources_js_pages_customer_Edit_vue":"986cfff059399280","resources_js_pages_customer_Index_vue":"89afeac23faa853b","resources_js_pages_customer_TableHeader_js":"be6685f342bbd7c2","resources_js_pages_laundry_Create_vue":"caa3a15d5de03139","resources_js_pages_laundry_Edit_vue":"0a5134292fb1ca38","resources_js_pages_laundry_Index_vue":"00bc6dad90bff53d","resources_js_pages_outlet_Create_vue":"5c72446fc4abfb32","resources_js_pages_outlet_Edit_vue":"458b77e9d1813ab9","resources_js_pages_outlet_Index_vue":"19e833b73f2287ff","resources_js_pages_outlet_TableHeader_js":"960433b5f8e003c1","resources_js_pages_user_Create_vue":"9a026560c48a81c6","resources_js_pages_user_Edit_vue":"5910e5432eeceb00","resources_js_pages_user_Index_vue":"3dc5212ff1dc0b19","resources_js_pages_user_TableHeader_js":"c19ccf0fa7c2fb2b"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/customer/Create.vue

 <script setup>
 import { Head, useForm } from '@inertiajs/inertia-vue3'
-
 import AppButton from '@/components/AppButton.vue'
 import AppDropdown from '@/components/AppDropdown.vue'
 import AppInputText from '@/components/AppInputText.vue'
-import AppDialog from '@/components/AppDialog.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 const props = defineProps({

resources/js/pages/outlet/Create.vue

 <script setup>
 import { Head, useForm } from '@inertiajs/inertia-vue3'
-
-import AppButtonCreate from '@/components/AppButtonCreate.vue'
-import AppTextInput from '@/components/AppTextInput.vue'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import AppButton from '@/components/AppButton.vue'
+import AppInputText from '@/components/AppInputText.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
 
 const props = defineProps({
   outlet_number: String,
 <template>
   <Head title="Tambah Outlet" />
 
-  <DefaultLayout>
-    <CRow>
-      <CCol md="8">
-        <CCard color="light" class="border-light">
-          <CForm @submit.prevent="submit">
-            <CRow class="p-4">
-              <CCol md="6" class="mb-4">
-                <CFormLabel>Id Outlet</CFormLabel>
-                <CFormInput disabled v-model="form.outlet_number" />
-              </CCol>
-
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
-              </CCol>
-
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
-              </CCol>
-
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
-              </CCol>
-            </CRow>
-
-            <CCardFooter class="d-flex justify-content-end">
-              <AppButtonCreate :disabled="form.processing">Tambah Outlet</AppButtonCreate>
-            </CCardFooter>
-          </CForm>
-        </CCard>
-      </CCol>
-    </CRow>
-  </DefaultLayout>
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText :disabled="true" label="Id Outlet" v-model="form.outlet_number" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex justify-content-end">
+              <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
 </template>

resources/js/pages/outlet/Edit.vue

 <script setup>
+import { ref } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
 import { Head, useForm } from '@inertiajs/inertia-vue3'
-
-import AppTextInput from '@/components/AppTextInput.vue'
-import AppButtonCreate from '@/components/AppButtonCreate.vue'
-import AppButtonDelete from '@/components/AppButtonDelete.vue'
-import AppButtonAction from '@/components/AppButtonAction.vue'
-import AppModalAlert from '@/components/AppModalAlert.vue'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import AppButton from '@/components/AppButton.vue'
+import AppInputText from '@/components/AppInputText.vue'
+import AppDialog from '@/components/AppDialog.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
 
 const props = defineProps({
   outlet: Object,
 const submit = () => {
   form.put(route('outlets.update', props.outlet.id))
 }
+
+const visibleDialog = ref(false)
+
+const confirmDialog = () => {
+  visibleDialog.value = true
+}
+
+const onAgree = (id) => Inertia.delete(route('outlets.destroy', id))
+
+const onCancel = () => (visibleDialog.value = false)
 </script>
 
 <template>
-  <Head title="Ubah Customer" />
-
-  <DefaultLayout v-slot="{ toggleModalAlert }">
-    <CRow>
-      <CCol md="8">
-        <CCard color="light" class="border-light">
-          <CForm @submit.prevent="submit">
-            <CRow class="p-4">
-              <CCol md="6" class="mb-4">
-                <CFormLabel>Id Outlet</CFormLabel>
-                <CFormInput disabled v-model="form.outlet_number" />
-              </CCol>
+  <Head title="Ubah Outlet" />
 
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
-              </CCol>
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText :disabled="true" label="Id Outlet" v-model="form.outlet_number" />
+              </div>
 
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
-              </CCol>
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
+              </div>
 
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
-              </CCol>
-            </CRow>
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
+              </div>
 
-            <CCardFooter class="d-flex justify-content-between">
-              <AppButtonAction @click="toggleModalAlert">Hapus Outlet</AppButtonAction>
+              <div class="col-12 md:col-6">
+                <AppInputText label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
+              </div>
+            </div>
+          </template>
 
-              <AppModalAlert>
-                Anda yakin ingin mengahapus outlet ini?
+          <template #footer>
+            <div
+              class="flex flex-column sm:flex-row align-items-center sm:justify-content-center sm:justify-content-between"
+            >
+              <AppDialog
+                message="Yakin akan menghapus data ini?"
+                v-model:visible="visibleDialog"
+                @agree="onAgree(outlet.id)"
+                @cancel="onCancel"
+              />
 
-                <template #footer>
-                  <AppButtonDelete :href="route('outlets.destroy', outlet.id)">Hapus Outlet</AppButtonDelete>
-                </template>
-              </AppModalAlert>
+              <Button label="Hapus" icon="pi pi-trash" class="p-button-text p-button-danger" @click="confirmDialog" />
 
-              <AppButtonCreate :disabled="form.processing">Ubah Outlet</AppButtonCreate>
-            </CCardFooter>
-          </CForm>
-        </CCard>
-      </CCol>
-    </CRow>
-  </DefaultLayout>
+              <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
 </template>

resources/js/pages/outlet/Index.vue

 <script setup>
-import { Head } from '@inertiajs/inertia-vue3'
-
-import AppTable from '@/components/AppTable.vue'
-import AppButtonMove from '@/components/AppButtonMove.vue'
-import AppButtonDetail from '@/components/AppButtonDetail.vue'
+import { Head, Link } from '@inertiajs/inertia-vue3'
+import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+import TableHeader from './TableHeader'
 
 defineProps({
   outlets: Object,
 <template>
   <Head title="Daftar Outlet" />
 
-  <DefaultLayout>
-    <CRow class="mb-4">
-      <CCol></CCol>
-
-      <CCol xs="auto">
-        <AppButtonMove :href="route('outlets.create')">Tambah Outlet</AppButtonMove>
-      </CCol>
-    </CRow>
-
-    <CRow>
-      <CCol>
-        <AppTable>
-          <template #table-head>
-            <CTableRow>
-              <CTableHeaderCell>Id Outlet</CTableHeaderCell>
-              <CTableHeaderCell>Nama</CTableHeaderCell>
-              <CTableHeaderCell>HP</CTableHeaderCell>
-              <CTableHeaderCell>Alamat</CTableHeaderCell>
-            </CTableRow>
-          </template>
-          <template #table-body>
-            <CTableRow v-for="outlet in outlets.data" :key="outlet.id">
-              <CTableDataCell>{{ outlet.outlet_number }}</CTableDataCell>
-              <CTableDataCell>{{ outlet.name }}</CTableDataCell>
-              <CTableDataCell>{{ outlet.phone }}</CTableDataCell>
-              <CTableDataCell>{{ outlet.address }}</CTableDataCell>
-              <CTableDataCell>
-                <AppButtonDetail :href="route('outlets.edit', outlet.id)" />
-              </CTableDataCell>
-            </CTableRow>
-          </template>
-        </AppTable>
-      </CCol>
-    </CRow>
-
-    <CRow>
-      <AppPagination :links="outlets.links" />
-    </CRow>
-  </DefaultLayout>
+  <AppLayout>
+    <DataTable
+      responsiveLayout="scroll"
+      columnResizeMode="expand"
+      :value="outlets.data"
+      :rowHover="true"
+      :stripedRows="true"
+    >
+      <template #header>
+        <div class="grid">
+          <div class="col-12 md:col-6">
+            <div class="flex align-items-center">
+              <h5 class="mr-3 mb-0">Outlet</h5>
+
+              <InputText class="w-full md:w-27rem" placeholder="cari..." />
+            </div>
+          </div>
+
+          <div class="col-12 md:col-6 flex justify-content-end">
+            <AppButton :href="route('outlets.create')" label="Tambah Outlet" icon="pi pi-pencil" />
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="tableHeader in TableHeader"
+        :field="tableHeader.field"
+        :header="tableHeader.header"
+        :key="tableHeader.field"
+      />
+
+      <Column>
+        <template #body="{ data }">
+          <Link
+            as="button"
+            :href="route('outlets.edit', data.id)"
+            class="p-button p-component p-button-icon-only p-button-rounded p-button-text"
+          >
+            <i class="pi pi-angle-double-right p-button-icon"></i>
+          </Link>
+        </template>
+      </Column>
+    </DataTable>
+
+    <AppPagination :links="outlets.links" />
+  </AppLayout>
 </template>

resources/js/pages/outlet/TableHeader.js

+export default [
+  { field: 'outlet_number', header: 'Id Outlet' },
+  { field: 'name', header: 'Nama' },
+  { field: 'phone', header: 'No HP' },
+  { field: 'address', header: 'Alamat' },
+]