diff --git a/src/pages/09_task-order/SelectReadyRequestWork.vue b/src/pages/09_task-order/SelectReadyRequestWork.vue
index b79133c1..54f3fa2b 100644
--- a/src/pages/09_task-order/SelectReadyRequestWork.vue
+++ b/src/pages/09_task-order/SelectReadyRequestWork.vue
@@ -22,6 +22,18 @@ const emit = defineEmits<{
 }>();
 
 const props = defineProps<{
+  taskListGroup: {
+    product: RequestWork['productService']['product'];
+    list: (RequestWork & {
+      _template?: {
+        id: string;
+        templateName: string;
+        templateStepName: string;
+        step: number;
+        responsibleInstitution: (string | { group: string })[];
+      } | null;
+    })[];
+  }[];
   creditNote?: boolean;
   fetchParams?: Parameters<typeof requestListStore.getRequestWorkList>[0];
 }>();
@@ -39,6 +51,20 @@ const taskList = defineModel<
 });
 const open = defineModel<boolean>('open', { default: false });
 
+const tempGroupEdit = defineModel<
+  {
+    product: RequestWork['productService']['product'];
+    list: (RequestWork & {
+      _template?: {
+        id: string;
+        templateName: string;
+        templateStepName: string;
+        step: number;
+        responsibleInstitution: (string | { group: string })[];
+      } | null;
+    })[];
+  }[]
+>('tempGroupEdit', { default: [] });
 const selectedEmployee = ref<
   (RequestWork & {
     taskStatus: TaskStatus;
@@ -56,15 +82,28 @@ let group = computed(() =>
   data.value.reduce<
     {
       product: RequestWork['productService']['product'];
-      list: RequestWork[];
+      list: (RequestWork & {
+        _template?: {
+          id: string;
+          templateName: string;
+          templateStepName: string;
+          step: number;
+          responsibleInstitution: (string | { group: string })[];
+        } | null;
+      })[];
     }[]
   >((acc, curr) => {
     let exist = acc.find(
       (item) => curr.productService.productId == item.product.id,
     );
 
-    if (exist) exist.list.push(curr);
-    else acc.push({ product: curr.productService.product, list: [curr] });
+    if (exist) exist.list.push({ ...curr, _template: getTemplateData(curr) });
+    else
+      acc.push({
+        product: curr.productService.product,
+        // list: [curr],
+        list: [{ ...curr, _template: getTemplateData(curr) }],
+      });
 
     return acc;
   }, []),
@@ -74,7 +113,12 @@ let state = reactive({
   search: '',
 });
 
-onMounted(getList);
+onMounted(async () => {
+  await getList();
+  if (tempGroupEdit.value.length === 0) {
+    tempGroupEdit.value = JSON.parse(JSON.stringify(group.value));
+  }
+});
 watch(() => state.search, getList);
 
 async function getList() {
@@ -90,35 +134,11 @@ async function getList() {
   data.value = res.result;
 }
 
-// function toggle(item: RequestWork) {
-//   switch (selected(item)) {
-//     case true:
-//       return deselect(item);
-//     case false:
-//       return select(item);
-//   }
-// }
-
-// function select(item: RequestWork) {
-//   if (selected(item)) return;
-//   selectedEmployee.value = selectedEmployee.value
-//     ? selectedEmployee.value.concat(item)
-//     : [item];
-// }
-
-// function deselect(item: RequestWork) {
-//   const idx = selectedEmployee.value?.findIndex((v) => v.id === item.id);
-//   if (idx !== -1) selectedEmployee.value?.splice(idx, 1);
-// }
-
-// function selected(item: RequestWork): boolean {
-//   return !!selectedEmployee.value?.some((v) => v.id === item.id);
-// }
-//
-
 function getStep(requestWork: RequestWork) {
   const target = requestWork.stepStatus.find(
-    (v) => v.workStatus === RequestWorkStatus.Ready,
+    (v) =>
+      v.workStatus === RequestWorkStatus.Ready ||
+      v.workStatus === RequestWorkStatus.InProgress,
   );
   return target?.step || 0;
 }
@@ -135,6 +155,7 @@ function getTemplateData(requestWork: RequestWork) {
     step: step.order,
     templateName: flow.name,
     templateStepName: step.name || '-',
+    responsibleInstitution: step.responsibleInstitution || [],
   };
 }
 
@@ -149,17 +170,22 @@ function submit() {
     const curr = v.stepStatus.find(
       (s) =>
         s.workStatus ===
-        (props.creditNote
-          ? RequestWorkStatus.Canceled
-          : RequestWorkStatus.Ready),
+          (props.creditNote
+            ? RequestWorkStatus.Canceled
+            : RequestWorkStatus.Ready) ||
+        s.workStatus ===
+          (props.creditNote
+            ? RequestWorkStatus.Canceled
+            : RequestWorkStatus.InProgress),
     );
     if (curr) {
       const task: Task = {
         ...curr,
         attributes: curr.attributes,
-        workStatus: props.creditNote
-          ? RequestWorkStatus.Canceled
-          : RequestWorkStatus.Ready,
+        workStatus:
+          curr.workStatus || props.creditNote
+            ? RequestWorkStatus.Ready
+            : RequestWorkStatus.Canceled,
         taskOrderId: '',
         requestWork: selectedEmployee.value[i],
       };
@@ -183,9 +209,13 @@ function close() {
 }
 
 function onDialogOpen() {
+  // assign selected to group
+  assignTempGroup();
+
+  // match group to check
   selectedEmployee.value = [];
   if (taskList.value.length === 0) return;
-  const matchingItems = group.value
+  const matchingItems = tempGroupEdit.value
     .flatMap((g) => g.list)
     .filter((l) =>
       l.stepStatus.some((s) =>
@@ -194,6 +224,27 @@ function onDialogOpen() {
     );
   selectedEmployee.value = JSON.parse(JSON.stringify(matchingItems));
 }
+
+function assignTempGroup() {
+  props.taskListGroup.forEach((newGroup) => {
+    const existingGroup = tempGroupEdit.value.find(
+      (g) => g.product.id === newGroup.product.id,
+    );
+
+    if (existingGroup) {
+      newGroup.list.forEach((newItem) => {
+        if (!existingGroup.list.some((item) => item.id === newItem.id)) {
+          existingGroup.list.push(newItem);
+        }
+      });
+    } else {
+      tempGroupEdit.value.push({
+        ...newGroup,
+        list: [...newGroup.list], // Ensure a new reference
+      });
+    }
+  });
+}
 </script>
 
 <template>
@@ -205,9 +256,9 @@ function onDialogOpen() {
     </template>
 
     <section class="col column full-width no-wrap surface-2 scroll">
-      <template v-if="group.length > 0">
+      <template v-if="tempGroupEdit.length > 0">
         <div
-          v-for="{ product, list } in group"
+          v-for="{ product, list } in tempGroupEdit"
           :key="product.id"
           class="bordered-b"
         >
diff --git a/src/pages/09_task-order/form.ts b/src/pages/09_task-order/form.ts
index 1f568249..fa5bf278 100644
--- a/src/pages/09_task-order/form.ts
+++ b/src/pages/09_task-order/form.ts
@@ -103,7 +103,14 @@ export const useTaskOrderForm = defineStore('task-order-form', () => {
     }
 
     if (state.value.mode === 'edit' && !!currentFormData.value.id) {
-      const res = await taskOrderStore.editTaskOrder(currentFormData.value);
+      const taskProduct = opt?.taskProduct?.map((p) => ({
+        productId: p.productId,
+        discount: p.discount,
+      }));
+      const res = await taskOrderStore.editTaskOrder({
+        ...currentFormData.value,
+        taskProduct: taskProduct,
+      });
       if (res) {
         succeed = true;
       }
diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index 0245ef53..66eef2a7 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -20,6 +20,7 @@ import {
   MainButton,
   EditButton,
   UndoButton,
+  CancelButton,
 } from 'src/components/button';
 import FormGroupHead from 'src/pages/08_request-list/FormGroupHead.vue';
 import FailRemarkDialog from '../receive_view/FailRemarkDialog.vue';
@@ -75,6 +76,20 @@ const taskStatusRecords = ref<
     failedType?: string;
   }[]
 >([]);
+const tempGroupEdit = ref<
+  {
+    product: RequestWork['productService']['product'];
+    list: (RequestWork & {
+      _template?: {
+        id: string;
+        templateName: string;
+        templateStepName: string;
+        step: number;
+        responsibleInstitution: (string | { group: string })[];
+      } | null;
+    })[];
+  }[]
+>([]);
 
 const pageState = reactive({
   productDialog: false,
@@ -856,7 +871,7 @@ watch([currentFormData.value.taskStatus], () => {
             "
           >
             <DocumentExpansion
-              :readonly="state.mode !== 'create'"
+              :readonly="!['create', 'edit'].includes(state.mode || '')"
               v-model:registered-branch-id="currentFormData.registeredBranchId"
               v-model:institution-id="currentFormData.institutionId"
               v-model:task-name="currentFormData.taskName"
@@ -947,7 +962,7 @@ watch([currentFormData.value.taskStatus], () => {
               view === TaskOrderStatus.Pending ||
               view === TaskOrderStatus.Complete
             "
-            :readonly="false"
+            :readonly="!['create', 'edit'].includes(state.mode || '')"
           />
 
           <template
@@ -1185,7 +1200,11 @@ watch([currentFormData.value.taskStatus], () => {
             />
           </template>
           <SaveButton
-            v-if="state.mode !== 'create' && view === TaskOrderStatus.Validate"
+            v-if="
+              state.mode !== 'create' &&
+              view === TaskOrderStatus.Validate &&
+              fullTaskOrder?.taskOrderStatus !== TaskOrderStatus.Pending
+            "
             :disabled="
               !fullTaskOrder?.taskList.some((t) =>
                 [
@@ -1228,9 +1247,11 @@ watch([currentFormData.value.taskStatus], () => {
 
   <!-- SEC: Dialog -->
   <SelectReadyRequestWork
+    :task-list-group="taskListGroup"
     :fetch-params="{ readyToTask: true }"
     v-model:open="pageState.productDialog"
     v-model:task-list="currentFormData.taskList"
+    v-model:temp-group-edit="tempGroupEdit"
     @after-submit="
       () => {
         taskProduct = [];
diff --git a/src/stores/task-order/index.ts b/src/stores/task-order/index.ts
index 8bd532b4..b3bc8db4 100644
--- a/src/stores/task-order/index.ts
+++ b/src/stores/task-order/index.ts
@@ -113,6 +113,7 @@ export const useTaskOrderStore = defineStore('taskorder-store', () => {
       contactName: body.contactName,
       taskStatus: body.taskStatus,
       taskName: body.taskName,
+      taskProduct: body.taskProduct,
     });
 
     if (res.status < 400) {