some ui fix

src/app.component.ts

@@ -1,17 +1,17 @@
 import { PwaInstallService } from '@/core/services/pwa-install.service';
+import { ConfirmationDialogComponent } from '@/shared/components/confirmationDialog/confirmation-dialog.component';
 import { Component, HostListener } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { ConfirmDialog } from 'primeng/confirmdialog';
 import { ToastModule } from 'primeng/toast';
 import { brandingConfig } from './app/branding/branding.config';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterModule, ToastModule, ConfirmDialog],
+  imports: [RouterModule, ToastModule, ConfirmationDialogComponent],
   template: `
     <p-toast [position]="toastPosition" [baseZIndex]="3000" />
-    <p-confirmDialog />
+    <app-shared-confirmation-dialog />
     <router-outlet />
   `,
 })

src/app/domains/consumer/modules/saleInvoices/components/list.component.html

@@ -6,9 +6,8 @@
   [loading]="loading()"
   [perPage]="responseMetaData()?.perPage"
   [currentPage]="responseMetaData()?.page"
-  [totalRecords]="responseMetaData()?.totalRecords || items().length"
+  [totalPages]="responseMetaData()?.totalPages || 1"
   [showDetails]="true"
   (onDetails)="toSinglePage($event)"
   (onRefresh)="refresh()"
-  (onChangePage)="changePage($event)"
+  (onChangePage)="changePage($event)" />
-/>

src/app/domains/partner/modules/licenses/components/list.component.html

@@ -3,13 +3,12 @@
   [columns]="columns"
   emptyPlaceholderTitle="تا به حال لایسنسی نفروخته‌اید."
   [currentPage]="responseMetaData()?.page"
-  [totalRecords]="responseMetaData()?.totalRecords || items().length"
+  [totalPages]="responseMetaData()?.totalPages"
   [perPage]="responseMetaData()?.perPage"
   [items]="items()"
   [loading]="loading()"
   (onRefresh)="refresh()"
-  (onChangePage)="changePage($event)"
+  (onChangePage)="changePage($event)">
->
   <ng-template #filter>
     <partner-licenses-filter (onSearch)="refresh()" />
   </ng-template>

src/app/domains/pos/modules/saleInvoices/components/filter-drawer.component.html

@@ -6,10 +6,11 @@
   [showCloseIcon]="true"
   header="فیلتر فاکتورها"
   styleClass="w-full md:w-[28rem]"
-  (visibleChange)="visibleChange.emit($event)"
+  (visibleChange)="visibleChange.emit($event)">
->
+  <div class="flex h-full flex-col overflow-y-auto">
-  <form class="flex flex-col gap-4 h-full overflow-y-auto" [formGroup]="form" (ngSubmit)="submit()">
+    <hr />
-    <app-input label="کد فاکتور" [control]="form.controls.code" name="code" />
+    <form class="grow py-4" [formGroup]="form" (ngSubmit)="submit()">
+      <app-input label="شماره صورت‌حساب" [control]="form.controls.invoice_number" name="invoice_number" />
 
       <app-enum-select type="fiscalResponseStatus" [control]="form.controls.status" />
 
@@ -19,8 +20,7 @@
         label="کد ملی"
         [control]="form.controls.customer_national_id"
         name="customer_national_id"
-      type="nationalId"
+        type="nationalId" />
-    />
       <app-input label="شناسه اقتصادی" [control]="form.controls.customer_economic_code" name="customer_economic_code" />
 
       <!-- <div class="grid grid-cols-2 gap-2">
@@ -37,10 +37,13 @@
         <app-input label="از مبلغ" [control]="form.controls.total_amount_from" name="total_amount_from" type="price" />
         <app-input label="تا مبلغ" [control]="form.controls.total_amount_to" name="total_amount_to" type="price" />
       </div>
-
-    <div class="mt-auto grid grid-cols-2 gap-2 pt-4">
-      <button pButton type="button" outlined label="حذف" (click)="clear()"></button>
-      <button pButton type="submit" label="اعمال"></button>
-    </div>
     </form>
+    <div class="bg-surface-card sticky bottom-0 mt-auto shrink-0">
+      <hr />
+      <div class="grid grid-cols-2 gap-2 pt-2">
+        <button pButton type="button" outlined label="حذف" (click)="clear()"></button>
+        <button pButton type="button" label="اعمال" (click)="submit()"></button>
+      </div>
+    </div>
+  </div>
 </p-drawer>

src/app/domains/pos/modules/saleInvoices/components/filter-drawer.component.ts

@@ -1,4 +1,6 @@
+import { Maybe } from '@/core';
 import { EnumSelectComponent } from '@/shared/apiEnum/select.component';
+import { TspProviderResponseStatus } from '@/shared/catalog';
 import { InputComponent } from '@/shared/components';
 import {
   Component,
@@ -45,12 +47,12 @@ export class PosSaleInvoicesFilterDrawerComponent implements OnChanges {
     invoice_date_to: this.fb.control<string>(''),
     created_at_from: this.fb.control<string>(''),
     created_at_to: this.fb.control<string>(''),
-    code: this.fb.control<string>(''),
+    invoice_number: this.fb.control<Maybe<number>>(null),
     customer_name: this.fb.control<string>(''),
     customer_mobile: this.fb.control<string>(''),
     customer_national_id: this.fb.control<string>(''),
     customer_economic_code: this.fb.control<string>(''),
-    status: this.fb.control<'NOT_SEND' | 'SUCCESS' | 'FAILURE' | 'QUEUED' | null>(null),
+    status: this.fb.control<TspProviderResponseStatus>('NOT_SEND'),
     total_amount_from: this.fb.control<number | null>(null),
     total_amount_to: this.fb.control<number | null>(null),
   });
@@ -65,7 +67,7 @@ export class PosSaleInvoicesFilterDrawerComponent implements OnChanges {
           invoice_date_to: this.value.invoice_date_to ?? '',
           created_at_from: this.value.created_at_from ?? '',
           created_at_to: this.value.created_at_to ?? '',
-          code: this.value.code ?? '',
+          invoice_number: this.value.invoice_number ?? null,
           customer_name: this.value.customer_name ?? '',
           customer_mobile: this.value.customer_mobile ?? '',
           customer_national_id: this.value.customer_national_id ?? '',
@@ -91,7 +93,7 @@ export class PosSaleInvoicesFilterDrawerComponent implements OnChanges {
       invoice_date_to: '',
       created_at_from: '',
       created_at_to: '',
-      code: '',
+      invoice_number: null,
       customer_name: '',
       customer_mobile: '',
       customer_national_id: '',
@@ -113,7 +115,7 @@ export class PosSaleInvoicesFilterDrawerComponent implements OnChanges {
       invoice_date_to: raw.invoice_date_to || undefined,
       created_at_from: raw.created_at_from || undefined,
       created_at_to: raw.created_at_to || undefined,
-      code: raw.code?.trim() || undefined,
+      invoice_number: raw.invoice_number,
       customer_name: raw.customer_name?.trim() || undefined,
       customer_mobile: raw.customer_mobile?.trim() || undefined,
       customer_national_id: raw.customer_national_id?.trim() || undefined,

src/app/domains/pos/modules/saleInvoices/components/list.component.html

@@ -7,21 +7,21 @@
           type="button"
           size="small"
           [outlined]="!activeFilters().length"
-          (click)="toggleFilterVisible()"
+          (click)="toggleFilterVisible()"></p-button>
-        ></p-button>
         <button pButton icon="pi pi-refresh" type="button" size="small" outlined (click)="refresh()"></button>
       </div>
     </ng-template>
   </app-inner-pages-header>
   @if (activeFilters().length) {
-    <div class="px-4 pb-2 flex flex-wrap gap-2">
+    <div class="flex flex-wrap gap-2 px-4 pb-2">
       @for (filter of activeFilters(); track filter.key) {
+        @if (filter.key !== 'page') {
           <p-chip
             removable
             [label]="filter.label + ': ' + filter.value"
-          class="border border-surface-border"
+            class="border-surface-border border"
-          (onRemove)="removeFilter(filter.key)"
+            (onRemove)="removeFilter(filter.key)" />
-        />
+        }
       }
     </div>
   }
@@ -34,7 +34,7 @@
     }
   } @else if (!items() || items().length === 0) {
     <div class="col-span-1">
-      <p class="text-center text-muted-color">فاکتوری یافت نشد.</p>
+      <p class="text-muted-color text-center">فاکتوری یافت نشد.</p>
     </div>
   } @else {
     @for (item of items(); track item.id) {
@@ -42,10 +42,16 @@
     }
   }
 </div>
+<div class="">
+  <app-paginator
+    [perPage]="10"
+    [currentPage]="paginationMeta()?.page || 1"
+    [totalPages]="paginationMeta()?.totalPages || 1"
+    (onChange)="onChangePage($event)" />
+</div>
 
 <pos-sale-invoices-filter-drawer
   [visible]="filterVisible()"
   [value]="filters()"
   (visibleChange)="filterVisible.set($event)"
-  (apply)="onFilterApply($event)"
+  (apply)="onFilterApply($event)" />
-/>

src/app/domains/pos/modules/saleInvoices/components/list.component.ts

@@ -1,5 +1,10 @@
+import { Maybe } from '@/core';
+import { IResponseMetadata } from '@/core/models/service.model';
 import { POS_ROUTES } from '@/domains/pos/routes';
+import { TspProviderResponseStatus } from '@/shared/catalog';
+import taxProviderStatusTranslatorUtil from '@/shared/catalog/taxProviderStatus/tax-provider-status-translator.util';
 import { InnerPagesHeaderComponent } from '@/shared/components/innerPagesHeader/inner-pages-header.component';
+import { PaginatorComponent } from '@/uikit';
 import { gregorianToJalali } from '@/utils';
 import { Component, computed, inject, signal } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -28,6 +33,7 @@ import { SaleInvoiceCardComponent } from './sale-invoice-card.component';
     Button,
     Chip,
     SaleInvoiceCardComponent,
+    PaginatorComponent,
   ],
 })
 export class PosSaleInvoiceListComponent {
@@ -37,6 +43,7 @@ export class PosSaleInvoiceListComponent {
 
   loading = signal(true);
   items = signal<IPosSaleInvoicesSummaryResponse[]>([]);
+  paginationMeta = signal<Maybe<IResponseMetadata>>(null);
   filterVisible = signal(false);
   filters = signal<IPosSaleInvoicesFilterDto>({});
   activeFilters = computed(() => {
@@ -45,7 +52,7 @@ export class PosSaleInvoiceListComponent {
       invoice_date_to: 'تا تاریخ فاکتور',
       created_at_from: 'از تاریخ ایجاد',
       created_at_to: 'تا تاریخ ایجاد',
-      code: 'کد',
+      invoice_number: 'شماره صورت‌حساب',
       customer_name: 'نام مشتری',
       customer_mobile: 'موبایل',
       customer_national_id: 'کد ملی',
@@ -61,16 +68,7 @@ export class PosSaleInvoiceListComponent {
         const typedKey = key as keyof IPosSaleInvoicesFilterDto;
         let formattedValue = '';
         if (typedKey === 'status') {
-          formattedValue =
+          formattedValue = taxProviderStatusTranslatorUtil(value as TspProviderResponseStatus);
-            value === 'NOT_SEND'
-              ? 'ارسال نشده'
-              : value === 'SUCCESS'
-                ? 'موفق'
-                : value === 'FAILURE'
-                  ? 'ناموفق'
-                  : value === 'QUEUED'
-                    ? 'در انتظار ارسال'
-                    : String(value);
         } else if (
           key === 'invoice_date_from' ||
           key === 'invoice_date_to' ||
@@ -92,12 +90,17 @@ export class PosSaleInvoiceListComponent {
     this.getData();
   }
 
+  onChangePage(page: number) {
+    this.onFilterApply({ ...this.filters(), page });
+  }
+
   getData() {
     this.loading.set(true);
     this.service
       .getAll(this.filters())
       .pipe(finalize(() => this.loading.set(false)))
       .subscribe((res) => {
+        this.paginationMeta.set(res.meta);
         this.items.set(res.data ?? []);
       });
   }
@@ -134,7 +137,7 @@ export class PosSaleInvoiceListComponent {
       'invoice_date_to',
       'created_at_from',
       'created_at_to',
-      'code',
+      'invoice_number',
       'customer_name',
       'customer_mobile',
       'customer_national_id',
@@ -142,6 +145,7 @@ export class PosSaleInvoiceListComponent {
       'status',
       'total_amount_from',
       'total_amount_to',
+      'page',
     ];
 
     const parsed = keys.reduce<IPosSaleInvoicesFilterDto>((acc, key) => {

src/app/domains/pos/modules/saleInvoices/components/sale-invoice-card.component.html

@@ -35,7 +35,7 @@
     }
     @if (['queued', 'fiscal_queued'].includes(saleInvoice.status.value.toLowerCase())) {
       <p-button
-        label="استعلام وضعیت ارسال"
+        label="استعلام وضعیت"
         type="button"
         severity="info"
         (click)="getStatus()"

src/app/domains/pos/modules/saleInvoices/components/sale-invoice-card.component.ts

@@ -1,6 +1,7 @@
 import { ToastService } from '@/core/services/toast.service';
 import { CatalogInvoiceTypeTagComponent } from '@/shared/catalog';
 import { CatalogTaxProviderStatusTagComponent } from '@/shared/catalog/taxProviderStatus';
+import taxProviderStatusTranslatorUtil from '@/shared/catalog/taxProviderStatus/tax-provider-status-translator.util';
 import { KeyValueComponent } from '@/shared/components';
 import { Component, computed, EventEmitter, inject, Input, Output, signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
@@ -71,7 +72,7 @@ export class SaleInvoiceCardComponent {
       .sendToTsp(this.saleInvoice.id)
       .pipe(finalize(() => this.sendingLoading.set(false)))
       .subscribe((res) => {
-        if (res.status === 'FAILURE') {
+        if (res.status === 'SEND_FAILURE') {
           this.toastService.error({
             text: res.message || 'خطا در ارسال فاکتور رخ داده است.',
           });
@@ -89,6 +90,9 @@ export class SaleInvoiceCardComponent {
       .getInquiry(this.saleInvoice.id)
       .pipe(finalize(() => this.gettingStatusLoading.set(false)))
       .subscribe((res) => {
+        this.toastService.info({
+          text: `وضعیت فعلی فاکتور شماره‌ی ${this.saleInvoice.invoice_number}، ${taxProviderStatusTranslatorUtil(res.status)} می‌باشد.`,
+        });
         this.refreshRequested.emit();
       });
   }

src/app/domains/pos/modules/saleInvoices/models/filter.dto.ts

@@ -1,3 +1,6 @@
+import { Maybe } from '@/core';
+import { TspProviderResponseStatus } from '@/shared/catalog';
+
 export interface IPosSaleInvoicesFilterDto {
   page?: number | null;
   perPage?: number | null;
@@ -5,12 +8,12 @@ export interface IPosSaleInvoicesFilterDto {
   invoice_date_to?: string;
   created_at_from?: string;
   created_at_to?: string;
-  code?: string;
+  invoice_number?: Maybe<number>;
   customer_name?: string;
   customer_mobile?: string;
   customer_national_id?: string;
   customer_economic_code?: string;
-  status?: 'NOT_SEND' | 'SUCCESS' | 'FAILURE' | 'QUEUED';
+  status?: TspProviderResponseStatus;
   total_amount?: number | null;
   total_amount_from?: number | null;
   total_amount_to?: number | null;

src/app/domains/pos/modules/saleInvoices/models/fiscal.io.ts

@@ -1,10 +1,12 @@
+import { TspProviderResponseStatus } from '@/shared/catalog';
+
 export interface IPosSaleInvoiceFiscalActionResponse {
   message?: string;
-  status?: string;
+  status: TspProviderResponseStatus;
 }
 
 export interface IPosSaleInvoiceFiscalStatusResponse {
-  status?: string;
+  status: TspProviderResponseStatus;
   tracking_id?: string;
   message?: string;
   [key: string]: unknown;

src/app/domains/pos/modules/statistics/components/invoice-type-card.component.ts

@@ -1,3 +1,4 @@
+import taxProviderStatusTranslatorUtil from '@/shared/catalog/taxProviderStatus/tax-provider-status-translator.util';
 import { formatWithCurrency } from '@/utils';
 import { CommonModule } from '@angular/common';
 import { Component, computed, EventEmitter, Input, Output } from '@angular/core';
@@ -35,21 +36,21 @@ export class PosStatisticsInvoiceTypeCardComponent {
         };
       case 'success':
         return {
-          title: 'تایید شده',
+          title: taxProviderStatusTranslatorUtil('SUCCESS'),
           icon: 'check-circle',
           bgColor: '#22C55E1A',
           borderColor: '#22C55E',
         };
       case 'failure':
         return {
-          title: 'خطادار',
+          title: taxProviderStatusTranslatorUtil('FAILURE'),
           icon: 'ban',
           bgColor: '#EF44441A',
           borderColor: '#EF4444',
         };
       case 'not_sended':
         return {
-          title: 'ارسال نشده',
+          title: taxProviderStatusTranslatorUtil('NOT_SEND'),
           icon: 'clock',
           bgColor: '#F59E0B1A',
           borderColor: '#F59E0B',

src/app/shared/catalog/taxProviderStatus/index.ts

@@ -1,2 +1,3 @@
 export * from './tax-provider-status-tag.component';
+export * from './tax-provider-status-translator.util';
 export * from './type';

src/app/shared/catalog/taxProviderStatus/tax-provider-status-tag.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Tag } from 'primeng/tag';
+import taxProviderStatusTranslatorUtil from './tax-provider-status-translator.util';
 import { TspProviderResponseStatus } from './type';
 
 @Component({
@@ -29,21 +30,6 @@ export class CatalogTaxProviderStatusTagComponent {
   }
 
   get label() {
-    switch (this.status) {
+    return taxProviderStatusTranslatorUtil(this.status);
-      case 'SUCCESS':
-        return 'موفق';
-      case 'FAILURE':
-        return 'ناموفق';
-      case 'NOT_SEND':
-        return 'ارسال نشده';
-      case 'QUEUED':
-        return 'در صف ارسال';
-      case 'FISCAL_QUEUED':
-        return 'در انتظار تایید سازمان';
-      case 'SEND_FAILURE':
-        return 'خطا در ارسال';
-      default:
-        return 'نامشخص';
-    }
   }
 }

src/app/shared/catalog/taxProviderStatus/tax-provider-status-translator.util.ts

@@ -0,0 +1,20 @@
+import { TspProviderResponseStatus } from './type';
+
+export default (status: TspProviderResponseStatus) => {
+  switch (status) {
+    case 'SUCCESS':
+      return 'موفق';
+    case 'FAILURE':
+      return 'ناموفق';
+    case 'NOT_SEND':
+      return 'ارسال نشده';
+    case 'QUEUED':
+      return 'در صف ارسال';
+    case 'FISCAL_QUEUED':
+      return 'در انتظار تایید سازمان';
+    case 'SEND_FAILURE':
+      return 'خطا در ارسال';
+    default:
+      return 'نامشخص';
+  }
+};

src/app/shared/components/confirmationDialog/confirmation-dialog.component.html

@@ -1,17 +1,21 @@
 <p-confirmdialog #cd>
   <ng-template #headless let-message let-onAccept="onAccept" let-onReject="onReject">
     @if (message) {
-      <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+      <div class="bg-surface-0 dark:bg-surface-900 flex flex-col items-center rounded p-8">
         <div
-          class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20"
+          class="bg-primary text-primary-contrast -mt-20 inline-flex h-24 w-24 items-center justify-center rounded-full">
-        >
           <i class="pi pi-question text-5xl!"></i>
         </div>
-        <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
+        <span class="mt-6 mb-2 block text-2xl font-bold">{{ message.header }}</span>
         <p class="mb-0">{{ message.message }}</p>
-        <div class="flex items-center gap-2 mt-6">
+        <div class="mt-6 flex items-center gap-2">
-          <p-button label="{{ acceptLabel }}" (onClick)="onAccept()" styleClass="w-32"></p-button>
+          <p-button [label]="message.acceptLabel" type="button" (onClick)="onAccept()" styleClass="w-32"></p-button>
-          <p-button label="{{ rejectLabel }}" [outlined]="true" (onClick)="onReject()" styleClass="w-32"></p-button>
+          <p-button
+            [label]="message.rejectLabel"
+            type="button"
+            [outlined]="true"
+            (onClick)="onReject()"
+            styleClass="w-32"></p-button>
         </div>
       </div>
     }

src/app/shared/components/confirmationDialog/confirmation-dialog.component.ts

@@ -1,48 +1,11 @@
-import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { Component } from '@angular/core';
-import { ConfirmationService } from 'primeng/api';
 import { Button } from 'primeng/button';
 import { ConfirmDialog } from 'primeng/confirmdialog';
 
 @Component({
   selector: 'app-shared-confirmation-dialog',
   templateUrl: './confirmation-dialog.component.html',
-  providers: [ConfirmationService],
+  standalone: true,
   imports: [ConfirmDialog, Button],
 })
-export class ConfirmationDialogComponent implements OnDestroy {
+export class ConfirmationDialogComponent {}
-  @Input() message!: string;
-  @Input() header: string = 'تأیید عملیات';
-  @Input() acceptLabel: string = 'بله';
-  @Input() rejectLabel: string = 'خیر';
-  @Output() onAccept = new EventEmitter<void>();
-  @Output() onReject = new EventEmitter<void>();
-
-  constructor(private confirmationService: ConfirmationService) {}
-
-  show() {
-    this.confirmationService.confirm({
-      header: this.header,
-      message: this.message,
-      acceptLabel: this.acceptLabel,
-      rejectLabel: this.rejectLabel,
-      accept: () => {
-        this.accept();
-      },
-      reject: () => {
-        this.reject();
-      },
-    });
-  }
-
-  accept() {
-    this.onAccept.emit();
-  }
-
-  reject() {
-    this.onReject.emit();
-  }
-
-  ngOnDestroy() {
-    // Cleanup if needed
-  }
-}

src/app/shared/components/confirmationDialog/confirmation-dialog.service.ts

@@ -1,78 +1,32 @@
-import {
+import { Injectable, inject } from '@angular/core';
-  ApplicationRef,
+import { Confirmation, ConfirmationService } from 'primeng/api';
-  ComponentFactoryResolver,
-  ComponentRef,
-  Injectable,
-  Injector,
-} from '@angular/core';
-import { ConfirmationDialogComponent } from './confirmation-dialog.component';
 
-@Injectable({
+export interface AppConfirmOptions {
-  providedIn: 'root',
+  header: string;
-})
-export class ConfirmationDialogService {
-  private componentRef: ComponentRef<ConfirmationDialogComponent> | null = null;
-
-  constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
-    private appRef: ApplicationRef,
-    private injector: Injector,
-  ) {}
-
-  confirm(options: {
   message: string;
-    header?: string;
   acceptLabel?: string;
   rejectLabel?: string;
   accept?: () => void;
   reject?: () => void;
-  }) {
+}
-    // Create the component dynamically
-    const factory = this.componentFactoryResolver.resolveComponentFactory(
-      ConfirmationDialogComponent,
-    );
-    this.componentRef = factory.create(this.injector);
 
-    // Set inputs
+@Injectable({
-    this.componentRef.instance.message = options.message;
+  providedIn: 'root',
-    if (options.header) this.componentRef.instance.header = options.header;
+})
-    if (options.acceptLabel) this.componentRef.instance.acceptLabel = options.acceptLabel;
+export class AppConfirmationService {
-    if (options.rejectLabel) this.componentRef.instance.rejectLabel = options.rejectLabel;
+  private confirmationService = inject(ConfirmationService);
 
-    // Subscribe to outputs and close after
+  ask(options: Confirmation): Promise<boolean> {
-    if (options.accept) {
+    return new Promise((resolve) => {
-      this.componentRef.instance.onAccept.subscribe(() => {
+      this.confirmationService.confirm({
-        options.accept!();
+        position: 'bottom',
-        this.close();
+        acceptLabel: 'تایید',
+        rejectLabel: 'لغو',
+        ...options,
+        closeOnEscape: true,
+        accept: () => options.accept?.() || resolve(true),
+        reject: () => resolve(false),
       });
-    } else {
-      this.componentRef.instance.onAccept.subscribe(() => this.close());
-    }
-    if (options.reject) {
-      this.componentRef.instance.onReject.subscribe(() => {
-        options.reject!();
-        this.close();
     });
-    } else {
-      this.componentRef.instance.onReject.subscribe(() => this.close());
-    }
-
-    // Attach to the app
-    this.appRef.attachView(this.componentRef.hostView);
-
-    // Append to body
-    document.body.appendChild(this.componentRef.location.nativeElement);
-
-    // Trigger change detection and show
-    this.componentRef.changeDetectorRef.detectChanges();
-    this.componentRef.instance.show();
-  }
-
-  close() {
-    if (this.componentRef) {
-      this.appRef.detachView(this.componentRef.hostView);
-      this.componentRef.destroy();
-      this.componentRef = null;
-    }
   }
 }

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
+        <div class="">
-          pButton
+          <p-menu #menu [model]="moreActionMenuItems()" [popup]="true" appendTo="body" />
-          type="button"
+          <p-button (click)="menu.toggle($event)" icon="pi pi-ellipsis-v" outlined size="small" />
-          label="چاپ"
+        </div>
-          icon="pi pi-print"
-          outlined
-          size="small"
-          (click)="printInvoice()"></button>
       </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() {

src/app/shared/components/pageDataList/page-data-list.component.html

@@ -59,7 +59,7 @@
   <ng-template #paginatorTemplate>
     <app-paginator
       [currentPage]="currentPage || 1"
-      [totalRecords]="totalRecords"
+      [totalPages]="totalPages || 1"
       [perPage]="perPage || 10"
       [loading]="loading"
       (onChange)="onPage($event)" />

src/app/shared/components/pageDataList/page-data-list.component.ts

@@ -104,7 +104,7 @@ export class PageDataListComponent<I = any> {
   @Input() emptyPlaceholderTitle: string = 'موردی برای نمایش وجود ندارد';
   @Input() emptyPlaceholderDescription?: string = '';
   @Input() emptyPlaceholderCtaLabel?: string;
-  @Input() totalRecords!: number;
+  @Input() totalPages?: number = 1;
   @Input() perPage?: number = 10;
   @Input() currentPage?: number = 1;
   @Input() showEdit: boolean = false;
@@ -191,7 +191,7 @@ export class PageDataListComponent<I = any> {
   };
 
   get showPaginator() {
-    return !!(this.totalRecords && this.perPage && this.totalRecords > this.perPage);
+    return !!(this.totalPages && this.perPage && this.totalPages > this.perPage);
   }
 
   getPreviewClasses(item: Record<string, any>, column: IColumn): any {

src/app/uikit/paginator.component.html

@@ -1,19 +1,29 @@
+@if (totalPages > 1) {
   <div class="flex items-center justify-center gap-3 p-4">
     <button
       pButton
       icon="pi pi-angle-right"
       size="small"
       severity="secondary"
+      outlined
       [disabled]="loading || currentPage === 1"
-    (click)="prevPage()"
+      (click)="prevPage()"></button>
-  ></button>
+    @for (page of pagesToShow(); track page) {
-  <span class="text-pretty text-sm text-muted-color">صفحه {{ currentPage }} از {{ totalPages() }}</span>
+      <p-button
+        [label]="page.toString()"
+        size="small"
+        [severity]="page === currentPage ? 'primary' : 'secondary'"
+        [outlined]="page !== currentPage"
+        [disabled]="loading || page === currentPage"
+        (click)="onPageChange(page)"></p-button>
+    }
     <button
       pButton
       icon="pi pi-angle-left"
       size="small"
       severity="secondary"
-    [disabled]="loading || currentPage >= totalPages()"
+      outlined
-    (click)="nextPage()"
+      [disabled]="loading || currentPage >= totalPages"
-  ></button>
+      (click)="nextPage()"></button>
   </div>
+}

src/app/uikit/paginator.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, signal } from '@angular/core';
+import { Component, computed, EventEmitter, Input, Output } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 
 @Component({
@@ -7,18 +7,31 @@ import { ButtonModule } from 'primeng/button';
   imports: [ButtonModule],
 })
 export class PaginatorComponent {
-  @Input() totalRecords!: number;
+  @Input() totalPages: number = 1;
   @Input() currentPage: number = 1;
   @Input() perPage: number = 10;
   @Input() loading: boolean = false;
   @Output() onChange = new EventEmitter<number>();
 
-  totalPages = signal<number>(0);
+  pagesToShow = computed(() => {
+    const maxVisible = 5;
 
-  ngOnChanges() {
+    if (this.totalPages <= maxVisible) {
-    this.totalPages.set(Math.ceil(this.totalRecords / this.perPage));
+      return Array.from({ length: this.totalPages }, (_, i) => i + 1);
     }
 
+    let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
+
+    let end = start + maxVisible - 1;
+
+    if (end > this.totalPages) {
+      end = this.totalPages;
+      start = end - maxVisible + 1;
+    }
+
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  });
+
   onPageChange(newPage: number) {
     this.onChange.emit(newPage);
   }
@@ -29,7 +42,7 @@ export class PaginatorComponent {
     }
   }
   nextPage() {
-    if (this.currentPage < this.totalPages()) {
+    if (this.currentPage < this.totalPages) {
       this.onPageChange(this.currentPage + 1);
     }
   }

src/app/utils/price-mask.utils.ts

@@ -41,7 +41,7 @@ export function normalizeToNumber(raw: number | string | null | undefined): numb
 
 export function formatNumber(
   value: number,
-  opts?: { locale?: string; useComma?: boolean; fraction?: number },
+  opts?: { locale?: string; useComma?: boolean; fraction?: number }
 ): string {
   try {
     const fmtLocale = opts?.useComma ? 'en-US' : (opts?.locale ?? 'fa-IR');
@@ -59,9 +59,9 @@ export function formatWithCurrency(
   num: number | string | null,
   isInputHost: boolean = false,
   currency: string | null | undefined = 'ریال',
-  opts?: { locale?: string; useComma?: boolean; fraction?: number },
+  opts?: { locale?: string; useComma?: boolean; fraction?: number }
 ): string {
-  if (num === null) return '';
+  if (num === null) return '0 ریال';
   const formatted = formatNumber(parseFloat(num + ''), opts);
   if (isInputHost) return formatted;
   if (currency && currency.trim()) return `${formatted} ${currency.trim()}`;