refactor: header can't edit customer is INACTIVE

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

@@ -2800,6 +2800,7 @@ const emptyCreateDialog = ref(false);
                   customerFormState.readonly === true) ||
                 customerFormState.dialogType === 'info'
               "
+              :hide-action="customerFormData.status === 'INACTIVE'"
               :action-disabled="customerFormState.branchIndex !== -1"
               id="form-basic-info-customer"
               :create="customerFormState.dialogType === 'create'"
@@ -2862,7 +2863,8 @@ const emptyCreateDialog = ref(false);
                   @click="customerFormStore.addCurrentCustomerBranch()"
                   v-if="
                     customerFormState.branchIndex === -1 &&
-                    !!customerFormState.editCustomerId
+                    !!customerFormState.editCustomerId &&
+                    customerFormData.status !== 'INACTIVE'
                   "
                   :disabled="!customerFormState.readonly"
                 />
@@ -2959,6 +2961,7 @@ const emptyCreateDialog = ref(false);
                   <EmployerFormBranch
                     v-if="!!customerFormState.editCustomerId"
                     :index="idx"
+                    :hide-action="customerFormData.status === 'INACTIVE'"
                     v-model:customer="customerFormData"
                     v-model:customer-branch="
                       customerFormData.customerBranch[idx]

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -21,14 +21,20 @@ import {
   DeleteButton,
   UndoButton,
 } from 'components/button';
-defineProps<{
-  prefixId?: string;
-  outlined?: boolean;
-  readonly?: boolean;
-  create?: boolean;
-  actionDisabled?: boolean;
-  customerType?: 'CORP' | 'PERS';
-}>();
+withDefaults(
+  defineProps<{
+    prefixId?: string;
+    outlined?: boolean;
+    readonly?: boolean;
+    create?: boolean;
+    actionDisabled?: boolean;
+    customerType?: 'CORP' | 'PERS';
+    hideAction?: boolean;
+  }>(),
+  {
+    hideAction: false,
+  },
+);
 defineEmits<{
   (e: 'save'): void;
   (e: 'edit'): void;
@@ -144,7 +150,10 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
 
 <template>
   <div class="row q-col-gutter-sm q-mb-sm">
-    <div class="col-12 text-weight-bold text-body1 row items-center">
+    <div
+      v-if="!hideAction"
+      class="col-12 text-weight-bold text-body1 row items-center"
+    >
       <q-icon
         flat
         size="xs"

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -40,14 +40,20 @@ defineEmits<{
   (e: 'delete'): void;
 }>();
 
-defineProps<{
-  index: number;
-  customerName: string;
-  readonly?: boolean;
-  prefixId?: string;
-  actionDisabled?: boolean;
-  customerType?: 'CORP' | 'PERS';
-}>();
+withDefaults(
+  defineProps<{
+    index: number;
+    customerName: string;
+    readonly?: boolean;
+    prefixId?: string;
+    actionDisabled?: boolean;
+    customerType?: 'CORP' | 'PERS';
+    hideAction?: boolean;
+  }>(),
+  {
+    hideAction: false,
+  },
+);
 </script>
 
 <template>
@@ -55,6 +61,7 @@ defineProps<{
     class="col-12 text-weight-bold row items-center q-mb-sm"
     :style="{ opacity: actionDisabled ? '.5' : undefined }"
     :id="`form-branch-customer-no-${index}`"
+    v-if="!hideAction"
   >
     {{
       index === 0