Restore pending orders card and display count

Restores the pending orders card to the dashboard, displaying the count of pending orders and refactors the display of individual pending orders to remove overdue status and highlight them with an orange border.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 98f01874-e00c-4bbe-9d71-b0b338001848
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/98f01874-e00c-4bbe-9d71-b0b338001848/XDIQsDu
This commit is contained in:
michaelschal committed 2025-09-01 20:33:47 +00:00
1 parent 1888b700a4
commit beed32daea
1 file changed
+30 -29
+30 -29
View File
@@ -395,6 +395,19 @@ export default function Dashboard() {
</CardContent>
</Card>
<Card className="bg-white border border-gray-200 shadow-lg hover:shadow-xl transition-shadow">
<CardContent className="p-4 sm:p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-xs sm:text-sm font-medium text-gray-600">Commandes en attente</p>
<p className="text-2xl sm:text-3xl font-bold text-gray-900 mt-1 sm:mt-2">{pendingOrdersCount}</p>
</div>
<div className="h-10 w-10 sm:h-12 sm:w-12 bg-orange-100 flex items-center justify-center rounded-lg">
<Clock className="h-5 w-5 sm:h-6 sm:w-6 text-orange-600" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-white border border-gray-200 shadow-lg hover:shadow-xl transition-shadow">
<CardContent className="p-4 sm:p-6">
@@ -441,37 +454,25 @@ export default function Dashboard() {
</CardTitle>
</CardHeader>
<CardContent className="space-y-3 p-6 max-h-96 overflow-y-auto">
{pendingOrders.length > 0 ? pendingOrders.map((order: any) => {
// Calculer le nombre de jours en attente
const orderDate = safeDate(order.createdAt);
const daysPending = orderDate ? Math.floor((new Date().getTime() - orderDate.getTime()) / (1000 * 60 * 60 * 24)) : 0;
const isOverdue = daysPending > 10;
return (
<div key={order.id} className={`flex items-center justify-between p-4 transition-colors border-l-3 ${
isOverdue ? 'bg-red-50 hover:bg-red-100 border-red-500' : 'bg-orange-50 hover:bg-orange-100 border-orange-500'
}`}>
<div className="flex items-center space-x-3">
<div className={`h-2 w-2 ${isOverdue ? 'bg-red-500' : 'bg-orange-500'}`}></div>
<div>
<p className="font-medium text-gray-900">{order.supplier?.name}</p>
<p className="text-sm text-gray-600">{order.group?.name}</p>
</div>
</div>
<div className="text-right">
<Badge
variant={isOverdue ? 'destructive' : 'secondary'}
className="text-xs"
>
{daysPending} jour{daysPending > 1 ? 's' : ''}
</Badge>
<p className="text-xs text-gray-500 mt-1">
{safeFormat(order.plannedDate, "d MMM")}
</p>
{pendingOrders.length > 0 ? pendingOrders.map((order: any) => (
<div key={order.id} className="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors border-l-3 border-orange-500">
<div className="flex items-center space-x-3">
<div className="h-2 w-2 bg-orange-500"></div>
<div>
<p className="font-medium text-gray-900">{order.supplier?.name}</p>
<p className="text-sm text-gray-600">{order.group?.name}</p>
</div>
</div>
);
}) : (
<div className="text-right">
<Badge variant="secondary" className="text-xs">
En attente
</Badge>
<p className="text-xs text-gray-500 mt-1">
{safeFormat(order.plannedDate, "d MMM")}
</p>
</div>
</div>
)) : (
<p className="text-gray-600 text-center py-8">Aucune commande en attente</p>
)}
</CardContent>