create amountPercentage field component

src/app/domains/consumer/modules/customers/components/list.component.ts

@@ -67,10 +67,6 @@ export class ConsumerCustomerListComponent extends AbstractList<ICustomerRespons
   }
 
   toSinglePage(item: ICustomerResponse) {
-    console.log(item);
-
-    console.log(consumerCustomersNamedRoutes.customer.meta);
-
     this.router.navigateByUrl(consumerCustomersNamedRoutes.customer.meta.pagePath!(item.id));
   }
 }

src/app/domains/consumer/modules/customers/models/saleInvoices.io.d.ts

@@ -10,6 +10,7 @@ export interface ICustomerSaleInvoicesRawResponse {
   account: ConsumerAccount;
   created_at: string;
   items_count: number;
+  payments: Payments[];
 }
 export interface ICustomerSaleInvoicesResponse extends ICustomerSaleInvoicesRawResponse {}
 
@@ -35,3 +36,9 @@ interface Pos extends ISummary {
 interface Complex extends ISummary {
   business_activity: ISummary;
 }
+
+interface Payments {
+  amount: string;
+  paid_at: string;
+  payment_method: string;
+}

src/app/domains/consumer/modules/customers/store/saleInvoice.store.ts

@@ -32,8 +32,6 @@ export class ConsumerCustomerSaleInvoiceStore extends EntityStore<
   breadcrumbItems = computed(() => this._state().breadcrumbItems);
 
   private setBreadcrumb(customerId: string, invoiceId: string) {
-    console.log(consumerCustomerSaleInvoicesNamedRoutes.saleInvoices.meta.title);
-
     this.patchState({
       breadcrumbItems: [
         {

src/app/domains/consumer/modules/customers/views/saleInvoices/single.component.html

@@ -1 +1,35 @@
-<div class="flex flex-col gap-6"></div>
+<div class="flex flex-col gap-6">
+  <app-card-data cardTitle="اطلاعات فاکتور" [editable]="true" [(editMode)]="editMode">
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-3 gap-4 items-center">
+        <app-key-value label="کد رهگیری" [value]="invoice()?.code" />
+        <app-key-value label="تاریخ فاکتور" [value]="invoice()?.invoice_date" type="dateTime" />
+        <app-key-value label="تاریخ ایجاد فاکتور" [value]="invoice()?.created_at" type="dateTime" />
+        <div class="col-span-3">
+          <app-key-value label="توضیحات" [value]="invoice()?.notes" />
+        </div>
+      </div>
+      <p-divider align="center"> اطلاعات پرداخت </p-divider>
+      <div class="grid grid-cols-3 gap-4 items-center">
+        <app-key-value label="مجموع قابل پرداخت" [value]="invoice()?.total_amount" type="price" />
+        @for (payment of invoice()?.payments; track $index) {
+          <app-key-value
+            [label]="
+              `${payment.payment_method === 'SET_OF' ? 'تهاتر' : payment.payment_method === 'TERMINAL' ? 'پایانه' : 'نقدی'}`
+            "
+            [value]="payment.amount"
+            type="price"
+          />
+        }
+      </div>
+
+      <p-divider align="center"> اطلاعات صادر کننده </p-divider>
+      <div class="grid grid-cols-3 gap-4 items-center">
+        <app-key-value label="کسب و کار" [value]="invoice()?.pos!.complex.business_activity.name" />
+        <app-key-value label="مجموعه" [value]="invoice()?.pos!.complex.name" />
+        <app-key-value label="پایانه‌ی فروش" [value]="invoice()?.pos!.name" />
+        <app-key-value label="ایجاد کننده" [value]="invoice()?.account?.account?.username" />
+      </div>
+    </div>
+  </app-card-data>
+</div>

src/app/domains/consumer/modules/customers/views/saleInvoices/single.component.ts

@@ -3,13 +3,14 @@ import { AppCardComponent, KeyValueComponent } from '@/shared/components';
 import pageParamsUtils from '@/utils/page-params.utils';
 import { Component, computed, effect, inject, signal } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Divider } from 'primeng/divider';
 import { ConsumerCustomerStore } from '../../store/customer.store';
 import { ConsumerCustomerSaleInvoiceStore } from '../../store/saleInvoice.store';
 
 @Component({
   selector: 'consumer-customer-saleInvoice',
   templateUrl: './single.component.html',
-  imports: [AppCardComponent, KeyValueComponent],
+  imports: [AppCardComponent, KeyValueComponent, Divider],
 })
 export class ConsumerCustomerSaleInvoiceComponent {
   private readonly route = inject(ActivatedRoute);
@@ -22,11 +23,11 @@ export class ConsumerCustomerSaleInvoiceComponent {
   invoiceId = signal<string>(this.pageParams()['invoiceId']);
   editMode = signal<boolean>(false);
 
-  private readonly customer = computed(() => this.customerStore.entity());
+  readonly invoice = computed(() => this.store.entity());
 
   constructor() {
     effect(() => {
-      if (this.customer()?.id) {
+      if (this.invoice()?.id) {
         this.setBreadcrumb();
       }
     });