diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index e542a05d..81a2430a 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -38,7 +38,7 @@ const color = ['pink', 'purple'];
 
       <div class="column justify-around stat-card-content">
         <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
-        <div class="text-weight-bold">{{ $t(v.label) }}</div>
+        <div class="text-weight-bold">{{ v.label }}</div>
       </div>
     </app-box>
   </div>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 03e786af..db50b1e5 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -114,11 +114,6 @@ const userOption = ref<UserOption>({
   brOpts: [],
 });
 
-const brOpts = ref([
-  { label: '0000000001-1', value: '1' },
-  { label: '0000000001-2', value: '2' },
-]);
-
 const selectorList = [
   { label: 'personnelSelector1', count: 0 },
   { label: 'personnelSelector2', count: 0 },
@@ -159,7 +154,7 @@ async function fetchBrOption(id: string) {
   const res = await branchStore.fetchById(id, {
     includeSubBranch: true,
   });
-  if (res) {
+  if (res.branch) {
     res.branch.map((item) => {
       userOption.value.brOpts.push({
         label: item.code,
@@ -215,10 +210,11 @@ async function openDialog(id?: string) {
         : null;
       formData.value.responsibleArea = foundUser.responsibleArea;
       userId.value = foundUser.id;
-      hqId.value = foundUser.branch[0].id;
-      brId.value = foundUser.branch;
+      hqId.value = foundUser.branch[0].headOfficeId as string;
+      brId.value = foundUser.branch[0].id;
       code.value = foundUser.code;
       isEdit.value = true;
+      console.log(hqId.value);
     }
   }
 }
@@ -235,17 +231,26 @@ function onClose() {
 }
 
 async function onSubmit() {
-  try {
-    if (isEdit.value === true && userId.value) {
-      await userStore.editById(userId.value, formData.value);
-    } else {
-      formData.value.keycloakId = await createKeycloak();
-      await userStore.create(formData.value);
+  console.log('enter');
+  if (isEdit.value === true && userId.value) {
+    console.log('edit');
+    await userStore.editById(userId.value, formData.value);
+  } else {
+    console.log('post');
+    formData.value.keycloakId = await createKeycloak();
+    if (formData.value.keycloakId) {
+      const result = await userStore.create(formData.value);
+      console.log('Result after create:', result);
+      console.log('bb');
+      if (result) {
+        console.log('hi3');
+        console.log(result.id);
+        // await branchStore.addUser(result.id, userId.value);
+      }
     }
-  } finally {
-    modal.value = false;
-    await userStore.fetchList();
   }
+  onClose();
+  userStore.fetchList();
 }
 
 async function onDelete(id: string) {
@@ -268,8 +273,9 @@ function mapUserType(label: string) {
 onMounted(async () => {
   await userStore.fetchList({ includeBranch: true });
   typeStats.value = await userStore.typeStats();
-  if ((await branchStore.userStats(formData.value.userType)) !== false) {
-    userStats.value = await branchStore.userStats(formData.value.userType);
+  const res = await branchStore.userStats(formData.value.userType);
+  if (res) {
+    userStats.value = res;
   }
 });
 
@@ -277,8 +283,9 @@ watch(
   () => selectorLabel.value,
   async (label) => {
     mapUserType(label);
-    if ((await branchStore.userStats(label)) !== false) {
-      userStats.value = await branchStore.userStats(label);
+    const res = await branchStore.userStats(label);
+    if (res) {
+      userStats.value = res;
     }
   },
 );
@@ -311,7 +318,8 @@ watch(
       <AppBox bordered class="column full-width">
         <div class="row q-pb-lg justify-between items-center">
           <div class="text-weight-bold text-subtitle1">
-            {{ $t('personnelStatTitle') + $t(selectorLabel) }}
+            {{ $t('personnelStatTitle') }}
+            {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
           </div>
           <q-btn
             dense
@@ -457,9 +465,9 @@ watch(
         option-label="label"
         option-value="value"
         v-model="formData.userRole"
-        :options="brOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+        :options="genderOpts"
       />
+      <!--         :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']" -->
       <q-input
         dense
         outlined