refactor: enhance access control and visibility logic across various components

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) => {