refactor: prepare for switch view

src/pages/05_quotation/QuotationForm.vue

@@ -34,6 +34,7 @@ import {
 } from 'src/stores/product-service/types';
 
 // NOTE: Import Components
+import SwitchItem from 'components/shared/SwitchItem.vue';
 import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
@@ -249,6 +250,7 @@ async function assignToProductServiceList() {
 
     productServiceList.value = quotationFormData.value.productServiceList.map(
       (v) => ({
+        installmentNo: v.installmentNo || 0,
         workerIndex: v.workerIndex || [0],
         vat: v.vat || 0,
         pricePerUnit: v.pricePerUnit || 0,
@@ -717,6 +719,17 @@ const statusQuotationForm = ref<
     status: 'waiting',
   },
 ]);
+
+enum View {
+  Quotation,
+  Accepted,
+  InvoicePre,
+  Invoice,
+  ReceiptPre,
+  Receipt,
+}
+
+const view = ref<View>(View.Quotation);
 </script>
 
 <template>
@@ -751,7 +764,7 @@ const statusQuotationForm = ref<
         style="gap: 10px"
       >
         <div class="row justify-end">
-          <BadgeCompoent :title-i18n="$t('general.laborIdentified')" />
+          <BadgeComponent :title-i18n="$t('general.laborIdentified')" />
         </div>
         <div
           class="row items-center justify-between surface-1 rounded q-pa-xs"
@@ -830,7 +843,7 @@ const statusQuotationForm = ref<
               />
             </div>
           </div>
-
+          <template v-if="true">
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -1040,6 +1053,8 @@ const statusQuotationForm = ref<
               </template>
 
               <div class="surface-1 q-pa-md full-width">
+                <SwitchItem :value="view">
+                  <template #[View.Quotation]>
                     <QuotationFormInfo
                       v-model:pay-type="quotationFormData.payCondition"
                       v-model:pay-bank="payBank"
@@ -1051,14 +1066,39 @@ const statusQuotationForm = ref<
                       v-model:summary-price="summaryPrice"
                       class="q-mb-md"
                     />
+                  </template>
 
-              <span class="text-weight-medium q-mr-md" style="font-size: 18px">
+                  <template #b>
+                    <div>bbb</div>
+                  </template>
+                </SwitchItem>
+              </div>
+            </q-expansion-item>
+            <q-expansion-item
+              for="item-up"
+              id="item-up"
+              dense
+              class="overflow-hidden"
+              switch-toggle-side
+              default-opened
+              style="border-radius: var(--radius-2)"
+              expand-icon="mdi-chevron-down-circle"
+              header-class="surface-1"
+            >
+              <template v-slot:header>
+                <section class="row items-center full-width">
+                  <div class="row items-center q-pr-md q-py-sm">
+                    <span
+                      class="text-weight-medium q-mr-md"
+                      style="font-size: 18px"
+                    >
                       {{ $t('general.remark') }}
                     </span>
-              <hr
+                  </div>
-                style="border: 1px solid var(--border-color)"
+                </section>
-                class="q-mb-md"
+              </template>
-              />
+
+              <div class="surface-1 q-pa-md full-width">
                 <q-editor
                   dense
                   :readonly
@@ -1089,6 +1129,7 @@ const statusQuotationForm = ref<
                 />
               </div>
             </q-expansion-item>
+          </template>
         </div>
       </section>
     </article>