feat(layout): enhance topbar with customizable templates and full-page support

- Updated app.layout.component.html to include start, center, and end templates for the topbar.
- Modified app.layout.component.ts to manage new template references and added isFullPage getter.
- Refactored app.topbar.component.html to utilize new templates and improved layout structure.
- Enhanced app.topbar.component.ts to accept new input properties for templates.
- Updated layout.service.ts to manage full-page state and new topbar slots.
- Added new payment bridge services for POS functionality.
- Introduced greater validator for form validation.
- Improved dialog component to support mobile drawer and responsive design.
- Updated styles for better mobile support and layout adjustments.
- Added new main menu sidebar for POS with dynamic content.

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

@@ -1,8 +1,31 @@
+<ng-template #topbarStart>
+  <p-button (click)="toggleMenu()" 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>
+  <p-button (click)="toggleMenu()" icon="pi pi-user" outlined size="large" />
+</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="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">
@@ -24,27 +47,28 @@
           </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>
-        }
+    </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 {
-      <router-outlet></router-outlet>
     }
-  </div>
+  } @else {
+    <pos-main-menu-sidebar [(visible)]="mainMenuVisible" />
+    <router-outlet></router-outlet>
+  }
+  <!-- </div> -->
 }