feat: enhance product and purchase components

- Added new components for handling purchase receipts and payment wrappers.
- Updated product details view to include sales count and stock alerts.
- Refactored invoice payment form to use a template for better structure.
- Introduced confirmation dialog service for payment confirmations.
- Improved state card component for better visual representation of orders.
- Added loading indicators and error handling in various components.
- Updated routes to include new purchase functionality for suppliers.
- Enhanced stock alert component to visually indicate low stock levels.

src/app/shared/components/stateCard/stat-card.component.html

@@ -0,0 +1,16 @@
+<div class="card mb-0">
+  <div class="flex justify-between mb-4">
+    <div>
+      <span class="block text-muted-color font-medium mb-4">Orders</span>
+      <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
+    </div>
+    <div
+      class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border"
+      style="width: 2.5rem; height: 2.5rem"
+    >
+      <i class="pi pi-shopping-cart text-blue-500 text-xl!"></i>
+    </div>
+  </div>
+  <span class="text-primary font-medium">24 new </span>
+  <span class="text-muted-color">since last visit</span>
+</div>

src/app/shared/components/stateCard/stat-card.component.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-shared-stat-widget',
+  imports: [CommonModule],
+  templateUrl: './stat-card.component.html',
+})
+export class StatWidget {}