feat: Implement product categories, stores, suppliers, and users management features

- Added ProductCategoriesService for handling product category API interactions.
- Created components for listing and viewing product categories.
- Implemented UI for managing product categories with a data list component.
- Developed StoresService for managing store-related API calls.
- Created components for listing and viewing stores with appropriate UI.
- Added SuppliersService for handling supplier API interactions.
- Implemented components for managing suppliers with a data list component.
- Developed UsersService for managing user-related API calls.
- Created components for listing and viewing users with appropriate UI.
- Enhanced not found page with improved layout and navigation options.

src/app/shared/components/input/input.component.html

@@ -1,17 +1,21 @@
 <uikit-field [label]="label" [name]="name" [control]="control">
-  <input
-    pInputText
-    [attr.id]="name"
-    [formControl]="control"
-    [attr.name]="name"
-    [attr.placeholder]="placeholder"
-    [attr.inputmode]="inputMode"
-    [attr.maxlength]="maxLength || null"
-    [attr.type]="htmlType"
-    [attr.autocomplete]="autocomplete"
-    [class]="`${inputClass} w-full ${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`"
-    [required]="isRequired"
-    [invalid]="control.invalid && (control.touched || control.dirty)"
-    (input)="onInput($event)"
-  />
+  @if (type === "switch") {
+    <p-toggleSwitch [formControl]="control" />
+  } @else {
+    <input
+      pInputText
+      [attr.id]="name"
+      [formControl]="control"
+      [attr.name]="name"
+      [attr.placeholder]="placeholder"
+      [attr.inputmode]="inputMode"
+      [attr.maxlength]="maxLength || null"
+      [attr.type]="htmlType"
+      [attr.autocomplete]="autocomplete"
+      [class]="`${inputClass} w-full ${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`"
+      [required]="isRequired"
+      [invalid]="control.invalid && (control.touched || control.dirty)"
+      (input)="onInput($event)"
+    />
+  }
 </uikit-field>

src/app/shared/components/input/input.component.ts

@@ -4,15 +4,17 @@ import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { InputTextModule } from 'primeng/inputtext';
+import { ToggleSwitch } from 'primeng/toggleswitch';
 
 @Component({
   selector: 'app-input',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, InputTextModule, UikitFieldComponent],
+  imports: [CommonModule, ReactiveFormsModule, InputTextModule, UikitFieldComponent, ToggleSwitch],
   templateUrl: './input.component.html',
 })
 export class InputComponent {
-  @Input() type: 'simple' | 'postalCode' | 'mobile' | 'phone' | 'email' = 'simple';
+  @Input() type: 'simple' | 'postalCode' | 'mobile' | 'phone' | 'email' | 'checkbox' | 'switch' =
+    'simple';
   @Input() control!: FormControl<Maybe<any>>;
   @Input() name!: string;
   @Input() label: string = '';

src/app/shared/components/pageDataList/page-data-list.component.html

@@ -83,7 +83,7 @@
       </ng-template>
 
       <ng-template #emptymessage>
-        <tr class="h-full">
+        <tr class="">
           <td [colSpan]="columns.length.toString()" class="w-full">
             <uikit-empty-state
               [title]="emptyPlaceholderTitle"
@@ -95,6 +95,11 @@
           </td>
         </tr>
       </ng-template>
+      <!-- <ng-template #emptymessage>
+        <tr>
+          <td colspan="6">There are no order for this product yet.</td>
+        </tr>
+      </ng-template> -->
 
       <ng-template #loadingbody let-columns>
         @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; track i) {

src/app/shared/components/pageDataList/page-data-list.component.ts

@@ -80,9 +80,9 @@ export class PageDataListComponent<I> {
   filterDrawerVisible = signal<boolean>(false);
 
   ngOnInit() {
-    if (this.fullHeight) {
-      this.renderer.setStyle(this.host.nativeElement, 'height', '100cqmin');
-    }
+    // if (this.fullHeight) {
+    //   this.renderer.setStyle(this.host.nativeElement, 'height', '100cqmin');
+    // }
   }
 
   edit = (item: I) => {