refactor: implement role-based access control for customer edit actions in BranchPage and MainPage components

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

@@ -9,7 +9,7 @@ import { baseUrl } from 'src/stores/utils';
 import useCustomerStore from 'stores/customer';
 import useFlowStore from 'stores/flow';
 import useOptionStore from 'stores/options';
-import { dialog } from 'stores/utils';
+import { dialog, canAccess } from 'stores/utils';
 
 import { Status } from 'stores/types';
 import { Employee } from 'stores/employee/types';
@@ -285,7 +285,7 @@ watch(
 <template>
   <FloatingActionButton
     style="z-index: 999"
-    v-if="$route.name !== 'CustomerManagement'"
+    v-if="$route.name !== 'CustomerManagement' && canAccess('customer', 'edit')"
     @click="openEmployerBranchForm('create')"
     hide-icon
   ></FloatingActionButton>
@@ -615,7 +615,7 @@ watch(
               <div class="text-center">
                 <TableEmpoloyee
                   :prefix-id="props.row.registerName || props.row.firstName"
-                  add-button
+                  :add-button="canAccess('customer', 'edit')"
                   in-table
                   :list-employee="listEmployee"
                   :columns-employee="columnsEmployee"
@@ -751,7 +751,7 @@ watch(
           })
         "
       >
-        <template #before>
+        <template #before v-if="canAccess('customer', 'edit')">
           <EditButton
             icon-only
             v-if="customerBranchFormState.dialogType === 'info'"

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

@@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { baseUrl, setPrefixName, waitAll } from 'src/stores/utils';
 import { dateFormat } from 'src/utils/datetime';
-import { dialogCheckData } from 'stores/utils';
+import { dialogCheckData, canAccess } from 'stores/utils';
 
 import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
@@ -658,7 +658,7 @@ const emptyCreateDialog = ref(false);
   <FloatingActionButton
     style="z-index: 999"
     :hide-icon="currentTab === 'employee'"
-    v-if="$route.name === 'CustomerManagement'"
+    v-if="$route.name === 'CustomerManagement' && canAccess('customer', 'edit')"
     @click="
       () => {
         if (currentTab === 'employee') {
@@ -1391,6 +1391,7 @@ const emptyCreateDialog = ref(false);
                             />
 
                             <KebabAction
+                              v-if="canAccess('customer', 'edit')"
                               :id-name="
                                 props.row.branch[0].customerName ||
                                 props.row.branch[0].firstName
@@ -1639,6 +1640,7 @@ const emptyCreateDialog = ref(false);
                             </template>
                             <template v-slot:action>
                               <KebabAction
+                                v-if="canAccess('customer', 'edit')"
                                 :status="props.row.status"
                                 :id-name="props.row.name"
                                 @view="
@@ -1889,6 +1891,7 @@ const emptyCreateDialog = ref(false);
                 "
               >
                 <TooltipComponent
+                  v-if="canAccess('customer', 'edit')"
                   class="self-end q-ma-md"
                   :title="'general.noData'"
                   :caption="'general.clickToCreate'"
@@ -1900,6 +1903,7 @@ const emptyCreateDialog = ref(false);
                   style="flex-grow: 1"
                 >
                   <EmptyAddButton
+                    v-if="canAccess('customer', 'edit')"
                     :label="'general.add'"
                     :i18n-args="{
                       text: $t(`customer.${currentTab}`),
@@ -1914,6 +1918,7 @@ const emptyCreateDialog = ref(false);
                       }
                     "
                   />
+                  <NoData v-else />
                 </div>
               </template>
             </div>
@@ -3865,6 +3870,7 @@ const emptyCreateDialog = ref(false);
     :on-create="customerFormState.dialogModal"
     :default-url="customerFormState.defaultCustomerImageUrl"
     :hidden-footer="!customerFormState.isImageEdit"
+    :change-disabled="!canAccess('customer', 'edit')"
     @add-image="
       async (v) => {
         if (!v) return;
@@ -4115,6 +4121,7 @@ const emptyCreateDialog = ref(false);
       >
         <ProfileBanner
           v-if="customerFormData.customerBranch !== undefined"
+          :readonly="!canAccess('customer', 'edit')"
           :prefix="customerFormData.registeredBranchId"
           :active="customerFormData.status !== 'INACTIVE'"
           hide-fade
@@ -4228,7 +4235,8 @@ const emptyCreateDialog = ref(false);
                     v-if="
                       customerFormState.branchIndex === -1 &&
                       !!customerFormState.editCustomerId &&
-                      customerFormState.dialogType !== 'create'
+                      customerFormState.dialogType !== 'create' &&
+                      canAccess('customer', 'edit')
                     "
                     :disabled="!customerFormState.readonly"
                   />
@@ -4412,7 +4420,10 @@ const emptyCreateDialog = ref(false);
                     prefix-id="info"
                     v-if="!!customerFormState.editCustomerId"
                     :index="idx"
-                    :hide-action="customerFormData.status === 'INACTIVE'"
+                    :hide-action="
+                      customerFormData.status === 'INACTIVE' ||
+                      !canAccess('customer', 'edit')
+                    "
                     v-model:customer="customerFormData"
                     v-model:customer-branch="
                       customerFormData.customerBranch[idx]