fix(03): customer profile banner & tab

src/components/ProfileBanner.vue

@@ -39,8 +39,6 @@ const toggleStatus = defineModel<string>('toggleStatus', {
 const currentTab = defineModel<string>('currentTab');
 
 const showOverlay = ref(false);
-
-currentTab.value = 'name1';
 </script>
 <template>
   <q-img
@@ -187,13 +185,12 @@ currentTab.value = 'name1';
         <div class="row" v-if="tabsList && currentTab">
           <div class="row q-px-sm full-width">
             <q-tabs
+              dense
               inline-label
               mobile-arrows
-              dense
-              class="app-text-muted full-width"
               v-model="currentTab"
-              active-class="active-tab"
+              active-class="active-tab text-weight-bold"
-              indicator-color="transparent"
+              class="app-text-muted full-width"
               align="left"
             >
               <q-tab
@@ -277,4 +274,8 @@ currentTab.value = 'name1';
 .q-img__content > nav {
   pointer-events: all;
 }
+
+.active-tab {
+  color: var(--brand-1);
+}
 </style>

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

@@ -42,6 +42,8 @@ import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
+import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
+import useOptionStore from 'src/stores/options';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -54,6 +56,7 @@ const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
+const optionStore = useOptionStore();
 
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
@@ -431,6 +434,10 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
   customerFormData.value.customerType = customerType;
 }
 
+function createEmployeeForm() {
+  employeeFormState.value.dialogModal = true;
+}
+
 // TODO: When in employee form, if select address same as customer then auto fill
 </script>
 
@@ -465,7 +472,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
         external-label
         id="add-employee"
         label-position="left"
-        @click=""
+        @click="createEmployeeForm"
         color="primary"
         padding="xs"
         icon="mdi-account-plus"
@@ -538,8 +545,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
-                            ? statsCustomerType?.CORP ?? 0
+                            ? (statsCustomerType?.CORP ?? 0)
-                            : statsCustomerType?.PERS ?? 0,
+                            : (statsCustomerType?.PERS ?? 0),
                         label:
                           v.name === 'CORP'
                             ? 'customerLegalEntity'
@@ -1527,7 +1534,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
                               {
                                 icon: 'mdi-clock-outline',
                                 value: props.row.dateOfBirth
-                                  ? calculateAge(props.row.dateOfBirth) ?? ''
+                                  ? (calculateAge(props.row.dateOfBirth) ?? '')
                                   : '',
                               },
                             ],
@@ -1816,6 +1823,144 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
     <!--   label="Save" -->
     <!-- /> -->
   </DialogForm>
+
+  <DialogForm
+    :title="$t('form.title.create', { name: 'Employee' })"
+    v-model:modal="employeeFormState.dialogModal"
+  >
+    <div class="q-mx-lg q-mt-lg">
+      <ProfileBanner
+        active
+        useToggle
+        color="white"
+        icon="mdi-account-plus"
+        bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
+        v-model:current-tab="employeeFormState.currentTab"
+        v-model:cover-url="employeeFormState.profileUrl"
+        fallbackCover="images/employee-banner.png"
+        :img="`images/employee-avatar.png`"
+        :tabs-list="[
+          { name: 'personalInfo', label: 'personalInfo' },
+          { name: 'healthCheck', label: 'healthCheck' },
+          { name: 'workHistory', label: 'workHistory' },
+          { name: 'other', label: 'other' },
+        ]"
+        :menu="formMenuIconEmployee"
+        :toggleTitle="$t('formDialogTitleUserStatus')"
+        :hideFade="
+          employeeFormState.profileUrl === '' ||
+          employeeFormState.profileUrl === undefined
+        "
+      />
+    </div>
+
+    <div
+      class="col surface-1 q-ma-lg rounded bordered scroll row"
+      id="personnel-form"
+    >
+      <div class="col">
+        <div style="position: sticky; top: 0" class="q-pa-sm">
+          <SideMenu
+            :menu="[
+              {
+                name: $t('formDialogTitleInformation'),
+                anchor: 'form-information',
+              },
+              {
+                name: $t('formDialogTitlePersonal'),
+                anchor: 'form-personal',
+              },
+              {
+                name: $t('formDialogTitlePersonnelAddress'),
+                anchor: 'form-personal-address',
+              },
+              {
+                name: $t('formDialogTitlePassport'),
+                anchor: 'form-passport',
+              },
+              {
+                name: $t('formDialogTitleVisa'),
+                anchor: 'form-visa',
+              },
+            ]"
+            background="transparent"
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#employee-form"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="employeeFormState.currentTab === 'personalInfo'"
+        class="col-10 q-pa-md q-gutter-y-xl"
+      >
+        <BasicInformation
+          id="form-information"
+          prefix-id="drawer-info-employee"
+          employee
+          dense
+          outlined
+          separator
+          :title="$t('formDialogTitleInformation')"
+          :employee-owner-option="employeeStore.ownerOption"
+          v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
+          v-model:employee-id="employeeFormState.currentEmployeeCode"
+          v-model:nrc-no="currentFromDataEmployee.nrcNo"
+          v-model:code="currentFromDataEmployee.code"
+          @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
+        />
+        <FormPerson
+          id="form-personal"
+          prefix-id="drawer-info-employee"
+          dense
+          outlined
+          employee
+          separator
+          :title="$t('personalInfo')"
+          v-model:firstName="currentFromDataEmployee.firstName"
+          v-model:lastName="currentFromDataEmployee.lastName"
+          v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
+          v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
+          v-model:gender="currentFromDataEmployee.gender"
+          v-model:birthDate="currentFromDataEmployee.dateOfBirth"
+          v-model:nationality="currentFromDataEmployee.nationality"
+        />
+        <FormAddress
+          id="form-personal-address"
+          v-model:address="currentFromDataEmployee.address"
+          v-model:addressEN="currentFromDataEmployee.addressEN"
+          v-model:provinceId="currentFromDataEmployee.provinceId"
+          v-model:districtId="currentFromDataEmployee.districtId"
+          v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
+          v-model:zipCode="currentFromDataEmployee.zipCode"
+          prefix-id="drawer-info-personnel"
+          dense
+        />
+      </div>
+
+      <div
+        v-if="employeeFormState.currentTab === 'healthCheck'"
+        class="col-10 q-pa-md q-gutter-y-xl"
+      >
+        <FormEmployeeHealthCheck
+          id="form-information"
+          prefix-id="drawer-info-employee"
+          dense
+          outlined
+          v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
+          v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
+          v-model:medicalBenefitOption="optionStore.globalOption.insurancePlace"
+          v-model:insuranceCompanyOption="
+            optionStore.globalOption.insurancePlace
+          "
+        />
+      </div>
+    </div>
+  </DialogForm>
+
   <ImageUploadDialog
     ref="dialogCustomerImageUpload"
     v-model:dialog-state="customerFormState.imageDialog"

src/pages/03_customer-management/form.ts

@@ -14,7 +14,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
   const customerStore = useCustomerStore();
   const branchStore = useMyBranch();
 
-  let defaultFormData: CustomerCreate = {
+  const defaultFormData: CustomerCreate = {
     status: 'CREATED',
     personName: '',
     customerType: 'CORP',
@@ -223,6 +223,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
 
   const state = ref<{
     dialogType: 'info' | 'create' | 'edit';
+    currentTab: string;
+    dialogModal: boolean;
     drawerModal: boolean;
     currentEmployeeCode: string;
     currentEmployee: Employee | null;
@@ -252,6 +254,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       | undefined;
   }>({
     drawerModal: false,
+    currentTab: 'personalInfo',
+    dialogModal: false,
     dialogType: 'info',
     currentEmployeeCode: '',
     currentEmployee: null,
@@ -263,7 +267,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     formDataEmployeeOwner: undefined,
   });
 
-  let defaultFormData: EmployeeCreate = {
+  const defaultFormData: EmployeeCreate = {
     code: '',
     image: null,
     customerBranchId: '',
@@ -345,7 +349,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     },
   };
 
-  let resetEmployeeData = structuredClone(defaultFormData);
+  const resetEmployeeData = structuredClone(defaultFormData);
   const currentFromDataEmployee = ref<EmployeeCreate>(
     structuredClone(defaultFormData),
   );