feat: Add Cardex module with filters and invoices components

- Implemented Cardex routes and integrated with the main application routing.
- Created filters component for Cardex to filter inventory and product data.
- Developed invoices component to display supplier invoices with detailed views.
- Enhanced Products module with pagination and state management using a store.
- Updated Suppliers module to include invoice management and detailed supplier views.
- Refactored state management in Products and Suppliers to utilize signals for reactive updates.
- Added new models and services to support the Cardex functionality.
- Improved UI components for better user experience in displaying data.

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

@@ -14,9 +14,9 @@
       <th rowspan="2" [style]="{ textAlign: 'center', width: '6rem' }">شماره</th>
       <th rowspan="2" [style]="{ textAlign: 'center', minWidth: '14rem', width: '14rem' }">طرف حساب</th>
       <th rowspan="2" [style]="{ textAlign: 'center', width: '12rem' }">انبار</th>
-      <th colspan="2" class="text-center!" [style]="{ width: '15rem' }">وارده</th>
+      <th colspan="2" class="text-center!" [style]="{ width: '15rem' }">ورودی</th>
       <th colspan="2" class="text-center!" [style]="{ width: '15rem' }">خروجی</th>
-      <th colspan="3" class="text-center!" [style]="{ width: '25rem' }">مانده</th>
+      <th colspan="1" class="text-center!" [style]="{ width: '5rem' }">مانده</th>
     </tr>
     <tr>
       <th [style]="{ textAlign: 'center', width: '5rem' }">تعداد</th>
@@ -24,8 +24,8 @@
       <th [style]="{ textAlign: 'center', width: '5rem' }">تعداد</th>
       <th [style]="{ textAlign: 'center', width: '10rem' }">فی</th>
       <th [style]="{ textAlign: 'center', width: '5rem' }">تعداد</th>
-      <th [style]="{ textAlign: 'center', width: '10rem' }">فی</th>
-      <th [style]="{ textAlign: 'center', width: '10rem' }">مجموع قیمت</th>
+      <!-- <th [style]="{ textAlign: 'center', width: '10rem' }">فی</th>
+      <th [style]="{ textAlign: 'center', width: '10rem' }">مجموع قیمت</th> -->
     </tr>
   </ng-template>
 
@@ -60,8 +60,8 @@
         }
       </td>
       <td class="text-center!">{{ item.remainedInStock }}</td>
-      <td class="text-center!"><span [appPriceMask]="item.fee"></span></td>
-      <td class="text-center!"><span [appPriceMask]="item.totalCost"></span></td>
+      <!-- <td class="text-center!"><span [appPriceMask]="item.fee"></span></td>
+      <td class="text-center!"><span [appPriceMask]="item.totalCost"></span></td> -->
     </tr>
   </ng-template>
 </p-table>