امکان لغو تمام صورت‌حساب‌های درحال پرداخت در هر دوره آموزشی/رویداد/حلقه مباحثاتی توسط مدیر باشد.

src/components/Widgets/Invoice/AdminInvoiceShow/AdminInvoiceShow.vue

@@ -18,9 +18,17 @@
             class="q-mt-lg">
       <q-linear-progress v-if="invoice.loading"
                          indeterminate />
-      <q-card-section>
-        صورتحساب شناسه
-        {{ invoice.id }}
+      <q-card-section class="invoiceActionRow">
+        <div class="heading">
+          صورتحساب شناسه
+          {{ invoice.id }}
+        </div>
+        <q-btn v-if="invoice.status==='PAYING'"
+               outline
+               color="primary"
+               @click="onCancel()">
+          لغو صورتحساب
+        </q-btn>
       </q-card-section>
       <q-separator />
       <q-card-section>
@@ -459,5 +467,14 @@ export default {
       top: 0;
     }
   }
+  .invoiceActionRow {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+    .heading {
+      font-size: 18px;
+    }
+  }
 }
 </style>