diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 934c7c2e..affc1230 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/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,265 +843,293 @@ const statusQuotationForm = ref<
               />
             </div>
           </div>
+          <template v-if="true">
+            <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.document') }}
+                    </span>
+                  </div>
 
-          <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.document') }}
-                  </span>
-                </div>
-
-                <q-checkbox
-                  v-model="quotationFormData.urgent"
-                  class="q-ml-auto"
-                  size="xs"
-                  :label="$t('general.urgent')"
-                  :disable="readonly"
-                />
-              </section>
-            </template>
-
-            <div class="surface-1 q-pa-md full-width">
-              <QuotationFormMetadata
-                class="q-mb-md"
-                :readonly
-                :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
-                :quotation-no="(quotationFull && quotationFull.code) || ''"
-                v-model:urgent="quotationFormData.urgent"
-                v-model:work-name="quotationFormData.workName"
-                v-model:contactor="quotationFormData.contactName"
-                v-model:telephone="quotationFormData.contactTel"
-                v-model:document-receive-point="
-                  quotationFormData.documentReceivePoint
-                "
-                v-model:due-date="quotationFormData.dueDate"
-              >
-                <template #issue-info>
-                  <FormAbout
-                    class="col-12 col-md-8"
-                    input-only
-                    v-model:branch-id="quotationFormData.registeredBranchId"
-                    v-model:customer-branch-id="
-                      quotationFormData.customerBranchId
-                    "
-                    :readonly="readonly"
-                    @add-customer=""
-                  />
-                </template>
-              </QuotationFormMetadata>
-            </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('quotation.employeeList') }}
-                  </span>
-                  <template v-if="!readonly">
-                    <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-                    {{
-                      toggleWorker
-                        ? $t('general.specify')
-                        : $t('general.noSpecify')
-                    }}
-                  </template>
-                </div>
-                <nav class="q-ml-auto">
-                  <AddButton
-                    v-if="!readonly"
-                    icon-only
-                    @click.stop="triggerSelectEmployeeDialog"
-                  />
-                </nav>
-              </section>
-            </template>
-
-            <div class="surface-1 q-pa-md full-width">
-              <WorkerItem
-                :employee-amount="selectedWorker.length"
-                :readonly="readonly"
-                fallback-img="/images/employee-avatar.png"
-                :rows="
-                  selectedWorker.map((e: Employee) => ({
-                    foreignRefNo: e.employeePassport
-                      ? e.employeePassport[0]?.number || '-'
-                      : '-',
-                    employeeName:
-                      $i18n.locale === 'eng'
-                        ? `${e.firstNameEN} ${e.lastNameEN}`
-                        : `${e.firstName} ${e.lastName}`,
-                    birthDate: dateFormat(e.dateOfBirth),
-                    gender: e.gender,
-                    age: calculateAge(e.dateOfBirth),
-                    nationality: optionStore.mapOption(e.nationality),
-                    documentExpireDate: e.employeePassport
-                      ? dateFormat(e.employeePassport[0]?.expireDate) || '-'
-                      : '-',
-                    imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
-                    status: e.status,
-                  }))
-                "
-                @delete="(i) => deleteItem(selectedWorker, i)"
-              />
-            </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" style="font-size: 18px">
-                    {{ $t('quotation.productList') }}
-                  </span>
-                </div>
-                <nav class="q-ml-auto">
-                  <AddButton
-                    v-if="!readonly"
-                    icon-only
+                  <q-checkbox
+                    v-model="quotationFormData.urgent"
                     class="q-ml-auto"
-                    @click.stop="triggerProductServiceDialog"
+                    size="xs"
+                    :label="$t('general.urgent')"
+                    :disable="readonly"
                   />
-                </nav>
-              </section>
-            </template>
-            <div class="surface-1 q-pa-md full-width">
-              <ProductItem
-                :readonly="readonly"
-                :agent-price="agentPrice"
-                :employee-rows="
-                  selectedWorker.map((e: Employee) => ({
-                    foreignRefNo: '123456789',
-                    employeeName:
-                      $i18n.locale === 'eng'
-                        ? `${e.firstNameEN} ${e.lastNameEN}`
-                        : `${e.firstName} ${e.lastName}`,
-                    birthDate: dateFormat(e.dateOfBirth),
-                    gender: e.gender,
-                    age: calculateAge(e.dateOfBirth),
-                    nationality: optionStore.mapOption(e.nationality),
-                    documentExpireDate: '1234',
-                    imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
-                    status: e.status,
-                  }))
-                "
-                @delete="toggleDeleteProduct"
-                v-model:rows="productServiceList"
-              />
-            </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.payment') }}
-                  </span>
-                </div>
-              </section>
-            </template>
+                </section>
+              </template>
 
-            <div class="surface-1 q-pa-md full-width">
-              <QuotationFormInfo
-                v-model:pay-type="quotationFormData.payCondition"
-                v-model:pay-bank="payBank"
-                v-model:pay-split-count="quotationFormData.paySplitCount"
-                v-model:pay-split="quotationFormData.paySplit"
-                :readonly
-                v-model:final-discount="quotationFormData.discount"
-                v-model:pay-bill-date="quotationFormData.payBillDate"
-                v-model:summary-price="summaryPrice"
-                class="q-mb-md"
-              />
+              <div class="surface-1 q-pa-md full-width">
+                <QuotationFormMetadata
+                  class="q-mb-md"
+                  :readonly
+                  :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
+                  :quotation-no="(quotationFull && quotationFull.code) || ''"
+                  v-model:urgent="quotationFormData.urgent"
+                  v-model:work-name="quotationFormData.workName"
+                  v-model:contactor="quotationFormData.contactName"
+                  v-model:telephone="quotationFormData.contactTel"
+                  v-model:document-receive-point="
+                    quotationFormData.documentReceivePoint
+                  "
+                  v-model:due-date="quotationFormData.dueDate"
+                >
+                  <template #issue-info>
+                    <FormAbout
+                      class="col-12 col-md-8"
+                      input-only
+                      v-model:branch-id="quotationFormData.registeredBranchId"
+                      v-model:customer-branch-id="
+                        quotationFormData.customerBranchId
+                      "
+                      :readonly="readonly"
+                      @add-customer=""
+                    />
+                  </template>
+                </QuotationFormMetadata>
+              </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('quotation.employeeList') }}
+                    </span>
+                    <template v-if="!readonly">
+                      <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+                      {{
+                        toggleWorker
+                          ? $t('general.specify')
+                          : $t('general.noSpecify')
+                      }}
+                    </template>
+                  </div>
+                  <nav class="q-ml-auto">
+                    <AddButton
+                      v-if="!readonly"
+                      icon-only
+                      @click.stop="triggerSelectEmployeeDialog"
+                    />
+                  </nav>
+                </section>
+              </template>
 
-              <span class="text-weight-medium q-mr-md" style="font-size: 18px">
-                {{ $t('general.remark') }}
-              </span>
-              <hr
-                style="border: 1px solid var(--border-color)"
-                class="q-mb-md"
-              />
-              <q-editor
-                dense
-                :readonly
-                :model-value="quotationFormData.remark || ''"
-                min-height="5rem"
-                class="full-width"
-                toolbar-bg="input-border"
-                style="cursor: auto; color: var(--foreground)"
-                :flat="!readonly"
-                :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
-                :toolbar="[['left', 'center', 'justify'], ['clip']]"
-                :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
-                :toolbar-color="
-                  readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
-                "
-                :definitions="{
-                  clip: {
-                    icon: 'mdi-paperclip',
-                    tip: 'Upload',
-                    handler: () => console.log('upload'),
-                  },
-                }"
-                @update:model-value="
-                  (v) => {
-                    quotationFormData.remark = v;
-                  }
-                "
-              />
-            </div>
-          </q-expansion-item>
+              <div class="surface-1 q-pa-md full-width">
+                <WorkerItem
+                  :employee-amount="selectedWorker.length"
+                  :readonly="readonly"
+                  fallback-img="/images/employee-avatar.png"
+                  :rows="
+                    selectedWorker.map((e: Employee) => ({
+                      foreignRefNo: e.employeePassport
+                        ? e.employeePassport[0]?.number || '-'
+                        : '-',
+                      employeeName:
+                        $i18n.locale === 'eng'
+                          ? `${e.firstNameEN} ${e.lastNameEN}`
+                          : `${e.firstName} ${e.lastName}`,
+                      birthDate: dateFormat(e.dateOfBirth),
+                      gender: e.gender,
+                      age: calculateAge(e.dateOfBirth),
+                      nationality: optionStore.mapOption(e.nationality),
+                      documentExpireDate: e.employeePassport
+                        ? dateFormat(e.employeePassport[0]?.expireDate) || '-'
+                        : '-',
+                      imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
+                      status: e.status,
+                    }))
+                  "
+                  @delete="(i) => deleteItem(selectedWorker, i)"
+                />
+              </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" style="font-size: 18px">
+                      {{ $t('quotation.productList') }}
+                    </span>
+                  </div>
+                  <nav class="q-ml-auto">
+                    <AddButton
+                      v-if="!readonly"
+                      icon-only
+                      class="q-ml-auto"
+                      @click.stop="triggerProductServiceDialog"
+                    />
+                  </nav>
+                </section>
+              </template>
+              <div class="surface-1 q-pa-md full-width">
+                <ProductItem
+                  :readonly="readonly"
+                  :agent-price="agentPrice"
+                  :employee-rows="
+                    selectedWorker.map((e: Employee) => ({
+                      foreignRefNo: '123456789',
+                      employeeName:
+                        $i18n.locale === 'eng'
+                          ? `${e.firstNameEN} ${e.lastNameEN}`
+                          : `${e.firstName} ${e.lastName}`,
+                      birthDate: dateFormat(e.dateOfBirth),
+                      gender: e.gender,
+                      age: calculateAge(e.dateOfBirth),
+                      nationality: optionStore.mapOption(e.nationality),
+                      documentExpireDate: '1234',
+                      imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
+                      status: e.status,
+                    }))
+                  "
+                  @delete="toggleDeleteProduct"
+                  v-model:rows="productServiceList"
+                />
+              </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.payment') }}
+                    </span>
+                  </div>
+                </section>
+              </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"
+                      v-model:pay-split-count="quotationFormData.paySplitCount"
+                      v-model:pay-split="quotationFormData.paySplit"
+                      :readonly
+                      v-model:final-discount="quotationFormData.discount"
+                      v-model:pay-bill-date="quotationFormData.payBillDate"
+                      v-model:summary-price="summaryPrice"
+                      class="q-mb-md"
+                    />
+                  </template>
+
+                  <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>
+                  </div>
+                </section>
+              </template>
+
+              <div class="surface-1 q-pa-md full-width">
+                <q-editor
+                  dense
+                  :readonly
+                  :model-value="quotationFormData.remark || ''"
+                  min-height="5rem"
+                  class="full-width"
+                  toolbar-bg="input-border"
+                  style="cursor: auto; color: var(--foreground)"
+                  :flat="!readonly"
+                  :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+                  :toolbar="[['left', 'center', 'justify'], ['clip']]"
+                  :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+                  :toolbar-color="
+                    readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
+                  "
+                  :definitions="{
+                    clip: {
+                      icon: 'mdi-paperclip',
+                      tip: 'Upload',
+                      handler: () => console.log('upload'),
+                    },
+                  }"
+                  @update:model-value="
+                    (v) => {
+                      quotationFormData.remark = v;
+                    }
+                  "
+                />
+              </div>
+            </q-expansion-item>
+          </template>
         </div>
       </section>
     </article>