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

<p-card class="border border-surface-border p-0! relative overflow-visible">
  <div class="flex items-center gap-4 justify-between w-full">
    <span> {{ saleInvoice.invoice_number }} - {{ saleInvoice.code }} </span>
    <catalog-tax-provider-status-tag [status]="saleInvoice.status.value" [translate]="saleInvoice.status.translate" />
  </div>
  <hr />
  <div class="grid grid-cols-1 gap-4">
    <app-key-value alignment="end" label="نوع صورت‌حساب">
      {{ preparedInvoiceType() }}
    </app-key-value>
    <app-key-value alignment="end" label="مبلغ کل" [value]="saleInvoice.total_amount" type="price" />
    <app-key-value alignment="end" label="تاریخ فاکتور" [value]="saleInvoice.created_at" type="dateTime" />
    <app-key-value alignment="end" label="تاریخ ایجاد" [value]="saleInvoice.created_at" type="dateTime" />
  </div>
  <hr />
  <div class="flex items-center justify-center gap-4">
    @if (saleInvoice.status.value.toLowerCase() === "not_send") {
      <p-button label="ارسال فاکتور" type="button" (click)="sendInvoice()" [loading]="sendingLoading()"></p-button>
    }
    @if (saleInvoice.status.value.toLowerCase() === "queued") {
      <p-button
        label="استعلام وضعیت ارسال"
        type="button"
        (click)="getStatus()"
        [loading]="gettingStatusLoading()"
      ></p-button>
    }
    @if (saleInvoice.status.value.toLowerCase() === "failure") {
      <p-button label="ارسال فاکتور" type="button" (click)="resendInvoice()" [loading]="resendingLoading()"></p-button>
    }
    <a [routerLink]="singlePageRoute()" pButton type="button" (click)="viewDetails()" outlined>مشاهده جزییات</a>
  </div>
</p-card>