some ui fix

src/app/shared/components/invoices/sale-invoice-single-view.component.ts

@@ -24,13 +24,18 @@ import {
   inject,
   Input,
   Output,
+  signal,
+  SimpleChanges,
   TemplateRef,
   ViewChild,
 } from '@angular/core';
 import { UrlTree } from '@angular/router';
-import { ButtonDirective } from 'primeng/button';
+import { MenuItem } from 'primeng/api';
+import { Button } from 'primeng/button';
 import { Divider } from 'primeng/divider';
+import { Menu } from 'primeng/menu';
 import { TableModule } from 'primeng/table';
+import { AppConfirmationService } from '../confirmationDialog/confirmation-dialog.service';
 
 export type TSaleInvoiceSingleViewVariant = 'full' | 'customer' | 'pos';
 
@@ -41,7 +46,6 @@ export type TSaleInvoiceSingleViewVariant = 'full' | 'customer' | 'pos';
     AppCardComponent,
     KeyValueComponent,
     Divider,
-    ButtonDirective,
     PageDataListComponent,
     TableModule,
     PageLoadingComponent,
@@ -49,6 +53,8 @@ export type TSaleInvoiceSingleViewVariant = 'full' | 'customer' | 'pos';
     PriceMaskDirective,
     CatalogTaxProviderStatusTagComponent,
     CatalogInvoiceTypeTagComponent,
+    Menu,
+    Button,
   ],
 })
 export class SharedSaleInvoiceSingleViewComponent {
@@ -57,6 +63,7 @@ export class SharedSaleInvoiceSingleViewComponent {
   private readonly toastService = inject(ToastService);
   //TODO: below service Must be transform from pos to shared.
   private readonly service = inject(PosConfigPrintService);
+  private readonly confirmationService = inject(AppConfirmationService);
 
   @Input({ required: true }) loading!: boolean;
   @Input() invoice!: Maybe<ISaleInvoiceFullResponse>;
@@ -67,6 +74,88 @@ export class SharedSaleInvoiceSingleViewComponent {
 
   @ViewChild('totalAmount', { static: false }) totalAmount!: TemplateRef<any>;
 
+  moreActionMenuItems = signal<MenuItem[]>([]);
+
+  constructor() {
+    this.showErrors = this.showErrors.bind(this);
+    this.showRevokeConfirmation = this.showRevokeConfirmation.bind(this);
+    this.showCorrection = this.showCorrection.bind(this);
+    this.showBackFromSale = this.showBackFromSale.bind(this);
+    this.printInvoice = this.printInvoice.bind(this);
+  }
+
+  showErrors() {}
+  showRevokeConfirmation() {
+    console.log('this.confirmationService', this.confirmationService);
+
+    this.confirmationService.ask({
+      header: `ابطال فاکتور شماره ${this.invoice!.invoice_number}`,
+      message: `در صورت تایید ابطال فاکتور شماره ${this.invoice!.invoice_number} بر روی دکمه‌ی ابطال کلیک کنید.`,
+      acceptLabel: 'ابطال',
+      acceptButtonProps: {
+        severity: 'dangerdock',
+      },
+
+      accept: () => {
+        console.log('here');
+        // this.deferredInstallPrompt.prompt();
+        // this.deferredInstallPrompt.userChoice.finally(() => {
+        //   this.deferredInstallPrompt = null;
+        //   this.canInstall.set(false);
+        //   window.location.reload();
+        // });
+        // },
+      },
+    });
+  }
+  showCorrection() {}
+  showBackFromSale() {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['invoice'] && this.invoice) {
+      const invoiceStatus = this.invoice.status.value;
+      const actions: MenuItem[] = [
+        {
+          label: 'دلایل خطا',
+          icon: 'pi pi-question',
+          neededStatus: 'FAILURE',
+          command: this.showErrors,
+        },
+        {
+          label: 'ابطال',
+          icon: 'pi pi-eraser',
+          neededStatus: 'SUCCESS',
+          command: this.showRevokeConfirmation,
+        },
+        {
+          label: 'اصلاح',
+          icon: 'pi pi-file-edit',
+          neededStatus: 'SUCCESS',
+          command: this.showCorrection,
+        },
+        {
+          label: 'برگشت از فروش',
+          icon: 'pi pi-cart-minus',
+          neededStatus: 'SUCCESS',
+          command: this.showBackFromSale,
+        },
+        {
+          label: 'چاپ',
+          icon: 'pi pi-print',
+          neededStatus: '',
+          command: this.printInvoice,
+        },
+      ];
+
+      this.moreActionMenuItems.set(
+        actions.filter(
+          // @ts-ignore
+          (action) => !action.neededStatus || action.neededStatus === invoiceStatus
+        )
+      );
+    }
+  }
+
   readonly posName = computed(() => {
     if (this.posInfoStore.entity()) {
       const { name, businessActivity, complex } = this.posInfoStore.entity()!;
@@ -280,7 +369,7 @@ export class SharedSaleInvoiceSingleViewComponent {
       nestedOption: {
         path: 'payload.commission',
         type: 'price',
-      }
+      },
     },
     {
       field: 'wages',
@@ -289,7 +378,7 @@ export class SharedSaleInvoiceSingleViewComponent {
       nestedOption: {
         path: 'payload.wages',
         type: 'price',
-      }
+      },
     },
     {
       field: 'profit',
@@ -298,7 +387,7 @@ export class SharedSaleInvoiceSingleViewComponent {
       nestedOption: {
         path: 'payload.profit',
         type: 'price',
-      }
+      },
     },
     {
       field: 'discount_amount',
@@ -315,7 +404,6 @@ export class SharedSaleInvoiceSingleViewComponent {
       header: 'مبلغ قابل پرداخت',
       type: 'price',
     },
-
   ];
 
   refresh() {