Real value for deliverer and suppliers count

src/app/components/info-card/info-card.ts

@@ -13,7 +13,7 @@ import {NgStyle} from "@angular/common";
 })
 export class InfoCard {
     icon = input.required<string>()
-    value = input.required<string>()
+    value = input.required<number>()
     description = input.required<string>()
     color = input.required<string>()
 }

src/app/pages/welcome/welcome.html

@@ -1,8 +1,8 @@
 <div class="flex gap-17 ml-20">
-    <app-info-card color="#f59e0b" icon="inbox" value="15" description="Produits sous le seuil minimal."></app-info-card>
+    <app-info-card color="#f59e0b" icon="inbox" [value]="15"  description="Produits sous le seuil minimal."></app-info-card>
-    <app-info-card color="#3b82f6" icon="team" value="56" description="Partenaires actifs."></app-info-card>
+    <app-info-card color="#3b82f6" icon="team" [value]="deliversCount()+suppliersCount()" description="Partenaires actifs."></app-info-card>
-    <app-info-card color="#10b981" icon="truck" value="8" description="Livreurs partenaires."></app-info-card>
+    <app-info-card color="#10b981" icon="truck" [value]=deliversCount() description="Livreurs partenaires."></app-info-card>
-    <app-info-card color="#ef4444" icon="shop" value="48" description="Fournisseurs travaillant avec nous."></app-info-card>
+    <app-info-card color="#ef4444" icon="shop" [value]="suppliersCount()" description="Fournisseurs travaillant avec nous."></app-info-card>
 </div>
 
 <div class="mt-10 flex gap-30">

src/app/pages/welcome/welcome.ts

@@ -1,7 +1,10 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {InfoCard} from "../../components/info-card/info-card";
 import {DeliveryValidator} from "../../components/delivery-validator/delivery-validator";
 import {InfoTable} from "../../components/info-table/info-table";
+import {DeliverersService, SuppliersService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {NzNotificationService} from "ng-zorro-antd/notification";
 
 @Component({
   selector: 'app-welcome',
@@ -14,6 +17,39 @@ import {InfoTable} from "../../components/info-table/info-table";
   styleUrl: './welcome.css'
 })
 
-export class Welcome {
+export class Welcome implements OnInit {
+    private deliverersService = inject(DeliverersService);
+    private suppliersService = inject(SuppliersService);
+    private notificationsService = inject(NzNotificationService);
 
+    deliversCount = signal<number>(0);
+    suppliersCount = signal<number>(0);
+
+    async getDeliverers() {
+        try{
+            const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
+            this.deliversCount.set(deliverers.length);
+        }catch(e){
+            this.notificationsService.error(
+                'Error',
+                'Error while getting deliverers.',
+            )
+        }
+    }
+
+    async getSuppliers() {
+        try{
+            const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
+            this.suppliersCount.set(suppliers.length);
+        }catch(e){
+            this.notificationsService.error(
+                'Error',
+                'Error while getting suppliers.',
+            )
+        }
+    }
+    async ngOnInit() {
+        await this.getDeliverers();
+        await this.getSuppliers();
+    }
 }