psp_panel/src/app/domains/pos/modules/landing/components/goods.component.html

<div class="flex flex-col min-h-full">
  <div class="bg-surface-ground z-10 p-4 border-b border-surface-border shadow-[0_-4px_16px_rgba(0,0,0,0.08)]">
    <div class="flex items-center justify-end mb-4">
      <!-- <div class="flex items-center gap-2 text-muted-color">
        <i class="pi pi-list"></i>
        <span class="text-base font-bold">لیست کالاها</span>
      </div> -->
      <div class="flex items-center gap-2 w-full">
        <app-search-input class="sm:w-auto w-full max-w-xs" (search)="onSearch($event)"></app-search-input>
        <p-divider layout="vertical" />
        <p-selectbutton
          [options]="viewOptions"
          [(ngModel)]="viewType"
          optionValue="value"
          [allowEmpty]="false"
          class="shrink-0 border border-surface-border bg-surface-ground"
        >
          <ng-template #item let-item>
            <i [class]="item.icon"></i>
          </ng-template>
        </p-selectbutton>
      </div>
    </div>
    <pos-good-categories (categoryChange)="onCategoryChange($event)" />
  </div>
  <div [class]="`p-4 ${!loading() && !goods()?.length ? ' grow flex items-center justify-center' : ''}`">
    @if (!loading() && !goods()?.length) {
      <div class="flex flex-col items-center gap-4 mt-10">
        <i class="pi pi-box text-6xl! text-muted-color"></i>
        <span class="text-xl font-semibold text-muted-color">کالایی برای نمایش وجود ندارد.</span>
      </div>
    } @else if (viewType === "grid") {
      <pos-good-grid-view (onAdd)="addGood($event)" />
    } @else {
      <pos-goods-list-view (onAdd)="addGood($event)" />
    }
  </div>

  @if (selectedGoodToAdd()) {
    <pos-payload-form-dialog
      [(visible)]="showPayloadForm"
      [good]="selectedGoodToAdd()!"
      (onClose)="onClosePayloadForm()"
    />
  }
</div>