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

@if (loading) {
  <shared-page-loading />
} @else if (!invoice) {
  <uikit-empty-state> </uikit-empty-state>
} @else {
  <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>
      </ng-template>
      <div class="flex flex-col gap-4">
        <div class="listKeyValue">
          <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" />
          <app-key-value label="وضعیت صدور به سامانه‌ی مودیان">
            <catalog-tax-provider-status-tag [status]="invoice.status.value" [translate]="invoice.status.translate" />
          </app-key-value>
          <div class="col-span-full">
            <app-key-value label="توضیحات" [value]="invoice.notes" />
          </div>
        </div>
        <p-divider align="center"> اطلاعات پرداخت </p-divider>
        <div class="grid md:grid-cols-3 sm:grid-cols-2 sm:gap-4 gap-3 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="listKeyValue">
          <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.consumer_account.account.username" />
        </div>

        @if (variant !== "customer") {
          <p-divider align="center"> اطلاعات مشتری </p-divider>
          @if (invoice.customer) {
            <div class="listKeyValue">
              @if (invoice.customer.type === "INDIVIDUAL") {
                <app-key-value label="نوع مشتری" value="حقیقی" />
                <app-key-value label="نام" [value]="invoice.customer.individual?.first_name" />
                <app-key-value label="نام خانوادگی" [value]="invoice.customer.individual?.last_name" />
                <app-key-value label="کد اقتصادی" [value]="invoice.customer.individual?.economic_code" />
                <app-key-value label="کد ملی" [value]="invoice.customer.individual?.national_id" />
                <app-key-value label="کد پستی" [value]="invoice.customer.individual?.postal_code" />
              } @else {
                <app-key-value label="نوع مشتری" value="حقوقی" />
                <app-key-value label="نام شرکت" [value]="invoice.customer.legal?.company_name" />
                <app-key-value label="کد اقتصادی" [value]="invoice.customer.legal?.economic_code" />
                <app-key-value label="کد ثبتی" [value]="invoice.customer.legal?.registration_number" />
                <app-key-value label="کد پستی" [value]="invoice.customer.legal?.postal_code" />
              }
            </div>
          } @else if (invoice.unknown_customer) {
            <div class="listKeyValue">
              <app-key-value label="نوع مشتری" value="نوع دوم" />
              <app-key-value label="عنوان" [value]="invoice.unknown_customer.name" />
              <app-key-value label="کد ثبتی" [value]="invoice.unknown_customer.national_code" />
            </div>
          } @else {
            <p class="text-center text-text-color pt-3 pb-5">اطلاعات مشتری ثبت نشده است.</p>
          }
        }
      </div>
    </app-card-data>
    <app-card-data cardTitle="کالاهای خریداری شده" [editable]="false">
      <app-page-data-list
        [columns]="columns"
        [expandColumns]="expandableColumns"
        [expandable]="true"
        expandableItemKey="payload"
        [items]="invoice.items"
        [loading]="loading"
        pageTitle=""
        [showRefresh]="false"
      >
        <ng-template #totalAmount let-item>
          @if (!item.discount_amount) {
            <span [appPriceMask]="item.total_amount"></span>
          } @else {
            <!-- <div class="flex flex-col items-end">
          <span class="line-through text-muted-color text-xs" [appPriceMask]="item.total_amount"></span>
          <span [appPriceMask]="item.total_amount - item.discount_amount"></span>
        </div> -->
          }
        </ng-template>
      </app-page-data-list>
    </app-card-data>
  </div>
}