refactor: handle color

src/pages/05_quotation/QuotationForm.vue

@@ -900,7 +900,7 @@ const view = ref<View>(View.Quotation);
     </div>
 
     <header class="row q-px-md q-py-sm items-center full">
-      <div style="flex: 1" class="row items-center">
+      <div stylviewe="flex: 1" class="row items-center">
         <q-img src="/icons/favicon-512x512.png" width="3rem" />
         <span class="column text-h6 text-bold q-ml-md">
           {{ $t('quotation.title') }}
@@ -1002,7 +1002,6 @@ const view = ref<View>(View.Quotation);
               view === View.Quotation ||
               view === View.Accepted ||
               view === View.Invoice ||
-              view === View.Payment ||
               view === View.Receipt
             "
           >
@@ -1221,7 +1220,7 @@ const view = ref<View>(View.Quotation);
               <div class="surface-1 q-pa-md full-width">
                 <template v-if="true">
                   <QuotationFormInfo
-                    :info-type="view"
+                    :view="view"
                     v-model:pay-type="quotationFormData.payCondition"
                     v-model:pay-bank="payBank"
                     v-model:pay-split-count="quotationFormData.paySplitCount"
@@ -1292,7 +1291,10 @@ const view = ref<View>(View.Quotation);
             </q-expansion-item>
           </template>
           <template v-else>
-            <PaymentForm :data="quotationFormState.source" />
+            <PaymentForm
+              v-if="view !== View.InvoicePre"
+              :data="quotationFormState.source"
+            />
 
             <q-expansion-item
               for="item-up"
@@ -1342,7 +1344,11 @@ const view = ref<View>(View.Quotation);
                       <template v-slot:body="props">
                         <q-tr :props="props">
                           <q-td auto-width>
-                            <q-checkbox v-model="props.selected" />
+                            <q-checkbox
+                              :disable="props.row.invoice"
+                              v-model="props.selected"
+                              v-if="!props.row.invoice"
+                            />
                           </q-td>
                           <q-td
                             v-for="col in props.cols"

src/pages/05_quotation/QuotationFormInfo.vue

@@ -185,7 +185,15 @@ watch(
 </script>
 
 <template>
-  <AppBox no-padding bordered class="row main-color">
+  <AppBox
+    no-padding
+    bordered
+    class="row main-color"
+    :class="{
+      'invoice-color': view === View.Invoice,
+      'receipt-color': view === View.Receipt,
+    }"
+  >
     <div class="col bordered-r">
       <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">
@@ -437,6 +445,14 @@ watch(
   --_color: var(--yellow-7-hsl);
 }
 
+.invoice-color {
+  --_color: var(--purple-9-hsl);
+}
+
+.receipt-color {
+  --_color: var(--green-6-hsl);
+}
+
 .bg-color {
   color: white;
   background: hsla(var(--_color));