diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
deleted file mode 100644
index 231ddf2a..00000000
--- a/src/components/02_personnel-management/FormAddress.vue
+++ /dev/null
@@ -1,536 +0,0 @@
-<script setup lang="ts">
-import { onMounted, watch, reactive, ref } from 'vue';
-import useAddressStore, {
-  District,
-  Province,
-  SubDistrict,
-} from 'src/stores/address';
-import { selectFilterOptionRefMod } from 'src/stores/utils';
-import { QSelect } from 'quasar';
-
-defineProps<{
-  title?: string;
-  addressTitle?: string;
-  addressTitleEN?: string;
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-  separator?: boolean;
-  employee?: boolean;
-  disabledRule?: boolean;
-  indexId?: number;
-  prefixId: string;
-  hideTitle?: boolean;
-}>();
-
-const adrressStore = useAddressStore();
-const address = defineModel('address', { default: '' });
-const addressEN = defineModel('addressEN', { default: '' });
-const provinceId = defineModel<string | null | undefined>('provinceId');
-const districtId = defineModel<string | null | undefined>('districtId');
-const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
-const zipCode = defineModel<string | null | undefined>('zipCode');
-const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
-
-const addrOptions = reactive<{
-  provinceOps: Province[];
-  districtOps: District[];
-  subDistrictOps: SubDistrict[];
-}>({
-  provinceOps: [],
-  districtOps: [],
-  subDistrictOps: [],
-});
-
-async function fetchProvince() {
-  const result = await adrressStore.fetchProvince();
-
-  if (result) addrOptions.provinceOps = result;
-
-  provinceFilter = selectFilterOptionRefMod(
-    ref(addrOptions.provinceOps),
-    provinceOptions,
-    'name',
-  );
-
-  provinceEnFilter = selectFilterOptionRefMod(
-    ref(addrOptions.provinceOps),
-    provinceOptions,
-    'nameEN',
-  );
-}
-
-async function fetchDistrict() {
-  if (!provinceId.value) return;
-
-  const result = await adrressStore.fetchDistrictByProvinceId(provinceId.value);
-  if (result) addrOptions.districtOps = result;
-
-  districtFilter = selectFilterOptionRefMod(
-    ref(addrOptions.districtOps),
-    districtOptions,
-    'name',
-  );
-
-  districtEnFilter = selectFilterOptionRefMod(
-    ref(addrOptions.districtOps),
-    districtOptions,
-    'nameEN',
-  );
-}
-
-async function fetchSubDistrict() {
-  if (!districtId.value) return;
-  const result = await adrressStore.fetchSubDistrictByProvinceId(
-    districtId.value,
-  );
-  if (result) addrOptions.subDistrictOps = result;
-
-  subDistrictFilter = selectFilterOptionRefMod(
-    ref(addrOptions.subDistrictOps),
-    subDistrictOptions,
-    'name',
-  );
-
-  subDistrictEnFilter = selectFilterOptionRefMod(
-    ref(addrOptions.subDistrictOps),
-    subDistrictOptions,
-    'nameEN',
-  );
-}
-
-async function selectSubDistrict(id: string) {
-  if (!id) return;
-  zipCode.value =
-    addrOptions.subDistrictOps
-      ?.filter((x) => x.id === id)
-      .map((x) => x.zipCode)[0] ?? '';
-}
-
-const provinceOptions = ref<Record<string, unknown>[]>([]);
-let provinceFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-let provinceEnFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const districtOptions = ref<Record<string, unknown>[]>([]);
-let districtFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-let districtEnFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const subDistrictOptions = ref<Record<string, unknown>[]>([]);
-let subDistrictFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-let subDistrictEnFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-onMounted(async () => {
-  await fetchProvince();
-  await fetchDistrict();
-  await fetchSubDistrict();
-});
-
-watch(provinceId, fetchDistrict);
-watch(districtId, fetchSubDistrict);
-</script>
-<template>
-  <div class="col-12">
-    <div
-      v-if="!hideTitle"
-      class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
-    >
-      <q-icon
-        size="xs"
-        class="q-pa-sm rounded q-mr-xs"
-        color="info"
-        name="mdi-map-marker-radius-outline"
-        style="background-color: var(--surface-3)"
-      />
-
-      {{ title || $t('formDialogTitlePersonnelAddress') }}
-
-      <div
-        v-if="employee"
-        class="surface-3 q-px-sm q-py-xs row text-caption q-ml-md app-text-muted"
-        style="border-radius: var(--radius-3)"
-      >
-        <span
-          :id="`${prefixId}-same`"
-          class="q-px-sm q-mr-lg rounded cursor-pointer"
-          :class="{
-            dark: $q.dark.isActive,
-            'active-addr': sameWithEmployer,
-            'cursor-not-allowed': readonly,
-          }"
-          @click="readonly ? '' : (sameWithEmployer = true)"
-        >
-          {{ $t('formDialogToggleSameAddress') }}
-        </span>
-        <span
-          :id="`${prefixId}-custom`"
-          class="q-px-sm rounded cursor-pointer"
-          :class="{
-            dark: $q.dark.isActive,
-            'active-addr': !sameWithEmployer,
-            'cursor-not-allowed': readonly,
-          }"
-          @click="readonly ? '' : (sameWithEmployer = false)"
-        >
-          {{ $t('formDialogToggleCustomAddress') }}
-        </span>
-      </div>
-    </div>
-
-    <div class="col-12 row q-col-gutter-y-md">
-      <div class="col-12 app-text-muted-2">
-        <q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
-        {{ addressTitle || $t('formDialogTitleAddressPure') }}
-      </div>
-      <div class="col-12 row q-col-gutter-sm">
-        <q-input
-          outlined
-          hide-bottom-space
-          class="col-12"
-          v-model="address"
-          lazy-rules="ondemand"
-          :dense="dense"
-          :label="$t('address')"
-          :readonly="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputAddressValidate'),
-                ]
-          "
-        />
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          option-value="id"
-          input-debounce="0"
-          option-label="name"
-          v-model="provinceId"
-          lazy-rules="ondemand"
-          class="col-md-3 col-6"
-          :dense="dense"
-          :label="$t('province')"
-          :options="provinceOptions"
-          :readonly="readonly || sameWithEmployer"
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `select-province-${indexId}` : 'select-province'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputProvinceValidate'),
-                ]
-          "
-          @filter="provinceFilter"
-          @update:model-value="districtId = subDistrictId = zipCode = null"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('noResults') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          option-value="id"
-          input-debounce="0"
-          option-label="name"
-          v-model="districtId"
-          lazy-rules="ondemand"
-          class="col-md-3 col-6"
-          :dense="dense"
-          :label="$t('district')"
-          :options="districtOptions"
-          :readonly="readonly || sameWithEmployer"
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `select-district-${indexId}` : 'select-district'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputDistrictValidate'),
-                ]
-          "
-          @filter="districtFilter"
-          @update:model-value="subDistrictId = zipCode = null"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('noResults') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          option-value="id"
-          input-debounce="0"
-          option-label="name"
-          lazy-rules="ondemand"
-          class="col-md-3 col-6"
-          v-model="subDistrictId"
-          :dense="dense"
-          :label="$t('subDistrict')"
-          :options="subDistrictOptions"
-          :readonly="readonly || sameWithEmployer"
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `select-sub-district-${indexId}` : 'select-sub-district'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputSubDistrictValidate'),
-                ]
-          "
-          @update:model-value="(v: string) => selectSubDistrict(v)"
-          @filter="subDistrictFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('noResults') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
-          :dense="dense"
-          outlined
-          :disable="!readonly"
-          readonly
-          :label="$t('zipCode')"
-          class="col-md-2 col-6"
-          v-model="zipCode"
-        />
-      </div>
-
-      <div class="col-12 app-text-muted-2">
-        <q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
-        {{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
-      </div>
-      <div class="col-12 row q-col-gutter-sm">
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-${indexId !== undefined ? `input-address-en-${indexId}` : 'input-address-en'}`"
-          :dense="dense"
-          :readonly="readonly || sameWithEmployer"
-          outlined
-          hide-bottom-space
-          :label="$t('address')"
-          class="col-12"
-          v-model="addressEN"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputAddressValidate'),
-                ]
-          "
-        />
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          option-value="id"
-          input-debounce="0"
-          v-model="provinceId"
-          lazy-rules="ondemand"
-          option-label="nameEN"
-          class="col-md-3 col-6"
-          :dense="dense"
-          :label="$t('province')"
-          :options="provinceOptions"
-          :readonly="readonly || sameWithEmployer"
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `select-province-en-${indexId}` : 'select-province-en'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputProvinceValidate'),
-                ]
-          "
-          @update:model-value="districtId = subDistrictId = zipCode = null"
-          @filter="provinceEnFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('noResults') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          option-value="id"
-          input-debounce="0"
-          v-model="districtId"
-          lazy-rules="ondemand"
-          option-label="nameEN"
-          class="col-md-3 col-6"
-          :dense="dense"
-          :label="$t('district')"
-          :options="districtOptions"
-          :readonly="readonly || sameWithEmployer"
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `select-district-en-${indexId}` : 'select-district-en'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputDistrictValidate'),
-                ]
-          "
-          @update:model-value="subDistrictId = zipCode = null"
-          @filter="districtEnFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('noResults') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          option-value="id"
-          input-debounce="0"
-          lazy-rules="ondemand"
-          option-label="nameEN"
-          class="col-md-3 col-6"
-          v-model="subDistrictId"
-          :dense="dense"
-          :label="$t('subDistrict')"
-          :options="subDistrictOptions"
-          :readonly="readonly || sameWithEmployer"
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `select-sub-district-en-${indexId}` : 'select-sub-district-en'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputSubDistrictValidate'),
-                ]
-          "
-          @update:model-value="(v: string) => selectSubDistrict(v)"
-          @filter="subDistrictEnFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('noResults') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-input
-          lazy-rules="ondemand"
-          hide-bottom-space
-          :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
-          :dense="dense"
-          outlined
-          readonly
-          :disable="!readonly"
-          zip="zip-en"
-          :label="$t('zipCode')"
-          class="col-md-2 col-6"
-          v-model="zipCode"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.active-addr {
-  color: hsl(var(--info-bg));
-  background-color: hsla(var(--info-bg) / 0.1);
-  border-radius: var(--radius-3);
-
-  &.dark {
-    background-color: var(--surface-1);
-  }
-}
-</style>
diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
deleted file mode 100644
index c3ceb608..00000000
--- a/src/components/03_customer-management/AboutComponent.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script setup lang="ts">
-import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import { useI18n } from 'vue-i18n';
-
-defineProps<{
-  title?: string;
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-  separator?: boolean;
-  typeCustomer?: string;
-  prefixId: string;
-}>();
-const { locale } = useI18n();
-const branchCode = defineModel<string>('branchCode');
-const legalEntityCode = defineModel<string>('legalEntityCode');
-const taxNo = defineModel<string | null | undefined>('taxNo');
-const customerName = defineModel<string>('customerName');
-const customerEnglishName = defineModel<string>('customerEnglishName');
-const authorizedCapital = defineModel<string>('authorizedCapital');
-const registerName = defineModel<string>('registerName');
-const registerDate = defineModel<Date | null | string>('registerDate');
-const branchNo = defineModel<number>('branchNo');
-</script>
-
-<template>
-  <div class="row">
-    <div class="col-md-3 col-12 app-text-muted">• {{ $t(`about`) }}</div>
-    <div class="col-md-9 col-12 row q-col-gutter-md">
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-branch-code`"
-        :id="`${prefixId}-input-branch-code`"
-        v-if="typeCustomer === 'PERS'"
-        :dense="dense"
-        outlined
-        :readonly="true"
-        hide-bottom-space
-        class="col-md-3 col-6"
-        :label="$t('branchCode')"
-        v-model="branchCode"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-branch-no`"
-        :id="`${prefixId}-input-branch-no`"
-        :dense="dense"
-        outlined
-        :readonly="!!branchCode"
-        hide-bottom-space
-        class="col-md-3 col-6"
-        label="ลำดับที่"
-        v-model="branchNo"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-customer-name`"
-        :id="`${prefixId}-input-customer-name`"
-        v-if="typeCustomer === 'PERS'"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md col-12"
-        :label="$t('customerName')"
-        v-model="customerName"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-customer-english-name`"
-        :id="`${prefixId}-input-customer-english-name`"
-        v-if="typeCustomer === 'PERS'"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col"
-        :label="$t('customerEnglishName')"
-        v-model="customerEnglishName"
-      />
-
-      <div class="row q-col-gutter-md">
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-input-branch-code`"
-          :id="`${prefixId}-input-branch-code`"
-          v-if="typeCustomer === 'CORP'"
-          :dense="dense"
-          outlined
-          :readonly="true"
-          hide-bottom-space
-          class="col-md-3 col-6"
-          :label="$t('branchCode')"
-          v-model="branchCode"
-        />
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-input-legal-entity-code`"
-          :id="`${prefixId}-input-legal-entity-code`"
-          v-if="typeCustomer === 'CORP'"
-          :dense="dense"
-          outlined
-          :readonly="true"
-          hide-bottom-space
-          class="col-md-3 col-6"
-          :label="$t('legalEntityCode')"
-          v-model="legalEntityCode"
-        />
-
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-input-customer-english-name`"
-          :id="`${prefixId}-input-customer-english-name`"
-          v-if="typeCustomer === 'CORP'"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-md-3 col-12"
-          :label="$t('customerEnglishName')"
-          v-model="customerEnglishName"
-        />
-
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-input-customer-name`"
-          :id="`${prefixId}-input-customer-name`"
-          v-if="typeCustomer === 'CORP'"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-md-3 col-12"
-          :label="$t('customerName')"
-          v-model="customerName"
-        />
-      </div>
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-tax-no`"
-        :id="`${prefixId}-input-tax-no`"
-        v-if="typeCustomer === 'CORP'"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-6 col-12"
-        :label="$t('taxNo')"
-        v-model="taxNo"
-        :rules="[
-          (val) =>
-            (val && val.length === 13 && /[0-9]+/.test(val)) ||
-            $t('formDialogInputTaxNoValidate'),
-        ]"
-      />
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-register-name`"
-        :id="`${prefixId}-input-register-name`"
-        v-if="typeCustomer === 'CORP'"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-6"
-        :label="$t('registerName')"
-        v-model="registerName"
-      />
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-authorized-capital`"
-        :id="`${prefixId}-input-authorized-capital`"
-        v-if="typeCustomer === 'CORP'"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-3 col-6"
-        :label="$t('authorizedCapital')"
-        v-model="authorizedCapital"
-      />
-      <VueDatePicker
-        :id="`${prefixId}-date-picker-date`"
-        v-if="typeCustomer === 'CORP'"
-        :teleport="true"
-        utc
-        autoApply
-        v-model="registerDate"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
-        class="col-md-3 col-12"
-      >
-        <template #year="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #year-overlay-value="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #trigger>
-          <q-input
-            lazy-rules="ondemand"
-            :for="`${prefixId}-input-start-date`"
-            :id="`${prefixId}-input-start-date`"
-            :label="$t('registerDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              registerDate
-                ? readonly
-                  ? dateFormat(registerDate)
-                  : dateFormat(registerDate, false, false, true)
-                : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  registerDate = parseAndFormatDate(v, locale);
-                }
-              }
-            "
-          >
-            <template v-slot:prepend>
-              <q-icon
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-            <template v-slot:append>
-              <q-icon
-                v-if="registerDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click="registerDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-    </div>
-  </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
-</template>
-
-<style></style>
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
deleted file mode 100644
index d98300b6..00000000
--- a/src/components/03_customer-management/BasicInformation.vue
+++ /dev/null
@@ -1,475 +0,0 @@
-<script setup lang="ts">
-import { QSelect } from 'quasar';
-import { getRole } from 'src/services/keycloak';
-import { CustomerBranch } from 'src/stores/customer/types';
-import { selectFilterOptionRefMod } from 'src/stores/utils';
-import { onMounted, ref, watch } from 'vue';
-
-const personName = defineModel<string>('personName');
-const customerName = defineModel<string>('customerName');
-const customerNameEn = defineModel<string>('customerNameEn');
-const registeredBranchId = defineModel<string>('registeredBranchId');
-const optionsBranch = defineModel<{ id: string; name: string }[]>(
-  'optionsBranch',
-  { default: [] },
-);
-const taxNo = defineModel<string | null | undefined>('taxNo');
-
-const employerID = defineModel<string>('employerID');
-const slash = ref<string>('-');
-
-// employee
-const customerBranch = defineModel<{
-  id: string;
-  address: string;
-  addressEN: string;
-  provinceId: string;
-  districtId: string;
-  subDistrictId: string;
-  zipCode: string;
-}>('customerBranch');
-const employeeId = defineModel<string>('employeeId');
-const nrcNo = defineModel<string>('nrcNo');
-
-const props = withDefaults(
-  defineProps<{
-    dense?: boolean;
-    outlined?: boolean;
-    readonly?: boolean;
-    separator?: boolean;
-    typeCustomer?: string;
-    employee?: boolean;
-    employeeOwnerOption?: CustomerBranch[];
-    prefixId: string;
-    showBtnSave: boolean;
-  }>(),
-  {
-    showBtnSave: false,
-  },
-);
-
-defineEmits<{
-  (e: 'filterOwnerBranch', val: string, update: void): void;
-}>();
-
-const branchOptions = ref<Record<string, unknown>[]>([]);
-let branchFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-watch(
-  () => optionsBranch.value,
-  () => {
-    branchFilter = selectFilterOptionRefMod(
-      optionsBranch,
-      branchOptions,
-      'name',
-    );
-  },
-);
-
-onMounted(() => {
-  branchFilter = selectFilterOptionRefMod(optionsBranch, branchOptions, 'name');
-});
-</script>
-
-<template>
-  <div class="col-md-3 col-12 app-text-muted">
-    • {{ $t(`formDialogTitleInformation`) }}
-  </div>
-  <div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      class="col-12"
-      option-value="id"
-      input-debounce="0"
-      option-label="name"
-      lazy-rules="ondemand"
-      v-model="registeredBranchId"
-      :dense="dense"
-      :readonly="readonly"
-      :options="branchOptions"
-      :hide-dropdown-icon="readonly"
-      :label="$t('registeredBranch')"
-      :for="`${prefixId}-input-source-nationality`"
-      :rules="[
-        (val) => {
-          const roles = getRole() || [];
-          const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
-            (role) => roles.includes(role),
-          );
-          return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
-        },
-      ]"
-      @filter="branchFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-employer-id`"
-      :id="`${prefixId}-input-employer-id`"
-      v-if="typeCustomer === 'PERS'"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-6 col-12"
-      :label="$t('formDialogCustomerName')"
-      v-model="personName"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-tax-no`"
-      :id="`${prefixId}-input-tax-no`"
-      v-if="typeCustomer === 'PERS'"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-6 col-12"
-      :label="$t('taxNo')"
-      v-model="taxNo"
-      :rules="[
-        (val) =>
-          (val && val.length === 13 && /[0-9]+/.test(val)) ||
-          $t('formDialogInputTaxNoValidate'),
-      ]"
-    />
-
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-customer-name`"
-      :id="`${prefixId}-input-customer-name`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-6 col-12"
-      :label="
-        $t(typeCustomer === 'PERS' ? 'corporationThai' : 'corporationThaiName')
-      "
-      v-model="customerName"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-customer-name-en`"
-      :id="`${prefixId}-input-customer-name-en`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-6 col-12"
-      :label="
-        $t(
-          typeCustomer === 'PERS'
-            ? 'corporationEnglish'
-            : 'corporationEnglishName',
-        )
-      "
-      v-model="customerNameEn"
-    />
-
-    <q-input
-      lazy-rules="ondemand"
-      v-if="typeCustomer !== 'PERS'"
-      :for="`${prefixId}-input-owner-name`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-6 col-12"
-      :label="$t('companyOwnerName')"
-      v-model="personName"
-    />
-  </div>
-
-  <div v-if="employee" class="col-md-9 col-12 row q-col-gutter-md">
-    <q-select
-      lazy-rules="ondemand"
-      :id="`${prefixId}-select-employer-branch`"
-      :for="`${prefixId}-select-employer-branch`"
-      :use-input="!customerBranch"
-      input-debounce="0"
-      :hide-dropdown-icon="readonly"
-      :dense="dense"
-      outlined
-      :readonly="readonly || customerBranch !== undefined"
-      hide-bottom-space
-      class="col-12"
-      :label="$t('formDialogEmployerBranchCode')"
-      v-model="customerBranch"
-      :option-value="
-        (v) => ({
-          id: v.id,
-          address: v.address,
-          addressEN: v.addressEN,
-          provinceId: v.provinceId,
-          districtId: v.districtId,
-          subDistrictId: v.subDistrictId,
-          zipCode: v.zipCode,
-        })
-      "
-      emit-value
-      map-options
-      :options="employeeOwnerOption"
-      @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
-      :rules="[
-        (val: string) =>
-          !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
-      ]"
-    >
-      <template v-slot:option="scope">
-        <q-item
-          v-if="scope.opt"
-          v-bind="scope.itemProps"
-          class="row items-start col-12 no-padding"
-        >
-          <div class="q-ma-sm">
-            <i class="isax isax-frame5" style="color: var(--brand-1)" />
-          </div>
-          <div class="q-mt-sm">
-            <div>
-              {{ scope.opt.code }} {{ $t('branchName') }}:
-              {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
-            </div>
-
-            <div class="text-caption app-text-muted-2 q-mb-xs">
-              <div v-if="scope.opt.customer" class="col column">
-                <span>
-                  {{ $t('customerBranchName') }}:
-                  {{
-                    $i18n.locale === 'en-US'
-                      ? scope.opt.customer.customerNameEN
-                      : scope.opt.customer.customerName
-                  }}
-                </span>
-                <span>
-                  {{
-                    scope.opt.customer.customerType === 'PERS'
-                      ? $t('formDialogCustomerName')
-                      : $t('companyOwnerName')
-                  }}:
-                  {{
-                    $i18n.locale === 'en-US'
-                      ? scope.opt.customer.personName
-                      : scope.opt.customer.personName
-                  }}
-                </span>
-              </div>
-              <div v-if="scope.opt.province" class="col">
-                {{ $t('address') }}
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.addressEN
-                    : scope.opt.address
-                }}
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.subDistrict.nameEN
-                    : scope.opt.subDistrict.name
-                }}
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.district.nameEN
-                    : scope.opt.district.name
-                }}
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.province.nameEN
-                    : scope.opt.province.name
-                }}
-                {{ scope.opt.zipCode }}
-              </div>
-            </div>
-          </div>
-        </q-item>
-        <q-separator class="q-mx-sm" />
-      </template>
-
-      <template v-slot:selected-item="scope">
-        <div
-          v-if="scope.opt"
-          class="row items-center no-wrap"
-          style="width: 1px"
-        >
-          <div class="q-mr-sm">
-            {{ scope.opt.code }}
-            {{ $t('branchName') }}:
-            {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
-          </div>
-          <div
-            class="text-caption app-text-muted-2"
-            v-if="scope.opt.customer && scope.opt.province"
-          >
-            {{ $t('customerBranchName') }}:
-            {{
-              $i18n.locale === 'en-US'
-                ? scope.opt.customer.customerNameEN
-                : scope.opt.customer.customerName
-            }}
-            {{
-              scope.opt.customer.customerType === 'PERS'
-                ? $t('formDialogCustomerName')
-                : $t('companyOwnerName')
-            }}:
-            {{
-              $i18n.locale === 'en-US'
-                ? scope.opt.customer.personName
-                : scope.opt.customer.personName
-            }}
-            {{ $t('address') }}
-            {{
-              $i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
-            }}
-            {{
-              $i18n.locale === 'en-US'
-                ? scope.opt.subDistrict.nameEN
-                : scope.opt.subDistrict.name
-            }}
-            {{
-              $i18n.locale === 'en-US'
-                ? scope.opt.district.nameEN
-                : scope.opt.district.name
-            }}
-            {{
-              $i18n.locale === 'en-US'
-                ? scope.opt.province.nameEN
-                : scope.opt.province.name
-            }}
-            {{ scope.opt.zipCode }}
-            <q-tooltip v-if="scope.opt.customer && scope.opt.province">
-              {{ $t('customerBranchName') }}:
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.customer.customerNameEN
-                  : scope.opt.customer.customerName
-              }}
-              {{
-                scope.opt.customer.customerType === 'PERS'
-                  ? $t('formDialogCustomerName')
-                  : $t('companyOwnerName')
-              }}:
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.customer.personName
-                  : scope.opt.customer.personName
-              }}
-              {{ $t('address') }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.addressEN
-                  : scope.opt.address
-              }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.subDistrict.nameEN
-                  : scope.opt.subDistrict.name
-              }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.district.nameEN
-                  : scope.opt.district.name
-              }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.province.nameEN
-                  : scope.opt.province.name
-              }}
-              {{ scope.opt.zipCode }}
-            </q-tooltip>
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:append>
-        <q-icon
-          v-if="!readonly && customerBranch"
-          name="mdi-close-circle"
-          @click.stop="customerBranch = undefined"
-          class="cursor-pointer clear-btn"
-        />
-      </template>
-    </q-select>
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-employee-id`"
-      :dense="dense"
-      outlined
-      :readonly="true"
-      hide-bottom-space
-      class="col-6"
-      :label="$t('formDialogEmployeeID')"
-      v-model="employeeId"
-    />
-
-    <q-input
-      lazy-rules="ondemand"
-      v-if="readonly && !nrcNo"
-      :for="`${prefixId}-input-nrc-no`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-6"
-      :label="$t('formDialogEmployeeNRCNo')"
-      v-model="slash"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      v-else
-      mask="## #### ###### #"
-      :for="`${prefixId}-input-nrc-no`"
-      :dense="dense"
-      outlined
-      hide-bottom-space
-      :readonly="readonly"
-      class="col-6"
-      :label="$t('formDialogEmployeeNRCNo')"
-      v-model="nrcNo"
-    />
-  </div>
-  <div class="col-12 row justify-end" style="min-height: 50px">
-    <q-btn
-      v-if="!readonly && showBtnSave"
-      dense
-      unelevated
-      id="save-basic-info"
-      color="primary"
-      class="q-px-md"
-      :label="$t('save')"
-      @click="$emit('save')"
-    />
-  </div>
-
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mt-md q-mb-md"
-    style="padding-block: 0.5px"
-  />
-</template>
-
-<style scoped lang="scss">
-.clear-btn {
-  opacity: 50%;
-  transition: opacity 0.2s ease-in-out;
-  &:hover {
-    opacity: 100%;
-  }
-}
-</style>
diff --git a/src/components/03_customer-management/ContactInformation.vue b/src/components/03_customer-management/ContactInformation.vue
deleted file mode 100644
index 8161708b..00000000
--- a/src/components/03_customer-management/ContactInformation.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  title?: string;
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-  separator?: boolean;
-  prefixId: string;
-}>();
-
-const mail = defineModel<string>('mail');
-const telephone = defineModel<string>('telephone');
-</script>
-
-<template>
-  <div class="row">
-    <div class="col-md-3 col-12 app-text-muted">
-      • {{ $t(`formDialogTitleContact`) }}
-    </div>
-    <div class="col-md-9 col-12 row q-col-gutter-md">
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-mail`"
-        :id="`${prefixId}-input-mail`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-6 col-12"
-        :label="$t('customerBranch.form.mail')"
-        v-model="mail"
-      />
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-telephone`"
-        :id="`${prefixId}-input-telephone`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-6 col-12"
-        :label="$t('customerBranch.form.telephone')"
-        v-model="telephone"
-      />
-    </div>
-  </div>
-
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
-</template>
-
-<style></style>
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
deleted file mode 100644
index 81e91dd1..00000000
--- a/src/components/03_customer-management/FormBusiness.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<script setup lang="ts">
-import { selectFilterOptionRefMod } from 'src/stores/utils';
-import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import { onMounted } from 'vue';
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-const { locale } = useI18n({ useScope: 'global' });
-
-const employmentOffice = defineModel<string>('employmentOffice');
-const bussinessType = defineModel<string>('bussinessType');
-const jobPosition = defineModel<string>('jobPosition');
-
-const bussinessTypeEN = defineModel<string>('bussinessTypeEn');
-const jobPositionEN = defineModel<string>('jobPositionEn');
-
-const jobDescription = defineModel<string>('jobDescription');
-
-const payDate = defineModel<Date | null | string>('payDate');
-const wageRate = defineModel<number>('wageRate');
-
-const saleEmployee = defineModel<string>('saleEmployee');
-
-const rawOption = ref();
-
-const typeBusinessOption = ref([]);
-const jobPositionOption = ref([]);
-
-defineProps<{
-  title?: string;
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-  separator?: boolean;
-  prefixId: string;
-}>();
-
-onMounted(async () => {
-  const resultOption = await fetch('/option/option.json');
-  rawOption.value = await resultOption.json();
-
-  if (locale.value === 'en-US') {
-    typeBusinessOption.value = rawOption.value.eng.businessType;
-    jobPositionOption.value = rawOption.value.eng.position;
-  }
-  if (locale.value === 'th-th') {
-    typeBusinessOption.value = rawOption.value.tha.businessType;
-    jobPositionOption.value = rawOption.value.tha.position;
-  }
-});
-
-const typeBusinessOptions = ref<Record<string, unknown>[]>([]);
-const typeBusinessFilter = selectFilterOptionRefMod(
-  typeBusinessOption,
-  typeBusinessOptions,
-  'label',
-);
-
-const jobPositionOptions = ref<Record<string, unknown>[]>([]);
-const jobPositionFilter = selectFilterOptionRefMod(
-  jobPositionOption,
-  jobPositionOptions,
-  'label',
-);
-</script>
-<template>
-  <div class="col-12 row q-col-gutter-y-md">
-    <div class="col-md-3 col-12 app-text-muted">
-      • {{ $t('businessInformation') }}
-    </div>
-    <div class="col-md-9 col-12 row q-col-gutter-md">
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-employment-office`"
-        :id="`${prefixId}-input-employment-office`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12"
-        :label="$t('inputCustomerAddress')"
-        v-model="employmentOffice"
-      />
-
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-value="value"
-        option-label="label"
-        lazy-rules="ondemand"
-        v-model="bussinessType"
-        class="col-md-6 col-12"
-        :dense="dense"
-        :readonly="readonly"
-        :label="$t('businessType')"
-        :options="typeBusinessOptions"
-        :for="`${prefixId}-select-business-type`"
-        @filter="typeBusinessFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('noResults') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-bussiness-type-en`"
-        :id="`${prefixId}-input-bussiness-type-en`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-6 col-12"
-        :label="$t('businessTypeEN')"
-        v-model="bussinessTypeEN"
-      />
-
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-value="value"
-        option-label="label"
-        lazy-rules="ondemand"
-        v-model="jobPosition"
-        class="col-md-6 col-12"
-        :dense="dense"
-        :readonly="readonly"
-        :label="$t('jobPosition')"
-        :options="jobPositionOptions"
-        :for="`${prefixId}-select-job-position`"
-        @filter="jobPositionFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('noResults') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-job-position-en`"
-        :id="`${prefixId}-input-job-position-en`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-6 col-12"
-        :label="$t('jobPositionEN')"
-        v-model="jobPositionEN"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-job-description`"
-        :id="`${prefixId}-input-job-description`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-6 col-12"
-        :label="$t('jobDescription')"
-        v-model="jobDescription"
-      />
-
-      <VueDatePicker
-        :id="`${prefixId}-date-picker-start-date`"
-        :teleport="true"
-        utc
-        autoApply
-        v-model="payDate"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
-        class="col-md-3 col-12"
-      >
-        <template #year="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #year-overlay-value="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #trigger>
-          <q-input
-            lazy-rules="ondemand"
-            :for="`${prefixId}-input-start-date`"
-            :id="`${prefixId}-input-start-date`"
-            :label="$t('payDay')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              payDate
-                ? readonly
-                  ? dateFormat(payDate)
-                  : dateFormat(payDate, false, false, true)
-                : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  payDate = parseAndFormatDate(v, locale);
-                }
-              }
-            "
-          >
-            <template v-slot:prepend>
-              <q-icon
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-            <template v-slot:append>
-              <q-icon
-                v-if="payDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click="payDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-pay-rate`"
-        :id="`${prefixId}-input-pay-rate`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-3 col-6"
-        :label="$t('payRate')"
-        v-model="wageRate"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-sales-person`"
-        :id="`${prefixId}-input-sales-person`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-6"
-        :label="$t('salesPerson')"
-        v-model="saleEmployee"
-      />
-    </div>
-  </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
-</template>