From aaa39fc72f006045c4afd5fa713fc9c1caf009cf Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 29 Oct 2024 17:17:32 +0700
Subject: [PATCH] fix(04): service with workflow

---
 .../04_product-service/FormServiceWork.vue    |  19 +-
 .../04_product-service/ServiceProperties.vue  | 977 ++++++++++--------
 .../WorkManagementComponent.vue               | 479 ++++++---
 src/pages/04_product-service/MainPage.vue     |  76 +-
 4 files changed, 994 insertions(+), 557 deletions(-)

diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index 7232d137..dcae360a 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/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-down="moveItemDown(workItems, index)"
+        @move-work-up="
+          () => {
+            moveItemUp(workItems, index);
+          }
+        "
+        @move-work-down="
+          () => {
+            moveItemDown(workItems, index);
+          }
+        "
         @delete-work="confirmDelete(workItems, index)"
         @move-product-up="moveItemUp"
         @move-product-down="moveItemDown"
diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index 235180b1..0fbae5fc 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -1,20 +1,35 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Option } from 'stores/options/types';
 import { Attributes } from 'stores/product-service/types';
 import { moveItemUp, moveItemDown, deleteItem, dialog } from 'stores/utils';
+import { storeToRefs } from 'pinia';
+import { QSelect } from 'quasar';
 
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
+
+import SelectInput from '../shared/SelectInput.vue';
 import NoData from '../NoData.vue';
 
 const { t } = useI18n();
+const workflowStore = useWorkflowTemplate();
+const { data: workflowData } = storeToRefs(workflowStore);
 
 const propertiesOption =
   defineModel<(Option & { type: Attributes['additional'][number]['type'] })[]>(
     'propertiesOption',
   );
-const formServiceProperties = defineModel<Attributes>('formServiceProperties');
+const formServiceProperties = defineModel<Attributes>('formServiceProperties', {
+  required: true,
+  default: {
+    workflowId: '',
+    stepProperties: [],
+  },
+});
 
+const currWorkflow = ref<WorkflowTemplate>();
 const typeOption = ref([
   {
     label: 'Text',
@@ -43,21 +58,22 @@ const typeOption = ref([
 ]);
 
 function manageProperties(
+  stepIndex: number,
   property: string,
   propertyType?: Attributes['additional'][number]['type'],
 ) {
   if (property === 'all' && propertiesOption.value) {
     if (
-      formServiceProperties.value?.additional.length ===
-      propertiesOption.value.length
+      formServiceProperties.value.stepProperties[stepIndex].attributes
+        .length === propertiesOption.value.length
     ) {
-      formServiceProperties.value.additional = [];
+      formServiceProperties.value.stepProperties[stepIndex].attributes = [];
       return;
     }
 
     for (const ops of propertiesOption.value) {
       if (
-        formServiceProperties.value?.additional.some(
+        formServiceProperties.value.stepProperties[stepIndex].attributes.some(
           (prop) => prop.fieldName === ops.value,
         )
       ) {
@@ -65,22 +81,22 @@ function manageProperties(
       }
 
       if (ops.type === 'date') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: ops.type,
           fieldName: ops.value,
         });
       }
 
       if (ops.type === 'array') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: ops.type,
           fieldName: ops.value,
-          options: [''],
+          options: [],
         });
       }
 
       if (ops.type === 'string') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: ops.type,
           fieldName: ops.value,
           isPhoneNumber: false,
@@ -89,7 +105,7 @@ function manageProperties(
       }
 
       if (ops.type === 'number') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: ops.type,
           fieldName: ops.value,
           comma: false,
@@ -101,31 +117,34 @@ function manageProperties(
     return;
   }
 
-  if (formServiceProperties.value) {
-    const propertyIndex = formServiceProperties.value.additional.findIndex(
-      (prop) => prop.fieldName === property,
-    );
+  if (formServiceProperties.value.stepProperties[stepIndex].attributes) {
+    const propertyIndex = formServiceProperties.value.stepProperties[
+      stepIndex
+    ].attributes.findIndex((prop) => prop.fieldName === property);
 
     if (propertyIndex !== -1) {
-      formServiceProperties.value.additional.splice(propertyIndex, 1);
+      formServiceProperties.value.stepProperties[stepIndex].attributes.splice(
+        propertyIndex,
+        1,
+      );
     } else {
       if (propertyType === 'date') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: propertyType,
           fieldName: property,
         });
       }
 
       if (propertyType === 'array') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: propertyType,
           fieldName: property,
-          options: [''],
+          options: [],
         });
       }
 
       if (propertyType === 'string') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: propertyType,
           fieldName: property,
           isPhoneNumber: false,
@@ -134,7 +153,7 @@ function manageProperties(
       }
 
       if (propertyType === 'number') {
-        formServiceProperties.value?.additional.push({
+        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
           type: propertyType,
           fieldName: property,
           comma: false,
@@ -146,16 +165,18 @@ function manageProperties(
   }
 }
 
-function shouldShowItem(opt: Option) {
-  if (formServiceProperties.value) {
+function shouldShowItem(opt: Option, stepIndex: number) {
+  if (formServiceProperties.value.stepProperties[stepIndex].attributes) {
     const additionalFieldNames = new Set(
-      formServiceProperties.value.additional.map((o) => o.fieldName),
+      formServiceProperties.value.stepProperties[stepIndex].attributes.map(
+        (o) => o.fieldName,
+      ),
     );
     return !!opt && !additionalFieldNames.has(opt.value);
   }
 }
 
-function changeType(fieldName: string) {
+function changeType(fieldName: string, stepIndex: number) {
   if (!propertiesOption.value) return;
 
   const defaultPropType = propertiesOption.value.find(
@@ -164,29 +185,29 @@ function changeType(fieldName: string) {
 
   if (!defaultPropType) return;
 
-  const idx = formServiceProperties.value?.additional.findIndex(
-    (v) => v.fieldName === fieldName,
-  );
+  const idx = formServiceProperties.value.stepProperties[
+    stepIndex
+  ].attributes.findIndex((v) => v.fieldName === fieldName);
 
   if (!idx) return;
 
   if (defaultPropType === 'date') {
-    formServiceProperties.value?.additional.push({
+    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
       type: defaultPropType,
       fieldName,
     });
   }
 
   if (defaultPropType === 'array') {
-    formServiceProperties.value?.additional.push({
+    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
       type: defaultPropType,
       fieldName,
-      options: [''],
+      options: [],
     });
   }
 
   if (defaultPropType === 'string') {
-    formServiceProperties.value?.additional.push({
+    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
       type: defaultPropType,
       fieldName,
       isPhoneNumber: false,
@@ -195,7 +216,7 @@ function changeType(fieldName: string) {
   }
 
   if (defaultPropType === 'number') {
-    formServiceProperties.value?.additional.push({
+    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
       type: defaultPropType,
       fieldName,
       comma: false,
@@ -218,404 +239,554 @@ function confirmDelete(items: unknown[], index: number) {
     cancel: () => {},
   });
 }
+
+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 mapStepName(id: string) {
+  const targetFlow = workflowData.value.find(
+    (w) => w.id === formServiceProperties.value.workflowId,
+  );
+  if (!targetFlow) return;
+  const name = targetFlow.step.find((s) => s.id === id)?.name;
+  return name || '-';
+}
+
+onMounted(async () => {
+  await fetchWorkflowOption();
+});
+
+watch(
+  () => formServiceProperties.value.workflowId,
+  () => {
+    if (!formServiceProperties.value.workflowId) return;
+    formServiceProperties.value.stepProperties = [];
+    currWorkflow.value = workflowData.value.find(
+      (s) => s.id === formServiceProperties.value.workflowId,
+    );
+
+    if (!currWorkflow.value) return;
+
+    currWorkflow.value.step.forEach((s) => {
+      formServiceProperties.value.stepProperties.push({
+        id: s.id,
+        productsId: [],
+        attributes: [],
+      });
+    });
+  },
+);
 </script>
 <template>
-  <div class="full-width full-height column no-wrap">
-    <div class="row">
-      <q-btn-dropdown
-        id="btn-dropdow-properties"
-        for="btn-dropdow-properties"
-        dense
-        unelevated
-        color="primary"
-        :label="$t('productService.service.properties')"
-        class="q-px-sm q-mb-lg text-capitalize"
-        menu-anchor="bottom end"
-      >
-        <q-list dense v-if="formServiceProperties && propertiesOption">
-          <q-item
-            for="list-all"
-            id="list-all"
-            clickable
-            @click="manageProperties('all')"
-          >
-            <div class="full-width flex items-center">
-              <q-icon
-                v-if="
-                  formServiceProperties.additional.length ===
-                  propertiesOption.length
-                "
-                name="mdi-checkbox-marked"
-                size="xs"
-                class="q-mr-sm"
-                color="primary"
-              />
-              <q-icon
-                v-else
-                name="mdi-checkbox-blank-outline"
-                size="xs"
-                class="q-mr-sm"
-                style="color: hsl(var(--text-mute))"
-              />
-              {{ $t('general.selectAll') }}
-            </div>
-          </q-item>
-          <q-separator />
-          <q-item
-            v-for="(ops, index) in propertiesOption"
-            clickable
-            :key="index"
-            @click="manageProperties(ops.value, ops.type)"
-            :for="`list-${ops.value}`"
-            :id="`list-${ops.value}`"
-          >
-            <div class="full-width flex items-center no-wrap">
-              <q-icon
-                v-if="
-                  formServiceProperties &&
-                  formServiceProperties.additional.some(
-                    (add) => add.fieldName === ops.value,
-                  )
-                "
-                name="mdi-checkbox-marked"
-                size="xs"
-                color="primary"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else
-                name="mdi-checkbox-blank-outline"
-                size="xs"
-                style="color: hsl(var(--text-mute))"
-                class="q-mr-sm"
-              />
-              {{ ops.label }}
-            </div>
-          </q-item>
-        </q-list>
-      </q-btn-dropdown>
-    </div>
-
+  <div
+    class="bordered-b surface-3 row items-center no-wrap q-py-sm"
+    :class="{
+      'q-px-lg': $q.screen.gt.sm,
+      'q-px-md': !$q.screen.gt.sm,
+    }"
+  >
+    {{ $t('flow.title') }}
+    <SelectInput
+      v-model="formServiceProperties.workflowId"
+      id="select-workflow"
+      for="select-workflow"
+      incremental
+      :option="workflowData"
+      option-label="name"
+      option-value="id"
+      class="q-ml-md"
+      :label="$t('general.select', { msg: $t('flow.title') })"
+      @filter="(val: string, update) => filter(val, update)"
+    />
+  </div>
+  <div class="col column no-wrap">
     <div
-      v-if="formServiceProperties?.additional.length === 0"
+      v-if="!formServiceProperties?.workflowId"
       class="bordered rounded surface-1 flex justify-center items-center col"
+      :class="{
+        'q-my-md q-mx-lg': $q.screen.gt.sm,
+        'q-my-sm q-mx-md ': !$q.screen.gt.sm,
+      }"
     >
       <NoData use-field />
     </div>
 
-    <div
-      v-if="
-        formServiceProperties?.additional &&
-        formServiceProperties.additional.length > 0
-      "
-      class="q-gutter-y-md"
-    >
-      <div
-        v-for="(p, index) in formServiceProperties.additional"
-        :key="index"
-        class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
-        :class="
-          index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
-        "
+    <!-- attributes step -->
+    <div v-if="formServiceProperties?.workflowId" class="column">
+      <section
+        v-for="(step, stepIndex) in formServiceProperties.stepProperties"
+        :key="step.id"
+        class="column"
       >
-        <div class="col-md col-12 row items-center">
-          <q-btn
-            id="btn-move-up-product"
-            icon="mdi-arrow-up"
-            dense
-            flat
-            round
-            :disable="index === 0"
-            :size="$q.screen.xs ? 'xs' : ''"
-            style="color: hsl(var(--text-mute-2))"
-            @click="moveItemUp(formServiceProperties.additional, index)"
-          />
-          <q-btn
-            id="btn-move-down-product"
-            icon="mdi-arrow-down"
-            dense
-            flat
-            round
-            :size="$q.screen.xs ? 'xs' : ''"
-            :disable="index === formServiceProperties.additional.length - 1"
-            style="color: hsl(var(--text-mute-2))"
-            @click="moveItemDown(formServiceProperties.additional, index)"
-          />
-
-          <q-avatar
-            :size="$q.screen.xs ? 'sm' : 'md'"
-            class="q-mx-lg"
-            style="background-color: var(--surface-3)"
+        <span
+          class="row items-center q-py-sm bordered-b"
+          :class="{
+            'q-px-lg': $q.screen.gt.sm,
+            'q-px-md ': !$q.screen.gt.sm,
+          }"
+        >
+          {{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}
+          <span class="app-text-muted">: {{ mapStepName(step.id) }}</span>
+          <q-btn-dropdown
+            unelevated
+            no-icon-animation
+            size="sm"
+            padding="0 0"
+            class="rounded q-ml-md"
+            dropdown-icon="mdi-plus"
+            style="color: hsl(var(--text-mute))"
           >
-            {{ index + 1 }}
-          </q-avatar>
-
-          <!-- field name -->
-          <q-select
-            dense
-            outlined
-            emit-value
-            map-options
-            hide-bottom-space
-            for="input-properties-name"
-            class="col-md col-12 q-mr-md"
-            :class="{ 'q-my-sm': $q.screen.lt.md }"
-            :label="$t('productService.service.propertiesName')"
-            option-label="label"
-            option-value="value"
-            :options="propertiesOption"
-            v-model="p.fieldName"
-            @update:model-value="changeType"
-          >
-            <template v-slot:option="scope">
+            <q-list
+              dense
+              v-if="
+                formServiceProperties?.stepProperties[stepIndex].attributes &&
+                propertiesOption
+              "
+            >
               <q-item
-                v-if="scope.opt && shouldShowItem(scope.opt)"
-                v-bind="scope.itemProps"
-                class="row items-center col-12"
+                for="list-all"
+                id="list-all"
+                clickable
+                @click="manageProperties(stepIndex, 'all')"
               >
-                {{ scope.opt.label }}
+                <div class="full-width flex items-center">
+                  <q-icon
+                    v-if="
+                      formServiceProperties?.stepProperties[stepIndex]
+                        .attributes.length === propertiesOption.length
+                    "
+                    name="mdi-checkbox-marked"
+                    size="xs"
+                    class="q-mr-sm"
+                    color="primary"
+                  />
+                  <q-icon
+                    v-else
+                    name="mdi-checkbox-blank-outline"
+                    size="xs"
+                    class="q-mr-sm"
+                    style="color: hsl(var(--text-mute))"
+                  />
+                  {{ $t('general.selectAll') }}
+                </div>
               </q-item>
-            </template>
-          </q-select>
-        </div>
-
-        <!-- type -->
-        <div class="col-md col-12">
-          <q-select
-            dense
-            outlined
-            emit-value
-            map-options
-            hide-bottom-space
-            for="input-properties-type"
-            id="input-properties-type"
-            :label="$t('general.type')"
-            option-value="value"
-            @update:model-value="
-              (t: 'string' | 'number' | 'date' | 'array') => {
-                if (!formServiceProperties) return;
-                if (t === 'date') {
-                  formServiceProperties.additional[index] = {
-                    type: t,
-                    fieldName: p.fieldName,
-                  };
-                }
-
-                if (t === 'array') {
-                  formServiceProperties.additional[index] = {
-                    type: t,
-                    fieldName: p.fieldName,
-                    options: [''],
-                  };
-                }
-
-                if (t === 'string') {
-                  formServiceProperties.additional[index] = {
-                    type: t,
-                    fieldName: p.fieldName,
-                    isPhoneNumber: false,
-                    phoneNumberLength: 10,
-                  };
-                }
-
-                if (t === 'number') {
-                  formServiceProperties.additional[index] = {
-                    type: t,
-                    fieldName: p.fieldName,
-                    comma: false,
-                    decimal: false,
-                    decimalPlace: 2,
-                  };
-                }
-              }
-            "
-            :options="typeOption"
-            v-model="p.type"
-          >
-            <template v-slot:option="scope">
+              <q-separator />
               <q-item
-                v-if="scope.opt"
-                v-bind="scope.itemProps"
-                class="row items-center col-12"
-                :id="`type-${scope.itemProps}`"
+                v-for="(ops, index) in propertiesOption"
+                clickable
+                :key="index"
+                @click="manageProperties(stepIndex, ops.value, ops.type)"
+                :for="`list-${ops.value}`"
+                :id="`list-${ops.value}`"
               >
-                <q-avatar
-                  size="sm"
-                  class="q-mr-md"
-                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
-                >
+                <div class="full-width flex items-center no-wrap">
                   <q-icon
-                    size="20px"
-                    :name="scope.opt.icon"
-                    :style="`color: hsl(${scope.opt.color})`"
+                    v-if="
+                      formServiceProperties?.stepProperties[stepIndex] &&
+                      formServiceProperties?.stepProperties[
+                        stepIndex
+                      ].attributes.some((add) => add.fieldName === ops.value)
+                    "
+                    name="mdi-checkbox-marked"
+                    size="xs"
+                    color="primary"
+                    class="q-mr-sm"
                   />
-                </q-avatar>
-                {{ scope.opt.label }}
+                  <q-icon
+                    v-else
+                    name="mdi-checkbox-blank-outline"
+                    size="xs"
+                    style="color: hsl(var(--text-mute))"
+                    class="q-mr-sm"
+                  />
+                  {{ ops.label }}
+                </div>
               </q-item>
-            </template>
+            </q-list>
+          </q-btn-dropdown>
+        </span>
 
-            <template v-slot:selected-item="scope">
-              <div v-if="scope.opt" class="row items-center col-12">
-                <q-avatar
-                  size="xs"
-                  class="q-mr-sm"
-                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
-                >
-                  <q-icon
-                    size="14px"
-                    :name="scope.opt.icon"
-                    :style="`color: hsl(${scope.opt.color})`"
-                  />
-                </q-avatar>
-                {{ scope.opt.label }}
-              </div>
-            </template>
-          </q-select>
+        <!-- step attribute -->
+        <div
+          :class="{
+            'q-px-lg': $q.screen.gt.sm,
+            'q-px-md': !$q.screen.gt.sm,
+          }"
+        >
+          <div
+            v-for="(p, index) in formServiceProperties?.stepProperties[
+              stepIndex
+            ].attributes"
+            :key="index"
+            class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
+            :class="{
+              'q-mt-md': index === 0,
+              'q-mb-sm':
+                index !==
+                formServiceProperties.stepProperties[stepIndex].attributes
+                  .length -
+                  1,
+              'q-mb-md':
+                index ===
+                formServiceProperties.stepProperties[stepIndex].attributes
+                  .length -
+                  1,
+            }"
+          >
+            <div class="col-md col-12 row items-center">
+              <q-btn
+                id="btn-move-up-product"
+                icon="mdi-arrow-up"
+                dense
+                flat
+                round
+                :disable="index === 0"
+                :size="$q.screen.xs ? 'xs' : ''"
+                style="color: hsl(var(--text-mute-2))"
+                @click="
+                  moveItemUp(
+                    formServiceProperties.stepProperties[stepIndex].attributes,
+                    index,
+                  )
+                "
+              />
+              <q-btn
+                id="btn-move-down-product"
+                icon="mdi-arrow-down"
+                dense
+                flat
+                round
+                :size="$q.screen.xs ? 'xs' : ''"
+                :disable="
+                  index ===
+                  formServiceProperties.stepProperties[stepIndex].attributes
+                    .length -
+                    1
+                "
+                style="color: hsl(var(--text-mute-2))"
+                @click="
+                  moveItemDown(
+                    formServiceProperties.stepProperties[stepIndex].attributes,
+                    index,
+                  )
+                "
+              />
 
-          <div v-if="p.type !== 'date' && p.type">
-            <q-item class="no-padding" style="font-size: 11px">
-              <q-item-section
-                class="column q-py-sm"
-                :style="{ 'padding-left: 12px': $q.screen.gt.xs }"
+              <q-avatar
+                :size="$q.screen.xs ? 'sm' : 'md'"
+                class="q-mx-lg"
+                style="background-color: var(--surface-3)"
               >
-                <span class="app-text-muted-2">
-                  {{ $t('general.additional') }}
-                </span>
+                {{ index + 1 }}
+              </q-avatar>
 
-                <div v-if="p.type === 'string'" class="q-gutter-y-sm">
-                  <div class="row items-center">
-                    <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
-                      <q-checkbox
-                        :for="`checkbox-is-phone-number-${p.fieldName}`"
-                        v-if="p.type === 'string'"
-                        v-model="p.isPhoneNumber"
-                        size="xs"
-                      />
-                      {{ $t('general.telephone') }}
-                    </div>
-                    <q-input
-                      v-if="p.type === 'string'"
-                      :for="`input-max-length-${p.fieldName}`"
-                      v-model="p.phoneNumberLength"
-                      input-class="text-caption"
-                      class="col additional-label"
-                      dense
-                      outlined
-                      :label="$t('form.maxLength')"
-                    />
-                  </div>
-                </div>
-
-                <div v-if="p.type === 'number'" class="q-gutter-y-sm">
-                  <div class="row items-center">
-                    <div class="col-md-4 col-12 surface-3 rounded">
-                      <q-checkbox
-                        v-model="p.comma"
-                        size="xs"
-                        class="q-py-xs"
-                        :for="`checkbox-is-comma-${p.fieldName}`"
-                      />
-                      {{ $t('form.useComma') }}
-                    </div>
-                    <div
-                      class="col-md-4 col-7 surface-3 rounded"
-                      :class="{
-                        'q-mx-sm': $q.screen.gt.sm,
-                        'q-mr-sm q-mt-xs': $q.screen.lt.md,
-                      }"
-                    >
-                      <q-checkbox
-                        v-model="p.decimal"
-                        size="xs"
-                        class="q-py-xs"
-                        :for="`checkbox-is-decimal-${p.fieldName}`"
-                      />
-                      {{ $t('form.decimal') }}
-                    </div>
-                    <q-input
-                      :for="`input-decimal-place-${p.fieldName}`"
-                      v-model="p.decimalPlace"
-                      class="col additional-label"
-                      :class="{ 'q-mt-xs': $q.screen.lt.md }"
-                      input-class="text-caption"
-                      dense
-                      outlined
-                      :label="$t('form.decimalPlace')"
-                    />
-                  </div>
-                </div>
-
-                <div v-if="p.type === 'array'" class="q-gutter-y-sm">
-                  <div
-                    class="row items-center justify-between"
-                    v-for="(_, i) in p.options"
-                    :key="i"
+              <!-- field name -->
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-options
+                hide-bottom-space
+                for="input-properties-name"
+                class="col-md col-12 q-mr-md"
+                :class="{ 'q-my-sm': $q.screen.lt.md }"
+                :label="$t('productService.service.propertiesName')"
+                option-label="label"
+                option-value="value"
+                :options="propertiesOption"
+                v-model="p.fieldName"
+                @update:model-value="(v) => changeType(v, stepIndex)"
+              >
+                <template v-slot:option="scope">
+                  <q-item
+                    v-if="scope.opt && shouldShowItem(scope.opt, stepIndex)"
+                    v-bind="scope.itemProps"
+                    class="row items-center col-12"
                   >
-                    <div class="col rounded">
-                      <q-input
-                        v-model="p.options[i]"
-                        :for="`input-selection-${p.fieldName}-${i}`"
-                        class="col additional-label"
-                        dense
-                        outlined
-                        input-class="text-caption"
-                        :label="$t('form.selection')"
-                        :rules="[(val) => !!val || $t('form.error.required')]"
-                        hide-bottom-space
+                    {{ scope.opt.label }}
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <!-- type -->
+            <div class="col-md col-12">
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-options
+                hide-bottom-space
+                for="input-properties-type"
+                id="input-properties-type"
+                :label="$t('general.type')"
+                option-value="value"
+                @update:model-value="
+                  (t: 'string' | 'number' | 'date' | 'array') => {
+                    if (
+                      !formServiceProperties.stepProperties[stepIndex]
+                        .attributes
+                    )
+                      return;
+                    if (t === 'date') {
+                      formServiceProperties.stepProperties[
+                        stepIndex
+                      ].attributes[index] = {
+                        type: t,
+                        fieldName: p.fieldName,
+                      };
+                    }
+
+                    if (t === 'array') {
+                      formServiceProperties.stepProperties[
+                        stepIndex
+                      ].attributes[index] = {
+                        type: t,
+                        fieldName: p.fieldName,
+                        options: [],
+                      };
+                    }
+
+                    if (t === 'string') {
+                      formServiceProperties.stepProperties[
+                        stepIndex
+                      ].attributes[index] = {
+                        type: t,
+                        fieldName: p.fieldName,
+                        isPhoneNumber: false,
+                        phoneNumberLength: 10,
+                      };
+                    }
+
+                    if (t === 'number') {
+                      formServiceProperties.stepProperties[
+                        stepIndex
+                      ].attributes[index] = {
+                        type: t,
+                        fieldName: p.fieldName,
+                        comma: false,
+                        decimal: false,
+                        decimalPlace: 2,
+                      };
+                    }
+                  }
+                "
+                :options="typeOption"
+                v-model="p.type"
+              >
+                <template v-slot:option="scope">
+                  <q-item
+                    v-if="scope.opt"
+                    v-bind="scope.itemProps"
+                    class="row items-center col-12"
+                    :id="`type-${scope.itemProps}`"
+                  >
+                    <q-avatar
+                      size="sm"
+                      class="q-mr-md"
+                      :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                    >
+                      <q-icon
+                        size="20px"
+                        :name="scope.opt.icon"
+                        :style="`color: hsl(${scope.opt.color})`"
                       />
-                    </div>
-                    <div class="col-1 q-pl-sm">
-                      <q-btn
-                        :id="`btn-delete-selection-${p.fieldName}-${i}`"
-                        :for="`btn-delete-selection-${p.fieldName}-${i}`"
-                        @click="
-                          () => {
-                            p.options.splice(i, 1);
-                          }
-                        "
-                        dense
-                        flat
-                        icon="mdi-trash-can-outline"
-                        class="bordered"
-                        text-color="negative"
-                        style="border-radius: 6px"
+                    </q-avatar>
+                    {{ scope.opt.label }}
+                  </q-item>
+                </template>
+
+                <template v-slot:selected-item="scope">
+                  <div v-if="scope.opt" class="row items-center col-12">
+                    <q-avatar
+                      size="xs"
+                      class="q-mr-sm"
+                      :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                    >
+                      <q-icon
+                        size="14px"
+                        :name="scope.opt.icon"
+                        :style="`color: hsl(${scope.opt.color})`"
                       />
+                    </q-avatar>
+                    {{ scope.opt.label }}
+                  </div>
+                </template>
+              </q-select>
+
+              <div v-if="p.type !== 'date' && p.type">
+                <q-item class="no-padding" style="font-size: 11px">
+                  <q-item-section
+                    class="column q-py-sm"
+                    :style="{ 'padding-left: 12px': $q.screen.gt.xs }"
+                  >
+                    <span class="app-text-muted-2">
+                      {{ $t('general.additional') }}
+                    </span>
+
+                    <div v-if="p.type === 'string'" class="q-gutter-y-sm">
+                      <div class="row items-center">
+                        <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
+                          <q-checkbox
+                            :for="`checkbox-is-phone-number-${p.fieldName}`"
+                            v-if="p.type === 'string'"
+                            v-model="p.isPhoneNumber"
+                            size="xs"
+                          />
+                          {{ $t('general.telephone') }}
+                        </div>
+                        <q-input
+                          v-if="p.type === 'string'"
+                          :for="`input-max-length-${p.fieldName}`"
+                          v-model="p.phoneNumberLength"
+                          input-class="text-caption"
+                          class="col additional-label"
+                          dense
+                          outlined
+                          :label="$t('form.maxLength')"
+                        />
+                      </div>
                     </div>
-                  </div>
-                  <div class="row">
-                    <q-btn
-                      :for="`btn-add-selection-${p.fieldName}`"
-                      :id="`btn-add-selection-${p.fieldName}`"
-                      @click="
-                        () => {
-                          p.options.push('');
-                        }
-                      "
-                      dense
-                      flat
-                      icon="mdi-plus"
-                      class="bordered col-11"
-                      text-color="grey"
-                      style="border-radius: 6px"
-                    />
-                  </div>
-                </div>
-              </q-item-section>
-            </q-item>
+
+                    <div v-if="p.type === 'number'" class="q-gutter-y-sm">
+                      <div class="row items-center">
+                        <div class="col-md-4 col-12 surface-3 rounded">
+                          <q-checkbox
+                            v-model="p.comma"
+                            size="xs"
+                            class="q-py-xs"
+                            :for="`checkbox-is-comma-${p.fieldName}`"
+                          />
+                          {{ $t('form.useComma') }}
+                        </div>
+                        <div
+                          class="col-md-4 col-7 surface-3 rounded"
+                          :class="{
+                            'q-mx-sm': $q.screen.gt.sm,
+                            'q-mr-sm q-mt-xs': $q.screen.lt.md,
+                          }"
+                        >
+                          <q-checkbox
+                            v-model="p.decimal"
+                            size="xs"
+                            class="q-py-xs"
+                            :for="`checkbox-is-decimal-${p.fieldName}`"
+                          />
+                          {{ $t('form.decimal') }}
+                        </div>
+                        <q-input
+                          :for="`input-decimal-place-${p.fieldName}`"
+                          v-model="p.decimalPlace"
+                          class="col additional-label"
+                          :class="{ 'q-mt-xs': $q.screen.lt.md }"
+                          input-class="text-caption"
+                          dense
+                          outlined
+                          :label="$t('form.decimalPlace')"
+                        />
+                      </div>
+                    </div>
+
+                    <div v-if="p.type === 'array'" class="q-gutter-y-sm">
+                      <div
+                        class="row items-center justify-between"
+                        v-for="(_, i) in p.options"
+                        :key="i"
+                      >
+                        <div class="col rounded">
+                          <q-input
+                            v-model="p.options[i]"
+                            :for="`input-selection-${p.fieldName}-${i}`"
+                            class="col additional-label"
+                            dense
+                            outlined
+                            input-class="text-caption"
+                            :label="$t('form.selection')"
+                            :rules="[
+                              (val) => !!val || $t('form.error.required'),
+                            ]"
+                            hide-bottom-space
+                          />
+                        </div>
+                        <div class="col-1 q-pl-sm">
+                          <q-btn
+                            :id="`btn-delete-selection-${p.fieldName}-${i}`"
+                            :for="`btn-delete-selection-${p.fieldName}-${i}`"
+                            @click="
+                              () => {
+                                p.options.splice(i, 1);
+                              }
+                            "
+                            dense
+                            flat
+                            icon="mdi-trash-can-outline"
+                            class="bordered"
+                            text-color="negative"
+                            style="border-radius: 6px"
+                          />
+                        </div>
+                      </div>
+                      <div class="row">
+                        <q-btn
+                          :for="`btn-add-selection-${p.fieldName}`"
+                          :id="`btn-add-selection-${p.fieldName}`"
+                          @click="
+                            () => {
+                              p.options.push('');
+                            }
+                          "
+                          dense
+                          flat
+                          icon="mdi-plus"
+                          class="bordered col-11"
+                          text-color="grey"
+                          style="border-radius: 6px"
+                        />
+                      </div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </div>
+            </div>
+
+            <q-btn
+              id="btn-delete-work-product"
+              icon="mdi-trash-can-outline"
+              dense
+              flat
+              round
+              color="negative"
+              class="q-ml-sm"
+              @click="
+                confirmDelete(
+                  formServiceProperties.stepProperties[stepIndex].attributes,
+                  index,
+                )
+              "
+            />
           </div>
         </div>
-
-        <q-btn
-          id="btn-delete-work-product"
-          icon="mdi-trash-can-outline"
-          dense
-          flat
-          round
-          color="negative"
-          class="q-ml-sm"
-          @click="confirmDelete(formServiceProperties.additional, index)"
-        />
-      </div>
+      </section>
     </div>
   </div>
 </template>
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 66085da1..bc2c5d0d 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -1,21 +1,32 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
-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 { QSelect } from 'quasar';
 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 { workNameItems } = storeToRefs(productServiceStore);
+// const { fetchListOfWork } = 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(
-  () => workNameItems.value,
-  (c, o) => {
-    const list = c.map((v: { name: string }) => v.name);
-    const oldList = o.map((v: { name: string }) => v.name);
-    const index = oldList.indexOf(workName.value);
+// watch(
+//   () => workNameItems.value,
+//   (c, o) => {
+//     const list = c.map((v: { name: string }) => v.name);
+//     const oldList = o.map((v: { name: string }) => v.name);
+//     const index = oldList.indexOf(workName.value);
 
-    if (list[index] !== oldList[index] && !list.includes(workName.value)) {
-      if (list.length - 1 === index - 1) workName.value = list[index - 1];
-      else workName.value = list[index];
-    }
+//     if (list[index] !== oldList[index] && !list.includes(workName.value)) {
+//       if (list.length - 1 === index - 1) workName.value = list[index - 1];
+//       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">
-        <!-- 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('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-if="!workName && productItems.length === 0"
+        class="surface-2 row items-center justify-center q-py-sm"
+      >
+        <NoData />
+      </section>
 
+      <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"
-                    :class="$q.screen.gt.xs ? 'q-mx-lg' : 'q-mr-lg'"
+                    size="sm"
+                    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"
-                        :style="`max-width: ${$q.screen.gt.sm ? (!readonly ? '10vw' : '25vw') : '20vw'}`"
+                        class="text-weight-medium ellipsis-2-lines full-width"
                       >
                         {{ product.name }}
                         <q-tooltip>
                           {{ product.name }}
                         </q-tooltip>
                       </span>
-                      <div
-                        class="bordered q-px-xs ellipsis"
-                        style="border-radius: 6px; max-width: 100px"
-                      >
-                        {{ product.code }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                      <div class="text-caption">
+                        <span class="bordered q-px-xs rounded q-mr-sm">
+                          {{ product.code }}
+                        </span>
 
-                <div
-                  class="row justify-end text-right col-md-6 col-12"
-                  :class="$q.screen.xs ? 'q-mt-sm text-caption' : 'q-pr-sm'"
-                >
-                  <span
-                    class="col-12 row"
-                    :class="{ 'q-col-gutter-md': $q.screen.gt.xs }"
-                    style="color: var(--teal-9)"
-                  >
+                        <q-icon name="mdi-clock-outline" />
+                        {{ product.process }} {{ $t('general.day') }}
+                      </div>
+                    </article>
+                  </div>
+                </section>
+
+                <!-- 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
-                        v-if="!readonly && $q.screen.gt.xs"
-                        outlined
-                        for="input-bankbook"
-                        hide-bottom-space
-                        class="col-2"
-                        dense
-                        type="number"
-                        v-model="product.installmentNo"
-                        min="0"
-                      />
+                      <span class="row justify-end">
+                        <q-input
+                          v-if="!readonly && $q.screen.gt.xs"
+                          outlined
+                          :max="splitPay"
+                          input-class="text-right no-padding"
+                          for="input-bankbook"
+                          hide-bottom-space
+                          class="installment-no col-10"
+                          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;
-  width: 70px;
+  height: 45px;
+  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>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index bfbe8d74..b4d3f9e8 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/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>