feat(admin subscription): add page subscription and tabs

app/components/admin/subscription/features/add.vue

@@ -0,0 +1,22 @@
+<template>
+  <admin-subscription-features-form
+    mode="add"
+    :loading="loadingAddItem"
+    @submit="add"
+  />
+</template>
+
+<script setup lang="ts">
+import type { AddAdminSubscriptionFeatureDTO } from '@/types'
+
+const emit = defineEmits(['AddItemSuccessFull'])
+const { addItem, loadingAddItem } = useSubscriptionFeatureAdmin()
+
+const add = async (payload: AddAdminSubscriptionFeatureDTO) => {
+  const response = await addItem(payload)
+
+  if (response.succeeded) {
+    emit('AddItemSuccessFull')
+  }
+}
+</script>

app/components/admin/subscription/features/detail.vue

@@ -0,0 +1,31 @@
+<template>
+  <admin-subscription-features-form
+    mode="edit"
+    :initial-value="item"
+    :loading="loadingEditItem"
+    @submit="edit"
+  />
+</template>
+
+<script setup lang="ts">
+import type {
+  AddAdminSubscriptionFeatureDTO,
+  AdminSubscriptionFeatureDTO,
+} from '@/types'
+
+interface DetailProps {
+  item: AdminSubscriptionFeatureDTO
+}
+
+const props = defineProps<DetailProps>()
+const emit = defineEmits(['EditItemSuccessFull'])
+const { editItem, loadingEditItem } = useSubscriptionFeatureAdmin()
+
+const edit = async (payload: AddAdminSubscriptionFeatureDTO) => {
+  const response = await editItem(payload, props.item.id)
+
+  if (response.succeeded) {
+    emit('EditItemSuccessFull')
+  }
+}
+</script>

app/components/admin/subscription/features/form.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="w-100 d-flex flex-column pa-4">
+    <v-form
+      v-model="isFormValid"
+      class="w-100 d-flex flex-column align-start ga-2"
+    >
+      <div class="w-100 d-flex flex-column align-start justify-start ga-1">
+        <common-gombo-box
+          v-model="form.code"
+          label="Code"
+          :items="featurCodes.map((item) => ({
+            id: item,
+            title: item,
+          }))"
+          :data-loading="loadingGetFeatureCodes"
+          rounded="lg"
+          density="compact"
+          base-color="grey200"
+          color="primary"
+          :defalut-lable="false"
+          :rules="[required]"
+        />
+      </div>
+
+      <div class="w-100 d-flex flex-column align-start justify-start ga-1">
+        <div class="text-h6 text-grey700 ml-2">
+          Name
+        </div>
+        <v-text-field
+          v-model="form.name"
+          rounded="lg"
+          density="compact"
+          placeholder="Name"
+          variant="outlined"
+          autocomplete="off"
+          persistent-clear
+          base-color="grey200"
+          color="primary"
+          active-color="primary"
+          bg-color="white"
+          class="w-100"
+          :rules="[required]"
+        />
+      </div>
+
+      <div class="w-100 d-flex flex-column align-start justify-start ga-1">
+        <div class="text-h6 text-grey700 ml-2">
+          Description
+        </div>
+        <v-textarea
+          v-model="form.description"
+          rounded="lg"
+          density="compact"
+          placeholder="Description"
+          variant="outlined"
+          autocomplete="off"
+          persistent-clear
+          base-color="grey200"
+          color="primary"
+          active-color="primary"
+          bg-color="white"
+          class="w-100"
+          rows="3"
+          auto-grow
+          :rules="[required]"
+        />
+      </div>
+
+      <div class="w-100 d-flex flex-column align-start justify-start ga-1">
+        <v-checkbox
+          v-model="form.isActive"
+          color="primary"
+          class="text-h4"
+          hide-details
+          false-icon="md:check_box_outline_blank"
+          true-icon="md:check_box"
+        >
+          <template #label>
+            <span class="text-h6 text-grey700 text-no-wrap ml-2">Is Active</span>
+          </template>
+        </v-checkbox>
+      </div>
+    </v-form>
+
+    <v-btn
+      color="success"
+      rounded="xl"
+      variant="outlined"
+      height="40"
+      width="200"
+      class="text-h5 mt-8 mx-auto"
+      :loading="loading"
+      :disabled="!isFormValid || loading"
+      flat
+      @click="submit"
+    >
+      {{ mode === 'add' ? 'Add' : 'Edit' }}
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  AddAdminSubscriptionFeatureDTO,
+  AdminSubscriptionFeatureDTO,
+} from '@/types'
+
+interface FeatureFormProps {
+  mode: 'add' | 'edit'
+  initialValue?: AdminSubscriptionFeatureDTO | null
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<FeatureFormProps>(), {
+  initialValue: null,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  submit: [payload: AddAdminSubscriptionFeatureDTO]
+}>()
+
+const { required } = useValidationRules()
+const { featurCodes,
+  loadingGetFeatureCodes,
+  getFeatureCodes } = useSubscriptionFeatureAdmin()
+
+const form = reactive<AddAdminSubscriptionFeatureDTO>({
+  code: '',
+  name: '',
+  description: '',
+  isActive: true,
+})
+
+const isFormValid = ref(false)
+
+const fillForm = (value: AdminSubscriptionFeatureDTO | null) => {
+  if (!value) return
+
+  form.code = value.code
+  form.name = value.name
+  form.description = value.description
+  form.isActive = value.isActive
+}
+
+watch(
+  () => props.initialValue,
+  value => fillForm(value),
+  { immediate: true },
+)
+
+const submit = () => {
+  if (!isFormValid.value) return
+
+  emit('submit', {
+    code: form.code,
+    name: form.name,
+    description: form.description,
+    isActive: form.isActive,
+  })
+}
+
+onMounted(() => {
+  getFeatureCodes()
+})
+</script>