feat: enhance order submission flow and UI improvements

- Updated categories component to improve loading state and category display.
- Modified order section to handle payment submission with event payload.
- Refactored payment form dialog to emit order response on successful payment.
- Adjusted order response model to enforce required fields.
- Improved root component layout and added success dialog for order submission.
- Enhanced sale invoice card component to use new TSP API methods.
- Updated API routes for sale invoices to reflect TSP changes.
- Improved user interface for business activities and partners sections.
- Added card shadow styling for better visual hierarchy.
- Introduced new order submitted dialog component for post-order actions.
- Cleaned up console logs and improved code readability across components.

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

@@ -1,7 +1,5 @@
 <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>
@@ -26,11 +24,34 @@
   </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="h-full relative"
+  (touchstart)="onTouchStart($event)"
+  (touchmove)="onTouchMove($event)"
+  (touchend)="onTouchEnd()"
+>
+  @if (pullDistance() >= 0) {
+    <div
+      class="w-full flex justify-center items-center py-2 min-h-10 text-xs text-surface-500 overflow-hidden fixed top-0 inset-x-0 z-1000 translate-y--20px"
+      [ngStyle]="{ height: pullDistance() + 'px' }"
+    >
+      <div
+        class="inline-flex p-3 rounded-full opacity-0 transition-opacity shadow-xl bg-surface-card"
+        [ngStyle]="{ opacity: pullDistance() / 100 }"
+      >
+        <i
+          class="pi pi-refresh text-[1.25rem] text-primary"
+          [ngStyle]="{ fontSize: `${1.25 + pullDistance() * 0.007}rem`, rotate: pullDistance() * 2 + 'deg' }"
+        ></i>
+      </div>
+      <!-- [ngStyle]="{ transform: 'scale(1.' + pullDistance() * 10 + ')' }" -->
+    </div>
+  }
+  @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">
@@ -53,27 +74,28 @@
         </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>
+    @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>
     }
-  } @else {
-    <pos-main-menu-sidebar [(visible)]="mainMenuVisible" />
-    <router-outlet></router-outlet>
+    <!-- </div> -->
   }
-  <!-- </div> -->
-}
+</div>