feat: add dynamic color to quotation form info

src/pages/05_quotation/QuotationForm.vue

@@ -1108,6 +1108,7 @@ const view = ref<View>(View.Quotation);
                 <SwitchItem :value="view">
                   <template #[View.Quotation]>
                     <QuotationFormInfo
+                      :type="view"
                       v-model:pay-type="quotationFormData.payCondition"
                       v-model:pay-bank="payBank"
                       v-model:pay-split-count="quotationFormData.paySplitCount"

src/pages/05_quotation/QuotationFormInfo.vue

@@ -13,9 +13,22 @@ import SelectInput from 'src/components/shared/SelectInput.vue';
 import { storeToRefs } from 'pinia';
 import { precisionRound } from 'src/utils/arithmetic';
 
+enum View {
+  Quotation,
+  Accepted,
+  InvoicePre,
+  Invoice,
+  PaymentPre,
+  Payment,
+  ReceiptPre,
+  Receipt,
+  Complete,
+}
+
 defineProps<{
   readonly?: boolean;
   quotationNo?: string;
+  view?: View;
   data?: {
     total: number;
     discount: number;
@@ -209,12 +222,10 @@ watch(
 </script>
 
 <template>
-  <AppBox no-padding bordered class="row">
+  <AppBox no-padding bordered class="row main-color">
     <div class="col bordered-r">
-      <div
-        class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
-      >
-        <div class="icon-wrapper bg-color-orange q-mr-sm">
+      <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
+        <div class="icon-wrapper bg-color q-mr-sm">
           <q-icon name="mdi-bank-outline" />
         </div>
         <span class="text-weight-bold">
@@ -342,10 +353,8 @@ watch(
       </div>
     </div>
     <div class="col">
-      <div
-        class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
-      >
-        <div class="icon-wrapper bg-color-orange q-mr-sm">
+      <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
+        <div class="icon-wrapper bg-color q-mr-sm">
           <Icon icon="iconoir:coins" />
         </div>
         <span class="text-weight-bold">
@@ -467,21 +476,24 @@ watch(
   height: 25px;
 }
 
-.bg-color-orange {
+.main-color {
   --_color: var(--yellow-7-hsl);
+}
+
+.bg-color {
   color: white;
   background: hsla(var(--_color));
 }
 
-.dark .bg-color-orange {
+.dark .bg-color {
   --_color: var(--orange-6-hsl);
 }
 
-.bg-color-orange-light {
-  --_color: var(--yellow-7-hsl);
+.bg-color-light {
   background: hsla(var(--_color) / 0.1);
 }
-.dark .bg-color-orange {
+
+.dark .bg-color-light {
   --_color: var(--orange-6-hsl / 0.2);
 }