diff --git a/src/pages/09_task-order/document_view/MainPage.vue b/src/pages/09_task-order/document_view/MainPage.vue
index 7e91b4a2..b3ae7ce5 100644
--- a/src/pages/09_task-order/document_view/MainPage.vue
+++ b/src/pages/09_task-order/document_view/MainPage.vue
@@ -28,6 +28,7 @@ const route = useRoute();
 const taskOrder = useTaskOrderStore();
 const configStore = useConfigStore();
 const config = storeToRefs(configStore).data;
+const viewType = ref<'docOrder' | 'docReceive'>('docOrder');
 
 type Data = TaskOrder;
 
@@ -106,6 +107,7 @@ const STORAGE_KEY = 'task-order-preview';
 
 onMounted(async () => {
   if (route.params['id'] && typeof route.params['id'] === 'string') {
+    viewType.value = route.name as 'docOrder' | 'docReceive';
     const jsonObject = await taskOrder.getTaskOrderById(route.params['id']);
 
     if (!jsonObject) return;
@@ -133,7 +135,7 @@ onMounted(async () => {
   const taskListGroup = data.value?.taskList.reduce<
     {
       product: RequestWork['productService']['product'];
-      list: RequestWork[];
+      list: (RequestWork & { _status: TaskStatus })[];
     }[]
   >((acc, curr) => {
     if (
@@ -143,21 +145,25 @@ onMounted(async () => {
       return acc;
     }
 
-    const task = curr.requestWorkStep;
+    const step = curr.requestWorkStep;
 
-    if (!task) return acc;
+    if (!step) return acc;
 
-    if (task.requestWork) {
+    if (step.requestWork) {
       let exist = acc.find(
-        (item) => task.requestWork.productService.productId == item.product.id,
+        (item) => step.requestWork.productService.productId == item.product.id,
       );
 
+      const requestWork = Object.assign(step.requestWork, {
+        _status: curr.taskStatus,
+      });
+
       if (exist) {
-        exist.list.push(task.requestWork);
+        exist.list.push(requestWork);
       } else {
         acc.push({
-          product: task.requestWork.productService.product,
-          list: [task.requestWork],
+          product: step.requestWork.productService.product,
+          list: [requestWork],
         });
       }
     }
@@ -167,15 +173,23 @@ onMounted(async () => {
 
   product.value = [];
   summaryPrice.value = taskListGroup
-    .map((v) => ({
-      product: v.product,
-      pricePerUnit: v.product.serviceCharge,
-      discount:
-        data.value?.taskProduct.find(
-          ({ productId }) => productId === v.product.id,
-        )?.discount || 0,
-      amount: v.list.length,
-    }))
+    .flatMap((v) => {
+      const list = v.list.filter(
+        (item) => item._status === TaskStatus.Complete,
+      );
+      if (viewType.value === 'docReceive' && list.length === 0) {
+        return [];
+      }
+      return {
+        product: v.product,
+        pricePerUnit: v.product.serviceCharge,
+        discount:
+          data.value?.taskProduct.find(
+            ({ productId }) => productId === v.product.id,
+          )?.discount || 0,
+        amount: list.length,
+      };
+    })
     .reduce(
       (a, c) => {
         const priceNoVat = c.product.vatIncluded
@@ -225,10 +239,17 @@ function print() {
   <div class="toolbar">
     <PrintButton solid @click="print" />
   </div>
-  <div class="row justify-between container color-task">
+  <div
+    class="row justify-between container"
+    :class="{
+      'color-task-receive': viewType === 'docReceive',
+      'color-task-order': viewType === 'docOrder',
+    }"
+  >
     <section class="content" v-for="chunk in chunks">
       <ViewHeader
         v-if="!!branch && data"
+        :view-type="viewType"
         :branch="branch"
         :institution="data.institution"
         :details="{
@@ -381,6 +402,7 @@ function print() {
     <section class="content" v-if="data">
       <ViewHeader
         v-if="!!branch"
+        :view-type="viewType"
         :branch="branch"
         :institution="data.institution"
         :details="{
@@ -408,11 +430,16 @@ function print() {
 </template>
 
 <style scoped>
-.color-task {
+.color-task-receive {
   --main: var(--yellow-6);
   --main-hsl: var(--yellow-6-hsl);
 }
 
+.color-task-order {
+  --main: var(--pink-6);
+  --main-hsl: var(--pink-6-hsl);
+}
+
 .toolbar {
   width: 100%;
   position: sticky;
diff --git a/src/pages/09_task-order/document_view/ViewHeader.vue b/src/pages/09_task-order/document_view/ViewHeader.vue
index 345c483d..e46610ea 100644
--- a/src/pages/09_task-order/document_view/ViewHeader.vue
+++ b/src/pages/09_task-order/document_view/ViewHeader.vue
@@ -11,6 +11,7 @@ import { Institution } from 'src/stores/institution/types';
 // NOTE: Import Components
 
 defineProps<{
+  viewType: 'docOrder' | 'docReceive';
   branch: Branch;
   institution: Institution;
   details: {
@@ -31,7 +32,11 @@ defineProps<{
       class="column"
       style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
     >
-      {{ $t('taskOrder.goodReceipt') }}
+      {{
+        viewType === 'docReceive'
+          ? $t('taskOrder.goodReceipt')
+          : $t('preview.taskOrder')
+      }}
     </div>
   </div>
 
@@ -87,7 +92,11 @@ defineProps<{
     <section class="detail-quotation-info">
       <div>
         <div>
-          {{ $t('general.itemNo', { msg: `${$t('preview.taskOrder')}` }) }}
+          {{
+            $t('general.itemNo', {
+              msg: `   ${viewType === 'docReceive' ? $t('taskOrder.goodReceipt') : $t('preview.taskOrder')}`,
+            })
+          }}
         </div>
         <div>{{ details.code }}</div>
       </div>
diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index acb7def2..d15f1320 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -15,13 +15,7 @@ import AdditionalFileExpansion from '../expansion/AdditionalFileExpansion.vue';
 import RemarkExpansion from '../expansion/RemarkExpansion.vue';
 import InfoMessengerExpansion from '../expansion/receive/InfoMessengerExpansion.vue';
 import TableEmployee from '../TableEmployee.vue';
-import {
-  SaveButton,
-  CancelButton,
-  MainButton,
-  UndoButton,
-  EditButton,
-} from 'src/components/button';
+import { SaveButton, MainButton, EditButton } from 'src/components/button';
 import FormGroupHead from 'src/pages/08_request-list/FormGroupHead.vue';
 import FailRemarkDialog from '../receive_view/FailRemarkDialog.vue';
 
@@ -589,7 +583,7 @@ watch([currentFormData.value.taskStatus], () => {
 });
 
 function viewDocument(id: string) {
-  window.open(`/task-order/${id}/doc`, '_blank');
+  window.open(`/task-order/${id}/doc-prouct-order`, '_blank');
 }
 </script>
 <template>
@@ -926,17 +920,11 @@ function viewDocument(id: string) {
     </article>
 
     <!-- SEC: footer -->
-    <footer
-      class="surface-1 q-pa-md full-width"
-      v-if="
-        view === TaskOrderStatus.Validate ||
-        view === TaskOrderStatus.Complete ||
-        state.mode === 'create'
-      "
-    >
+    <footer class="surface-1 q-pa-md full-width">
       <nav class="row justify-end">
         <MainButton
-          v-if="currentFormData.id && view === TaskOrderStatus.Complete"
+          class="q-mr-auto"
+          v-if="currentFormData.id"
           outlined
           icon="mdi-play-box-outline"
           color="207 96% 32%"
@@ -966,7 +954,7 @@ function viewDocument(id: string) {
           </template>
 
           <SaveButton
-            v-if="state.mode !== 'create' && view !== TaskOrderStatus.Complete"
+            v-if="state.mode !== 'create' && view === TaskOrderStatus.Validate"
             :disabled="
               !fullTaskOrder?.taskList.every(
                 (t) =>
diff --git a/src/pages/09_task-order/receive_view/MainPage.vue b/src/pages/09_task-order/receive_view/MainPage.vue
index 8ef629ec..7c11c793 100644
--- a/src/pages/09_task-order/receive_view/MainPage.vue
+++ b/src/pages/09_task-order/receive_view/MainPage.vue
@@ -5,7 +5,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { getUserId } from 'src/services/keycloak';
 
 // NOTE: Import Components
-import { SaveButton } from 'src/components/button';
+import { SaveButton, MainButton } from 'src/components/button';
 import { StateButton } from 'components/button';
 import InfoMessengerExpansion from '../expansion/receive/InfoMessengerExpansion.vue';
 import InfoProductExpansion from '../expansion/receive/InfoProductExpansion.vue';
@@ -337,6 +337,10 @@ onMounted(async () => {
   }
 });
 
+function viewDocument(id: string) {
+  window.open(`/task-order/${id}/doc-prouct-receive`, '_blank');
+}
+
 watch([currentFormData.value.taskStatus], () => {
   fetchStatus();
 });
@@ -693,6 +697,17 @@ watch([currentFormData.value.taskStatus], () => {
       class="surface-1 q-pa-md full-width"
     >
       <nav class="row justify-end">
+        <MainButton
+          class="q-mr-auto"
+          v-if="currentFormData.id"
+          outlined
+          icon="mdi-play-box-outline"
+          color="207 96% 32%"
+          @click="viewDocument(currentFormData.id)"
+        >
+          {{ $t('general.view', { msg: $t('general.example') }) }}
+        </MainButton>
+
         <SaveButton
           :disabled="
             !fullTaskOrder.taskList.every(
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 5eeb7ffa..49827b2b 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -139,8 +139,13 @@ const routes: RouteRecordRaw[] = [
     component: () => import('pages/09_task-order/PageView.vue'),
   },
   {
-    path: '/task-order/:id/doc',
-    name: 'TaskOrderAdd',
+    path: '/task-order/:id/doc-prouct-receive',
+    name: 'docReceive',
+    component: () => import('pages/09_task-order/document_view/MainPage.vue'),
+  },
+  {
+    path: '/task-order/:id/doc-prouct-order',
+    name: 'docOrder',
     component: () => import('pages/09_task-order/document_view/MainPage.vue'),
   },