feat: add ready status of request data

src/components/StatCardComponent.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
         | 'dark-orange'
         | 'cyan'
         | 'yellow'
+        | 'light-yellow'
         | 'red'
         | 'magenta'
         | 'blue'
@@ -45,11 +46,7 @@ const props = withDefaults(
     >
       <div class="stat-card__content row items-center q-pa-sm">
         <div class="col-4 text-center">
-          <q-avatar
+          <q-avatar size="lg" style="background-color: hsla(0 0% 100% /0.2)">
-            size="lg"
-            style="background-color: hsla(0 0% 100% /0.2)"
-            text-color="white"
-          >
             <Icon :icon="v.icon" width="24px" />
           </q-avatar>
         </div>
@@ -116,6 +113,10 @@ const props = withDefaults(
   --_color: var(--orange-4-hsl);
 }
 
+.stat-card__light-yellow {
+  --_color: var(--yellow-6-hsl);
+}
+
 .stat-card__orange {
   --_color: var(--orange-5-hsl);
 }

src/i18n/eng.ts

@@ -917,6 +917,7 @@ export default {
       },
 
       Pending: 'Pending',
+      Ready: 'Ready',
       InProgress: 'In Progress',
       Completed: 'Completed',
       Canceled: 'Canceled',

src/i18n/tha.ts

@@ -908,7 +908,8 @@ export default {
         Canceled: 'ยกเลิก',
       },
       Pending: 'รอดำเนินการ',
-      InProgress: 'ดำเนินการ',
+      Ready: 'พร้อมดำเนินการ',
+      InProgress: 'กำลังดำเนินการ',
       Completed: 'เสร็จสิ้น',
       Canceled: 'ยกเลิก',
 

src/pages/08_request-list/MainPage.vue

@@ -141,6 +141,12 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
                 label: 'requestList.status.Pending',
                 color: 'orange',
               },
+              {
+                icon: 'mdi:tag-check-outline',
+                count: stats[RequestDataStatus.Pending],
+                label: 'requestList.status.Ready',
+                color: 'light-yellow',
+              },
               {
                 icon: 'mdi-timer-sand',
                 count: stats[RequestDataStatus.InProgress],

src/pages/08_request-list/TableRequestList.vue

@@ -173,6 +173,7 @@ function getEmployeeName(
             :hsla-color="
               {
                 [RequestDataStatus.Pending]: '--orange-5-hsl',
+                [RequestDataStatus.Ready]: '--yellow-6-hsl',
                 [RequestDataStatus.InProgress]: '--blue-6-hsl',
                 [RequestDataStatus.Completed]: '--green-8-hsl',
                 [RequestDataStatus.Canceled]: '--red-5-hsl',

src/stores/request-list/index.ts

@@ -23,6 +23,7 @@ export const useRequestList = defineStore('request-list', () => {
   const pageSize = ref<number>(30);
   const stats = ref<Record<RequestDataStatus, number>>({
     [RequestDataStatus.Pending]: 0,
+    [RequestDataStatus.Ready]: 0,
     [RequestDataStatus.InProgress]: 0,
     [RequestDataStatus.Completed]: 0,
     [RequestDataStatus.Canceled]: 0,

src/stores/request-list/types.ts

@@ -20,6 +20,7 @@ export type RequestData = {
 
 export enum RequestDataStatus {
   Pending = 'Pending',
+  Ready = 'Ready',
   InProgress = 'InProgress',
   Completed = 'Completed',
   Canceled = 'Canceled',