Initial commit

client/src/components/modals/ConfirmDeleteModal.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { AlertTriangle } from "lucide-react";
+
+interface ConfirmDeleteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  itemName?: string;
+  isLoading?: boolean;
+}
+
+export default function ConfirmDeleteModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  itemName,
+  isLoading = false,
+}: ConfirmDeleteModalProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="delete-modal-description">
+        <DialogHeader>
+          <DialogTitle className="flex items-center space-x-2">
+            <AlertTriangle className="w-5 h-5 text-red-500" />
+            <span>{title}</span>
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="py-4">
+          <p id="delete-modal-description" className="text-sm text-gray-600">
+            {description}
+          </p>
+          {itemName && (
+            <div className="mt-3 p-3 bg-red-50 rounded-lg border border-red-200">
+              <p className="text-sm font-medium text-red-800">
+                Élément à supprimer : <span className="font-bold">{itemName}</span>
+              </p>
+            </div>
+          )}
+          <div className="mt-4 p-3 bg-amber-50 rounded-lg border border-amber-200">
+            <p className="text-xs text-amber-700 font-medium">
+              ⚠️ Cette action est définitive et ne peut pas être annulée.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter className="flex justify-end space-x-2">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={isLoading}
+          >
+            Annuler
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="bg-red-600 hover:bg-red-700"
+          >
+            {isLoading ? "Suppression..." : "Supprimer définitivement"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/modals/CreateDeliveryModal.tsx

@@ -0,0 +1,337 @@
+import { useState, useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
+import { useStore } from "@/components/Layout";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { isUnauthorizedError } from "@/lib/authUtils";
+import { format } from "date-fns";
+import { safeFormat } from "@/lib/dateUtils";
+import type { Group, Supplier, OrderWithRelations } from "@shared/schema";
+
+interface CreateDeliveryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedDate: Date | null;
+}
+
+export default function CreateDeliveryModal({
+  isOpen,
+  onClose,
+  selectedDate,
+}: CreateDeliveryModalProps) {
+  const { user } = useAuthUnified();
+  const { selectedStoreId } = useStore();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [formData, setFormData] = useState({
+    orderId: "",
+    supplierId: "",
+    groupId: "",
+    scheduledDate: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : "",
+    quantity: "",
+    unit: "palettes",
+    notes: "",
+  });
+
+  const { data: suppliers = [] } = useQuery<Supplier[]>({
+    queryKey: ['/api/suppliers'],
+    enabled: user?.role === 'admin' || user?.role === 'manager',
+  });
+
+  const { data: groupsData = [] } = useQuery<Group[]>({
+    queryKey: ['/api/groups'],
+  });
+  
+  // Filtrer les groupes selon le magasin sélectionné pour les admins
+  const groups = Array.isArray(groupsData) ? (
+    user?.role === 'admin' && selectedStoreId 
+      ? groupsData.filter(g => g.id === selectedStoreId)
+      : groupsData
+  ) : [];
+
+  // Filtrer les commandes par fournisseur sélectionné
+  const { data: allOrders = [] } = useQuery<OrderWithRelations[]>({
+    queryKey: ['/api/orders'],
+  });
+
+  // Filtrer les commandes par fournisseur sélectionné - montrer toutes les commandes non livrées
+  const availableOrders = allOrders.filter(order => 
+    formData.supplierId ? (order.supplierId === parseInt(formData.supplierId) && order.status !== 'delivered') : false
+  );
+
+  // Auto-sélectionner le magasin selon les règles
+  useEffect(() => {
+    console.log('🏪 CreateDeliveryModal - Store selection effect:', {
+      groupsLength: groups.length,
+      currentFormGroupId: formData.groupId,
+      selectedStoreId,
+      userRole: user?.role,
+      allGroups: groups.map(g => ({ id: g.id, name: g.name })),
+      filteredGroups: groups.length
+    });
+    
+    // Reset le formulaire si le magasin sélectionné change
+    if (user?.role === 'admin' && selectedStoreId && formData.groupId && formData.groupId !== selectedStoreId.toString()) {
+      console.log('🔄 Resetting delivery form because store changed:', { 
+        currentGroupId: formData.groupId, 
+        newStoreId: selectedStoreId.toString() 
+      });
+      setFormData(prev => ({ ...prev, groupId: "", orderId: "" }));
+      return;
+    }
+    
+    if (groups.length > 0 && !formData.groupId) {
+      let defaultGroupId = "";
+      
+      if (user?.role === 'admin') {
+        // Pour l'admin : utiliser le magasin sélectionné dans le header (filtré), sinon le premier de la liste
+        if (selectedStoreId && groups.find(g => g.id === selectedStoreId)) {
+          defaultGroupId = selectedStoreId.toString();
+        } else {
+          defaultGroupId = groups[0].id.toString();
+        }
+        console.log('🏪 Admin delivery store selection:', { 
+          selectedStoreId, 
+          defaultGroupId, 
+          firstGroupId: groups[0].id,
+          groupsAvailable: groups.map(g => g.name)
+        });
+      } else {
+        // Pour les autres rôles : prendre le premier magasin attribué
+        // (La logique existante filtre déjà les groupes selon les permissions)
+        defaultGroupId = groups[0].id.toString();
+        console.log('🏪 Non-admin delivery store selection:', { defaultGroupId, firstGroupId: groups[0].id });
+      }
+      
+      if (defaultGroupId) {
+        console.log('🏪 Setting default group ID for delivery:', defaultGroupId, 'for group:', groups.find(g => g.id.toString() === defaultGroupId)?.name);
+        setFormData(prev => ({ ...prev, groupId: defaultGroupId }));
+      }
+    }
+  }, [groups, selectedStoreId, user?.role, formData.groupId]);
+
+  // Réinitialiser la commande sélectionnée quand on change de fournisseur
+  useEffect(() => {
+    if (formData.supplierId) {
+      setFormData(prev => ({ ...prev, orderId: "" }));
+    }
+  }, [formData.supplierId]);
+
+  const createDeliveryMutation = useMutation({
+    mutationFn: async (data: any) => {
+      await apiRequest("/api/deliveries", "POST", data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Livraison créée avec succès",
+      });
+      
+      // Invalider toutes les variantes de queryKey pour assurer cohérence
+      console.log('🚚 Delivery created, clearing cache for consistency');
+      queryClient.invalidateQueries({ predicate: (query) => {
+        const key = query.queryKey;
+        return key[0]?.toString().includes('/api/orders') || 
+               key[0]?.toString().includes('/api/deliveries') || 
+               key[0]?.toString().includes('/api/stats/monthly');
+      }});
+      
+      onClose();
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        toast({
+          title: "Non autorisé",
+          description: "Vous êtes déconnecté. Reconnexion...",
+          variant: "destructive",
+        });
+        setTimeout(() => {
+          window.location.href = "/api/login";
+        }, 500);
+        return;
+      }
+      toast({
+        title: "Erreur",
+        description: "Impossible de créer la livraison",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!formData.supplierId || !formData.groupId || !formData.scheduledDate || !formData.quantity) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    createDeliveryMutation.mutate({
+      orderId: formData.orderId && formData.orderId !== "none" ? parseInt(formData.orderId) : undefined,
+      supplierId: parseInt(formData.supplierId),
+      groupId: parseInt(formData.groupId),
+      scheduledDate: formData.scheduledDate,
+      quantity: parseInt(formData.quantity),
+      unit: formData.unit,
+      status: "planned",
+      notes: formData.notes || undefined,
+      createdBy: user?.id,
+    });
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  // Afficher toutes les commandes du fournisseur sélectionné (pas de filtrage supplémentaire)
+  const finalFilteredOrders = availableOrders;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="delivery-modal-description">
+        <DialogHeader>
+          <DialogTitle>Nouvelle Livraison</DialogTitle>
+          <p id="delivery-modal-description" className="text-sm text-gray-600 mt-1">
+            Créer une nouvelle livraison pour un fournisseur
+          </p>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="supplier">Fournisseur *</Label>
+            <Select value={formData.supplierId} onValueChange={(value) => handleChange('supplierId', value)}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionnez un fournisseur" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.isArray(suppliers) && suppliers.map((supplier) => (
+                  <SelectItem key={supplier.id} value={supplier.id.toString()}>
+                    {supplier.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {formData.supplierId && (
+            <div>
+              <Label htmlFor="order">Commande liée (optionnel)</Label>
+              <Select value={formData.orderId} onValueChange={(value) => handleChange('orderId', value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Sélectionnez une commande de ce fournisseur" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">Aucune commande liée</SelectItem>
+                  {Array.isArray(finalFilteredOrders) && finalFilteredOrders.map((order) => (
+                    <SelectItem key={order.id} value={order.id.toString()}>
+                      #{order.id} - {order.supplier.name} - {safeFormat(order.plannedDate, 'dd/MM/yyyy')}
+                    </SelectItem>
+                  ))}
+                  {(!Array.isArray(finalFilteredOrders) || finalFilteredOrders.length === 0) && (
+                    <SelectItem value="disabled" disabled>
+                      Aucune commande disponible pour ce fournisseur
+                    </SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* Affichage du magasin sélectionné */}
+          {formData.groupId && (
+            <div>
+              <Label>Magasin/Groupe</Label>
+              <div className="flex items-center space-x-2 p-3 bg-gray-50 rounded-md border">
+                {(() => {
+                  const selectedGroup = groups.find(g => g.id.toString() === formData.groupId);
+                  return selectedGroup ? (
+                    <>
+                      <div 
+                        className="w-3 h-3 rounded-full" 
+                        style={{ backgroundColor: selectedGroup.color }}
+                      />
+                      <span className="font-medium">{selectedGroup.name}</span>
+                    </>
+                  ) : null;
+                })()}
+              </div>
+            </div>
+          )}
+
+          <div>
+            <Label htmlFor="scheduledDate">Date prévue *</Label>
+            <Input
+              id="scheduledDate"
+              type="date"
+              value={formData.scheduledDate}
+              onChange={(e) => handleChange('scheduledDate', e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="quantity">Quantité *</Label>
+              <Input
+                id="quantity"
+                type="number"
+                min="1"
+                value={formData.quantity}
+                onChange={(e) => handleChange('quantity', e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="unit">Unité</Label>
+              <Select value={formData.unit} onValueChange={(value) => handleChange('unit', value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="palettes">Palettes</SelectItem>
+                  <SelectItem value="colis">Colis</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="notes">Commentaires</Label>
+            <Textarea
+              id="notes"
+              value={formData.notes}
+              onChange={(e) => handleChange('notes', e.target.value)}
+              placeholder="Commentaires additionnels..."
+              rows={3}
+            />
+          </div>
+
+          <div className="flex items-center space-x-3 pt-4">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Annuler
+            </Button>
+            <Button 
+              type="submit" 
+              disabled={createDeliveryMutation.isPending}
+              className="bg-secondary hover:bg-green-700"
+            >
+              {createDeliveryMutation.isPending ? "Création..." : "Créer la livraison"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/modals/CreateOrderModal.tsx

@@ -0,0 +1,261 @@
+import { useState, useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
+import { useStore } from "@/components/Layout";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { isUnauthorizedError } from "@/lib/authUtils";
+import { format } from "date-fns";
+import type { Group, Supplier } from "@shared/schema";
+
+interface CreateOrderModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedDate: Date | null;
+}
+
+export default function CreateOrderModal({
+  isOpen,
+  onClose,
+  selectedDate,
+}: CreateOrderModalProps) {
+  const { user } = useAuthUnified();
+  const { selectedStoreId } = useStore();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [formData, setFormData] = useState({
+    supplierId: "",
+    groupId: "",
+    plannedDate: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : "",
+    notes: "",
+  });
+
+  const { data: suppliers = [] } = useQuery<Supplier[]>({
+    queryKey: ['/api/suppliers'],
+    enabled: user?.role === 'admin' || user?.role === 'manager',
+  });
+
+  const { data: groupsData = [] } = useQuery<Group[]>({
+    queryKey: ['/api/groups'],
+  });
+  
+  // Filtrer les groupes selon le magasin sélectionné pour les admins
+  const groups = Array.isArray(groupsData) ? (
+    user?.role === 'admin' && selectedStoreId 
+      ? groupsData.filter(g => g.id === selectedStoreId)
+      : groupsData
+  ) : [];
+
+  // Auto-sélectionner le magasin selon les règles
+  useEffect(() => {
+    console.log('🏪 CreateOrderModal - Store selection effect:', {
+      groupsLength: groups.length,
+      currentFormGroupId: formData.groupId,
+      selectedStoreId,
+      userRole: user?.role,
+      allGroups: groups.map(g => ({ id: g.id, name: g.name })),
+      filteredGroups: groups.length
+    });
+    
+    // Reset le formulaire si le magasin sélectionné change
+    if (user?.role === 'admin' && selectedStoreId && formData.groupId && formData.groupId !== selectedStoreId.toString()) {
+      console.log('🔄 Resetting form because store changed:', { 
+        currentGroupId: formData.groupId, 
+        newStoreId: selectedStoreId.toString() 
+      });
+      setFormData(prev => ({ ...prev, groupId: "" }));
+      return;
+    }
+    
+    if (groups.length > 0 && !formData.groupId) {
+      let defaultGroupId = "";
+      
+      if (user?.role === 'admin') {
+        // Pour l'admin : utiliser le magasin sélectionné dans le header (filtré), sinon le premier de la liste
+        if (selectedStoreId && groups.find(g => g.id === selectedStoreId)) {
+          defaultGroupId = selectedStoreId.toString();
+        } else {
+          defaultGroupId = groups[0].id.toString();
+        }
+        console.log('🏪 Admin store selection:', { 
+          selectedStoreId, 
+          defaultGroupId, 
+          firstGroupId: groups[0].id,
+          groupsAvailable: groups.map(g => g.name)
+        });
+      } else {
+        // Pour les autres rôles : prendre le premier magasin attribué
+        defaultGroupId = groups[0].id.toString();
+        console.log('🏪 Non-admin store selection:', { defaultGroupId, firstGroupId: groups[0].id });
+      }
+      
+      if (defaultGroupId) {
+        console.log('🏪 Setting default group ID:', defaultGroupId, 'for group:', groups.find(g => g.id.toString() === defaultGroupId)?.name);
+        setFormData(prev => ({ ...prev, groupId: defaultGroupId }));
+      }
+    }
+  }, [groups, selectedStoreId, user?.role, formData.groupId]);
+
+  const createOrderMutation = useMutation({
+    mutationFn: async (data: any) => {
+      console.log('🚀 Creating order with data:', data);
+      const response = await apiRequest("/api/orders", "POST", data);
+      console.log('✅ Order created successfully:', response);
+      return response;
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Commande créée avec succès",
+      });
+      // Force un nettoyage complet du cache pour éviter incohérences
+      console.log('🆕 Order created, clearing cache for consistency');
+      
+      // Invalider toutes les variantes de queryKey pour assurer cohérence
+      queryClient.invalidateQueries({ predicate: (query) => {
+        const key = query.queryKey;
+        return key[0]?.toString().includes('/api/orders') || 
+               key[0]?.toString().includes('/api/deliveries') || 
+               key[0]?.toString().includes('/api/stats/monthly');
+      }});
+      
+      onClose();
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        toast({
+          title: "Non autorisé",
+          description: "Vous êtes déconnecté. Reconnexion...",
+          variant: "destructive",
+        });
+        setTimeout(() => {
+          window.location.href = "/api/login";
+        }, 500);
+        return;
+      }
+      toast({
+        title: "Erreur",
+        description: "Impossible de créer la commande",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!formData.supplierId || !formData.groupId || !formData.plannedDate) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    createOrderMutation.mutate({
+      supplierId: parseInt(formData.supplierId),
+      groupId: parseInt(formData.groupId),
+      plannedDate: formData.plannedDate,
+      notes: formData.notes || undefined,
+    });
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="order-modal-description">
+        <DialogHeader>
+          <DialogTitle>Nouvelle Commande</DialogTitle>
+          <p id="order-modal-description" className="text-sm text-gray-600 mt-1">
+            Créer une nouvelle commande pour un fournisseur
+          </p>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="supplier">Fournisseur *</Label>
+            <Select value={formData.supplierId} onValueChange={(value) => handleChange('supplierId', value)}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionnez un fournisseur" />
+              </SelectTrigger>
+              <SelectContent>
+                {suppliers.map((supplier) => (
+                  <SelectItem key={supplier.id} value={supplier.id.toString()}>
+                    {supplier.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Affichage du magasin sélectionné */}
+          {formData.groupId && (
+            <div>
+              <Label>Magasin/Groupe</Label>
+              <div className="flex items-center space-x-2 p-3 bg-gray-50 rounded-md border">
+                {(() => {
+                  const selectedGroup = groups.find(g => g.id.toString() === formData.groupId);
+                  return selectedGroup ? (
+                    <>
+                      <div 
+                        className="w-3 h-3 rounded-full" 
+                        style={{ backgroundColor: selectedGroup.color }}
+                      />
+                      <span className="font-medium">{selectedGroup.name}</span>
+                    </>
+                  ) : null;
+                })()}
+              </div>
+            </div>
+          )}
+
+          <div>
+            <Label htmlFor="plannedDate">Date prévue *</Label>
+            <Input
+              id="plannedDate"
+              type="date"
+              value={formData.plannedDate}
+              onChange={(e) => handleChange('plannedDate', e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="notes">Commentaires</Label>
+            <Textarea
+              id="notes"
+              value={formData.notes}
+              onChange={(e) => handleChange('notes', e.target.value)}
+              placeholder="Commentaires additionnels..."
+              rows={3}
+            />
+          </div>
+
+          <div className="flex items-center space-x-3 pt-4">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Annuler
+            </Button>
+            <Button 
+              type="submit" 
+              disabled={createOrderMutation.isPending}
+              className="bg-primary hover:bg-blue-700"
+            >
+              {createOrderMutation.isPending ? "Création..." : "Créer la commande"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/modals/EditDeliveryModal.tsx

@@ -0,0 +1,270 @@
+import { useState, useEffect } from "react";
+import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { isUnauthorizedError } from "@/lib/authUtils";
+import { format } from "date-fns";
+import { safeFormat } from "@/lib/dateUtils";
+import type { Group, Supplier, DeliveryWithRelations, OrderWithRelations } from "@shared/schema";
+
+interface EditDeliveryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  delivery: DeliveryWithRelations | null;
+}
+
+export default function EditDeliveryModal({
+  isOpen,
+  onClose,
+  delivery,
+}: EditDeliveryModalProps) {
+  const { user } = useAuthUnified();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [formData, setFormData] = useState({
+    supplierId: "",
+    groupId: "",
+    orderId: "",
+    scheduledDate: "",
+    quantity: "",
+    unit: "palettes",
+    notes: "",
+  });
+
+  const { data: suppliers = [] } = useQuery<Supplier[]>({
+    queryKey: ['/api/suppliers'],
+    enabled: user?.role === 'admin' || user?.role === 'manager',
+  });
+
+  const { data: groups = [] } = useQuery<Group[]>({
+    queryKey: ['/api/groups'],
+  });
+
+  const { data: allOrders = [] } = useQuery<OrderWithRelations[]>({
+    queryKey: ['/api/orders'],
+  });
+
+  // Filtrer les commandes par fournisseur sélectionné - montrer toutes les commandes non livrées
+  const availableOrders = allOrders.filter(order => 
+    formData.supplierId ? (order.supplierId === parseInt(formData.supplierId) && order.status !== 'delivered') : false
+  );
+
+  // Initialiser le formulaire avec les données de la livraison
+  useEffect(() => {
+    if (delivery) {
+      setFormData({
+        supplierId: delivery.supplierId.toString(),
+        groupId: delivery.groupId.toString(),
+        orderId: delivery.orderId ? delivery.orderId.toString() : "none",
+        scheduledDate: safeFormat(delivery.scheduledDate, 'yyyy-MM-dd'),
+        quantity: delivery.quantity.toString(),
+        unit: delivery.unit,
+        notes: delivery.notes || "",
+      });
+    }
+  }, [delivery]);
+
+  const updateDeliveryMutation = useMutation({
+    mutationFn: async (data: any) => {
+      await apiRequest(`/api/deliveries/${delivery?.id}`, "PUT", data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Livraison modifiée avec succès",
+      });
+      // Invalider tous les caches liés aux livraisons
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/orders'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/stats/monthly'] });
+      onClose();
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        toast({
+          title: "Non autorisé",
+          description: "Vous êtes déconnecté. Reconnexion...",
+          variant: "destructive",
+        });
+        setTimeout(() => {
+          window.location.href = "/api/login";
+        }, 500);
+        return;
+      }
+      toast({
+        title: "Erreur",
+        description: "Impossible de modifier la livraison",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!formData.supplierId || !formData.groupId || !formData.scheduledDate || !formData.quantity) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    updateDeliveryMutation.mutate({
+      supplierId: parseInt(formData.supplierId),
+      groupId: parseInt(formData.groupId),
+      orderId: formData.orderId && formData.orderId !== "none" ? parseInt(formData.orderId) : null,
+      scheduledDate: formData.scheduledDate,
+      quantity: parseInt(formData.quantity),
+      unit: formData.unit,
+      notes: formData.notes || undefined,
+    });
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  if (!delivery) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="edit-delivery-modal-description">
+        <DialogHeader>
+          <DialogTitle>Modifier la Livraison #{delivery.id}</DialogTitle>
+          <p id="edit-delivery-modal-description" className="text-sm text-gray-600 mt-1">
+            Modifier les détails de cette livraison
+          </p>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="supplier">Fournisseur *</Label>
+            <Select value={formData.supplierId} onValueChange={(value) => handleChange('supplierId', value)}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionnez un fournisseur" />
+              </SelectTrigger>
+              <SelectContent>
+                {suppliers.map((supplier) => (
+                  <SelectItem key={supplier.id} value={supplier.id.toString()}>
+                    {supplier.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label htmlFor="group">Magasin/Groupe *</Label>
+            <Select value={formData.groupId} onValueChange={(value) => handleChange('groupId', value)}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionnez un magasin" />
+              </SelectTrigger>
+              <SelectContent>
+                {groups.map((group) => (
+                  <SelectItem key={group.id} value={group.id.toString()}>
+                    <div className="flex items-center space-x-2">
+                      <div 
+                        className="w-3 h-3 rounded-full" 
+                        style={{ backgroundColor: group.color }}
+                      />
+                      <span>{group.name}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {availableOrders.length > 0 && (
+            <div>
+              <Label htmlFor="order">Commande liée (optionnel)</Label>
+              <Select value={formData.orderId} onValueChange={(value) => handleChange('orderId', value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Sélectionnez une commande" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">Aucune commande liée</SelectItem>
+                  {availableOrders.map((order) => (
+                    <SelectItem key={order.id} value={order.id.toString()}>
+                      Commande #{order.id} - {order.supplier.name} - {safeFormat(order.plannedDate, 'dd/MM/yyyy')}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div>
+            <Label htmlFor="scheduledDate">Date prévue *</Label>
+            <Input
+              id="scheduledDate"
+              type="date"
+              value={formData.scheduledDate}
+              onChange={(e) => handleChange('scheduledDate', e.target.value)}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="quantity">Quantité *</Label>
+              <Input
+                id="quantity"
+                type="number"
+                min="1"
+                value={formData.quantity}
+                onChange={(e) => handleChange('quantity', e.target.value)}
+                placeholder="Ex: 10"
+              />
+            </div>
+            <div>
+              <Label htmlFor="unit">Unité *</Label>
+              <Select value={formData.unit} onValueChange={(value) => handleChange('unit', value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="palettes">Palettes</SelectItem>
+                  <SelectItem value="colis">Colis</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="notes">Commentaires</Label>
+            <Textarea
+              id="notes"
+              placeholder="Commentaires optionnels..."
+              value={formData.notes}
+              onChange={(e) => handleChange('notes', e.target.value)}
+              rows={3}
+            />
+          </div>
+
+          <div className="flex justify-end space-x-2 pt-4">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Annuler
+            </Button>
+            <Button 
+              type="submit" 
+              disabled={updateDeliveryMutation.isPending}
+              className="bg-primary hover:bg-blue-700"
+            >
+              {updateDeliveryMutation.isPending ? "Modification..." : "Modifier"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/modals/EditOrderModal.tsx

@@ -0,0 +1,206 @@
+import { useState, useEffect } from "react";
+import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { isUnauthorizedError } from "@/lib/authUtils";
+import { format } from "date-fns";
+import { safeFormat } from "@/lib/dateUtils";
+import type { Group, Supplier, OrderWithRelations } from "@shared/schema";
+
+interface EditOrderModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  order: OrderWithRelations | null;
+}
+
+export default function EditOrderModal({
+  isOpen,
+  onClose,
+  order,
+}: EditOrderModalProps) {
+  const { user } = useAuthUnified();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [formData, setFormData] = useState({
+    supplierId: "",
+    groupId: "",
+    plannedDate: "",
+    notes: "",
+  });
+
+  const { data: suppliers = [] } = useQuery<Supplier[]>({
+    queryKey: ['/api/suppliers'],
+    enabled: user?.role === 'admin' || user?.role === 'manager',
+  });
+
+  const { data: groups = [] } = useQuery<Group[]>({
+    queryKey: ['/api/groups'],
+  });
+
+  // Initialiser le formulaire avec les données de la commande
+  useEffect(() => {
+    if (order) {
+      setFormData({
+        supplierId: order.supplierId.toString(),
+        groupId: order.groupId.toString(),
+        plannedDate: safeFormat(order.plannedDate, 'yyyy-MM-dd'),
+        notes: order.notes || "",
+      });
+    }
+  }, [order]);
+
+  const updateOrderMutation = useMutation({
+    mutationFn: async (data: any) => {
+      await apiRequest("PUT", `/api/orders/${order?.id}`, data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Commande modifiée avec succès",
+      });
+      // Invalider tous les caches liés aux commandes
+      queryClient.invalidateQueries({ queryKey: ['/api/orders'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/stats/monthly'] });
+      onClose();
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        toast({
+          title: "Non autorisé",
+          description: "Vous êtes déconnecté. Reconnexion...",
+          variant: "destructive",
+        });
+        setTimeout(() => {
+          window.location.href = "/api/login";
+        }, 500);
+        return;
+      }
+      toast({
+        title: "Erreur",
+        description: "Impossible de modifier la commande",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!formData.supplierId || !formData.groupId || !formData.plannedDate) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    updateOrderMutation.mutate({
+      supplierId: parseInt(formData.supplierId),
+      groupId: parseInt(formData.groupId),
+      plannedDate: formData.plannedDate,
+      notes: formData.notes || undefined,
+    });
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  if (!order) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="edit-order-modal-description">
+        <DialogHeader>
+          <DialogTitle>Modifier la Commande #{order.id}</DialogTitle>
+          <p id="edit-order-modal-description" className="text-sm text-gray-600 mt-1">
+            Modifier les détails de cette commande
+          </p>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="supplier">Fournisseur *</Label>
+            <Select value={formData.supplierId} onValueChange={(value) => handleChange('supplierId', value)}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionnez un fournisseur" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.isArray(suppliers) && suppliers.map((supplier) => (
+                  <SelectItem key={supplier.id} value={supplier.id.toString()}>
+                    {supplier.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label htmlFor="group">Magasin/Groupe *</Label>
+            <Select value={formData.groupId} onValueChange={(value) => handleChange('groupId', value)}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionnez un magasin" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.isArray(groups) && groups.map((group) => (
+                  <SelectItem key={group.id} value={group.id.toString()}>
+                    <div className="flex items-center space-x-2">
+                      <div 
+                        className="w-3 h-3 rounded-full" 
+                        style={{ backgroundColor: group.color }}
+                      />
+                      <span>{group.name}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label htmlFor="plannedDate">Date prévue *</Label>
+            <Input
+              id="plannedDate"
+              type="date"
+              value={formData.plannedDate}
+              onChange={(e) => handleChange('plannedDate', e.target.value)}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="notes">Commentaires</Label>
+            <Textarea
+              id="notes"
+              placeholder="Commentaires optionnels..."
+              value={formData.notes}
+              onChange={(e) => handleChange('notes', e.target.value)}
+              rows={3}
+            />
+          </div>
+
+          <div className="flex justify-end space-x-2 pt-4">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Annuler
+            </Button>
+            <Button 
+              type="submit" 
+              disabled={updateOrderMutation.isPending}
+              className="bg-primary hover:bg-blue-700"
+            >
+              {updateOrderMutation.isPending ? "Modification..." : "Modifier"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/modals/OrderDetailModal.tsx

@@ -0,0 +1,424 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { isUnauthorizedError } from "@/lib/authUtils";
+import { safeFormat } from "@/lib/dateUtils";
+import EditOrderModal from "./EditOrderModal";
+import EditDeliveryModal from "./EditDeliveryModal";
+import ValidateDeliveryModal from "./ValidateDeliveryModal";
+import { Package, Truck, Edit, Trash2, Check, X } from "lucide-react";
+
+interface OrderDetailModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  item: any;
+}
+
+export default function OrderDetailModal({
+  isOpen,
+  onClose,
+  item,
+}: OrderDetailModalProps) {
+  const { user } = useAuthUnified();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+
+  const isOrder = item?.type === 'order';
+  const isDelivery = item?.type === 'delivery';
+
+  const validateDeliveryMutation = useMutation({
+    mutationFn: async (data: { id: number; blNumber: string; blAmount: number }) => {
+      await apiRequest(`/api/deliveries/${data.id}/validate`, "POST", data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Livraison validée avec succès",
+      });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/orders'] });
+      onClose();
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        toast({
+          title: "Non autorisé",
+          description: "Vous êtes déconnecté. Reconnexion...",
+          variant: "destructive",
+        });
+        setTimeout(() => {
+          window.location.href = "/api/login";
+        }, 500);
+        return;
+      }
+      toast({
+        title: "Erreur",
+        description: "Impossible de valider la livraison",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: number) => {
+      const endpoint = isOrder ? `/api/orders/${id}` : `/api/deliveries/${id}`;
+      console.log(`🗑️ Deleting ${isOrder ? 'order' : 'delivery'}:`, id);
+      await apiRequest(endpoint, "DELETE");
+    },
+    onSuccess: () => {
+      console.log(`✅ ${isOrder ? 'Order' : 'Delivery'} deleted successfully, clearing cache...`);
+      toast({
+        title: "Succès",
+        description: `${isOrder ? 'Commande' : 'Livraison'} supprimée avec succès`,
+      });
+      
+      // SOLUTION PRODUCTION : Cache clearing radical pour éviter incohérences storeId
+      console.log('🗑️ Cache cleared, forcing page reload to maintain storeId consistency...');
+      
+      // SOLUTION HYBRIDE : Invalidation sélective pour éviter perte storeId
+      console.log('🧹 Using selective invalidation to preserve storeId context...');
+      
+      // Invalidation ciblée sans clear() pour préserver le contexte
+      queryClient.invalidateQueries({
+        predicate: (query) => {
+          const key = query.queryKey[0]?.toString() || '';
+          return key.includes('/api/orders') || key.includes('/api/deliveries');
+        }
+      });
+      
+      // Force refetch pour garantir synchronisation immédiate
+      queryClient.refetchQueries({
+        predicate: (query) => {
+          const key = query.queryKey[0]?.toString() || '';
+          return key.includes('/api/orders') || key.includes('/api/deliveries');
+        }
+      });
+      
+      onClose();
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        toast({
+          title: "Non autorisé",
+          description: "Vous êtes déconnecté. Reconnexion...",
+          variant: "destructive",
+        });
+        setTimeout(() => {
+          window.location.href = "/api/login";
+        }, 500);
+        return;
+      }
+      toast({
+        title: "Erreur",
+        description: `Impossible de supprimer la ${isOrder ? 'commande' : 'livraison'}`,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const [showValidateModal, setShowValidateModal] = useState(false);
+
+  const handleValidateDelivery = () => {
+    setShowValidateModal(true);
+  };
+
+  const handleDelete = () => {
+    if (item.id) {
+      deleteMutation.mutate(item.id);
+    }
+  };
+
+  const handleEdit = () => {
+    setShowEditModal(true);
+  };
+
+  const canEdit = user?.role === 'admin' || user?.role === 'manager';
+  const canDelete = user?.role === 'admin' || user?.role === 'manager';
+  const canValidate = (user?.role === 'admin' || user?.role === 'manager') && 
+                     isDelivery && item.status !== 'delivered';
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return <Badge variant="secondary">En attente</Badge>;
+      case 'planned':
+        return <Badge className="bg-blue-100 text-blue-800">Planifié</Badge>;
+      case 'delivered':
+        return <Badge className="bg-green-100 text-green-800">Livré</Badge>;
+      default:
+        return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const formatQuantity = (quantity: number, unit: string) => {
+    return `${quantity} ${unit === 'palettes' ? 'Palettes' : 'Colis'}`;
+  };
+
+  if (!item) return null;
+
+  return (
+    <>
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-hidden" aria-describedby="order-detail-modal-description">
+        {/* Header */}
+        <div className="bg-gradient-to-r from-primary to-blue-600 text-white p-6 -m-6 mb-4">
+          <DialogHeader>
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
+                {isOrder ? (
+                  <Package className="w-5 h-5 text-white" />
+                ) : (
+                  <Truck className="w-5 h-5 text-white" />
+                )}
+              </div>
+              <div>
+                <DialogTitle className="text-xl font-bold">
+                  Détails de la {isOrder ? 'Commande' : 'Livraison'}
+                </DialogTitle>
+                <p className="text-blue-100">
+                  #{isOrder ? 'CMD' : 'LIV'}-{item.id}
+                </p>
+                <p id="order-detail-modal-description" className="sr-only">
+                  Affichage détaillé de {isOrder ? 'la commande' : 'la livraison'} avec options de gestion
+                </p>
+              </div>
+            </div>
+          </DialogHeader>
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto max-h-96">
+          {/* Status */}
+          <div className="mb-6">
+            {getStatusBadge(item.status)}
+          </div>
+
+          {/* Information Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Left Column */}
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Fournisseur
+                </label>
+                <p className="text-gray-900 font-medium">{item.supplier?.name}</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Date prévue
+                </label>
+                <p className="text-gray-900">
+                  {safeFormat(isDelivery ? item.scheduledDate : item.plannedDate, 'dd MMMM yyyy')}
+                </p>
+              </div>
+              {/* Afficher la quantité seulement pour les livraisons */}
+              {isDelivery && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Quantité
+                  </label>
+                  <Badge variant="outline" className="text-sm">
+                    {formatQuantity(item.quantity, item.unit)}
+                  </Badge>
+                </div>
+              )}
+            </div>
+
+            {/* Right Column */}
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Magasin/Groupe
+                </label>
+                <div className="flex items-center space-x-2">
+                  <div 
+                    className="w-3 h-3 rounded-full" 
+                    style={{ backgroundColor: item.group?.color }}
+                  />
+                  <span className="text-gray-900">{item.group?.name}</span>
+                </div>
+              </div>
+              {item.deliveredDate && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Date de livraison
+                  </label>
+                  <p className="text-gray-900">
+                    {safeFormat(item.deliveredDate, 'dd MMMM yyyy, HH:mm')}
+                  </p>
+                </div>
+              )}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Créé par
+                </label>
+                <p className="text-gray-900">
+                  {item.creator?.firstName} {item.creator?.lastName}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Comments */}
+          {item.notes && (
+            <div className="mt-6">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Commentaires
+              </label>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <p className="text-gray-700">{item.notes}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Linked Items */}
+          {isOrder && item.deliveries && item.deliveries.length > 0 && (
+            <div className="mt-6">
+              <label className="block text-sm font-medium text-gray-700 mb-3">
+                Livraisons associées
+              </label>
+              <div className="space-y-2">
+                {item.deliveries.map((delivery: any) => (
+                  <div key={delivery.id} className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
+                    <div className="flex items-center space-x-3">
+                      <Truck className="w-4 h-4 text-secondary" />
+                      <div>
+                        <p className="font-medium text-gray-900">#LIV-{delivery.id}</p>
+                        <p className="text-sm text-gray-600">
+                          {safeFormat(delivery.plannedDate, 'dd MMMM yyyy')}
+                        </p>
+                      </div>
+                    </div>
+                    {getStatusBadge(delivery.status)}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {isDelivery && item.order && (
+            <div className="mt-6">
+              <label className="block text-sm font-medium text-gray-700 mb-3">
+                Commande associée
+              </label>
+              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-200">
+                <div className="flex items-center space-x-3">
+                  <Package className="w-4 h-4 text-primary" />
+                  <div>
+                    <p className="font-medium text-gray-900">#CMD-{item.order.id}</p>
+                    <p className="text-sm text-gray-600">
+                      {safeFormat(item.order.plannedDate, 'dd MMMM yyyy')}
+                    </p>
+                  </div>
+                </div>
+                {getStatusBadge(item.order.status)}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="bg-gray-50 p-4 -m-6 mt-4 border-t border-gray-200 flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            {canDelete && (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => setShowDeleteConfirm(true)}
+                disabled={deleteMutation.isPending}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Supprimer
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center space-x-3">
+            <Button variant="outline" onClick={onClose}>
+              Fermer
+            </Button>
+            {canEdit && (
+              <Button onClick={handleEdit}>
+                <Edit className="w-4 h-4 mr-2" />
+                Modifier
+              </Button>
+            )}
+            {canValidate && (
+              <Button
+                onClick={handleValidateDelivery}
+                className="bg-secondary hover:bg-green-700"
+              >
+                <Check className="w-4 h-4 mr-2" />
+                Valider livraison
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Delete Confirmation */}
+        {showDeleteConfirm && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white rounded-lg p-6 max-w-md mx-4">
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                Confirmer la suppression
+              </h3>
+              <p className="text-gray-600 mb-4">
+                Êtes-vous sûr de vouloir supprimer cette {isOrder ? 'commande' : 'livraison'} ? 
+                Cette action est irréversible.
+              </p>
+              <div className="flex items-center space-x-3">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowDeleteConfirm(false)}
+                >
+                  Annuler
+                </Button>
+                <Button
+                  variant="destructive"
+                  onClick={handleDelete}
+                  disabled={deleteMutation.isPending}
+                >
+                  Supprimer
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+
+    {/* Edit Modals */}
+    {showEditModal && isOrder && (
+      <EditOrderModal
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+        order={item}
+      />
+    )}
+
+    {showEditModal && isDelivery && (
+      <EditDeliveryModal
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+        delivery={item}
+      />
+    )}
+
+    {/* Validate Delivery Modal */}
+    {showValidateModal && isDelivery && (
+      <ValidateDeliveryModal
+        isOpen={showValidateModal}
+        onClose={() => setShowValidateModal(false)}
+        delivery={item}
+        onValidated={onClose} // Fermer le modal de détail après validation
+      />
+    )}
+    </>
+  );
+}

client/src/components/modals/QuickCreateMenu.tsx

@@ -0,0 +1,59 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Package, Truck } from "lucide-react";
+
+interface QuickCreateMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateOrder: () => void;
+  onCreateDelivery: () => void;
+}
+
+export default function QuickCreateMenu({
+  isOpen,
+  onClose,
+  onCreateOrder,
+  onCreateDelivery,
+}: QuickCreateMenuProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="quick-create-modal-description">
+        <DialogHeader>
+          <DialogTitle>Création rapide</DialogTitle>
+          <p id="quick-create-modal-description" className="text-sm text-gray-600 mt-1">
+            Choisir le type d'élément à créer
+          </p>
+        </DialogHeader>
+        <div className="space-y-3">
+          <Button
+            variant="outline"
+            className="w-full justify-start space-x-3 p-4 h-auto hover:bg-blue-50 hover:border-blue-300"
+            onClick={onCreateOrder}
+          >
+            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+              <Package className="w-5 h-5 text-white" />
+            </div>
+            <div className="text-left">
+              <p className="font-medium text-gray-900">Nouvelle Commande</p>
+              <p className="text-sm text-gray-600">Créer une commande fournisseur</p>
+            </div>
+          </Button>
+          
+          <Button
+            variant="outline"
+            className="w-full justify-start space-x-3 p-4 h-auto hover:bg-green-50 hover:border-green-300"
+            onClick={onCreateDelivery}
+          >
+            <div className="w-10 h-10 bg-secondary rounded-lg flex items-center justify-center">
+              <Truck className="w-5 h-5 text-white" />
+            </div>
+            <div className="text-left">
+              <p className="font-medium text-gray-900">Nouvelle Livraison</p>
+              <p className="text-sm text-gray-600">Planifier une livraison</p>
+            </div>
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/modals/ValidateDeliveryModal.tsx

@@ -0,0 +1,194 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { isUnauthorizedError } from "@/lib/authUtils";
+import { Check, X } from "lucide-react";
+
+const validateDeliverySchema = z.object({
+  blNumber: z.string().min(1, "Le numéro de BL est obligatoire"),
+  blAmount: z.string().optional(),
+});
+
+type ValidateDeliveryForm = z.infer<typeof validateDeliverySchema>;
+
+interface ValidateDeliveryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  delivery: any;
+  onValidated?: () => void; // Callback pour fermer le modal parent
+}
+
+export default function ValidateDeliveryModal({
+  isOpen,
+  onClose,
+  delivery,
+  onValidated,
+}: ValidateDeliveryModalProps) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const form = useForm<ValidateDeliveryForm>({
+    resolver: zodResolver(validateDeliverySchema),
+    defaultValues: {
+      blNumber: "",
+      blAmount: "",
+    },
+  });
+
+  const validateDeliveryMutation = useMutation({
+    mutationFn: async (data: ValidateDeliveryForm) => {
+      const payload: any = {
+        blNumber: data.blNumber,
+      };
+      
+      if (data.blAmount && data.blAmount.trim() !== '') {
+        payload.blAmount = parseFloat(data.blAmount);
+      }
+      
+      await apiRequest(`/api/deliveries/${delivery.id}/validate`, "POST", payload);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Livraison validée avec succès",
+      });
+      // Invalider tous les caches liés aux livraisons
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      // Invalider tous les caches BL/Rapprochement avec toutes les variations de clés
+      queryClient.invalidateQueries({ 
+        predicate: (query) => 
+          query.queryKey[0] === '/api/deliveries/bl' || 
+          query.queryKey[0] === '/api/deliveries'
+      });
+      queryClient.invalidateQueries({ queryKey: ['/api/orders'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/stats/monthly'] });
+      form.reset();
+      onClose();
+      // Fermer aussi le modal parent si fourni
+      if (onValidated) {
+        onValidated();
+      }
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        toast({
+          title: "Non autorisé",
+          description: "Vous êtes déconnecté. Reconnexion...",
+          variant: "destructive",
+        });
+        setTimeout(() => {
+          window.location.href = "/api/login";
+        }, 500);
+        return;
+      }
+      toast({
+        title: "Erreur",
+        description: "Impossible de valider la livraison",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const onSubmit = (data: ValidateDeliveryForm) => {
+    validateDeliveryMutation.mutate(data);
+  };
+
+  if (!delivery) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="validate-delivery-modal-description">
+        <DialogHeader>
+          <DialogTitle className="flex items-center space-x-2">
+            <Check className="w-5 h-5 text-green-600" />
+            <span>Valider la livraison</span>
+          </DialogTitle>
+          <p id="validate-delivery-modal-description" className="text-sm text-gray-600 mt-1">
+            Saisir les informations du bon de livraison
+          </p>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Informations de la livraison */}
+            <div className="bg-gray-50 rounded-lg p-4 space-y-2">
+              <h4 className="font-medium text-gray-900">Détails de la livraison</h4>
+              <div className="text-sm text-gray-600">
+                <p><strong>Fournisseur:</strong> {delivery.supplier?.name}</p>
+                <p><strong>Magasin:</strong> {delivery.group?.name}</p>
+                <p><strong>Quantité:</strong> {delivery.quantity} {delivery.unit === 'palettes' ? 'Palettes' : 'Colis'}</p>
+              </div>
+            </div>
+
+            {/* Numéro de BL */}
+            <FormField
+              control={form.control}
+              name="blNumber"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>N° Bon de Livraison *</FormLabel>
+                  <FormControl>
+                    <Input 
+                      placeholder="Ex: BL-2024-001"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Montant BL */}
+            <FormField
+              control={form.control}
+              name="blAmount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Montant BL (€) - Optionnel</FormLabel>
+                  <FormControl>
+                    <Input 
+                      type="number"
+                      step="0.01"
+                      placeholder="Ex: 1200.00 (à remplir plus tard si nécessaire)"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Actions */}
+            <div className="flex justify-end space-x-3 pt-4">
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={onClose}
+                disabled={validateDeliveryMutation.isPending}
+              >
+                <X className="w-4 h-4 mr-2" />
+                Annuler
+              </Button>
+              <Button 
+                type="submit"
+                disabled={validateDeliveryMutation.isPending}
+                className="bg-green-600 hover:bg-green-700"
+              >
+                <Check className="w-4 h-4 mr-2" />
+                {validateDeliveryMutation.isPending ? "Validation..." : "Valider livraison"}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}