some ui fix

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

@@ -6,14 +6,10 @@
   <div class="flex flex-col gap-6">
     <app-card-data cardTitle="اطلاعات فاکتور" [editable]="false" [backRoute]="backRoute">
       <ng-template #moreActions>
-        <button
-          pButton
-          type="button"
-          label="چاپ"
-          icon="pi pi-print"
-          outlined
-          size="small"
-          (click)="printInvoice()"></button>
+        <div class="">
+          <p-menu #menu [model]="moreActionMenuItems()" [popup]="true" appendTo="body" />
+          <p-button (click)="menu.toggle($event)" icon="pi pi-ellipsis-v" outlined size="small" />
+        </div>
       </ng-template>
       <div class="flex flex-col gap-4">
         <div class="listKeyValue">
@@ -35,6 +31,7 @@
           <app-key-value label="مجموع قابل پرداخت" [value]="invoice.total_amount" type="price" />
           <app-key-value label="مبلغ تخفیف" [value]="invoice.discount_amount" type="price" />
           <app-key-value label="مبلغ مالیات" [value]="invoice.tax_amount" type="price" />
+
           @for (payment of invoice.payments; track $index) {
             <app-key-value
               [label]="`${payment.payment_method === 'SET_OFF' ? 'تهاتر' : payment.payment_method === 'TERMINAL' ? 'پوز' : 'نقدی/ کارت‌خوان دیگر/ کارت به کارت'}`"

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() {