From bedbcd1a9595805a495124ab8d0ee3e6042c2b48 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Mon, 21 Oct 2024 15:06:14 +0700
Subject: [PATCH] refactor(form-quotation): layout

---
 src/pages/05_quotation/QuotationForm.vue      | 213 +++---
 src/pages/05_quotation/QuotationFormInfo.vue  | 609 +++++++-----------
 .../05_quotation/QuotationFormMetadata.vue    |  95 +++
 src/pages/05_quotation/form.ts                |   4 +
 4 files changed, 446 insertions(+), 475 deletions(-)
 create mode 100644 src/pages/05_quotation/QuotationFormMetadata.vue

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index cc44ee05..daf94777 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -59,6 +59,7 @@ import {
 } from 'src/pages/03_customer-management/constant';
 import { precisionRound } from 'src/utils/arithmetic';
 import { useConfigStore } from 'src/stores/config';
+import QuotationFormMetadata from './QuotationFormMetadata.vue';
 
 // defineProps<{
 //   readonly?: boolean;
@@ -570,26 +571,6 @@ onMounted(async () => {
     sessionData.value = parsed;
   }
 
-  // get query string
-  // const urlParams = new URLSearchParams(window.location.search);
-  //
-  // const price = urlParams.get('agentPrice');
-  // agentPrice.value = price === 'true' ? true : false;
-  //
-  // date.value = Date.now();
-  //
-  // currentQuotationId.value = urlParams.get('quotationId') || undefined;
-  //
-  // quotationFormData.value.registeredBranchId = urlParams.get('branchId') || '';
-  //
-  // quotationFormData.value.customerBranchId =
-  //   urlParams.get('customerBranchId') || '';
-  //
-  // quotationFormState.value.mode = urlParams.get('statusDialog') as
-  //   | 'info'
-  //   | 'edit'
-  //   | 'create';
-
   // fetch option
   const resultOption = await fetch('/option/option.json');
   const rawOption = await resultOption.json();
@@ -693,7 +674,7 @@ function storeDataLocal() {
       <div class="gray-segment"></div>
     </div>
 
-    <header class="row q-px-md q-py-sm items-center full-width">
+    <header class="row q-px-md q-py-sm items-center full">
       <div style="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">
@@ -710,31 +691,124 @@ function storeDataLocal() {
           </span>
         </span>
       </div>
-      <FormAbout
-        class="col-4"
-        input-only
-        v-model:branch-id="quotationFormData.registeredBranchId"
-        v-model:customer-branch-id="quotationFormData.customerBranchId"
-        :readonly="readonly"
-        @add-customer=""
-      />
     </header>
 
     <article
-      class="row col full-width q-pa-md"
+      class="col full-width q-pa-md"
       style="flex-grow: 1; overflow-y: hidden"
       :style="{
         overflowY: $q.screen.gt.xs ? 'hidden' : 'auto',
       }"
     >
       <section
-        class="col-sm col-12 row scroll"
+        class="col-sm col-12 scroll"
         :class="{
           'full-height q-mr-md': $q.screen.gt.xs,
           'q-mb-md': $q.screen.lt.md,
         }"
       >
         <div class="col q-gutter-y-md">
+          <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>
+
+              <span
+                class="text-weight-medium q-mt-md 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>
           <q-expansion-item
             for="item-up"
             id="item-up"
@@ -866,7 +940,6 @@ function storeDataLocal() {
               />
             </div>
           </q-expansion-item>
-
           <q-expansion-item
             for="item-up"
             id="item-up"
@@ -879,71 +952,33 @@ function storeDataLocal() {
             header-class="surface-1"
           >
             <template v-slot:header>
-              <div class="row full-width items-center q-pr-md q-py-sm">
-                <span class="text-weight-medium" style="font-size: 18px">
-                  {{ $t('general.remark') }}
-                </span>
-              </div>
+              <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">
-              <q-editor
-                dense
+              <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
-                :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;
-                  }
-                "
+                v-model:final-discount="quotationFormData.discount"
+                v-model:pay-bill-date="quotationFormData.payBillDate"
+                v-model:summary-price="summaryPrice"
               />
             </div>
           </q-expansion-item>
         </div>
       </section>
-
-      <div
-        class="col-12 col-md-3 col-sm-4 scroll"
-        :class="{ 'full-height': $q.screen.gt.xs }"
-      >
-        <QuotationFormInfo
-          :quotation-no="(quotationFull && quotationFull.code) || ''"
-          v-model:urgent="quotationFormData.urgent"
-          :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
-          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"
-          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"
-        />
-      </div>
     </article>
 
     <footer class="surface-1 q-pa-md full-width">
diff --git a/src/pages/05_quotation/QuotationFormInfo.vue b/src/pages/05_quotation/QuotationFormInfo.vue
index 520e72c2..ff7afe0c 100644
--- a/src/pages/05_quotation/QuotationFormInfo.vue
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@@ -28,22 +28,9 @@ defineProps<{
 const { t } = useI18n();
 const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
-
-const urgent = defineModel<boolean>('urgent', {
-  required: true,
-  default: false,
-});
-const actor = defineModel<string>('actor', { required: false });
 const payBillDate = defineModel<Date | null | undefined>('payBillDate', {
   required: false,
 });
-const workName = defineModel<string>('workName', { required: true });
-const contactor = defineModel<string>('contactor', { required: true });
-const telephone = defineModel<string>('telephone', { required: true });
-const documentReceivePoint = defineModel<string>('documentReceivePoint', {
-  required: true,
-});
-const dueDate = defineModel<Date | string>('dueDate', { required: true });
 const payType = defineModel<'Full' | 'Split' | 'BillFull' | 'BillSplit'>(
   'payType',
   { required: true },
@@ -224,396 +211,242 @@ watch(
 </script>
 
 <template>
-  <AppBox no-padding bordered class="column">
-    <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">
-        <q-icon name="mdi-file-outline" />
+  <AppBox no-padding bordered class="row">
+    <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">
+          <q-icon name="mdi-bank-outline" />
+        </div>
+        <span class="text-weight-bold">
+          {{ $t('quotation.paymentCondition') }}
+        </span>
       </div>
-      <span class="text-weight-bold">
-        {{ $t('general.information', { msg: $t('general.attachment') }) }}
-      </span>
-
-      <q-checkbox
-        v-model="urgent"
-        class="q-ml-auto"
-        size="xs"
-        :label="$t('general.urgent')"
-        :disable="readonly"
-      />
-    </div>
-
-    <div class="q-pa-sm">
-      <div class="row q-col-gutter-sm">
-        <q-input
-          for="input-quotation"
-          :label="$t('general.itemNo', { msg: $t('quotation.title') })"
-          :readonly
-          :model-value="!quotationNo ? $t('general.generated') : quotationNo"
-          :disable="!readonly"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-actor"
-          :label="$t('quotation.actor')"
-          :readonly
-          v-model="actor"
-          :disable="!readonly"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-work-name"
-          :label="$t('quotation.workName')"
-          :readonly
-          v-model="workName"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-contact-name"
-          :label="$t('quotation.contactName')"
-          :readonly
-          v-model="contactor"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-telephone"
-          :label="$t('general.telephone')"
-          :readonly="readonly"
-          v-model="telephone"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-docs-receive-point"
-          :label="$t('quotation.documentReceivePoint')"
-          :readonly
-          v-model="documentReceivePoint"
-          class="col-12"
-          dense
-          outlined
-        />
-        <DatePicker
-          id="select-due-date"
-          :label="$t('quotation.dueDate')"
-          :readonly
-          v-model="dueDate"
-          class="col-12"
-        />
-      </div>
-    </div>
-    <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">
-        <q-icon name="mdi-bank-outline" />
-      </div>
-      <span class="text-weight-bold">
-        {{ $t('quotation.paymentCondition') }}
-      </span>
-    </div>
-    <div class="q-pa-sm">
-      <div class="row q-col-gutter-sm">
-        <SelectInput
-          class="col-12"
-          :label="$t('quotation.payType')"
-          :option="payTypeOpion"
-          :readonly
-          id="pay-type"
-          v-model="payType"
-        />
-
-        <q-field
-          dense
-          :readonly
-          outlined
-          class="col-12"
-          v-if="payType === 'Split' || payType === 'BillSplit'"
-        >
-          <div class="row full-width items-center justify-between q-py-xs">
-            <div class="column">
-              <span style="color: var(--foreground)">
-                {{ $t('quotation.paySplitCount') }}
-              </span>
-              <span class="app-text-muted text-caption">
-                ({{
-                  $t('quotation.payTotal', {
-                    msg:
-                      formatNumberDecimal(
-                        Math.max(summaryPrice.finalPrice, 0),
-                        2,
-                      ) || 0,
-                  })
-                }})
-              </span>
-            </div>
-            <q-input
-              v-model="paySplitCount"
+      <div class="q-pa-sm">
+        <div class="row q-col-gutter-sm">
+          <section class="row q-col-gutter-sm col-12 items-center">
+            <SelectInput
+              class="col-6"
+              :label="$t('quotation.payType')"
+              :option="payTypeOpion"
               :readonly
-              class="col-3"
-              type="number"
-              dense
-              outlined
-              min="1"
-              @update:model-value="(i) => (paySplitCount = Number(i))"
+              id="pay-type"
+              v-model="payType"
             />
-          </div>
-        </q-field>
 
-        <section
-          v-if="payType === 'Split' || payType === 'BillSplit'"
-          class="col-12 text-caption"
-          style="padding-left: 20px"
-        >
-          <template v-for="(period, i) in paySplit" :key="period.no">
             <div
-              class="row app-text-muted items-center"
-              :class="{ 'q-mb-sm': i !== paySplit.length }"
+              class="col-6"
+              v-if="payType === 'Split' || payType === 'BillSplit'"
             >
-              {{ `${$t('quotation.periodNo')} ${i + 1}` }}
-              <q-input
-                :readonly
-                class="col q-mx-sm"
-                :label="$t('quotation.amount')"
-                :model-value="commaInput(period.amount.toString())"
-                dense
-                outlined
-                @update:model-value="
-                  (v) => {
-                    if (typeof v === 'string') amount4Show[i] = commaInput(v);
-                    const x = parseFloat(
-                      amount4Show[i] && typeof amount4Show[i] === 'string'
-                        ? amount4Show[i].replace(/,/g, '')
-                        : '',
-                    );
-
-                    period.amount = precisionRound(x);
-                    commaInput(period.amount.toString());
-
-                    calculateInstallments({
-                      customIndex: i,
-                      customAmount: x,
-                      newCount: paySplit.length,
-                      oldCount: paySplit.length,
-                    });
-
-                    const lastAmount = paySplit.at(-1);
-                    if ((lastAmount?.amount || 0) < 0) {
-                      period.amount = precisionRound(
-                        paySplit[i].amount + (paySplit.at(-1)?.amount || 0),
-                      );
-                      amount4Show[i] = period.amount.toString();
-                      if (lastAmount) lastAmount.amount = 0;
-                      amount4Show[amount4Show.length - 1] = '0';
-                    }
-                  }
-                "
-              >
-                <template #prepend>
-                  <q-icon name="mdi-cash" color="primary" />
-                </template>
-              </q-input>
-              <DatePicker
-                :readonly
-                v-model="period.date"
-                class="col-5"
-                :label="$t('quotation.payDueDate')"
-              />
-            </div>
-          </template>
-        </section>
-
-        <DatePicker
-          v-if="payType === 'BillFull'"
-          :readonly
-          class="col-12"
-          :label="$t('quotation.callDueDate')"
-          v-model="payBillDate"
-        />
-
-        <!-- <q-select
-          outlined
-          clearable
-          use-input
-          emit-value
-          fill-input
-          map-options
-          hide-bottom-space
-          option-value="value"
-          input-debounce="0"
-          option-label="label"
-          class="col-12"
-          autocomplete="off"
-          for="select-bankbook"
-          dense
-          :label="$t('quotation.bank')"
-          :options="bankBookOptions"
-          :readonly
-          :hide-dropdown-icon="readonly"
-          v-model="payBank"
-          @filter="bankBoookFilter"
-        >
-          <template v-slot:option="scope">
-            <q-item
-              v-if="scope.opt"
-              v-bind="scope.itemProps"
-              class="row items-center"
-            >
-              <q-item-section avatar>
-                <q-img
-                  :src="`/img/bank/${scope.opt.value}.png`"
-                  class="bordered"
-                  style="
-                    border-radius: 50%;
-                    aspect-ratio: 1;
-                    height: 2rem;
-                    width: 2rem;
-                  "
+              <div class="row full-width items-center justify-between q-py-xs">
+                <div class="column">
+                  <span style="color: var(--foreground)">
+                    {{ $t('quotation.paySplitCount') }}
+                  </span>
+                  <span class="app-text-muted text-caption">
+                    ({{
+                      $t('quotation.payTotal', {
+                        msg:
+                          formatNumberDecimal(
+                            Math.max(summaryPrice.finalPrice, 0),
+                            2,
+                          ) || 0,
+                      })
+                    }})
+                  </span>
+                </div>
+                <q-input
+                  v-model="paySplitCount"
+                  :readonly
+                  class="col-3"
+                  type="number"
+                  dense
+                  outlined
+                  min="1"
+                  @update:model-value="(i) => (paySplitCount = Number(i))"
                 />
-              </q-item-section>
-              <q-item-section>
-                {{ scope.opt.label }}
-              </q-item-section>
-            </q-item>
-          </template>
+              </div>
+            </div>
+          </section>
 
-          <template v-slot:selected-item="scope">
-            <q-item-section
-              v-if="scope.opt && !!payBank"
-              avatar
-              class="q-py-sm row"
-            >
-              <q-img
-                :src="`/img/bank/${scope.opt.value}.png`"
-                class="bordered"
-                style="
-                  border-radius: 50%;
-                  aspect-ratio: 1;
-                  height: 2rem;
-                  width: 2rem;
-                "
-              />
-            </q-item-section>
-          </template>
+          <section
+            v-if="payType === 'Split' || payType === 'BillSplit'"
+            class="col-12 text-caption"
+            style="padding-left: 20px"
+          >
+            <template v-for="(period, i) in paySplit" :key="period.no">
+              <div
+                class="row app-text-muted items-center"
+                :class="{ 'q-mb-sm': i !== paySplit.length }"
+              >
+                {{ `${$t('quotation.periodNo')} ${i + 1}` }}
+                <q-input
+                  :readonly
+                  class="col q-mx-sm"
+                  :label="$t('quotation.amount')"
+                  :model-value="commaInput(period.amount.toString())"
+                  dense
+                  outlined
+                  @update:model-value="
+                    (v) => {
+                      if (typeof v === 'string') amount4Show[i] = commaInput(v);
+                      const x = parseFloat(
+                        amount4Show[i] && typeof amount4Show[i] === 'string'
+                          ? amount4Show[i].replace(/,/g, '')
+                          : '',
+                      );
 
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select> -->
+                      period.amount = precisionRound(x);
+                      commaInput(period.amount.toString());
+
+                      calculateInstallments({
+                        customIndex: i,
+                        customAmount: x,
+                        newCount: paySplit.length,
+                        oldCount: paySplit.length,
+                      });
+
+                      const lastAmount = paySplit.at(-1);
+                      if ((lastAmount?.amount || 0) < 0) {
+                        period.amount = precisionRound(
+                          paySplit[i].amount + (paySplit.at(-1)?.amount || 0),
+                        );
+                        amount4Show[i] = period.amount.toString();
+                        if (lastAmount) lastAmount.amount = 0;
+                        amount4Show[amount4Show.length - 1] = '0';
+                      }
+                    }
+                  "
+                >
+                  <template #prepend>
+                    <q-icon name="mdi-cash" color="primary" />
+                  </template>
+                </q-input>
+                <DatePicker
+                  :readonly
+                  v-model="period.date"
+                  class="col-5"
+                  :label="$t('quotation.payDueDate')"
+                />
+              </div>
+            </template>
+          </section>
+
+          <DatePicker
+            v-if="payType === 'BillFull'"
+            :readonly
+            class="col-12"
+            :label="$t('quotation.callDueDate')"
+            v-model="payBillDate"
+          />
+        </div>
       </div>
     </div>
-    <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">
-        <Icon icon="iconoir:coins" />
-      </div>
-      <span class="text-weight-bold">
-        {{ $t('quotation.summary') }}
-      </span>
-    </div>
-    <div class="q-pa-sm">
-      <div class="row">
-        {{ $t('general.total') }}
-        <span class="q-ml-auto">
-          {{ formatNumberDecimal(summaryPrice.totalPrice, 2) }}
-          ฿
+    <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">
+          <Icon icon="iconoir:coins" />
+        </div>
+        <span class="text-weight-bold">
+          {{ $t('quotation.summary') }}
         </span>
       </div>
-      <div class="row">
-        {{ $t('quotation.discountList') }}
-        <span class="q-ml-auto">
-          {{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
-        </span>
-      </div>
-      <div class="row">
-        {{ $t('general.totalAfterDiscount') }}
-        <span class="q-ml-auto">
+      <div class="q-pa-sm price-container">
+        <div class="row">
+          {{ $t('general.total') }}
+          <span class="q-ml-auto">
+            {{ formatNumberDecimal(summaryPrice.totalPrice, 2) }}
+            ฿
+          </span>
+        </div>
+        <div class="row">
+          {{ $t('quotation.discountList') }}
+          <span class="q-ml-auto">
+            {{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
+          </span>
+        </div>
+        <div class="row">
+          {{ $t('general.totalAfterDiscount') }}
+          <span class="q-ml-auto">
+            {{
+              formatNumberDecimal(
+                summaryPrice.totalPrice - summaryPrice.totalDiscount,
+                2,
+              )
+            }}
+            ฿
+          </span>
+        </div>
+        <div class="row">
+          {{ $t('general.totalVatExcluded') }}
+          <span class="q-ml-auto">
+            {{ formatNumberDecimal(summaryPrice.vatExcluded, 2) || 0 }}
+            ฿
+          </span>
+        </div>
+        <div class="row">
           {{
-            formatNumberDecimal(
-              summaryPrice.totalPrice - summaryPrice.totalDiscount,
-              2,
-            )
+            $t('general.vat', {
+              msg: `${config && Math.round(config.vat * 100)}%`,
+            })
+          }}
+          <span class="q-ml-auto">
+            {{ formatNumberDecimal(summaryPrice.vat, 2) }} ฿
+          </span>
+        </div>
+        <div class="row">
+          {{ $t('general.totalVatIncluded') }}
+          <span class="q-ml-auto">
+            {{
+              formatNumberDecimal(
+                summaryPrice.totalPrice -
+                  summaryPrice.totalDiscount +
+                  summaryPrice.vat,
+                2,
+              )
+            }}
+            ฿
+          </span>
+        </div>
+        <div class="row">
+          {{ $t('general.discountAfterVat') }}
+          <q-input
+            :readonly
+            dense
+            outlined
+            class="q-ml-auto price-tag"
+            style="padding-inline: none !important"
+            input-class="text-right"
+            debounce="500"
+            :model-value="commaInput(finalDiscount.toString() || '0')"
+            @update:model-value="
+              (v) => {
+                if (typeof v === 'string') finalDiscount4Show = commaInput(v);
+                const x = parseFloat(
+                  finalDiscount4Show && typeof finalDiscount4Show === 'string'
+                    ? finalDiscount4Show.replace(/,/g, '')
+                    : '',
+                );
+                finalDiscount = x;
+              }
+            "
+          />
+          <!-- <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span> -->
+        </div>
+      </div>
+      <div class="q-pa-sm row surface-2 items-center text-weight-bold">
+        {{ $t('quotation.totalPriceBaht') }}
+
+        <span class="q-ml-auto" style="color: var(--brand-1)">
+          {{
+            formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0
           }}
           ฿
         </span>
       </div>
-      <div class="row">
-        {{ $t('general.totalVatExcluded') }}
-        <span class="q-ml-auto">
-          {{ formatNumberDecimal(summaryPrice.vatExcluded, 2) || 0 }}
-          ฿
-        </span>
-      </div>
-      <div class="row">
-        {{
-          $t('general.vat', {
-            msg: `${config && Math.round(config.vat * 100)}%`,
-          })
-        }}
-        <span class="q-ml-auto">
-          {{ formatNumberDecimal(summaryPrice.vat, 2) }} ฿
-        </span>
-      </div>
-      <div class="row">
-        {{ $t('general.totalVatIncluded') }}
-        <span class="q-ml-auto">
-          {{
-            formatNumberDecimal(
-              summaryPrice.totalPrice -
-                summaryPrice.totalDiscount +
-                summaryPrice.vat,
-              2,
-            )
-          }}
-          ฿
-        </span>
-      </div>
-      <div class="row">
-        {{ $t('general.discountAfterVat') }}
-        <q-input
-          :readonly
-          dense
-          outlined
-          class="q-ml-auto price-tag"
-          input-class="text-right"
-          debounce="500"
-          :model-value="commaInput(finalDiscount.toString() || '0')"
-          @update:model-value="
-            (v) => {
-              if (typeof v === 'string') finalDiscount4Show = commaInput(v);
-              const x = parseFloat(
-                finalDiscount4Show && typeof finalDiscount4Show === 'string'
-                  ? finalDiscount4Show.replace(/,/g, '')
-                  : '',
-              );
-              finalDiscount = x;
-            }
-          "
-        />
-        <!-- <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span> -->
-      </div>
-    </div>
-    <div class="q-pa-sm row surface-2 items-center text-weight-bold">
-      {{ $t('quotation.totalPriceBaht') }}
-
-      <span class="q-ml-auto" style="color: var(--brand-1)">
-        {{ formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0 }}
-        ฿
-      </span>
     </div>
   </AppBox>
 </template>
@@ -648,9 +481,13 @@ watch(
 
 .bg-color-orange-light {
   --_color: var(--yellow-7-hsl);
-  background: hsla(var(--_color) / 0.2);
+  background: hsla(var(--_color) / 0.1);
 }
 .dark .bg-color-orange {
   --_color: var(--orange-6-hsl / 0.2);
 }
+
+.price-container > * {
+  padding: var(--size-2);
+}
 </style>
diff --git a/src/pages/05_quotation/QuotationFormMetadata.vue b/src/pages/05_quotation/QuotationFormMetadata.vue
new file mode 100644
index 00000000..21e43ce9
--- /dev/null
+++ b/src/pages/05_quotation/QuotationFormMetadata.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import DatePicker from 'src/components/shared/DatePicker.vue';
+
+defineProps<{
+  readonly: boolean;
+  quotationNo?: string;
+}>();
+
+const actor = defineModel<string>('actor', { required: false });
+const workName = defineModel<string>('workName', { required: true });
+const contactor = defineModel<string>('contactor', { required: true });
+const telephone = defineModel<string>('telephone', { required: true });
+const documentReceivePoint = defineModel<string>('documentReceivePoint', {
+  required: true,
+});
+const dueDate = defineModel<Date | string>('dueDate', { required: true });
+const createdAt = defineModel<Date | string>('createdAt');
+</script>
+
+<template>
+  <div class="row q-col-gutter-sm">
+    <slot name="issue-info" />
+    <DatePicker
+      id="select-due-date"
+      :label="$t('general.createdAt')"
+      :model-value="createdAt || new Date()"
+      class="col-6 col-md-2"
+      :readonly
+      :disabled="!readonly"
+    />
+    <DatePicker
+      id="select-due-date"
+      :label="$t('quotation.dueDate')"
+      :readonly
+      v-model="dueDate"
+      class="col-6 col-md-2"
+    />
+    <q-input
+      for="input-quotation"
+      :label="$t('general.itemNo', { msg: $t('quotation.title') })"
+      :readonly
+      :model-value="!quotationNo ? $t('general.generated') : quotationNo"
+      :disable="!readonly"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-actor"
+      :label="$t('quotation.actor')"
+      :readonly
+      v-model="actor"
+      :disable="!readonly"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-work-name"
+      :label="$t('quotation.workName')"
+      :readonly
+      v-model="workName"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-contact-name"
+      :label="$t('quotation.contactName')"
+      :readonly
+      v-model="contactor"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-telephone"
+      :label="$t('general.telephone')"
+      :readonly="readonly"
+      v-model="telephone"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-docs-receive-point"
+      :label="$t('quotation.documentReceivePoint')"
+      :readonly
+      v-model="documentReceivePoint"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+  </div>
+</template>
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index 889a9eac..92809a2c 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -71,10 +71,12 @@ export const useQuotationForm = defineStore('form-quotation', () => {
   const currentFormState = ref<{
     mode: null | 'info' | 'create' | 'edit';
     source?: QuotationFull;
+    createdAt: string | Date;
     createdBy: (locale: string) => string;
   }>({
     mode: null,
     createdBy: (_) => getName() || '',
+    createdAt: '',
   });
 
   function isFormDataDifferent() {
@@ -137,6 +139,8 @@ export const useQuotationForm = defineStore('form-quotation', () => {
         ? data.createdBy.firstNameEN + ' ' + data.createdBy.lastNameEN
         : data.createdBy.firstName + ' ' + data.createdBy.lastName;
 
+    currentFormState.value.createdAt = data.createdAt;
+
     if (mode === 'assign') return;
 
     currentFormState.value.mode = mode;