Reorganized dashboard

This commit is contained in:
2026-05-26 12:27:06 +01:00
parent 2d8104aeae
commit 6e9daf3e60
2 changed files with 28 additions and 43 deletions
@@ -11,7 +11,6 @@
flex-direction: column;
align-items: flex-start;
/* Box shadow pour effet superposition */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06),
0 8px 20px rgba(0, 0, 0, 0.08),
0 16px 40px rgba(0, 0, 0, 0.06);
@@ -35,15 +34,13 @@
outline: none;
}
/* Liste scrollable */
.livraisons-list {
width: 100%;
max-height: 350px; /* hauteur max de la liste */
overflow-y: auto; /* scroll vertical activé */
padding-right: 10px; /* pour le scrollbar */
max-height: 500px;
overflow-y: auto;
padding-right: 10px;
}
/* Scrollbar personnalisée (optionnel) */
.livraisons-list::-webkit-scrollbar {
width: 8px;
}
@@ -57,7 +54,6 @@
background: #f3f4f6;
}
/* Carte de livraison */
.livraison-card {
background: #ffffff;
padding: 20px 22px;
@@ -76,7 +72,6 @@
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}
/* Infos livraison */
.livraison-info h3 {
font-size: 17px;
margin: 0 0 4px;
@@ -88,26 +83,3 @@
font-size: 14px;
color: #6b7280;
}
/* Bouton valider */
.validate-btn {
padding: 10px 20px;
border-radius: 12px;
border: none;
cursor: pointer;
font-weight: 600;
background: #3b82f6;
color: white;
transition: all 0.3s ease;
}
.validate-btn:hover {
background: #2563eb;
}
.validate-btn.validated {
background: #9ca3af;
cursor: default;
color: #ffffff;
opacity: 0.9;
}
+25 -12
View File
@@ -1,14 +1,27 @@
<div class="flex gap-17 ml-20">
<app-info-card color="#f59e0b" icon="inbox" [value]="productsUnderLimitCount()"
description="Produits sous le seuil minimal."></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]=deliversCount()
description="Livreurs partenaires."></app-info-card>
<app-info-card color="#ef4444" icon="shop" [value]="suppliersCount()"
description="Fournisseurs partenaires."></app-info-card>
</div>
<div class="mt-10 flex gap-30">
<div class="flex w-full px-4 gap-4 items-start mt-6">
<div class="w-1/2">
<app-delivery-validator></app-delivery-validator>
</div>
<div class="w-1/2 mt-10 flex flex-col gap-4">
<p class="text-2xl font-bold">Tableau de bord</p>
<div class="grid grid-cols-2 gap-4">
<app-info-card color="#f59e0b" icon="inbox"
[value]="productsUnderLimitCount()"
description="Produits sous le seuil minimal.">
</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]="deliversCount()"
description="Livreurs partenaires.">
</app-info-card>
<app-info-card color="#ef4444" icon="shop"
[value]="suppliersCount()"
description="Fournisseurs partenaires.">
</app-info-card>
</div>
</div>
</div>