feat: Implement price info card component and product categories with grid view

- Added `price-info-card.component` to display total amount, tax, and payable amount.
- Integrated price masking directive for formatted price display.
- Created `categories.component` to list product categories with loading skeletons.
- Implemented `grid-view.component` for displaying products in a grid layout.
- Enhanced `products.component` to manage category selection and product display.
- Introduced new models for product categories and stock responses.
- Updated `main.service.ts` to fetch product categories and stock data.
- Refactored `POSStore` to manage state for products, categories, and order items.
- Added utility functions for price formatting and number normalization.
- Included placeholder images for product and logo.

src/app/uikit/uikit-counter.component.html

@@ -1,35 +1,38 @@
-<div class="flex items-center border rounded overflow-hidden bg-white" [class.opacity-60]="disabled">
+<div class="flex items-center w-full" [class.opacity-60]="disabled">
   <button
     type="button"
     pButton
-    class="p-button p-component flex items-center justify-center px-3"
-    (click)="decrease()"
     [disabled]="disabled"
-    aria-label="decrease"
-  >
-    -
-  </button>
+    icon="pi pi-plus"
+    aria-label="increase"
+    size="small"
+    class="shrink-0"
+    outlined
+    (click)="increase()"
+  ></button>
 
-  <input
-    class="text-center w-16 px-2 py-1 outline-none"
+  <p-inputnumber
     type="number"
-    [value]="value"
-    (input)="onInput($event)"
-    [min]="min ?? undefined"
-    [max]="max ?? undefined"
+    [formControl]="control"
+    [min]="min"
+    [max]="max"
     [step]="step"
+    size="small"
     [disabled]="disabled"
+    [(ngModel)]="value"
     aria-label="quantity"
+    inputStyleClass="text-center! outline-none border-none! grow w-12 px-1! appearance-none!"
   />
 
   <button
     type="button"
     pButton
-    class="p-button p-component flex items-center justify-center px-3"
-    (click)="increase()"
     [disabled]="disabled"
-    aria-label="increase"
-  >
-    +
-  </button>
+    icon="pi pi-minus"
+    aria-label="decrease"
+    size="small"
+    class="shrink-0"
+    outlined
+    (click)="decrease()"
+  ></button>
 </div>