refactor: show hint remark

src/pages/05_quotation/QuotationForm.vue

@@ -20,7 +20,7 @@ import useEmployeeStore from 'stores/employee';
 import { useInvoice, useReceipt, usePayment } from 'stores/payment';
 import useCustomerStore from 'stores/customer';
 import useOptionStore from 'stores/options';
-import { useQuotationForm } from './form';
+import { useQuotationForm, DEFAULT_DATA } from './form';
 import { deleteItem } from 'stores/utils';
 
 // NOTE  Import Types
@@ -1784,6 +1784,7 @@ async function formDownload() {
               <div class="surface-1 q-pa-md full-width">
                 <q-editor
                   dense
+                  :hint="$t('general.enterToAdd')"
                   :readonly="readonly || !pageState.remarkWrite"
                   :model-value="
                     !pageState.remarkWrite || readonly
@@ -1833,7 +1834,7 @@ async function formDownload() {
                   "
                 >
                   <template v-if="!readonly" v-slot:toggle>
-                    <div class="text-caption row no-wrap q-px-sm">
+                    <div class="text-caption row no-wrap">
                       <MainButton
                         :disabled="readonly"
                         :solid="!pageState.remarkWrite"
@@ -1864,9 +1865,37 @@ async function formDownload() {
                       >
                         {{ $t('general.edit') }}
                       </MainButton>
+
+                      <MainButton
+                        push
+                        :disabled="readonly"
+                        icon="mdi-help-circle-outline"
+                        color="0 0% 40%"
+                        style="padding: 0 var(--size-2)"
+                        :style="{
+                          color: 'hsl(0 0% 40%)',
+                        }"
+                      >
+                        <q-popup-proxy
+                          class="q-pa-sm"
+                          style="white-space: nowrap"
+                        >
+                          <div v-html="DEFAULT_DATA.remark"></div>
+                        </q-popup-proxy>
+                      </MainButton>
                     </div>
                   </template>
                 </q-editor>
+
+                <p
+                  class="app-text-muted"
+                  v-if="quotationFormState.mode === 'edit'"
+                >
+                  {{ $t('general.hintRemark') }}
+                  <code>#[quotation-labor]</code>
+                  {{ $t('general.or') }}
+                  <code>#[quotation-payment]</code>
+                </p>
               </div>
             </q-expansion-item>
           </template>
@@ -2341,6 +2370,7 @@ async function formDownload() {
     ></QuotationFormProductSelect>
   </div>
 
+  <!-- add Worker -->
   <QuotationFormWorkerAddDialog
     v-if="quotationFormState.source"
     :disabled-worker-id="selectedWorker.map((v) => v.id)"

src/pages/05_quotation/form.ts

@@ -20,7 +20,7 @@ import { useInvoice } from 'stores/payment';
 import useEmployeeStore from 'stores/employee';
 import { getName } from 'src/services/keycloak';
 
-const DEFAULT_DATA: QuotationPayload = {
+export const DEFAULT_DATA: QuotationPayload = {
   productServiceList: [],
   urgent: false,
   customerBranchId: '',