From 9e7d67fb6c4e01114d6dc4014a303d92e0056e4d Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 15:41:59 +0700
Subject: [PATCH 1/2] feat: add request cancel badge

---
 src/i18n/eng.ts                                | 1 +
 src/i18n/tha.ts                                | 1 +
 src/pages/08_request-list/TableRequestList.vue | 9 +++++++++
 src/stores/request-list/types.ts               | 5 +++++
 4 files changed, 16 insertions(+)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index aa6cedb5..7354505a 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -936,6 +936,7 @@ export default {
       InProgress: 'In Progress',
       Completed: 'Completed',
       Canceled: 'Canceled',
+      CancelRequested: 'Cancel Requested',
 
       AwaitOrder: 'Awaiting Order',
       ReadyOrder: 'Ready for Order',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 1ab24f72..54b9d96e 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -924,6 +924,7 @@ export default {
       InProgress: 'กำลังดำเนินการ',
       Completed: 'เสร็จสิ้น',
       Canceled: 'ยกเลิก',
+      CancelRequested: 'ต้องการยกเลิก',
 
       AwaitOrder: 'รอสั่งงาน',
       ReadyOrder: 'พร้อมสั่งงาน',
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 4277204b..22abf9a9 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -183,6 +183,15 @@ function getEmployeeName(
               $t(`requestList.status.${props.row.requestDataStatus}`) || '-'
             "
           />
+          <BadgeComponent
+            v-if="
+              props.row.customerRequestCancel &&
+              props.row.requestDataStatus !== RequestDataStatus.Canceled
+            "
+            :hsla-color="'--red-5-hsl'"
+            class="q-ml-sm"
+            :title="$t(`requestList.status.CancelRequested`) || '-'"
+          />
         </q-td>
         <q-td class="text-right">
           <q-btn
diff --git a/src/stores/request-list/types.ts b/src/stores/request-list/types.ts
index 124a8c99..c17e0ebf 100644
--- a/src/stores/request-list/types.ts
+++ b/src/stores/request-list/types.ts
@@ -9,6 +9,9 @@ export type RequestData = {
   createdAt: string;
   updatedAt: string;
 
+  customerRequestCancel?: boolean;
+  customerRequestCancelReason?: string;
+
   quotation: QuotationFull & {
     debitNoteQuotationId: string;
     isDebitNote: boolean;
@@ -60,6 +63,8 @@ export type RequestWork = {
   attributes?: Attributes;
   creditNoteId?: string;
   processByUserId?: string;
+  customerRequestCancel?: boolean;
+  customerRequestCancelReason?: string;
 };
 
 export type RowDocument = {

From 72985c382f8b68dec2f6fad2a0dafe2db15930bb Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 15:55:18 +0700
Subject: [PATCH 2/2] feat: customer requested cancel indicator

---
 src/i18n/eng.ts                               |  1 +
 src/i18n/tha.ts                               |  1 +
 .../08_request-list/ProductExpansion.vue      | 27 ++++++++++---------
 src/pages/08_request-list/RequestListView.vue |  2 ++
 .../08_request-list/TableRequestList.vue      | 11 +++++++-
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 7354505a..c58c3940 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -113,6 +113,7 @@ export default {
     group: 'Group',
     laborIdentified: 'Labor identified',
     beDue: 'Due in',
+    noReason: 'No reason',
     due: 'Due',
     overDue: 'Overdue',
     status: 'Status',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 54b9d96e..9f59da2f 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -113,6 +113,7 @@ export default {
     group: 'กลุ่ม',
     laborIdentified: 'ระบุแรงงาน',
     beDue: 'จะครบกำหนดในอีก',
+    noReason: 'ไม่มีเหตุผล',
     due: 'ครบกำหนด',
     overDue: 'เลยกำหนด',
     status: 'สถานะ',
diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index a84e8cc4..788f4d0c 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -1,20 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { baseUrl } from 'src/stores/utils';
 
-import BadgeComponent from 'src/components/BadgeComponent.vue';
-
 import { ProductRelation, PayCondition } from 'src/stores/quotations/types';
 import { Step, RequestWorkStatus } from 'src/stores/request-list/types';
-
-const workStatus = ref([
-  RequestWorkStatus.Ready,
-  RequestWorkStatus.Waiting,
-  RequestWorkStatus.InProgress,
-  RequestWorkStatus.Validate,
-  RequestWorkStatus.Ended,
-  RequestWorkStatus.Completed,
-]);
+import BadgeComponent from 'src/components/BadgeComponent.vue';
 
 defineEmits<{
   (
@@ -29,6 +18,8 @@ const props = defineProps<{
   code: string;
   status?: Step;
   imgUrl?: string;
+  requestCancel?: boolean;
+  requestCancelReason?: string;
   installmentInfo?: {
     total: number;
     paid?: number;
@@ -108,6 +99,18 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
           <div class="rounded q-px-xs app-text-muted surface-3">
             {{ product?.code || code }}
           </div>
+          <BadgeComponent
+            v-if="requestCancel && !cancel"
+            :hsla-color="'--red-5-hsl'"
+            class="q-ml-sm"
+            :title="$t(`requestList.status.CancelRequested`) || '-'"
+          >
+            <template #append>
+              <q-tooltip>
+                {{ requestCancelReason || $t('general.noReason') }}
+              </q-tooltip>
+            </template>
+          </BadgeComponent>
         </div>
 
         <div class="q-ml-auto q-gutter-y-xs">
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 2f5ee598..eae2002a 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -731,6 +731,8 @@ async function submitRequestAction(data: {
           <!-- product -->
           <template v-for="(value, index) in productsList" :key="value">
             <ProductExpansion
+              :request-cancel="value.customerRequestCancel"
+              :request-cancel-reason="value.customerRequestCancelReason"
               :cancel="data.requestDataStatus === RequestDataStatus.Canceled"
               :readonly="
                 data.requestDataStatus === RequestDataStatus.Canceled ||
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 22abf9a9..359cf498 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -191,7 +191,16 @@ function getEmployeeName(
             :hsla-color="'--red-5-hsl'"
             class="q-ml-sm"
             :title="$t(`requestList.status.CancelRequested`) || '-'"
-          />
+          >
+            <template #append>
+              <q-tooltip>
+                {{
+                  props.row.customerRequestCancelReason ||
+                  $t('general.noReason')
+                }}
+              </q-tooltip>
+            </template>
+          </BadgeComponent>
         </q-td>
         <q-td class="text-right">
           <q-btn