some ui fix

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

@@ -6,24 +6,24 @@
   [showCloseIcon]="true"
   header="فیلتر فاکتورها"
   styleClass="w-full md:w-[28rem]"
-  (visibleChange)="visibleChange.emit($event)"
->
-  <form class="flex flex-col gap-4 h-full overflow-y-auto" [formGroup]="form" (ngSubmit)="submit()">
-    <app-input label="کد فاکتور" [control]="form.controls.code" name="code" />
+  (visibleChange)="visibleChange.emit($event)">
+  <div class="flex h-full flex-col overflow-y-auto">
+    <hr />
+    <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" />
+      <app-enum-select type="fiscalResponseStatus" [control]="form.controls.status" />
 
-    <app-input label="نام مشتری" [control]="form.controls.customer_name" name="customer_name" />
-    <app-input label="موبایل مشتری" [control]="form.controls.customer_mobile" name="customer_mobile" type="mobile" />
-    <app-input
-      label="کد ملی"
-      [control]="form.controls.customer_national_id"
-      name="customer_national_id"
-      type="nationalId"
-    />
-    <app-input label="شناسه اقتصادی" [control]="form.controls.customer_economic_code" name="customer_economic_code" />
+      <app-input label="نام مشتری" [control]="form.controls.customer_name" name="customer_name" />
+      <app-input label="موبایل مشتری" [control]="form.controls.customer_mobile" name="customer_mobile" type="mobile" />
+      <app-input
+        label="کد ملی"
+        [control]="form.controls.customer_national_id"
+        name="customer_national_id"
+        type="nationalId" />
+      <app-input label="شناسه اقتصادی" [control]="form.controls.customer_economic_code" name="customer_economic_code" />
 
-    <!-- <div class="grid grid-cols-2 gap-2">
+      <!-- <div class="grid grid-cols-2 gap-2">
       <uikit-datepicker label="از تاریخ فاکتور" [control]="form.controls.invoice_date_from" name="invoice_date_from" />
       <uikit-datepicker label="تا تاریخ فاکتور" [control]="form.controls.invoice_date_to" name="invoice_date_to" />
     </div>
@@ -33,14 +33,17 @@
       <uikit-datepicker label="تا تاریخ صدور" [control]="form.controls.created_at_to" name="created_at_to" />
     </div> -->
 
-    <div class="grid grid-cols-2 gap-2">
-      <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 class="grid grid-cols-2 gap-2">
+        <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>
+    </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 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>
 </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()"
-        ></p-button>
+          (click)="toggleFilterVisible()"></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) {
-        <p-chip
-          removable
-          [label]="filter.label + ': ' + filter.value"
-          class="border border-surface-border"
-          (onRemove)="removeFilter(filter.key)"
-        />
+        @if (filter.key !== 'page') {
+          <p-chip
+            removable
+            [label]="filter.label + ': ' + filter.value"
+            class="border-surface-border border"
+            (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 =
-            value === 'NOT_SEND'
-              ? 'ارسال نشده'
-              : value === 'SUCCESS'
-                ? 'موفق'
-                : value === 'FAILURE'
-                  ? 'ناموفق'
-                  : value === 'QUEUED'
-                    ? 'در انتظار ارسال'
-                    : String(value);
+          formattedValue = taxProviderStatusTranslatorUtil(value as TspProviderResponseStatus);
         } 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();
       });
   }