From c4812666548912ff8aecb2cca5b76c298a3dcedc Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 7 Jul 2025 12:42:52 +0700
Subject: [PATCH] refactor: enhance access control and visibility logic across
 various components

---
 .../04_property-management/FormProperty.vue    | 16 +++++++++-------
 src/components/TreeComponent.vue               | 13 +------------
 src/pages/04_property-managment/MainPage.vue   | 18 +++++++++++++++---
 .../04_property-managment/PropertyDialog.vue   |  4 +++-
 src/pages/05_quotation/PaymentForm.vue         |  2 +-
 src/pages/05_quotation/QuotationForm.vue       |  4 +++-
 src/pages/11_credit-note/FormPage.vue          |  4 ++--
 src/pages/12_debit-note/FormPage.vue           | 12 +++++++++---
 8 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/components/04_property-management/FormProperty.vue b/src/components/04_property-management/FormProperty.vue
index 34067e8e..6be9f885 100644
--- a/src/components/04_property-management/FormProperty.vue
+++ b/src/components/04_property-management/FormProperty.vue
@@ -48,6 +48,7 @@ defineProps<{
   readonly?: boolean;
   onDrawer?: boolean;
   inputOnly?: boolean;
+  disableToggle?: boolean;
 }>();
 
 defineEmits<{
@@ -76,6 +77,7 @@ defineEmits<{
         <ToggleButton
           class="q-mr-sm"
           two-way
+          :disable="disableToggle"
           :model-value="status !== 'INACTIVE'"
           @click="
             () => {
@@ -195,8 +197,8 @@ defineEmits<{
 }
 
 :deep(
-    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
-  ) {
+  .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+) {
   justify-content: start !important;
   padding-right: 8px !important;
   padding-top: 16px;
@@ -208,15 +210,15 @@ defineEmits<{
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
 :deep(
-    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
-      .q-focus-helper
-  ) {
+  .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 
diff --git a/src/components/TreeComponent.vue b/src/components/TreeComponent.vue
index 58dd3f5e..68ce72a4 100644
--- a/src/components/TreeComponent.vue
+++ b/src/components/TreeComponent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { BranchWithChildren } from 'stores/branch/types';
 import KebabAction from './shared/KebabAction.vue';
-import { isRoleInclude } from 'stores/utils';
 
 const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
   default: [],
@@ -120,17 +119,7 @@ defineEmits<{
             />
 
             <q-btn
-              v-if="
-                node.isHeadOffice &&
-                typeTree === 'branch' &&
-                isRoleInclude([
-                  'system',
-                  'head_of_admin',
-                  'admin',
-                  'executive',
-                  'accountant',
-                ])
-              "
+              v-if="node.isHeadOffice && typeTree === 'branch'"
               :id="`create-sub-branch-btn-${node.name}`"
               @click.stop="$emit('create', node)"
               icon="mdi-file-plus-outline"
diff --git a/src/pages/04_property-managment/MainPage.vue b/src/pages/04_property-managment/MainPage.vue
index 2ced8354..f22a8334 100644
--- a/src/pages/04_property-managment/MainPage.vue
+++ b/src/pages/04_property-managment/MainPage.vue
@@ -14,7 +14,7 @@ import { FloatingActionButton, PaginationComponent } from 'src/components';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 import PropertyDialog from './PropertyDialog.vue';
 import { Property } from 'src/stores/property/types';
-import { dialog, toCamelCase } from 'src/stores/utils';
+import { dialog, toCamelCase, canAccess } from 'src/stores/utils';
 import CreateButton from 'src/components/AddButton.vue';
 import useOptionStore from 'stores/options';
 import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
@@ -331,6 +331,7 @@ watch(
 </script>
 <template>
   <FloatingActionButton
+    v-if="canAccess('workflow', 'edit')"
     style="z-index: 999"
     hide-icon
     @click="triggerDialog('add')"
@@ -536,11 +537,19 @@ watch(
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
-            v-if="pageState.total !== 0 || pageState.searchDate.length > 0"
+            v-if="
+              pageState.total !== 0 ||
+              pageState.searchDate.length > 0 ||
+              !canAccess('workflow', 'edit')
+            "
             :not-found="!!pageState.inputSearch"
           />
           <CreateButton
-            v-if="pageState.total === 0 && pageState.searchDate.length === 0"
+            v-if="
+              pageState.total === 0 &&
+              pageState.searchDate.length === 0 &&
+              canAccess('workflow', 'edit')
+            "
             @click="triggerDialog('add')"
             label="general.add"
             :i18n-args="{ text: $t('flow.title') }"
@@ -698,6 +707,7 @@ watch(
                       "
                     />
                     <KebabAction
+                      v-if="canAccess('workflow', 'edit')"
                       :id-name="props.row.name"
                       :status="props.row.status"
                       @view="
@@ -815,6 +825,7 @@ watch(
                         "
                       />
                       <KebabAction
+                        v-if="canAccess('workflow', 'edit')"
                         :id-name="props.row.id"
                         :status="props.row.status"
                         @view="
@@ -906,6 +917,7 @@ watch(
     @drawer-undo="() => undo()"
     @close="() => resetForm()"
     @submit="() => submit()"
+    :hide-action="!canAccess('workflow', 'edit')"
     :readonly="!pageState.isDrawerEdit"
     :isEdit="pageState.isDrawerEdit"
     v-model="pageState.addModal"
diff --git a/src/pages/04_property-managment/PropertyDialog.vue b/src/pages/04_property-managment/PropertyDialog.vue
index 333f0ec7..66161d57 100644
--- a/src/pages/04_property-managment/PropertyDialog.vue
+++ b/src/pages/04_property-managment/PropertyDialog.vue
@@ -30,6 +30,7 @@ withDefaults(
   defineProps<{
     readonly?: boolean;
     isEdit?: boolean;
+    hideAction?: boolean;
   }>(),
   { readonly: false, isEdit: false },
 );
@@ -151,7 +152,7 @@ defineEmits<{
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
             <div
-              v-if="propertyData.status !== 'INACTIVE'"
+              v-if="propertyData.status !== 'INACTIVE' && !hideAction"
               class="surface-1 row rounded"
             >
               <UndoButton
@@ -236,6 +237,7 @@ defineEmits<{
             <FormProperty
               onDrawer
               :readonly="!isEdit"
+              :disable-toggle="hideAction"
               v-model:name="formProperty.name"
               v-model:name-en="formProperty.nameEN"
               v-model:type="formProperty.type"
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 0ccbaba6..64f57560 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -480,7 +480,7 @@ onMounted(async () => {
         </div>
 
         <!-- bill -->
-        <span class="app-text-muted-2 q-pt-md">
+        <span class="app-text-muted-2 q-pt-md" v-if="paymentData.length > 0">
           {{ $t('quotation.receiptDialog.billOfPayment') }}
         </span>
 
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 99d6a124..52e2fc69 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -9,6 +9,7 @@ import {
   dialogWarningClose,
   formatNumberDecimal,
   canAccess,
+  isRoleInclude,
 } from 'stores/utils';
 import { ProductTree, quotationProductTree } from './utils';
 
@@ -1736,7 +1737,7 @@ function covertToNode() {
                   :readonly="
                     {
                       quotation: quotationFormState.mode !== 'edit',
-                      invoice: false,
+                      invoice: isRoleInclude(['sale', 'head_of_sale']),
                       accepted: true,
                     }[view]
                   "
@@ -1940,6 +1941,7 @@ function covertToNode() {
                 view !== View.Receipt &&
                 view !== View.Complete
               "
+              :readonly="isRoleInclude(['sale', 'head_of_sale'])"
               :data="quotationFormState.source"
               v-model:first-code-payment="firstCodePayment"
               @fetch-status="
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index 88d3606c..007dcc84 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -34,7 +34,7 @@ import {
 import { RequestWork } from 'src/stores/request-list/types';
 import { storeToRefs } from 'pinia';
 import useOptionStore from 'src/stores/options';
-import { dialogWarningClose, canAccess } from 'src/stores/utils';
+import { dialogWarningClose, canAccess, isRoleInclude } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import { QForm } from 'quasar';
 import { getName } from 'src/services/keycloak';
@@ -728,7 +728,7 @@ onMounted(async () => {
 
           <AdditionalFileExpansion
             v-if="view !== CreditNoteStatus.Success"
-            :readonly="false"
+            :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             v-model:file-data="attachmentData"
             :transform-url="
               async (url: string) => {
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index df375d65..8806d04f 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -46,7 +46,13 @@ import {
 import { RequestWork } from 'src/stores/request-list/types';
 import { storeToRefs } from 'pinia';
 import useOptionStore from 'src/stores/options';
-import { deleteItem, dialog, dialogWarningClose } from 'src/stores/utils';
+import {
+  canAccess,
+  deleteItem,
+  dialog,
+  dialogWarningClose,
+  isRoleInclude,
+} from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import { Employee } from 'src/stores/employee/types';
 import QuotationFormWorkerSelect from '../05_quotation/QuotationFormWorkerSelect.vue';
@@ -1071,6 +1077,7 @@ async function submitAccepted() {
           <PaymentForm
             v-if="view === QuotationStatus.PaymentPending"
             is-debit-note
+            :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             :data="debitNoteData"
             @fetch-status="
               () => {
@@ -1126,7 +1133,6 @@ async function submitAccepted() {
               view === QuotationStatus.Issued ||
               view === QuotationStatus.Accepted
             "
-            readonly
             :total-price="summaryPrice.finalPrice"
             class="q-mb-md"
             v-model:pay-type="currentFormData.payCondition"
@@ -1144,7 +1150,7 @@ async function submitAccepted() {
               view === QuotationStatus.Accepted ||
               view === QuotationStatus.PaymentPending
             "
-            :readonly
+            :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             v-model:file-data="attachmentData"
             :transform-url="
               async (url: string) => {