diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index b2e44386..8ccf2c81 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -118,14 +118,14 @@ defineEmits<{
                 </div>
               </q-item>
               <q-item
-                @click="workName = item"
+                @click="workName = item.name"
                 clickable
-                v-for="item in workNameItems"
-                :key="item"
+                v-for="(item, index) in workNameItems"
+                :key="index"
               >
                 <div class="full-width flex items-center">
                   <q-icon
-                    v-if="workName === item"
+                    v-if="workName === item.name"
                     name="mdi-checkbox-marked"
                     size="xs"
                     color="primary"
@@ -138,7 +138,7 @@ defineEmits<{
                     style="color: hsl(var(--text-mute))"
                     class="q-mr-sm"
                   />
-                  {{ item }}
+                  {{ item.name }}
                 </div>
               </q-item>
             </q-menu>
diff --git a/src/components/04_product-service/WorkNameManagement.vue b/src/components/04_product-service/WorkNameManagement.vue
index 3321bddc..6ad273c6 100644
--- a/src/components/04_product-service/WorkNameManagement.vue
+++ b/src/components/04_product-service/WorkNameManagement.vue
@@ -1,77 +1,89 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { deleteItem, dialog } from 'src/stores/utils';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
 
-const { t } = useI18n();
+import { deleteItem, dialog } from 'src/stores/utils';
+import useProductServiceStore from 'src/stores/product-service';
 
-const inputWorkName = ref<HTMLInputElement[]>([]);
-const newNameIndex = ref();
+import NoData from '../NoData.vue';
 
-const testName = ref([
-  { name: 'ทดสอบการขาย 1', isEdit: false },
-  { name: 'ทดสอบการขาย 2', isEdit: false },
-  { name: 'ทดสอบการขาย 3', isEdit: false },
-  { name: 'ทดสอบการขาย 4', isEdit: false },
-  { name: 'ทดสอบการขาย 5', isEdit: false },
-]);
+const nameList = defineModel<{ id: string; name: string; isEdit: boolean }[]>(
+  'nameList',
+  { required: true },
+);
 
-function addWorkName() {
-  testName.value.push({
-    name: '',
-    isEdit: true,
-  });
-  setTimeout(() => {
-    inputWorkName.value[testName.value.length - 1].focus();
-  }, 100);
+const cloneList = ref();
+const isAdd = ref(false);
+const inputName = ref<HTMLInputElement[]>([]);
+
+function isWorkNameEdit() {
+  return cloneList.value.some((i: { isEdit: boolean }) => i.isEdit === true);
 }
 
-function confirmDelete(items: unknown[], index: number) {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('delete'),
-    message: t('deleteConfirmMessage'),
-    action: async () => {
-      deleteItem(items, index);
-    },
-    cancel: () => {},
-  });
+async function assignClone() {
+  cloneList.value = await JSON.parse(JSON.stringify(nameList.value));
 }
+
+defineExpose({
+  isWorkNameEdit,
+});
+
+defineEmits<{
+  (e: 'delete', id: string): void;
+  (e: 'edit', id: string, data: { name: string }): void;
+  (e: 'add', data: { name: string; productId: []; order: number }): void;
+}>();
+
+onMounted(async () => {
+  await assignClone();
+});
+
+watch(
+  () => nameList.value.length,
+  async () => {
+    await assignClone();
+    if (!isAdd.value) return;
+    cloneList.value[cloneList.value.length - 1].isEdit = true;
+    setTimeout(() => {
+      inputName.value[cloneList.value.length - 1].focus();
+      isAdd.value = false;
+    }, 150);
+  },
+);
 </script>
 <template>
-  <div class="full-width column no-wrap full-height">
+  <div v-if="cloneList" class="full-width column no-wrap full-height">
     <div
-      v-if="true"
+      v-if="cloneList.length > 0"
       class="bordered rounded surface-1 flex col column justify-between"
     >
       <q-list class="full-width col scroll">
         <q-item
           class="items-center row q-px-lg"
-          v-for="(i, index) in testName"
+          v-for="(item, index) in cloneList"
           :key="index"
         >
-          <!-- outlined -->
           <q-input
-            ref="inputWorkName"
+            ref="inputName"
             dense
-            :borderless="!i.isEdit"
-            :readonly="!i.isEdit"
-            :outlined="i.isEdit"
             class="col q-mr-md"
-            v-model="i.name"
+            v-model="item.name"
             placeholder="ชื่องาน"
+            :borderless="!item.isEdit"
+            :readonly="!item.isEdit"
+            :outlined="item.isEdit"
           ></q-input>
           <q-btn
-            v-if="!i.isEdit"
+            v-if="!item.isEdit"
             id="btn-edit-work-name"
             icon="mdi-pencil-outline"
+            :disable="isWorkNameEdit()"
             dense
             flat
             round
             color="primary"
-            @click="i.isEdit = true"
+            @click="item.isEdit = true"
           >
             <q-tooltip>Edit</q-tooltip>
           </q-btn>
@@ -83,20 +95,26 @@ function confirmDelete(items: unknown[], index: number) {
             flat
             round
             color="primary"
-            @click="i.isEdit = false"
+            @click="
+              () => {
+                $emit('edit', item.id, { name: item.name }),
+                  (item.isEdit = false);
+              }
+            "
           >
             <q-tooltip>Save</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="!i.isEdit"
+            v-if="!item.isEdit"
             id="btn-delete-work-name"
+            :disable="isWorkNameEdit()"
             icon="mdi-trash-can-outline"
             dense
             flat
             round
             class="q-ml-md"
             color="negative"
-            @click="confirmDelete(testName, index)"
+            @click="$emit('delete', item.id)"
           >
             <q-tooltip>Delete</q-tooltip>
           </q-btn>
@@ -109,7 +127,7 @@ function confirmDelete(items: unknown[], index: number) {
             round
             class="q-ml-md"
             color="negative"
-            @click="i.isEdit = false"
+            @click="assignClone"
           >
             <q-tooltip>Cancel</q-tooltip>
           </q-btn>
@@ -117,7 +135,16 @@ function confirmDelete(items: unknown[], index: number) {
       </q-list>
 
       <div class="bordered-t full-width">
-        <q-item clickable @click="addWorkName">
+        <q-item
+          clickable
+          :disable="isWorkNameEdit()"
+          @click="
+            () => {
+              $emit('add', { name: '', productId: [], order: 1 }),
+                (isAdd = true);
+            }
+          "
+        >
           <span class="q-px-lg flex items-center app-text-muted-2">
             <q-icon name="mdi-plus" class="q-mr-md" />
             เพิ่มงานใหม่
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index dd6bdab2..ed844697 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -180,6 +180,7 @@ const serviceTab = [
 ];
 
 const workItems = ref<WorkItems[]>([]);
+const workNameRef = ref();
 
 const currentServiceTab = ref('serviceInformation');
 const propertiesDialog = ref<boolean>(false);
@@ -605,6 +606,32 @@ async function submitGroup() {
   clearFormGroup();
 }
 
+function confirmDeleteWork(id: string) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('deleteConfirmTitle'),
+    actionText: t('delete'),
+    message: t('deleteConfirmMessage'),
+    action: async () => {
+      deleteWork(id);
+    },
+    cancel: () => {},
+  });
+}
+
+function confirmCloseWork() {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('deleteConfirmTitle'),
+    actionText: t('delete'),
+    message: t('deleteConfirmMessage'),
+    action: async () => {},
+    cancel: () => {},
+  });
+}
+
 const tempValueProperties = ref<Attributes>({
   additional: [],
 });
@@ -1584,7 +1611,6 @@ watch(currentStatus, async () => {
     <ServiceProperties
       v-model:properties-option="propertiesOption"
       v-model:form-service-properties="tempValueProperties"
-      @add-properties="console.log('')"
     />
   </FormDialog>
 
@@ -1592,11 +1618,18 @@ watch(currentStatus, async () => {
   <FormDialog
     no-address
     no-app-box
+    no-footer
     width="65%"
     title="จัดการ"
     v-model:modal="manageWorkNameDialog"
   >
-    <WorkNameManagement />
+    <WorkNameManagement
+      ref="workNameRef"
+      v-model:nameList="workNameItems"
+      @delete="confirmDeleteWork"
+      @edit="editWork"
+      @add="createWork"
+    />
   </FormDialog>
 
   <!-- edit service -->