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/shared/components/pageDataList/page-data-list-grid-view.component.html

@@ -1,4 +1,4 @@
-<div class="h-full overflow-auto">
+<div class="h-full overflow-auto border border-surface-border cardShadow">
   <div
     [ngClass]="{
       'px-4': captionBox,
@@ -13,14 +13,14 @@
     }
     <div class="grid grid-cols-1 gap-3" [ngClass]="{ 'pt-4': captionBox }">
       @for (item of items; track `gridView_${$index}`) {
-        <div class="card border border-surface-border bg-surface-50! mb-0! rounded-2xl p-4!">
+        <div class="card border border-surface-border bg-surface-0! mb-0! rounded-2xl p-4!">
           <div class="listKeyValue">
             @for (col of columns; track `gridView_${col.field.toString()}_${$index}`) {
               @if (col.type !== "index") {
                 <app-key-value [label]="col.header" [variant]="col.variant">
                   @if (col.type === "thumbnail") {
                     <div
-                      class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-50 cursor-pointer"
+                      class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-100 cursor-pointer"
                       (click)="openThumbnailModal(item)"
                     >
                       @if (item && col?.field && item[col!.field!]) {
@@ -46,16 +46,33 @@
             }
           </div>
           @if (showEdit || showDelete || showDetails) {
-            <hr />
-            <div class="flex justify-center gap-2 mt-2">
+            <hr class="my-2" />
+            <div class="flex justify-center gap-2 mt-4">
               @if (showEdit) {
-                <p-button icon="pi pi-pencil" label="ویرایش" size="small" outlined (click)="edit(item)"> </p-button>
+                <p-button
+                  icon="pi pi-pencil"
+                  label="ویرایش"
+                  size="small"
+                  outlined
+                  severity="secondary"
+                  (click)="edit(item)"
+                >
+                </p-button>
               }
               @if (showDelete) {
-                <p-button icon="pi pi-trash" label="حذف" size="small" outlined (click)="remove(item)"> </p-button>
+                <p-button icon="pi pi-trash" label="حذف" size="small" outlined severity="danger" (click)="remove(item)">
+                </p-button>
               }
               @if (showDetails) {
-                <p-button icon="pi pi-eye" label="مشاهده" size="small" outlined (click)="details(item)"> </p-button>
+                <p-button
+                  icon="pi pi-eye"
+                  label="مشاهده"
+                  size="small"
+                  outlined
+                  severity="primary"
+                  (click)="details(item)"
+                >
+                </p-button>
               }
             </div>
           }