feat: receive => add task order status display with gradient styling

src/pages/09_task-order/order_view/MainPage.vue

@@ -736,6 +736,41 @@ watch([currentFormData.value.taskStatus], () => {
             />
           </nav>
 
+          <article
+            v-if="view === TaskOrderStatus.Complete"
+            class="row items-center surface-1 q-py-md rounded gradient-stat"
+          >
+            <span
+              class="row col rounded q-px-sm q-py-md q-mx-md positive"
+              style="border: 1px solid hsl(var(--positive-bg))"
+            >
+              {{ $t('taskOrder.status.Complete') }}
+              <span class="q-ml-auto">
+                {{
+                  fullTaskOrder?.taskList.filter(
+                    (t) => t.taskStatus === TaskStatus.Complete,
+                  ).length
+                }}
+              </span>
+            </span>
+            <span
+              class="row col rounded q-px-sm q-mr-md q-py-md negative"
+              style="border: 1px solid hsl(var(--negative-bg))"
+            >
+              {{ $t('taskOrder.status.Failed') }}
+              <span class="q-ml-auto">
+                {{
+                  fullTaskOrder?.taskList.filter(
+                    (t) =>
+                      t.taskStatus === TaskStatus.Redo ||
+                      t.taskStatus === TaskStatus.Failed ||
+                      t.taskStatus === TaskStatus.Canceled,
+                  ).length
+                }}
+              </span>
+            </span>
+          </article>
+
           <q-form
             ref="formDocument"
             @submit="
@@ -1147,4 +1182,22 @@ watch([currentFormData.value.taskStatus], () => {
     filter: invert(100%);
   }
 }
+
+.gradient-stat {
+  & .positive {
+    background-image: linear-gradient(
+      to right,
+      hsl(var(--positive-bg) / 0.15),
+      var(--surface-1)
+    );
+  }
+
+  & .negative {
+    background-image: linear-gradient(
+      to right,
+      hsl(var(--negative-bg) / 0.15),
+      var(--surface-1)
+    );
+  }
+}
 </style>