refactor: payment status i18n, danger color

src/css/app.scss

@@ -34,6 +34,9 @@ html {
   --warning-fg: 0 0% 100%;
   --warning-bg: var(--yellow-7-hsl);
 
+  --danger-fg: 0 0% 100%;
+  --danger-bg: var(--orange-7-hsl);
+
   --gender-male: var(--blue-5-hsl);
   --gender-female: var(--pink-7-hsl);
   --customer-corp: var(--purple-11-hsl);
@@ -178,6 +181,15 @@ html {
   background-color: hsl(var(--warning-bg));
 }
 
+.app-text-danger {
+  color: hsl(var(--danger-bg));
+}
+
+.app-bg-danger {
+  color: hsl(var(--danger-fg));
+  background-color: hsl(var(--danger-bg));
+}
+
 .app-text-male {
   color: hsl(var(--gender-male));
 }

src/css/quasar.variables.scss

@@ -10,9 +10,10 @@ $dark: var(--gray-10);
 $dark-page: var(--gray-11);
 
 $positive: #00bd9d;
-$negative: var(--red-9);
+$negative: var(--red-8);
 $info: var(--blue-6);
 $warning: #ffc224;
+$danger: var(--orange-7);
 
 $disabled: var(--stone-4);
 $input-border: var(--gray-2);
@@ -114,6 +115,21 @@ div.fullscreen.q-drawer__backdrop {
   color: $input-border;
 }
 
+.danger,
+.danger *,
+[danger],
+[danger] * :not(:deep(.q-checkbox)) {
+  color: (var(--danger)) !important;
+}
+
+.bg-danger {
+  background: $danger;
+}
+
+.text-danger {
+  color: $danger;
+}
+
 .q-field--outlined.q-field--readonly .q-field__control:before {
   border-color: transparent;
 }
@@ -133,11 +149,15 @@ div.fullscreen.q-drawer__backdrop {
   color: hsl(var(--text-mute));
 }
 
-.q-tree__node-header.relative-position.row.no-wrap.items-center:has(.clickable-node):hover {
+.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
+    .clickable-node
+  ):hover {
   background-color: hsla(var(--info-bg) / 0.1);
 }
 
-.q-tree__node-header.relative-position.row.no-wrap.items-center:has(.clickable-node.active-node) {
+.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
+    .clickable-node.active-node
+  ) {
   background-color: hsla(var(--info-bg) / 0.1);
 }
 
@@ -145,7 +165,8 @@ div.fullscreen.q-drawer__backdrop {
   padding-left: 0px !important;
 }
 
-.q-tree__node.relative-position.q-tree__node--child:not(:first-child) .q-tree__node-header:before {
+.q-tree__node.relative-position.q-tree__node--child:not(:first-child)
+  .q-tree__node-header:before {
   top: -32px !important;
 }
 

src/i18n/eng/index.ts

@@ -683,6 +683,10 @@ export default {
       amountToBePaid: 'Amount to be paid',
       slip: 'Slip',
       paymentDocs: 'Payment Documents',
+      PaymentWait: 'Waiting for payment',
+      PaymentInProcess: 'Waiting for verification',
+      PaymentRetry: 'Incomplete payment, try again',
+      PaymentSuccess: 'Payment completed',
     },
 
     type: {

src/i18n/tha/index.ts

@@ -678,6 +678,10 @@ export default {
       amountToBePaid: 'ยอดเงินที่ต้องชำระ',
       slip: 'ใบเสร็จ',
       paymentDocs: 'เอกสารการชำระเงิน',
+      PaymentWait: 'รอรับชำระเงิน',
+      PaymentInProcess: 'ชำระเงินแล้ว รอตรวจสอบ',
+      PaymentRetry: 'ชำระไม่ครบถ้วน ชำระใหม่',
+      PaymentSuccess: 'ชำระเรียบร้อย',
     },
 
     type: {