fix(04): service with workflow

src/components/04_product-service/FormServiceWork.vue

@@ -74,7 +74,12 @@ async function addWork() {
   workItems.value.push({
     id: '',
     name: '',
-    attributes: { additional: [], showTotalPrice: false },
+    attributes: {
+      additional: [],
+      showTotalPrice: false,
+      stepProperties: [],
+      workflowId: '',
+    },
     product: [],
   });
   await nextTick();
@@ -177,8 +182,16 @@ watch(
         v-model:product-items="work.product"
         v-model:attributes="work.attributes"
         @add-product="$emit('addProduct', index)"
-        @move-work-up="moveItemUp(workItems, index)"
+        @move-work-up="
-        @move-work-down="moveItemDown(workItems, index)"
+          () => {
+            moveItemUp(workItems, index);
+          }
+        "
+        @move-work-down="
+          () => {
+            moveItemDown(workItems, index);
+          }
+        "
         @delete-work="confirmDelete(workItems, index)"
         @move-product-up="moveItemUp"
         @move-product-down="moveItemDown"

src/components/04_product-service/WorkManagementComponent.vue

@@ -1,21 +1,32 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import { QSelect } from 'quasar';
-import { formatNumberDecimal } from 'stores/utils';
-
-import useProductServiceStore from 'stores/product-service';
-import useOptionStore from 'stores/options';
-import { Attributes, Product } from 'stores/product-service/types';
 import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { Icon } from '@iconify/vue';
+import { onMounted, ref, watch } from 'vue';
+
+import useOptionStore from 'stores/options';
+import useProductServiceStore from 'stores/product-service';
+import { formatNumberDecimal } from 'stores/utils';
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
+import { Attributes, Product } from 'stores/product-service/types';
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
+
+import SelectInput from '../shared/SelectInput.vue';
+import NoData from '../NoData.vue';
+import { AddButton } from '../button';
 
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 const productServiceStore = useProductServiceStore();
 const optionStore = useOptionStore();
+const workflowStore = useWorkflowTemplate();
 
-const { fetchListOfWork } = productServiceStore;
+// const { fetchListOfWork } = productServiceStore;
-const { workNameItems } = storeToRefs(productServiceStore);
+const { splitPay } = storeToRefs(productServiceStore);
 
-withDefaults(
+const { getWorkflowTemplateList } = workflowStore;
+const { data: workflowData } = storeToRefs(workflowStore);
+
+const props = withDefaults(
   defineProps<{
     workIndex: number;
     length: number;
@@ -46,7 +57,7 @@ const productItems = defineModel<(Product & { nameEn: string })[]>(
   },
 );
 
-const refMenu = ref();
+// const refMenu = ref();
 
 defineEmits<{
   (e: 'moveWorkUp'): void;
@@ -61,18 +72,94 @@ defineEmits<{
   (e: 'workProperties'): void;
 }>();
 
-watch(
+// watch(
-  () => workNameItems.value,
+//   () => workNameItems.value,
-  (c, o) => {
+//   (c, o) => {
-    const list = c.map((v: { name: string }) => v.name);
+//     const list = c.map((v: { name: string }) => v.name);
-    const oldList = o.map((v: { name: string }) => v.name);
+//     const oldList = o.map((v: { name: string }) => v.name);
-    const index = oldList.indexOf(workName.value);
+//     const index = oldList.indexOf(workName.value);
 
-    if (list[index] !== oldList[index] && !list.includes(workName.value)) {
+//     if (list[index] !== oldList[index] && !list.includes(workName.value)) {
-      if (list.length - 1 === index - 1) workName.value = list[index - 1];
+//       if (list.length - 1 === index - 1) workName.value = list[index - 1];
-      else workName.value = list[index];
+//       else workName.value = list[index];
-    }
+//     }
+//   },
+// );
+
+function mapFlowName(id: string): string {
+  const targetFlow = workflowData.value.find(
+    (w) => w.id === attributes.value.workflowId,
+  );
+  return targetFlow?.name || '';
+}
+
+function mapStepName(id: string) {
+  const targetFlow = workflowData.value.find(
+    (w) => w.id === attributes.value.workflowId,
+  );
+  if (!targetFlow) return;
+  const name = targetFlow.step.find((s) => s.id === id)?.name;
+  return name || '-';
+}
+
+function selectFlow(workflow: WorkflowTemplate) {
+  workName.value = workflow.name;
+  attributes.value.workflowId = workflow.id;
+  attributes.value.stepProperties = workflow.step.map((s) => ({
+    id: s.id,
+    attributes: [],
+    productsId: [],
+  }));
+}
+
+async function filter(val: string, update: (...args: unknown[]) => void) {
+  update(
+    async () => {
+      await fetchWorkflowOption(val);
+    },
+
+    (ref: QSelect) => {
+      if (val !== '' && ref.options && ref.options?.length > 0) {
+        ref.setOptionIndex(-1);
+        ref.moveOptionSelection(1, true);
+      }
+    },
+  );
+}
+
+async function fetchWorkflowOption(val?: string) {
+  const res = await workflowStore.getWorkflowTemplateList({
+    query: val,
+    pageSize: 30,
+  });
+  if (res) workflowData.value = res.result;
+}
+
+function toggleCheckProductInStep(id: string, stepIndex: number) {
+  const index =
+    attributes.value.stepProperties[stepIndex].productsId.indexOf(id);
+
+  if (!attributes.value.stepProperties[stepIndex].productsId.includes(id)) {
+    attributes.value.stepProperties[stepIndex].productsId.push(id);
+  } else {
+    attributes.value.stepProperties[stepIndex].productsId.splice(index, 1);
+  }
+}
+
+onMounted(async () => {
+  if (props.workIndex === 0) {
+    await fetchWorkflowOption();
+  }
+});
+
+watch(
+  () => productItems.value,
+  () => {
+    attributes.value.stepProperties.forEach((s) => {
+      s.productsId = productItems.value.map((p) => p.id);
+    });
   },
+  { deep: true },
 );
 </script>
 <template>
@@ -84,7 +171,7 @@ watch(
       switch-toggle-side
       default-opened
       expand-icon="mdi-chevron-down-circle"
-      header-class="surface-2 expansion-rounded"
+      header-class="expansion-rounded"
       header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
     >
       <template v-slot:header>
@@ -115,7 +202,7 @@ watch(
               style="color: hsl(var(--text-mute-2))"
               @click.stop="$emit('moveWorkDown')"
             />
-            <div
+            <!-- <div
               :for="`select-work-name-${index + 1}`"
               class="col q-py-sm q-px-md"
               style="background-color: var(--surface-1); z-index: 2"
@@ -184,7 +271,28 @@ watch(
                   </div>
                 </q-item>
               </q-menu>
-            </div>
+            </div> -->
+            <SelectInput
+              :readonly
+              incremental
+              :model-value="mapFlowName(attributes.workflowId)"
+              id="select-workflow-name"
+              for="select-workflow-name"
+              class="col"
+              option-label="name"
+              :option="workflowData"
+              :placeholder="$t('productService.service.workName')"
+              @update:model-value="(val: WorkflowTemplate) => selectFlow(val)"
+              @filter="(val: string, update) => filter(val, update)"
+            >
+              <template #prepend>
+                <span class="text-body2" style="color: var(--foreground)">
+                  {{
+                    $t('productService.service.workNo', { msg: workIndex + 1 })
+                  }}:
+                </span>
+              </template>
+            </SelectInput>
             <q-btn
               v-if="!readonly"
               id="btn-delete-work"
@@ -203,60 +311,14 @@ watch(
         </div>
       </template>
 
-      <div class="surface-2">
+      <section
-        <!-- properties -->
+        v-if="!workName && productItems.length === 0"
-        <div class="bordered-t">
+        class="surface-2 row items-center justify-center q-py-sm"
-          <div
+      >
-            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
+        <NoData />
-            style="background-color: hsla(var(--info-bg) / 0.1)"
+      </section>
-          >
-            <span>
-              {{ $t('productService.service.propertiesInWork') }}
-              {{ workIndex + 1 }}
-            </span>
-            <q-btn
-              v-if="!readonly"
-              id="btn-add-work-product"
-              class="text-capitalize"
-              flat
-              dense
-              padding="0"
-              style="color: hsl(var(--info-bg))"
-              @click.stop="$emit('workProperties')"
-            >
-              <Icon
-                icon="basil:settings-adjust-solid"
-                width="24px"
-                class="q-mr-sm"
-                style="color: hsl(var(--info-bg))"
-              />
-              <span v-if="$q.screen.gt.xs">
-                {{ $t('productService.service.properties') }}
-              </span>
-            </q-btn>
-          </div>
-
-          <div class="q-py-md q-px-md full-width">
-            <div
-              v-if="attributes.additional.length > 0"
-              class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm scroll"
-              :style="$q.screen.xs ? 'max-height: 100px' : ''"
-            >
-              <div
-                v-for="(p, index) in attributes.additional"
-                :key="index"
-                class="bordered q-px-sm surface-3"
-                style="border-radius: 6px"
-              >
-                {{ optionStore.mapOption(p.fieldName ?? '') }}
-              </div>
-            </div>
-            <div v-else class="app-text-muted">
-              {{ $t('productService.service.noProperties') }}
-            </div>
-          </div>
-        </div>
 
+      <section v-else class="surface-2">
         <!-- product -->
         <div class="bordered-t">
           <div
@@ -276,19 +338,11 @@ watch(
                 :disable="readonly"
               />
             </span>
-            <q-btn
+            <AddButton
               v-if="!readonly"
+              icon-only
               id="btn-add-work-product"
               for="btn-add-work-product"
-              flat
-              dense
-              icon="mdi-plus"
-              class="text-capitalize"
-              :label="
-                $q.screen.gt.xs ? $t('productService.product.addTitle') : ''
-              "
-              padding="0"
-              style="color: hsl(var(--info-bg))"
               @click.stop="$emit('addProduct')"
             />
           </div>
@@ -297,15 +351,17 @@ watch(
             v-if="productItems.length > 0"
             class="q-py-md q-px-md full-width q-gutter-y-sm"
           >
-            <div
+            <section
               v-for="(product, index) in productItems"
               :key="product.id"
               class="full-width row items-center justify-between"
             >
               <div
-                class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
+                class="row col items-center justify-between full-width surface-1 q-px-sm q-py-xs"
+                style="min-height: 70px"
               >
-                <div
+                <!-- product detail -->
+                <section
                   class="row items-center col-md col-12 no-wrap"
                   v-if="productItems"
                 >
@@ -316,6 +372,7 @@ watch(
                     dense
                     flat
                     round
+                    size="sm"
                     :disable="index === 0"
                     style="color: hsl(var(--text-mute-2))"
                     @click.stop="$emit('moveProductUp', productItems, index)"
@@ -328,27 +385,27 @@ watch(
                     dense
                     flat
                     round
-                    class="q-mx-sm"
+                    size="sm"
                     :disable="index === productItems.length - 1"
                     style="color: hsl(var(--text-mute-2))"
                     @click.stop="$emit('moveProductDown', productItems, index)"
                   />
 
                   <q-avatar
-                    size="md"
+                    size="sm"
-                    :class="$q.screen.gt.xs ? 'q-mx-lg' : 'q-mr-lg'"
+                    class="q-mx-sm"
                     style="background-color: var(--surface-tab)"
                   >
                     {{ index + 1 }}
                   </q-avatar>
 
-                  <div class="row no-wrap">
+                  <div class="col row no-wrap items-center">
                     <div
                       v-if="$q.screen.gt.xs"
                       class="bordered q-mx-md col-3 image-box"
                     >
                       <q-img
-                        :src="`${baseUrl}/product/${product?.id}/image`"
+                        :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
                         style="object-fit: cover; width: 100%; height: 100%"
                       >
                         <template #error>
@@ -360,35 +417,30 @@ watch(
                         </template>
                       </q-img>
                     </div>
-                    <div class="column col justify-between">
+                    <article class="column col full-width justify-between">
                       <span
-                        class="text-weight-bold ellipsis-2-lines"
+                        class="text-weight-medium ellipsis-2-lines full-width"
-                        :style="`max-width: ${$q.screen.gt.sm ? (!readonly ? '10vw' : '25vw') : '20vw'}`"
                       >
                         {{ product.name }}
                         <q-tooltip>
                           {{ product.name }}
                         </q-tooltip>
                       </span>
-                      <div
+                      <div class="text-caption">
-                        class="bordered q-px-xs ellipsis"
+                        <span class="bordered q-px-xs rounded q-mr-sm">
-                        style="border-radius: 6px; max-width: 100px"
+                          {{ product.code }}
-                      >
+                        </span>
-                        {{ product.code }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
 
-                <div
+                        <q-icon name="mdi-clock-outline" />
-                  class="row justify-end text-right col-md-6 col-12"
+                        {{ product.process }} {{ $t('general.day') }}
-                  :class="$q.screen.xs ? 'q-mt-sm text-caption' : 'q-pr-sm'"
+                      </div>
-                >
+                    </article>
-                  <span
+                  </div>
-                    class="col-12 row"
+                </section>
-                    :class="{ 'q-col-gutter-md': $q.screen.gt.xs }"
+
-                    style="color: var(--teal-9)"
+                <!-- product price -->
-                  >
+                <div class="row justify-end text-right col-md col-12">
+                  <span class="col-12 row" style="color: var(--teal-9)">
                     <span
                       v-if="priceDisplay?.price"
                       class="col ellipsis price-orange text-weight-bold"
@@ -437,29 +489,34 @@ watch(
                         ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
                       </q-tooltip>
                     </span>
-                    <span class="col ellipsis text-weight-bold">
+                    <span class="col ellipsis column text-weight-medium">
                       <div class="text-caption app-text-muted-2">
                         งวดที่จ่าย
                       </div>
                       {{ !readonly ? '' : product.installmentNo }}
-                      <q-input
+                      <span class="row justify-end">
-                        v-if="!readonly && $q.screen.gt.xs"
+                        <q-input
-                        outlined
+                          v-if="!readonly && $q.screen.gt.xs"
-                        for="input-bankbook"
+                          outlined
-                        hide-bottom-space
+                          :max="splitPay"
-                        class="col-2"
+                          input-class="text-right no-padding"
-                        dense
+                          for="input-bankbook"
-                        type="number"
+                          hide-bottom-space
-                        v-model="product.installmentNo"
+                          class="installment-no col-10"
-                        min="0"
+                          dense
-                      />
+                          type="number"
+                          v-model="product.installmentNo"
+                          min="0"
+                          @update:model-value="
+                            (v) => {
+                              if (Number(v) > splitPay)
+                                product.installmentNo = splitPay;
+                            }
+                          "
+                        />
+                      </span>
                     </span>
                   </span>
-
-                  <span class="col-9 q-mt-sm text-caption app-text-muted-2">
-                    {{ $t('productService.product.processingTime') }}
-                    {{ product.process }} {{ $t('general.day') }}
-                  </span>
                 </div>
               </div>
 
@@ -478,19 +535,149 @@ watch(
               >
                 <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
               </q-btn>
-            </div>
+            </section>
           </div>
-          <div v-else class="app-text-muted q-py-md q-px-lg">
+          <div v-else class="app-text-muted q-py-md q-px-md">
             {{ $t('productService.product.noProduct') }}
           </div>
         </div>
-      </div>
+
+        <!-- properties -->
+        <div class="bordered-t">
+          <div
+            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
+            style="background-color: hsla(var(--info-bg) / 0.1)"
+          >
+            <span>
+              {{ $t('flow.processStep') }}
+            </span>
+            <q-btn
+              v-if="!readonly"
+              id="btn-add-work-product"
+              class="text-capitalize rounded"
+              flat
+              dense
+              padding="4px 8px"
+              style="color: hsl(var(--info-bg))"
+              @click.stop="$emit('workProperties')"
+            >
+              <Icon
+                icon="basil:settings-adjust-solid"
+                width="20.08px"
+                style="color: hsl(var(--info-bg))"
+              />
+            </q-btn>
+          </div>
+
+          <div class="q-py-md q-px-md full-width column">
+            <span
+              v-if="
+                attributes.stepProperties?.length === 0 ||
+                !attributes.stepProperties
+              "
+              class="app-text-muted"
+            >
+              {{ $t('flow.noProcessStep') }}
+            </span>
+            <span
+              v-else
+              v-for="(step, stepIndex) in attributes.stepProperties"
+              :key="step.id"
+            >
+              <q-icon name="mdi-circle-medium" />
+              {{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
+              {{ mapStepName(step.id) }}
+
+              <!-- step att -->
+              <section
+                class="col scroll q-pa-sm flex items-center surface-1 rounded"
+              >
+                <div
+                  v-if="
+                    attributes.stepProperties[stepIndex].attributes.length > 0
+                  "
+                  class="row q-gutter-sm"
+                >
+                  <span
+                    v-for="(att, i) in step.attributes"
+                    :key="i"
+                    class="surface-2 bordered rounded q-px-xs"
+                  >
+                    {{ optionStore.mapOption(att.fieldName ?? '') }}
+                  </span>
+                </div>
+                <div v-else class="app-text-muted-2">
+                  {{ $t('productService.service.noProperties') }}
+                </div>
+              </section>
+
+              <!-- step product -->
+              <section
+                class="q-pt-sm q-pl-lg column"
+                :class="{
+                  'q-pb-sm': stepIndex !== attributes.stepProperties.length - 1,
+                }"
+              >
+                <span class="app-text-muted-2 text-caption">
+                  {{
+                    $t('general.select', {
+                      msg: $t('productService.product.title'),
+                    })
+                  }}
+                </span>
+
+                <div
+                  v-if="productItems.length > 0"
+                  class="surface-1 rounded q-pa-xs"
+                >
+                  <div v-for="product in productItems" :key="product.id">
+                    <q-checkbox
+                      :disable="readonly"
+                      :model-value="
+                        attributes.stepProperties[
+                          stepIndex
+                        ].productsId.includes(product.id)
+                      "
+                      @click="toggleCheckProductInStep(product.id, stepIndex)"
+                      size="xs"
+                    />
+                    {{ product.name }}
+                  </div>
+                </div>
+                <span v-else class="app-text-muted-2 surface-1 rounded q-pa-xs">
+                  {{ $t('productService.product.noProduct') }}
+                </span>
+              </section>
+            </span>
+          </div>
+
+          <!-- <div class="q-py-md q-px-md full-width">
+            <div
+              v-if="attributes.additional.length > 0"
+              class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm scroll"
+              :style="$q.screen.xs ? 'max-height: 100px' : ''"
+            >
+              <div
+                v-for="(p, index) in attributes.additional"
+                :key="index"
+                class="bordered q-px-sm surface-3"
+                style="border-radius: 6px"
+              >
+                {{ optionStore.mapOption(p.fieldName ?? '') }}
+              </div>
+            </div>
+            <div v-else class="app-text-muted">
+              {{ $t('productService.service.noProperties') }}
+            </div>
+          </div> -->
+        </div>
+      </section>
     </q-expansion-item>
     <div class="q-py-sm q-px-md bordered-t row items-center justify-between">
       <div>
         {{ $t('productService.service.totalProductWork') }}
         <span class="app-text-muted-2">
-          {{ workName }}
+          {{ mapFlowName(attributes.workflowId) }}
         </span>
       </div>
       <div>
@@ -502,8 +689,8 @@ watch(
 
 <style lang="scss" scoped>
 .image-box {
-  height: 70px;
+  height: 45px;
-  width: 70px;
+  width: 45px;
   border-color: var(--teal-9);
   border-radius: 10px;
   background-color: var(--surface-3);
@@ -540,4 +727,18 @@ watch(
 .price-pink {
   color: var(--pink-6);
 }
+
+:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
+  color: hsl(var(--text-mute));
+}
+
+:deep(
+    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+  ) {
+  color: var(--brand-1);
+}
+
+:deep(.installment-no .q-field__control) {
+  height: 23px;
+}
 </style>

src/pages/04_product-service/MainPage.vue

@@ -63,6 +63,7 @@ import {
   Attributes,
 } from 'stores/product-service/types';
 import { computed } from 'vue';
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
 
 const flowStore = useFlowStore();
 const utilsStore = useUtilsStore();
@@ -94,7 +95,7 @@ const {
   deleteWork,
 } = productServiceStore;
 
-const { workNameItems } = storeToRefs(productServiceStore);
+const { workNameItems, splitPay } = storeToRefs(productServiceStore);
 const readOnlybranchOption = ref<boolean>(false);
 const allStat = ref<{ mode: string; count: number }[]>([]);
 const stat = ref<
@@ -264,10 +265,14 @@ const formDataProduct = ref<ProductCreate>({
   image: undefined,
 });
 
+const workflow = ref<WorkflowTemplate>();
 const formDataProductService = ref<ServiceCreate>({
   work: [],
   attributes: {
+    showTotalPrice: false,
     additional: [],
+    workflowId: '',
+    stepProperties: [],
   },
   detail: '',
   name: '',
@@ -892,6 +897,9 @@ async function assignFormDataGroup(data: ProductGroup) {
 const prevService = ref<ServiceCreate>({
   work: [],
   attributes: {
+    showTotalPrice: false,
+    workflowId: '',
+    stepProperties: [],
     additional: [],
   },
   detail: '',
@@ -941,6 +949,11 @@ async function assignFormDataProductService(id: string) {
     formDataProductService.value.work = prevService.value.work;
 
     workItems.value = res.work.map((item) => {
+      splitPay.value = Math.max(
+        ...item.productOnWork.map(
+          (productOnWorkItem) => productOnWorkItem.installmentNo,
+        ),
+      );
       return {
         id: item.id,
         name: item.name,
@@ -1043,13 +1056,16 @@ function clearFormService() {
     name: '',
     detail: '',
     attributes: {
+      workflowId: '',
+      stepProperties: [],
       additional: [],
+      showTotalPrice: false,
     },
     work: [],
     status: undefined,
     productGroupId: '',
   };
-
+  splitPay.value = 0;
   workItems.value = [];
   selectProduct.value = [];
   dialogService.value = false;
@@ -1229,6 +1245,9 @@ function triggerConfirmCloseWork() {
 }
 
 const tempValueProperties = ref<Attributes>({
+  showTotalPrice: false,
+  workflowId: '',
+  stepProperties: [],
   additional: [],
 });
 const currentPropertiesMode = ref<'service' | 'work'>('service');
@@ -3818,13 +3837,13 @@ watch(
     <div
       class="col surface-1 rounded bordered scroll row relative-position"
       :class="{
-        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-md q-mx-lg ': $q.screen.gt.sm,
         'q-mb-sm q-mx-md': !$q.screen.gt.sm,
       }"
       id="service-form"
     >
       <div
-        class="col"
+        class="col column justify-between"
         style="height: 100%; max-height: 100; overflow-y: auto"
         v-if="$q.screen.gt.sm"
       >
@@ -3876,6 +3895,20 @@ watch(
             "
           />
         </div>
+        <span
+          class="row items-center justify-center q-py-md text-caption no-wrap"
+        >
+          {{ $t('productService.service.splitPay') }}
+          <q-input
+            dense
+            outlined
+            class="col-3 split-pay q-mx-sm"
+            input-class="text-caption text-right"
+            type="number"
+            v-model="splitPay"
+          />
+          {{ $t('quotation.receiptDialog.installments') }}
+        </span>
       </div>
       <div
         class="col-12 col-md-10"
@@ -3973,7 +4006,7 @@ watch(
         />
       </div>
     </div>
-    <div
+    <!-- <div
       class="col-2 surface-1 rounded bordered row"
       :class="{
         'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
@@ -3993,7 +4026,7 @@ watch(
           }
         "
       />
-    </div>
+    </div> -->
   </DialogForm>
 
   <!-- service properties -->
@@ -4026,12 +4059,12 @@ watch(
       }
     "
   >
-    <div class="q-pa-lg full-width full-height">
+    <section class="col column">
       <ServiceProperties
         v-model:properties-option="propertiesOption"
         v-model:form-service-properties="tempValueProperties"
       />
-    </div>
+    </section>
   </DialogForm>
 
   <!-- manage work name -->
@@ -4241,7 +4274,7 @@ watch(
         />
       </div>
       <div
-        class="col"
+        class="col column justify-between"
         style="height: 100%; max-height: 100; overflow-y: auto"
         v-if="$q.screen.gt.sm"
       >
@@ -4297,13 +4330,28 @@ watch(
             }"
           />
         </div>
+        <span
+          class="row items-center justify-center q-py-md text-caption no-wrap"
+        >
+          {{ $t('productService.service.splitPay') }}
+          <q-input
+            :readonly="!infoServiceEdit"
+            dense
+            outlined
+            class="col-3 split-pay q-mx-sm"
+            input-class="text-caption text-right"
+            type="number"
+            v-model="splitPay"
+          />
+          {{ $t('quotation.receiptDialog.installments') }}
+        </span>
       </div>
       <div
         class="col-12 col-md-10"
         id="customer-form-content"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-md q-px-lg': !$q.screen.gt.sm,
+          'q-py-sm q-px-lg': !$q.screen.gt.sm,
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
@@ -4354,7 +4402,7 @@ watch(
         />
       </div>
     </div>
-    <div
+    <!-- <div
       class="col-2 surface-1 rounded bordered row"
       :class="{
         'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
@@ -4375,7 +4423,7 @@ watch(
           }
         "
       />
-    </div>
+    </div> -->
   </DialogForm>
 
   <q-dialog v-model="holdDialog" position="bottom">
@@ -4751,4 +4799,8 @@ watch(
   color: hsl(var(--info-bg));
   font-weight: 600;
 }
+
+:deep(.split-pay .q-field__control) {
+  height: 23px;
+}
 </style>