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/assets/images/index.ts

@@ -3,9 +3,11 @@
 import errors from './errors';
 import login from './login.webp';
 import logo from './logo.png';
+import { placeholders } from './placeholders';
 
 export default {
   logo,
   login,
   errors,
+  placeholders,
 };

src/assets/images/placeholders/index.ts

@@ -0,0 +1,7 @@
+import logo from './logoPlaceholder.png';
+import productPlaceholder from './productPlaceholder.png';
+
+export const placeholders = {
+  logo,
+  default: productPlaceholder,
+};

src/assets/tailwind.css

@@ -35,3 +35,10 @@
   --color-error: var(--p-red-500);
   --p-inputtext-padding-y: 1rem !important;
 }
+
+@layer utilities {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    @apply appearance-none;
+  }
+}