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/detailsInfoCard/details-info-card.component.html

@@ -5,7 +5,9 @@
     </div>
     <div class="grow flex flex-col gap-1">
       <span class="text-sm font-bold">{{ label }}</span>
-      <span class="text-xl font-bold text-primary">{{ value }}</span>
+      <ng-content>
+        <span class="text-xl font-bold text-primary">{{ value }}</span>
+      </ng-content>
     </div>
   </div>
 </p-card>

src/app/shared/components/detailsInfoCard/details-info-card.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { Maybe } from '@/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { Card } from 'primeng/card';
 
 @Component({
@@ -10,5 +11,7 @@ export class DetailsInfoCardComponent {
   @Input() icon: string = '';
   @Input() label: string = '';
   @Input() value: string = '';
+
+  @ViewChild('valueElement') valueElement: Maybe<ElementRef> = null;
   constructor() {}
 }