feat: select male , female

src/pages/03_customer-management/MainPage.vue

@@ -6,7 +6,6 @@ import { Pagination } from 'src/stores/types';
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 
-import AddCardCompoent from 'src/components/AddCardCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
@@ -51,7 +50,7 @@ import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormE
 import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
-
+import { Icon } from '@iconify/vue';
 import { dialog, calculateAge } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 
@@ -233,6 +232,7 @@ const pageSizeEmployee = ref<number>(30);
 const currentBranchId = ref<string>('');
 const currentCustomerName = ref<string>('');
 const currentCustomerUrlImage = ref<string | null>(null);
+const genderselector = ref<string>('');
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -1158,6 +1158,40 @@ watch(fieldSelectedCustomer, async () => {
               :label="$t('customerCardUserType')"
               dense
             />
+            <q-btn-toggle
+              v-else
+              v-model="genderselector"
+              id="btn-mode"
+              dense
+              class="no-shadow bordered"
+              toggle-color="grey-4"
+              size="xs"
+              :options="[
+                { value: 'female', slot: 'female' },
+                { value: 'male', slot: 'male' },
+              ]"
+            >
+              <template v-slot:female>
+                <div
+                  class="q-px-sm q-py-xs app-text-female text-weight-medium text-body2 row items-center"
+                >
+                  <q-icon
+                    name="mdi-gender-female"
+                    class="q-mr-sm"
+                    size="18px"
+                  />
+                  5 คน
+                </div>
+              </template>
+              <template v-slot:male>
+                <div
+                  class="q-px-sm q-py-xs app-text-male text-weight-medium text-body2 row items-center"
+                >
+                  <q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
+                  5 คน
+                </div>
+              </template>
+            </q-btn-toggle>
           </div>
 
           <q-input