psp_panel/src/app/domains/pos/layouts/layout.component.html

<ng-template #topbarStart>
  <p-button (click)="toggleMenu()" icon="pi pi-bars" outlined size="large" />
  <p-button (click)="refresh()" icon="pi pi-bars" outlined size="large" />
  <p-button (click)="doPay()" icon="pi pi-bars" outlined size="large" />
</ng-template>

<ng-template #topbarCenter>
  @if (posInfo()) {
    <div class="flex flex-col items-center justify-center gap-2">
      <div class="w-8 h-8">
        <img
          [src]="posInfo()?.partner?.logo_url ?? placeholderLogo"
          alt="Logo"
          class="w-full h-full object-cover rounded-md bg-surface-card"
        />
      </div>
      <span class="text-base font-semibold">{{ posInfo()?.partner?.name }}</span>
    </div>
  }
</ng-template>

<ng-template #topbarEnd>
  <div class="">
    <p-menu #menu [model]="profileMenuItems" [popup]="true" />
    <p-button (click)="menu.toggle($event)" icon="pi pi-user" text outlined size="large" />
  </div>
</ng-template>

@if (loading()) {
  <shared-page-loading />
} @else {
  <!-- <div class="w-svw h-svh bg-surface-ground flex flex-col gap-4 p-4"> -->
  <!-- <div class="w-full flex items-center gap-4 shrink-0 justify-between">
      <div class="flex gap-2 items-center">
        @if (posInfo()) {
          <div class="w-10 h-10">
            <img [src]="placeholderLogo" alt="Logo" class="w-full h-full object-cover rounded-md bg-surface-card" />
          </div>
          <span class="text-lg font-bold">
            {{ posInfo()?.name }} ({{ posInfo()?.complex!.name }} - {{ posInfo()?.businessActivity!.name }})
          </span>
        }
      </div>
      <div class="flex gap-2 items-center">
        <div class="bg-surface-card px-3 rounded-md shadow-sm h-9 flex items-center">
          <span [jalaliDate]="now" jalaliFormat="dddd YYYY/MM/DD" class="text-base"></span>
        </div>
        <div class="">
          <p-menu #menu [model]="profileMenuItems" [popup]="true" />
          <button pButton (click)="menu.toggle($event)" icon="pi pi-user" severity="contrast">
            {{ posProfile()?.account?.username }}
          </button>
        </div>
      </div>
    </div> -->
  @if (error()) {
    @switch (error()?.status) {
      @case (412) {
        <pos-choose-cards class="h-full" (onChoose)="onChoosePos()" />
      }
      @default {
        <div class="h-full w-full flex items-center justify-center">
          <p-card class="border border-surface-border">
            <div class="flex flex-col gap-2 items-center justify-between shrink-0">
              <i class="pi pi-exclamation-triangle text-6xl! mb-3 text-error" aria-hidden="true"></i>
              <span class="text-xl font-semibold mb-2 text-error block"> عدم دسترسی </span>
              <p class="inline-block text-base">متاسفانه امکان دسترسی برای کاربر شما فراهم نیست</p>
              <button pButton outlined severity="danger" class="mt-5 w-32" (click)="logout()">خروج</button>
            </div>
          </p-card>
        </div>
      }
    }
  } @else {
    <pos-main-menu-sidebar [(visible)]="mainMenuVisible" />
    <router-outlet></router-outlet>
  }
  <!-- </div> -->
}