refactor: add btn form

src/pages/05_quotation/QuotationForm.vue

@@ -42,6 +42,7 @@ import {
 } from 'src/stores/product-service/types';
 
 // NOTE: Import Components
+import SelectInput from 'components/shared/SelectInput.vue';
 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';
@@ -121,6 +122,9 @@ const { data: config } = storeToRefs(configStore);
 
 const receiptList = ref<Receipt[]>([]);
 
+const templateForm = ref<string>('');
+const templateFormOption = ref<{ label: string; value: string }[]>([]);
+
 const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 const toggleWorker = ref(true);
@@ -1122,13 +1126,7 @@ const view = ref<View>(View.Quotation);
               <div class="col text-left">{{ value.title }}</div>
             </button>
           </div>
-          <template
+
-            v-if="
-              view === View.Quotation ||
-              view === View.Accepted ||
-              view === View.Invoice
-            "
-          >
           <q-expansion-item
             for="item-up"
             id="item-up"
@@ -1192,6 +1190,13 @@ const view = ref<View>(View.Quotation);
             </div>
           </q-expansion-item>
 
+          <template
+            v-if="
+              view === View.Quotation ||
+              view === View.Accepted ||
+              view === View.Invoice
+            "
+          >
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -1430,7 +1435,7 @@ const view = ref<View>(View.Quotation);
               header-class="surface-1"
             >
               <template v-slot:header>
-                <section class="row items-center full-width">
+                <section class="row items-ceenhancement nter full-width">
                   <div class="row items-center q-pr-md q-py-sm">
                     <span
                       class="text-weight-medium q-mr-md"
@@ -1474,6 +1479,7 @@ const view = ref<View>(View.Quotation);
               </div>
             </q-expansion-item>
           </template>
+
           <template v-else>
             <PaymentForm
               v-if="
@@ -1597,6 +1603,66 @@ const view = ref<View>(View.Quotation);
               </div>
             </q-expansion-item>
           </template>
+
+          <template v-if="view === View.Quotation || view === View.Payment">
+            <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.form') }}
+                    </span>
+                  </div>
+                </section>
+              </template>
+
+              <div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
+                <SelectInput
+                  style="max-width: 250px"
+                  class="q-mr-xl"
+                  incremental
+                  v-model="templateForm"
+                  id="quotation-branch"
+                  :option="templateFormOption"
+                  :label="$t('quotation.templateForm')"
+                  :option-label="locale === 'eng' ? 'labelEN' : 'label'"
+                  @filter="
+                    (val: string, update) => filter(val, update, 'branch')
+                  "
+                />
+                <MainButton
+                  outlined
+                  icon="mdi-play-box-outline"
+                  color="207 96% 32%"
+                  @click="storeDataLocal"
+                >
+                  {{ $t('general.view', { msg: $t('general.example') }) }}
+                </MainButton>
+                <MainButton
+                  solid
+                  icon="mdi-pencil-outline"
+                  color="207 96% 32%"
+                  @click="storeDataLocal"
+                >
+                  {{ $t('general.designForm') }}
+                </MainButton>
+              </div>
+            </q-expansion-item>
+          </template>
+
           <QuotationFormReceipt
             v-if="view === View.Receipt"
             v-for="(v, i) in receiptList"