update pos consumer

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

@@ -1,5 +1,23 @@
 @if (loading()) {
   <shared-page-loading />
 } @else {
-  <router-outlet></router-outlet>
+  <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">
+        <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 }}</span>
+      </div>
+      <div class="flex gap-2 items-center">
+        <div class="bg-surface-card py-1 px-3 rounded-md shadow-sm">
+          <span [jalaliDate]="now" jalaliFormat="dddd YYYY/MM/DD" class="text-base"></span>
+        </div>
+        <div class="bg-surface-card py-1 px-3 rounded-md shadow-sm">
+          <span class="text-base"> {{ userInfo()?.username }} </span>
+        </div>
+      </div>
+    </div>
+    <router-outlet></router-outlet>
+  </div>
 }

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

@@ -1,20 +1,29 @@
+import { AuthService } from '@/core';
 import { PageLoadingComponent } from '@/shared/components/page-loading.component';
+import { JalaliDateDirective } from '@/shared/directives';
 import { Component, computed, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import images from 'src/assets/images';
 import { PosStore } from '../pos.store';
 
 @Component({
   selector: 'pos-layout',
   templateUrl: './layout.component.html',
-  imports: [PageLoadingComponent, RouterOutlet],
+  imports: [PageLoadingComponent, RouterOutlet, JalaliDateDirective],
 })
 export class PosLayoutComponent {
   constructor() {}
 
   private readonly store = inject(PosStore);
+  private readonly authService = inject(AuthService);
 
   readonly loading = computed(() => this.store.loading());
   readonly posInfo = computed(() => this.store.entity());
+  readonly userInfo = computed(() => this.authService.currentAccount());
+
+  placeholderLogo = images.placeholders.logo;
+
+  now = new Date();
 
   getData() {
     this.store.getData();