refactor: redirect to landing page on 404 permission error in messageError

- Display 'ยังไม่ได้แสดงความคิดเห็น' in red when isSysCancel is true
- Hide original comment button when system cancel
- Improve UX for pending comments on cancelled leaves

src/modules/03_recruiting/components/Table.vue

@@ -56,6 +56,7 @@ const optionsStatus = ref<ExamResultOption[]>([
   { label: "ขาดสอบ", value: "missed_exam" },
   { label: "ผ่าน", value: "pass" },
   { label: "ไม่ผ่าน", value: "notpass" },
+  { label: "อื่น ๆ", value: "other" },
 ]);
 
 const emit = defineEmits([

src/modules/03_recruiting/interface/request/Period.ts

@@ -46,6 +46,7 @@ interface RequestPeriodCompete {
   year: number;
   announcementDate: string | null;
   rootDnaId: string;
+  scoreExpireDate: string | null;
 }
 
 interface RequestPeriodDisable {
@@ -65,6 +66,7 @@ interface RequestPeriodDisable {
   year: number;
   announcementDate: string | null;
   rootDnaId: string;
+  scoreExpireDate: string | null;
 }
 
 interface RequestPosition {

src/modules/03_recruiting/views/01_compete/PeriodAdd.vue

@@ -56,6 +56,7 @@ const fileImgDataUpload = ref<File[]>([]);
 const fileImgs = ref<UploadType[]>([]);
 const id = ref<string>("");
 const edit = ref<boolean>(false);
+const scoreExpireDate = ref<Date | null>(null); //วันหมดอายุบัญชี
 
 /** กลับไปหน้าหลัก */
 function clickBack() {
@@ -101,6 +102,7 @@ async function fetchData() {
 
       fileDocs.value = files;
       fileImgs.value = images;
+      scoreExpireDate.value = data.scoreExpireDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -256,7 +258,11 @@ function sendData() {
     year: yearly.value,
     announcementDate:
       dateAnnounce.value !== null ? convertDateToAPI(dateAnnounce.value) : null,
-     rootDnaId: !edit.value ?  dataPositionKeycloak.value.rootDnaId : undefined,
+    scoreExpireDate:
+      scoreExpireDate.value !== null
+        ? convertDateToAPI(scoreExpireDate.value)
+        : null,
+    rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
   };
   return valueData;
 }
@@ -359,6 +365,13 @@ function dateThaiRange(val: [Date, Date]) {
     return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
   }
 }
+function onUpdateScoreExpireDate(val: Date | null) {
+  if (val) {
+    const newDate = new Date(val);
+    newDate.setFullYear(newDate.getFullYear() + 2);
+    scoreExpireDate.value = newDate;
+  }
+}
 
 watch(organizationShortName, (count: DataOption2, prevCount: DataOption2) => {
   organizationNameOptions.value = [];
@@ -455,6 +468,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
             <q-input
               outlined
@@ -470,6 +484,7 @@ onMounted(async () => {
               input-class="text-right"
             ></q-input>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-3" v-if="announcementExam">
             <datepicker
               v-model="dateExam"
@@ -505,6 +520,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
               v-model="dateAnnouncement"
@@ -547,6 +563,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
               v-model="dateRegister"
@@ -572,6 +589,7 @@ onMounted(async () => {
                     dateRegister != null ? dateThaiRange(dateRegister) : null
                   "
                   :label="`${'วันที่สมัคร'}`"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -585,6 +603,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div
             class="col-xs-12 col-sm-3 col-md-3"
             v-if="announcementExam && isFeeNotZero"
@@ -614,6 +633,7 @@ onMounted(async () => {
                   "
                   :label="`${'วันที่ชำระเงิน'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -636,6 +656,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -653,6 +674,48 @@ onMounted(async () => {
                   "
                   :label="`${'วันประกาศผลสอบ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              v-model="scoreExpireDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="
+                    scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
+                  "
+                  :label="`${'วันหมดอายุบัญชี'}`"
+                  clearable
+                  @clear="scoreExpireDate = null"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon

src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue

@@ -47,7 +47,7 @@ const positionPathOptions = ref<DataOption2[]>([]);
 const organizationShortName = ref<DataOption2>({ id: "", name: "" });
 const organizationName = ref<DataOption2>({ id: "", name: "" });
 const organizationNameOptions = ref<DataOption2[]>([]);
-
+const scoreExpireDate = ref<Date | null>(null); //วันหมดอายุบัญชี
 const fileDocDataUpload = ref<File[]>([]);
 const fileDocs = ref<UploadType[]>([]);
 const fileImgDataUpload = ref<File[]>([]);
@@ -93,6 +93,7 @@ async function fetchData() {
         data.announcementDate != null ? new Date(data.announcementDate) : null;
       fileDocs.value = data.documents;
       fileImgs.value = data.images;
+      scoreExpireDate.value = data.scoreExpireDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -163,6 +164,10 @@ function sendData() {
     announcementDate:
       dateAnnounce.value !== null ? convertDateToAPI(dateAnnounce.value) : null,
     rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
+    scoreExpireDate:
+      scoreExpireDate.value !== null
+        ? convertDateToAPI(scoreExpireDate.value)
+        : null,
   };
   return valueData;
 }
@@ -352,6 +357,14 @@ function dateThaiRange(val: [Date, Date] | null) {
   }
 }
 
+function onUpdateScoreExpireDate(val: Date | null) {
+  if (val) {
+    const newDate = new Date(val);
+    newDate.setFullYear(newDate.getFullYear() + 2);
+    scoreExpireDate.value = newDate;
+  }
+}
+
 watch(organizationShortName, (count: DataOption2, prevCount: DataOption2) => {
   organizationNameOptions.value = [];
 });
@@ -390,7 +403,7 @@ onMounted(async () => {
     <q-form ref="myForm">
       <q-card-section class="q-pa-md">
         <div class="col-xs-12 col-sm-8"></div>
-        <div class="col-12 row items-center q-col-gutter-x-sm">
+        <div class="col-12 row q-col-gutter-sm">
           <div class="col-xs-12 col-sm-6">
             <q-input
               outlined
@@ -402,8 +415,10 @@ onMounted(async () => {
                 (val:string) =>
                   !!val || `${'กรุณากรอกชื่อรอบคัดเลือก/ชื่อประกาศ'}`,
               ]"
+              hide-bottom-space
             ></q-input>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <q-input
               outlined
@@ -413,8 +428,10 @@ onMounted(async () => {
               dense
               lazy-rules
               :rules="[(val:number) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
+              hide-bottom-space
             ></q-input>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
               v-model="yearly"
@@ -435,6 +452,7 @@ onMounted(async () => {
                   :model-value="yearly + 543"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                   :label="`${'ปีงบประมาณ'}`"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -460,6 +478,7 @@ onMounted(async () => {
               :rules="[
                 (val:any) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
               ]"
+              hide-bottom-space
             ></q-input>
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
@@ -484,6 +503,7 @@ onMounted(async () => {
                   :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -517,10 +537,11 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -554,10 +575,11 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -594,12 +616,13 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="
                     datePayment != null ? dateThaiRange(datePayment) : null
                   "
                   :label="`${'วันที่ชำระเงิน'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -622,6 +645,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -633,12 +657,54 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
                   :label="`${'วันประกาศผลสอบ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              v-model="scoreExpireDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
+                  "
+                  :label="`${'วันหมดอายุบัญชี'}`"
+                  clearable
+                  @clear="scoreExpireDate = null"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon

src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue

@@ -93,6 +93,7 @@ const examTypeOptions = [
   { name: "แพทย์", id: "docter" },
 ];
 const category = ref<string>("");
+const scoreExpireDate = ref<Date | null>(null);
 
 const fileDocDataUpload = ref<File[]>([]);
 const fileDocs = ref<UploadType[]>([]);
@@ -333,6 +334,7 @@ async function fetchData() {
       refNo1.value = data.refNo1;
       reason.value = data.reason;
       graduationYearLock.value = data.graduationYearLock;
+      scoreExpireDate.value = data.scoreExpireDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -506,6 +508,10 @@ function sendData() {
     refNo1: refNo1.value,
     reason: reason.value,
     graduationYearLock: Number(graduationYearLock.value),
+    scoreExpireDate:
+      scoreExpireDate.value != null
+        ? convertDateToAPI(scoreExpireDate.value)
+        : null,
   };
   return valueData;
 }
@@ -939,6 +945,14 @@ watch(
   }
 );
 
+function onUpdateScoreExpireDate(val: Date | null) {
+  if (val) {
+    const newDate = new Date(val);
+    newDate.setFullYear(newDate.getFullYear() + 2);
+    scoreExpireDate.value = newDate;
+  }
+}
+
 onMounted(async () => {
   hideLoader();
   if (route.params.id != undefined) {
@@ -1242,6 +1256,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -1275,21 +1290,63 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
-          <div class="row col-12" v-if="announcementExam">
-            <div class="col-xs-12 col-md-2">
-              <q-input
-                outlined
-                v-model="graduationYearLock"
-                label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
-                dense
-                :readonly="checkRoutePermisson"
-                lazy-rules
-                :rules="[
+
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              v-model="scoreExpireDate"
+              :locale="'th'"
+              autoApply
+              :readonly="checkRoutePermisson"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  :readonly="checkRoutePermisson"
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="
+                    scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
+                  "
+                  :label="`${'วันหมดอายุบัญชี'}`"
+                  clearable
+                  @clear="scoreExpireDate = null"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
+            <q-input
+              outlined
+              v-model="graduationYearLock"
+              label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
+              dense
+              :readonly="checkRoutePermisson"
+              lazy-rules
+              :rules="[
                   (val:string) => !!val || `${'กรุณากรอกล็อกวันที่สำเร็จการศึกษา (ปี)'}`,
                 ]"
-                type="number"
-              ></q-input>
-            </div>
+              type="number"
+            ></q-input>
           </div>
 
           <div class="col-12" v-if="announcementExam">

src/modules/05_placement/components/probation/DialogOrder.vue

@@ -264,7 +264,7 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 85%">
-      <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
+      <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" /> 
       <q-separator />
       <q-card-section>
         <div class="row col-12 q-col-gutter-sm">
@@ -341,7 +341,7 @@ watch(
                   keep-color
                   color="primary"
                   dense
-                  :disable="commandType"
+                  :disable="!commandType ? true : false"
                   v-model="scope.selected"
                 />
               </template>
@@ -352,7 +352,7 @@ watch(
                       keep-color
                       color="primary"
                       dense
-                      :disable="commandType"
+                      :disable="!commandType ? true : false"
                       v-model="props.selected"
                     />
                   </q-td>

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue

@@ -97,6 +97,8 @@ const develop_result_option = ref<any>([
 
 const isCheckFile = ref<boolean>(false);
 
+const isSelectionPartfour = ref<boolean>(false);
+
 // score
 const score1 = computed(() => {
   if (
@@ -212,20 +214,21 @@ const percent_sum: any = computed(() => {
 });
 const score4 = computed(() => {
   return (
-    (Number(orientation.value) +
-      Number(self_learning.value) +
-      Number(training_seminar.value) +
-      Number(other_training.value)) /
-    4
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    (isSelectionPartfour.value ? Number(other_training.value) : 0)
   );
 });
 const score5 = computed(() => {
-  const total =
+  const rawTotal =
     (Number(orientation_percent.value) +
       Number(self_learning_percent.value) +
       Number(training_seminar_percent.value) +
       Number(other_training_percent.value)) /
-    4;
+    (isSelectionPartfour.value ? 4 : 3);
+
+  const total = Math.trunc(rawTotal);
 
   develop_result.value = total > 60 ? 1 : 0;
 
@@ -1133,10 +1136,20 @@ onMounted(async () => {
               <q-separator class="q-my-xs" />
               <div class="row q-gutter-md align-center q-pl-md">
                 <div class="col-8">
+                  <q-checkbox
+                    class="q-mr-sm"
+                    dense
+                    v-model="isSelectionPartfour"
+                    @update:model-value="
+                      other_training = 0;
+                      other_training_percent = 0;
+                    "
+                  />
                   4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
                 </div>
                 <div class="col">
                   <q-input
+                    :disable="!isSelectionPartfour"
                     outlined
                     dense
                     type="number"
@@ -1148,6 +1161,7 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
+                    :disable="!isSelectionPartfour"
                     outlined
                     dense
                     type="number"

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue

@@ -90,6 +90,8 @@ const develop_result_option = ref<any>([
 // footer
 const dateAutherise = ref<any>(null);
 
+const isSelectionPartfour = ref<boolean>(false);
+
 onMounted(() => {
   fecthAssign(assignId.value);
 });
@@ -239,20 +241,21 @@ const percent_sum: any = computed(() => {
 });
 const score4 = computed(() => {
   return (
-    (Number(orientation.value) +
-      Number(self_learning.value) +
-      Number(training_seminar.value) +
-      Number(other_training.value)) /
-    4
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    (isSelectionPartfour.value ? Number(other_training.value) : 0)
   );
 });
 const score5 = computed(() => {
-  const total =
+  const rawTotal =
     (Number(orientation_percent.value) +
       Number(self_learning_percent.value) +
       Number(training_seminar_percent.value) +
       Number(other_training_percent.value)) /
-    4;
+    (isSelectionPartfour.value ? 4 : 3);
+
+  const total = Math.trunc(rawTotal);
 
   develop_result.value = total > 60 ? 1 : 0;
 
@@ -1214,10 +1217,20 @@ watch(lengthdiscipline_level, (newLength) => {
                   <q-separator class="q-my-xs" />
                   <div class="row q-gutter-md align-center q-pl-md">
                     <div class="col-8">
+                      <q-checkbox
+                        class="q-mr-sm"
+                        dense
+                        v-model="isSelectionPartfour"
+                        @update:model-value="
+                          other_training = 0;
+                          other_training_percent = 0;
+                        "
+                      />
                       4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
                     </div>
                     <div class="col">
                       <q-input
+                        :disable="!isSelectionPartfour"
                         outlined
                         dense
                         type="number"
@@ -1231,6 +1244,7 @@ watch(lengthdiscipline_level, (newLength) => {
                         outlined
                         dense
                         type="number"
+                        :disable="!isSelectionPartfour"
                         v-model="other_training_percent"
                         :rules="[(val:number) => val <= 100 || 'ร้อยละต้องไม่เกิน 100']"
                         hide-bottom-space

src/modules/09_leave/components/05_Leave/DetailLeavePage.vue

@@ -1044,7 +1044,12 @@ onMounted(async () => {
                                 props.row.comment == ''
                               "
                             >
+                              <div v-if="isSysCancel" class="text-red-6">
+                                ยังไม่ได้แสดงความคิดเห็น
+                              </div>
+
                               <q-btn
+                                v-else
                                 dense
                                 :disable="
                                   statusCheck == 'NEW' ||
@@ -1146,7 +1151,7 @@ onMounted(async () => {
                     ผู้มีอำนาจยังไม่ได้พิจารณา ใบลานี้ถูกยกเลิกแล้ว
                   </q-banner>
                 </div>
-                
+
                 <div class="row col-12 q-pa-md" v-else>
                   <div class="col-12 row bg-white q-col-gutter-md">
                     <div class="col-xs-6 row items-start">

src/modules/09_leave/views/02_WorkingMain.vue

@@ -51,7 +51,7 @@ const isPermissionTab4 = computed(() => {
         name="3"
         label="ประมวลผลการขาดราชการ/มาสาย"
       />
-      <q-tab v-if="isPermissionTab4" name="4" label="รอประมวลผล/มาสาย" />
+      <q-tab v-if="isPermissionTab4" name="4" label="รอประมวลผล" />
       <!-- เพิ่มแท็บใหม่ -->
     </q-tabs>
 

src/stores/mixin.ts

@@ -362,13 +362,21 @@ export const useCounterMixin = defineStore("mixin", () => {
   const messageError = (q: any, e: any = "", msg: string = "") => {
     if (e.response !== undefined) {
       if (e.response.data.status !== undefined) {
-        if (e.response.data.status == 401) {
+        if (
+          e.response.data.status == 401 ||
+          (e.response.data.status == 404 &&
+            e.response.data.message == "ไม่พบข้อมูลสิทธิ์")
+        ) {
           //invalid_token
+          const msg =
+            e.response.data.status == 401
+              ? "ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง"
+              : e.response.data.message;
           q.dialog({
             component: CustomComponent,
             componentProps: {
               title: `พบข้อผิดพลาด`,
-              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              message: msg,
               icon: "warning",
               color: "red",
               onlycancel: true,