perf(client): pages chargées à la demande et un seul appel /api/user

- Routes en React.lazy (sauf connexion et accueil) avec un Suspense dans
  la zone de contenu ; recharts n'est plus préchargé. JS initial :
  1,72 Mo -> 625 Ko (183 Ko gzip). Rechargement automatique unique si un
  ancien fichier JS a disparu après un déploiement, et ErrorBoundary par
  page pour garder le menu affiché en cas d'erreur.
- Authentification unifiée sur le cache React Query ['/api/user'] : un
  seul GET /api/user pour toute l'application (au lieu de 4 à 5 par
  page), plus de rechargement complet après la connexion.
- Pas de nouvel essai sur les erreurs 4xx ; fournisseurs et magasins en
  cache 5 minutes ; valeur du StoreContext mémoïsée et redimensionnement
  qui ne re-rend que lorsque le palier d'écran change.
- Pages : requêtes inutilisées ou en double supprimées, appels lancés
  seulement une fois l'utilisateur connu, invalidations ciblées au lieu
  de rechargements complets, filtres et tris mémoïsés, anciennes données
  gardées (et estompées) pendant un changement de filtre ou de mois,
  recherche DLC mobile temporisée, vérifications de factures à
  concurrence bornée, navigation interne sans rechargement de la page.
- index.html : script de bannière Replit retiré, lang="fr".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MsDJjQrAggcJwbbBtKhgyb

client/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
@@ -15,7 +15,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
-    <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js"></script>
   </body>
 </html>

client/src/components/AnnouncementCard.tsx

@@ -49,7 +49,7 @@ import {
 import { useToast } from "@/hooks/use-toast";
 
 // Type pour les annonces avec relations
-type AnnouncementWithRelations = DashboardMessage & {
+export type AnnouncementWithRelations = DashboardMessage & {
   author: {
     id: string | number;
     firstName?: string;
@@ -97,6 +97,45 @@ const getPriorityConfig = (type: string) => {
   }
 };
 
+// Requête des annonces, partagée avec le tableau de bord (même clé, même URL) :
+// un seul appel réseau, et les invalidations ['/api/announcements'] des
+// mutations ci-dessous rafraîchissent les deux affichages.
+export function getAnnouncementsQueryOptions(selectedStoreId: number | null, role: string | undefined) {
+  return {
+    queryKey: ['/api/announcements', selectedStoreId, role],
+    queryFn: async (): Promise<AnnouncementWithRelations[]> => {
+      const params = new URLSearchParams();
+
+      // Pour les admins, permettre le filtrage par magasin sélectionné
+      if (role === 'admin' && selectedStoreId) {
+        params.append('storeId', selectedStoreId.toString());
+      }
+
+      const url = `/api/announcements${params.toString() ? `?${params.toString()}` : ''}`;
+      const response = await fetch(url, {
+        credentials: 'include'
+      });
+
+      if (!response.ok) {
+        console.error('❌ [ANNOUNCEMENTS] Fetch failed:', response.status, response.statusText);
+        if (response.status === 401) {
+          return [];
+        }
+        throw new Error(`Failed to fetch announcements: ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (!Array.isArray(data)) {
+        console.warn('⚠️ [ANNOUNCEMENTS] Data is not an array:', data);
+        return [];
+      }
+
+      return data;
+    },
+  };
+}
+
 export default function AnnouncementCard() {
   const { user } = useAuthUnified();
   const { selectedStoreId } = useStore();
@@ -117,48 +156,9 @@ export default function AnnouncementCard() {
     },
   });
 
-  // Construire l'URL avec les paramètres appropriés
-  const buildApiUrl = () => {
-    const params = new URLSearchParams();
-    
-    // Pour les admins, permettre le filtrage par magasin sélectionné
-    if (user?.role === 'admin' && selectedStoreId) {
-      params.append('storeId', selectedStoreId.toString());
-    }
-    
-    return `/api/announcements${params.toString() ? `?${params.toString()}` : ''}`;
-  };
-
   // Récupérer les annonces
-  const { data: announcements = [], isLoading } = useQuery<AnnouncementWithRelations[]>({
+  const { data: announcements = [], isLoading } = useQuery({
-    queryKey: ['/api/announcements', selectedStoreId, user?.role],
+    ...getAnnouncementsQueryOptions(selectedStoreId, user?.role),
-    queryFn: async () => {
-      const url = buildApiUrl();
-      console.log('🔍 [ANNOUNCEMENTS] Fetching from:', url);
-      
-      const response = await fetch(url, {
-        credentials: 'include'
-      });
-      
-      if (!response.ok) {
-        console.error('❌ [ANNOUNCEMENTS] Fetch failed:', response.status, response.statusText);
-        if (response.status === 401) {
-          console.log('🔑 [ANNOUNCEMENTS] Authentication required');
-          return [];
-        }
-        throw new Error(`Failed to fetch announcements: ${response.status}`);
-      }
-      
-      const data = await response.json();
-      console.log('✅ [ANNOUNCEMENTS] Data received:', data);
-      
-      if (!Array.isArray(data)) {
-        console.warn('⚠️ [ANNOUNCEMENTS] Data is not an array:', data);
-        return [];
-      }
-      
-      return data;
-    },
     enabled: !!user,
   });
 
@@ -171,8 +171,6 @@ export default function AnnouncementCard() {
       
       const method = editingAnnouncement ? 'PUT' : 'POST';
 
-      console.log(`🔍 [ANNOUNCEMENTS] ${method} ${url}`, announcementData);
-      
       const response = await fetch(url, {
         method,
         headers: { 'Content-Type': 'application/json' },
@@ -241,8 +239,6 @@ export default function AnnouncementCard() {
 
   // Soumission du formulaire
   const onSubmit = (data: InsertAnnouncement) => {
-    console.log('🔍 [ANNOUNCEMENTS] Form submitted:', data);
-    
     const announcementData = {
       ...data,
       createdBy: user?.username || '',

client/src/components/CalendarGrid.tsx

@@ -1,10 +1,9 @@
-import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, isToday } from "date-fns";
+import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday } from "date-fns";
-import { fr } from "date-fns/locale";
 import { safeDate } from "@/lib/dateUtils";
 import { Plus, Check, MoreHorizontal, Package, Link, MessageSquare } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { useState } from "react";
+import { memo, useMemo, useState } from "react";
 
 // Composant modal pour afficher les commentaires
 function CommentModal({ isOpen, onClose, comment }: { isOpen: boolean, onClose: () => void, comment: string }) {
@@ -353,7 +352,10 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
   );
 }
 
-export default function CalendarGrid({
+// Liste vide partagée pour les jours sans élément (référence stable)
+const NO_ITEMS: any[] = [];
+
+function CalendarGrid({
   currentDate,
   orders,
   deliveries,
@@ -363,102 +365,11 @@ export default function CalendarGrid({
   onDateClick,
   onItemClick,
 }: CalendarGridProps) {
-  if (import.meta.env.DEV) {
+  // Jours affichés : 6 semaines complètes commençant un lundi
-    console.log('🗓️ CalendarGrid rendered with:', {
+  const paddedDays = useMemo(() => {
-      currentDate: currentDate?.toISOString(),
-      ordersCount: orders?.length || 0,
-      deliveriesCount: deliveries?.length || 0,
-      publicitiesCount: publicities?.length || 0,
-      selectedStoreId,
-      userGroupsCount: userGroups?.length || 0
-    });
-  }
     const monthStart = startOfMonth(currentDate);
     const monthEnd = endOfMonth(currentDate);
 
-  // Helper function to filter publicities based on user's assigned stores
-  const getPublicitiesForDate = (date: Date) => {
-    const dateStr = format(date, 'yyyy-MM-dd');
-    
-    // Protection contre les données invalides qui causent des plantages en production
-    if (!publicities || !Array.isArray(publicities)) {
-      console.warn('⚠️ Invalid publicities data:', publicities);
-      return [];
-    }
-    
-    if (import.meta.env.DEV) {
-      console.log('🔍 CalendarGrid getPublicitiesForDate:', {
-        date: dateStr,
-        totalPublicities: publicities.length,
-        selectedStoreId,
-        userGroups: userGroups?.length || 0
-      });
-    }
-    
-    try {
-      return publicities.filter(pub => {
-        // Vérifications de sécurité pour éviter les plantages
-        if (!pub || typeof pub !== 'object') {
-          console.warn('⚠️ Invalid publicity object:', pub);
-          return false;
-        }
-      // Check if the date is within the publicity period
-      const pubStart = pub.startDate;
-      const pubEnd = pub.endDate;
-      
-      if (!pubStart || !pubEnd) {
-        console.warn('⚠️ Publicity missing dates:', { pubNumber: pub.pubNumber, startDate: pubStart, endDate: pubEnd });
-        return false;
-      }
-      
-      if (dateStr < pubStart || dateStr > pubEnd) {
-        return false;
-      }
-
-      // If no store is selected and user has no assigned groups, show only publicities with participations
-      if (!selectedStoreId && (!userGroups || userGroups.length === 0)) {
-        const hasParticipations = pub.participations && Array.isArray(pub.participations) && pub.participations.length > 0;
-        if (hasParticipations && import.meta.env.DEV) {
-          console.log('📋 Publicity has participations (no store selected):', { pubNumber: pub.pubNumber, participationCount: pub.participations.length });
-        }
-        return hasParticipations;
-      }
-
-      // If a specific store is selected, check if that store participates
-      if (selectedStoreId) {
-        const matches = pub.participations && Array.isArray(pub.participations) && 
-                       pub.participations.some((pg: any) => pg?.groupId === selectedStoreId);
-        if (matches && import.meta.env.DEV) {
-          console.log('🎯 Publicity matches selected store:', { pubNumber: pub.pubNumber, selectedStoreId });
-        }
-        return matches;
-      }
-
-      // If no specific store selected but user has assigned stores, 
-      // show publicities where any of user's stores participate
-      if (userGroups && Array.isArray(userGroups) && userGroups.length > 0) {
-        const userGroupIds = userGroups.map((ug: any) => ug?.groupId).filter(id => id !== undefined);
-        const matches = pub.participations && Array.isArray(pub.participations) &&
-                       pub.participations.some((pg: any) => pg?.groupId && userGroupIds.includes(pg.groupId));
-        if (matches) {
-          console.log('👥 Publicity matches user groups:', { pubNumber: pub.pubNumber, userGroupIds });
-        }
-        return matches;
-      }
-
-      // Default case: only show publicities with participations
-      const hasParticipations = pub.participations && Array.isArray(pub.participations) && pub.participations.length > 0;
-      if (hasParticipations) {
-        console.log('📋 Publicity has participations (default case):', { pubNumber: pub.pubNumber, participationCount: pub.participations.length });
-      }
-      return hasParticipations;
-      });
-    } catch (error) {
-      console.error('❌ Error filtering publicities:', error);
-      return [];
-    }
-  };
-
     // Get all days in the month
     const monthDays = eachDayOfInterval({
       start: monthStart,
@@ -468,91 +379,143 @@ export default function CalendarGrid({
     // Pad the calendar to start on Monday
     const firstDayOfWeek = monthStart.getDay();
     const startPadding = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
-  const paddedDays = [];
+    const days: Date[] = [];
 
     // Add padding days from previous month
     for (let i = startPadding; i > 0; i--) {
       const paddingDate = new Date(monthStart);
       paddingDate.setDate(paddingDate.getDate() - i);
-    paddedDays.push(paddingDate);
+      days.push(paddingDate);
     }
 
     // Add current month days
-  paddedDays.push(...monthDays);
+    days.push(...monthDays);
 
     // Add padding days from next month to complete the grid
-  const remainingCells = 42 - paddedDays.length; // 6 weeks * 7 days
+    const remainingCells = 42 - days.length; // 6 weeks * 7 days
     for (let i = 1; i <= remainingCells; i++) {
       const paddingDate = new Date(monthEnd);
       paddingDate.setDate(paddingDate.getDate() + i);
-    paddedDays.push(paddingDate);
+      days.push(paddingDate);
     }
 
-  const weekDays = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
+    return days;
+  }, [currentDate]);
 
-  const getItemsForDate = (date: Date) => {
+  // Commandes et livraisons indexées par jour ('yyyy-MM-dd', heure locale comme
-    // Debug: Log des commandes reçues (seulement une fois)
+  // isSameDay) en une seule passe sur chaque liste, au lieu de filtrer toutes
-    if (orders.length > 0 && date.getDate() === 1) {
+  // les listes pour chacune des 42 cases à chaque rendu
-      console.log('📅 CalendarGrid Debug - Orders received:', orders.length);
+  const itemsByDay = useMemo(() => {
-      console.log('📅 First order structure:', orders[0]);
+    const index = new Map<string, { orders: OrderWithRelations[]; deliveries: DeliveryWithRelations[] }>();
-      console.log('📅 All orders dates:', orders.map(o => ({ id: o.id, plannedDate: o.plannedDate, supplier: o.supplier?.name })));
+    const getDayEntry = (key: string) => {
+      let entry = index.get(key);
+      if (!entry) {
+        entry = { orders: [], deliveries: [] };
+        index.set(key, entry);
       }
+      return entry;
+    };
+    let invalidCount = 0;
 
-    // Debug: Log des livraisons reçues (seulement une fois)
+    for (const order of orders) {
-    if (deliveries.length > 0 && date.getDate() === 1) {
-      console.log('🚛 CalendarGrid Debug - Deliveries received:', deliveries.length);
-      console.log('🚛 First delivery structure:', deliveries[0]);
-      console.log('🚛 All deliveries dates:', deliveries.map(d => ({ id: d.id, scheduledDate: d.scheduledDate, supplier: d.supplier?.name })));
-    }
-    
-    const dayOrders = orders.filter(order => {
       // Protection contre undefined/null
       if (!order || !order.supplier) {
-        console.warn('📅 Invalid order found:', order);
+        invalidCount++;
-        return false;
+        continue;
       }
-      
       // Essayer plusieurs champs de date possibles
       const orderDate = safeDate(order.plannedDate || order.createdAt);
-      const matches = orderDate && isSameDay(orderDate, date);
+      if (orderDate) {
-      
+        getDayEntry(format(orderDate, 'yyyy-MM-dd')).orders.push(order);
-      if (matches) {
+      }
-        console.log('📅 Order matches date:', {
-          orderId: order.id,
-          supplier: order.supplier?.name,
-          plannedDate: order.plannedDate,
-          matchingDate: format(date, 'yyyy-MM-dd')
-        });
     }
 
-      return matches;
+    for (const delivery of deliveries) {
-    });
-    
-    const dayDeliveries = deliveries.filter(delivery => {
       // Protection contre undefined/null
       if (!delivery || !delivery.supplier) {
-        console.warn('🚛 Invalid delivery found:', delivery);
+        invalidCount++;
+        continue;
+      }
+      // Essayer plusieurs champs de date possibles
+      const deliveryDate = safeDate(delivery.scheduledDate || delivery.deliveredDate || delivery.createdAt);
+      if (deliveryDate) {
+        getDayEntry(format(deliveryDate, 'yyyy-MM-dd')).deliveries.push(delivery);
+      }
+    }
+
+    if (invalidCount > 0) {
+      console.warn(`⚠️ CalendarGrid: ${invalidCount} élément(s) sans fournisseur ignoré(s)`);
+    }
+
+    return index;
+  }, [orders, deliveries]);
+
+  // Publicités par jour affiché : filtrage par magasin fait une seule fois,
+  // puis répartition sur les 42 jours selon la période de chaque publicité
+  const publicitiesByDay = useMemo(() => {
+    const byDay = new Map<string, any[]>();
+
+    // Protection contre les données invalides qui causent des plantages en production
+    if (!publicities || !Array.isArray(publicities)) {
+      console.warn('⚠️ Invalid publicities data:', publicities);
+      return byDay;
+    }
+
+    try {
+      let invalidCount = 0;
+      const storePublicities = publicities.filter(pub => {
+        // Vérifications de sécurité pour éviter les plantages
+        if (!pub || typeof pub !== 'object' || !pub.startDate || !pub.endDate) {
+          invalidCount++;
           return false;
         }
 
-      // Essayer plusieurs champs de date possibles
+        // If no store is selected and user has no assigned groups, show only publicities with participations
-      const deliveryDate = safeDate(delivery.scheduledDate || delivery.deliveredDate || delivery.createdAt);
+        if (!selectedStoreId && (!userGroups || userGroups.length === 0)) {
-      const matches = deliveryDate && isSameDay(deliveryDate, date);
+          return pub.participations && Array.isArray(pub.participations) && pub.participations.length > 0;
-      
-      if (matches) {
-        console.log('🚛 Delivery matches date:', {
-          deliveryId: delivery.id,
-          supplier: delivery.supplier?.name,
-          scheduledDate: delivery.scheduledDate,
-          matchingDate: format(date, 'yyyy-MM-dd')
-        });
         }
 
-      return matches;
+        // If a specific store is selected, check if that store participates
+        if (selectedStoreId) {
+          return pub.participations && Array.isArray(pub.participations) &&
+                 pub.participations.some((pg: any) => pg?.groupId === selectedStoreId);
+        }
+
+        // If no specific store selected but user has assigned stores,
+        // show publicities where any of user's stores participate
+        if (userGroups && Array.isArray(userGroups) && userGroups.length > 0) {
+          const userGroupIds = userGroups.map((ug: any) => ug?.groupId).filter(id => id !== undefined);
+          return pub.participations && Array.isArray(pub.participations) &&
+                 pub.participations.some((pg: any) => pg?.groupId && userGroupIds.includes(pg.groupId));
+        }
+
+        // Default case: only show publicities with participations
+        return pub.participations && Array.isArray(pub.participations) && pub.participations.length > 0;
       });
 
-    return { orders: dayOrders, deliveries: dayDeliveries };
+      if (invalidCount > 0) {
-  };
+        console.warn(`⚠️ CalendarGrid: ${invalidCount} publicité(s) invalide(s) ou sans dates ignorée(s)`);
+      }
+
+      if (storePublicities.length > 0) {
+        for (const date of paddedDays) {
+          const dateStr = format(date, 'yyyy-MM-dd');
+          // Check if the date is within the publicity period
+          const dayPublicities = storePublicities.filter(pub => !(dateStr < pub.startDate || dateStr > pub.endDate));
+          if (dayPublicities.length > 0) {
+            byDay.set(dateStr, dayPublicities);
+          }
+        }
+      }
+    } catch (error) {
+      console.error('❌ Error filtering publicities:', error);
+      byDay.clear();
+    }
+
+    return byDay;
+  }, [publicities, selectedStoreId, userGroups, paddedDays]);
+
+  const weekDays = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
 
   return (
     <div className="bg-white shadow-xl border-2 border-gray-300 overflow-hidden">
@@ -576,8 +539,11 @@ export default function CalendarGrid({
           const isCurrentMonth = isSameMonth(date, currentDate);
           const isTodayDate = isToday(date);
           const isWeekend = date.getDay() === 0 || date.getDay() === 6;
-          const { orders: dayOrders, deliveries: dayDeliveries } = getItemsForDate(date);
+          const dayKey = format(date, 'yyyy-MM-dd');
-          const dayPublicities = getPublicitiesForDate(date);
+          const dayItems = itemsByDay.get(dayKey);
+          const dayOrders = dayItems ? dayItems.orders : NO_ITEMS;
+          const dayDeliveries = dayItems ? dayItems.deliveries : NO_ITEMS;
+          const dayPublicities = publicitiesByDay.get(dayKey) || NO_ITEMS;
           
           return (
             <div
@@ -694,3 +660,6 @@ export default function CalendarGrid({
     </div>
   );
 }
+
+// Mémorisé : l'ouverture d'une modale dans la page Calendrier ne recalcule pas la grille
+export default memo(CalendarGrid);

client/src/components/DlcAlertModal.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useLocation } from "wouter";
 import {
   Dialog,
   DialogContent,
@@ -39,13 +40,9 @@ interface DlcAlertModalProps {
 export function DlcAlertModal({ isOpen, onClose, dlcStats, selectedStoreId }: DlcAlertModalProps) {
   const { toast } = useToast();
   const queryClient = useQueryClient();
+  const [, setLocation] = useLocation();
   const [snoozeUntil, setSnoozeUntil] = useState<Date | null>(null);
 
-  // Invalider les queries DLC quand le magasin change
-  useEffect(() => {
-    queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"] });
-  }, [selectedStoreId, queryClient]);
-
   // Fetch detailed DLC products for the modal
   const { data: expiredProducts = [] } = useQuery<DlcProduct[]>({
     queryKey: ["/api/dlc-products", "expires", selectedStoreId],
@@ -138,8 +135,10 @@ export function DlcAlertModal({ isOpen, onClose, dlcStats, selectedStoreId }: Dl
     markStockEpuiseMutation.mutate(productId);
   };
 
+  // Navigation interne : pas de rechargement complet de l'application
   const handleViewDlcModule = () => {
-    window.location.href = '/dlc';
+    setLocation('/dlc');
+    onClose();
   };
 
   return (

client/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState, useEffect } from "react";
+import { ReactNode, Suspense, useState, useEffect, useMemo, useRef } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useLocation } from "wouter";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -9,6 +9,7 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import { useScreenSize } from "@/hooks/use-screen-size";
 import { StoreProvider } from "@/contexts/StoreContext";
 import Sidebar from "./Sidebar";
+import ErrorBoundary from "./ErrorBoundary";
 import WeatherWidget from "./WeatherWidget";
 import DateWidget from "./DateWidget";
 import type { Group } from "@shared/schema";
@@ -18,6 +19,23 @@ interface LayoutProps {
   children: ReactNode;
 }
 
+// Tableau vide stable : évite de recréer la valeur du contexte magasin à chaque
+// rendu tant que /api/groups n'a pas répondu
+const EMPTY_STORES: Group[] = [];
+
+// Affiché dans la zone de contenu pendant le chargement du code d'une page
+// (le menu et l'en-tête restent visibles)
+function PageFallback() {
+  return (
+    <div className="flex items-center justify-center py-16">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+        <p className="text-gray-600">Chargement...</p>
+      </div>
+    </div>
+  );
+}
+
 export default function Layout({ children }: LayoutProps) {
   const { user } = useAuthUnified();
   const [location] = useLocation();
@@ -45,11 +63,35 @@ export default function Layout({ children }: LayoutProps) {
 
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
-  const { data: stores = [] } = useQuery<Group[]>({
+  const { data: stores = EMPTY_STORES } = useQuery<Group[]>({
     queryKey: ['/api/groups'],
     enabled: !!user,
   });
 
+  // Changement de magasin demandé dans le sélecteur : les données dépendantes du
+  // magasin sont invalidées après le rendu (effet ci-dessous) et non dans le
+  // gestionnaire. À ce moment les pages ont déjà basculé sur les clés du nouveau
+  // magasin : les requêtes de l'ancien magasin ne sont plus actives et ne sont
+  // donc plus rechargées pour rien, et cancelRefetch: false réutilise les
+  // requêtes du nouveau magasin déjà en cours. L'invalidation est conservée pour
+  // les requêtes dont la clé ne contient pas le magasin (ex. ['/api/orders'] des
+  // modales de livraison).
+  const storeChangePendingRef = useRef(false);
+
+  useEffect(() => {
+    if (!storeChangePendingRef.current) return;
+    storeChangePendingRef.current = false;
+    queryClient.invalidateQueries({
+      predicate: (query) => {
+        const key = query.queryKey;
+        return Boolean(key[0]?.toString().includes('/api/orders') ||
+          key[0]?.toString().includes('/api/deliveries') ||
+          key[0]?.toString().includes('/api/stats/monthly') ||
+          key[0]?.toString().includes('/api/tasks'));
+      }
+    }, { cancelRefetch: false });
+  }, [selectedStoreId, queryClient]);
+
   // Effet pour marquer l'initialisation comme terminée
   useEffect(() => {
     if (user && stores.length > 0) {
@@ -82,8 +124,21 @@ export default function Layout({ children }: LayoutProps) {
     window.location.href = "/api/logout";
   };
 
+  // Valeur du contexte mémorisée : les consommateurs de useStore() ne sont
+  // re-rendus que lorsqu'une de ces valeurs change réellement
+  const storeContextValue = useMemo(() => ({
+    selectedStoreId,
+    setSelectedStoreId,
+    stores,
+    sidebarCollapsed,
+    setSidebarCollapsed,
+    mobileMenuOpen,
+    setMobileMenuOpen,
+    storeInitialized
+  }), [selectedStoreId, stores, sidebarCollapsed, mobileMenuOpen, storeInitialized]);
+
   return (
-    <StoreProvider value={{ selectedStoreId, setSelectedStoreId, stores, sidebarCollapsed, setSidebarCollapsed, mobileMenuOpen, setMobileMenuOpen, storeInitialized }}>
+    <StoreProvider value={storeContextValue}>
       <div className="layout-container flex bg-gray-50">
         {/* Mobile overlay for normal mode */}
         {isMobile && mobileMenuOpen && (
@@ -135,15 +190,10 @@ export default function Layout({ children }: LayoutProps) {
                   value={selectedStoreId?.toString() || (user.role === 'admin' ? "all" : "")}
                   onValueChange={(value) => {
                     const newStoreId = value === "all" ? null : parseInt(value);
-                    queryClient.invalidateQueries({
+                    // Invalidation des données du magasin après le rendu (voir plus haut)
-                      predicate: (query) => {
+                    if (newStoreId !== selectedStoreId) {
-                        const key = query.queryKey;
+                      storeChangePendingRef.current = true;
-                        return Boolean(key[0]?.toString().includes('/api/orders') ||
-                          key[0]?.toString().includes('/api/deliveries') ||
-                          key[0]?.toString().includes('/api/stats/monthly') ||
-                          key[0]?.toString().includes('/api/tasks'));
                     }
-                    });
 
                     // Sauvegarder dans localStorage et mettre à jour l'état
                     if (newStoreId) {
@@ -210,7 +260,13 @@ export default function Layout({ children }: LayoutProps) {
 
           <div className={`flex-1 bg-gray-50 h-full overflow-y-auto overflow-x-hidden ${isMobileOrTablet ? 'p-3' : 'p-6'
             }`} style={{ maxWidth: '100%' }}>
+            {/* Une erreur dans une page (ou l'échec du chargement de son fichier JS)
+                n'efface plus le menu ; réinitialisée à chaque changement d'URL */}
+            <ErrorBoundary key={location}>
+              <Suspense fallback={<PageFallback />}>
                 {children}
+              </Suspense>
+            </ErrorBoundary>
           </div>
         </main>
 

client/src/components/ReconciliationComments.tsx

@@ -40,13 +40,36 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
   const [newComment, setNewComment] = useState("");
   const [editComment, setEditComment] = useState("");
 
+  const commentsQueryKey = [`/api/deliveries/${deliveryId}/reconciliation-comments`];
+
   // Récupérer les commentaires
   const { data: comments = [], isLoading } = useQuery({
-    queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`],
+    queryKey: commentsQueryKey,
     queryFn: () => apiRequest(`/api/deliveries/${deliveryId}/reconciliation-comments`),
     enabled: !!deliveryId,
   });
 
+  // Compteur de commentaires affiché dans le rapprochement : mis à jour
+  // localement dans la liste en cache (même clé que BLReconciliation) plutôt
+  // que de retélécharger toute la liste des livraisons pour un compteur.
+  // Les listes qui ne contiennent pas la livraison ne sont pas touchées
+  // (undefined : aucune écriture, leur état « périmé » éventuel est conservé).
+  const adjustCommentsCount = (delta: number) => {
+    queryClient.setQueriesData({ queryKey: ['/api/deliveries', 'reconciliation'] }, (old: unknown) => {
+      if (!Array.isArray(old) || !old.some((delivery: any) => delivery?.id === deliveryId)) {
+        return undefined;
+      }
+      return old.map((delivery: any) =>
+        delivery?.id === deliveryId
+          ? {
+              ...delivery,
+              reconciliationCommentsCount: Math.max(0, (Number(delivery.reconciliationCommentsCount) || 0) + delta),
+            }
+          : delivery
+      );
+    });
+  };
+
   // Créer un commentaire
   const createCommentMutation = useMutation({
     mutationFn: async (content: string) => {
@@ -57,10 +80,8 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         title: "Succès",
         description: "Commentaire ajouté avec succès",
       });
-      queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      queryClient.invalidateQueries({ queryKey: commentsQueryKey });
-      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      adjustCommentsCount(1);
-      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
-      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
       setIsAdding(false);
       setNewComment("");
     },
@@ -83,10 +104,8 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         title: "Succès",
         description: "Commentaire modifié avec succès",
       });
-      queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      // Le nombre de commentaires ne change pas : la liste des livraisons reste valable
-      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      queryClient.invalidateQueries({ queryKey: commentsQueryKey });
-      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
-      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
       setEditingId(null);
     },
     onError: (error: any) => {
@@ -108,10 +127,8 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         title: "Succès",
         description: "Commentaire supprimé avec succès",
       });
-      queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      queryClient.invalidateQueries({ queryKey: commentsQueryKey });
-      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      adjustCommentsCount(-1);
-      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
-      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
     },
     onError: (error: any) => {
       toast({

client/src/components/RouterProduction.tsx

@@ -1,47 +1,48 @@
-import { useEffect } from "react";
+import { lazy, useEffect } from "react";
-import { Switch, Route, useLocation } from "wouter";
+import { Switch, Route, Redirect, useLocation } from "wouter";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useScreenSize } from "@/hooks/use-screen-size";
 import NotFound from "@/pages/not-found";
 import AuthPage from "@/pages/AuthPage";
 import Dashboard from "@/pages/Dashboard";
-import Calendar from "@/pages/Calendar";
-import Orders from "@/pages/Orders";
-import Deliveries from "@/pages/Deliveries";
-import Suppliers from "@/pages/Suppliers";
-import Groups from "@/pages/Groups";
-import Users from "@/pages/Users";
-import BLReconciliation from "@/pages/BLReconciliation";
-import Publicities from "@/pages/Publicities";
-
-import NocoDBConfig from "@/pages/NocoDBConfig";
-import DatabaseDebug from "@/pages/DatabaseDebug";
-import CustomerOrders from "@/pages/CustomerOrders";
-
-import DlcPage from "@/pages/DlcPage";
-import BackupManager from "@/pages/BackupManager";
-import Utilities from "@/pages/Utilities";
-import Tasks from "@/pages/Tasks";
-import SavTickets from "@/pages/SavTickets";
-import Avoirs from "@/pages/Avoirs";
-import WeatherSettings from "@/pages/WeatherSettings";
-import Analytics from "@/pages/Analytics";
-import PaymentSchedulePage from "@/pages/PaymentSchedulePage";
-import Contacts from "@/pages/Contacts";
 import Layout from "@/components/Layout";
 
-// Mobile pages
+// Mobile : coque et page d'accueil chargées immédiatement
 import MobileApp from "@/pages/mobile/MobileApp";
 import MobileDashboardPage from "@/pages/mobile/DashboardPage";
-import MobileOrdersPage from "@/pages/mobile/OrdersPage";
+
-import MobileDeliveriesPage from "@/pages/mobile/DeliveriesPage";
+// Les autres pages sont chargées à la demande (un fichier JS par page) : l'écran
-import MobileCalendarPage from "@/pages/mobile/CalendarPage";
+// de connexion et le tableau de bord n'attendent plus le code de toutes les pages
-import MobileTasksPage from "@/pages/mobile/TasksPage";
+// ni la bibliothèque de graphiques. Le <Suspense> est placé dans la zone de
-import MobilePublicitiesPage from "@/pages/mobile/PublicitiesPage";
+// contenu de Layout et de MobileApp, le menu et l'en-tête restent affichés.
-import MobileCustomerOrdersPage from "@/pages/mobile/CustomerOrdersPage";
+const Calendar = lazy(() => import("@/pages/Calendar"));
-import MobileDlcPage from "@/pages/mobile/DlcPage";
+const Orders = lazy(() => import("@/pages/Orders"));
-import MobileSavPage from "@/pages/mobile/SavPage";
+const Deliveries = lazy(() => import("@/pages/Deliveries"));
-import MobileAvoirsPage from "@/pages/mobile/AvoirsPage";
+const Suppliers = lazy(() => import("@/pages/Suppliers"));
+const Groups = lazy(() => import("@/pages/Groups"));
+const Users = lazy(() => import("@/pages/Users"));
+const BLReconciliation = lazy(() => import("@/pages/BLReconciliation"));
+const Publicities = lazy(() => import("@/pages/Publicities"));
+const CustomerOrders = lazy(() => import("@/pages/CustomerOrders"));
+const DlcPage = lazy(() => import("@/pages/DlcPage"));
+const Utilities = lazy(() => import("@/pages/Utilities"));
+const Tasks = lazy(() => import("@/pages/Tasks"));
+const SavTickets = lazy(() => import("@/pages/SavTickets"));
+const Avoirs = lazy(() => import("@/pages/Avoirs"));
+const Analytics = lazy(() => import("@/pages/Analytics"));
+const PaymentSchedulePage = lazy(() => import("@/pages/PaymentSchedulePage"));
+const Contacts = lazy(() => import("@/pages/Contacts"));
+
+// Pages mobiles chargées à la demande
+const MobileOrdersPage = lazy(() => import("@/pages/mobile/OrdersPage"));
+const MobileDeliveriesPage = lazy(() => import("@/pages/mobile/DeliveriesPage"));
+const MobileCalendarPage = lazy(() => import("@/pages/mobile/CalendarPage"));
+const MobileTasksPage = lazy(() => import("@/pages/mobile/TasksPage"));
+const MobilePublicitiesPage = lazy(() => import("@/pages/mobile/PublicitiesPage"));
+const MobileCustomerOrdersPage = lazy(() => import("@/pages/mobile/CustomerOrdersPage"));
+const MobileDlcPage = lazy(() => import("@/pages/mobile/DlcPage"));
+const MobileSavPage = lazy(() => import("@/pages/mobile/SavPage"));
+const MobileAvoirsPage = lazy(() => import("@/pages/mobile/AvoirsPage"));
 
 // Helper component to handle redirection
 const RedirectToAuth = () => {
@@ -53,28 +54,9 @@ const RedirectToAuth = () => {
 };
 
 function RouterProduction() {
-  const { isAuthenticated, isLoading, user, environment, error } = useAuthUnified();
+  const { isAuthenticated, isLoading, user } = useAuthUnified();
   const { isMobile } = useScreenSize();
 
-  // Debug uniquement en développement
-  if (import.meta.env.DEV) {
-    console.log('🔍 RouterProduction Debug:', {
-      environment,
-      isAuthenticated,
-      isLoading,
-      hasUser: !!user,
-      userId: user?.id,
-      username: user?.username,
-      isMobile,
-      error: error?.message
-    });
-  }
-
-  // Debug minimal basé sur l'environnement
-  if (environment === 'production' && error && import.meta.env.DEV) {
-    console.error('🚨 Production Auth Error:', error);
-  }
-
   // Loading state
   if (isLoading) {
     return (
@@ -89,9 +71,6 @@ function RouterProduction() {
 
   // Not authenticated
   if (!isAuthenticated || !user) {
-    if (import.meta.env.DEV) {
-      console.log('🔐 Not authenticated, showing auth routes');
-    }
     return (
       <Switch>
         <Route path="/auth" component={AuthPage} />
@@ -128,14 +107,9 @@ function RouterProduction() {
           <Route path="/analytics" component={Analytics} />
           <Route path="/payment-schedule" component={PaymentSchedulePage} />
 
-          {/* Redirection /auth vers dashboard */}
+          {/* Redirection /auth vers dashboard (navigation interne, sans rechargement) */}
           <Route path="/auth">
-            {() => {
+            <Redirect to="/dashboard" replace />
-              if (typeof window !== 'undefined') {
-                window.location.href = '/dashboard';
-              }
-              return <MobileDashboardPage />;
-            }}
           </Route>
 
           <Route path="/" component={MobileDashboardPage} />
@@ -175,17 +149,10 @@ function RouterProduction() {
         <Route path="/database-debug" component={Utilities} />
         <Route path="/weather-settings" component={Utilities} />
 
-        {/* Redirection depuis /auth vers dashboard après authentification */}
+        {/* Redirection depuis /auth vers dashboard après authentification
+            (navigation interne, sans rechargement complet de l'application) */}
         <Route path="/auth">
-          {() => {
+          <Redirect to="/" replace />
-            if (typeof window !== 'undefined') {
-              if (import.meta.env.DEV) {
-                console.log('🔄 Authenticated user on /auth, redirecting to dashboard');
-              }
-              window.location.href = '/';
-            }
-            return <Dashboard />;
-          }}
         </Route>
 
         <Route path="/" component={Dashboard} />

client/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from "wouter";
-import { useAuthSimple } from "@/hooks/useAuthSimple";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { Button } from "@/components/ui/button";
 import { useStore } from "@/contexts/StoreContext";
 import { useIsMobile } from "@/hooks/use-mobile";
@@ -41,7 +41,7 @@ import {
 } from "lucide-react";
 
 export default function Sidebar() {
-  const { user, isLoading, error } = useAuthSimple();
+  const { user, isLoading, error } = useAuthUnified();
   const [location] = useLocation();
   const { sidebarCollapsed, setSidebarCollapsed, mobileMenuOpen, setMobileMenuOpen } = useStore();
   const isMobile = useIsMobile();
@@ -218,6 +218,8 @@ export default function Sidebar() {
 
   const isActive = (path: string) => {
     if (path === "/" && location === "/") return true;
+    // L'accueil « / » affiche le tableau de bord (même logique que le menu mobile)
+    if (path === "/dashboard" && (location === "/" || location === "/dashboard")) return true;
     if (path !== "/" && location.startsWith(path)) return true;
     return false;
   };

client/src/components/StatsPanel.tsx

@@ -1,8 +1,7 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { TrendingUp, Package, Truck, Clock } from "lucide-react";
 import { useStore } from "@/contexts/StoreContext";
-import { useAuthUnified } from "@/hooks/useAuthUnified";
 
 interface StatsPanelProps {
   currentDate?: Date;
@@ -10,14 +9,13 @@ interface StatsPanelProps {
 
 export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps) {
   const { selectedStoreId } = useStore();
-  const { user } = useAuthUnified();
   const year = currentDate.getFullYear();
   const month = currentDate.getMonth() + 1;
 
   // Construire l'URL avec les paramètres
   const statsUrl = `/api/stats/monthly?year=${year}&month=${month}${selectedStoreId ? `&storeId=${selectedStoreId}` : ''}`;
 
-  const { data: stats, isLoading } = useQuery({
+  const { data: stats, isLoading, isPlaceholderData } = useQuery({
     queryKey: [statsUrl, selectedStoreId], // Include selectedStoreId in key to force refetch
     queryFn: async () => {
       const response = await fetch(statsUrl, {
@@ -30,6 +28,10 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
       
       return response.json();
     },
+    // Changement de mois : garder les chiffres affichés pendant le chargement au lieu
+    // du squelette. Jamais au changement de magasin (chiffres d'un autre magasin).
+    placeholderData: (previousData, previousQuery) =>
+      previousQuery?.queryKey[1] === selectedStoreId ? keepPreviousData(previousData) : undefined,
   });
 
   if (isLoading) {
@@ -58,7 +60,8 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
           Statistiques du mois
         </CardTitle>
       </CardHeader>
-      <CardContent>
+      {/* Chiffres du mois précédent estompés pendant le chargement du nouveau mois */}
+      <CardContent className={isPlaceholderData ? "opacity-50 transition-opacity" : "transition-opacity"}>
         <div className="grid grid-cols-2 gap-4">
           <div className="text-center">
             <div className="text-2xl font-bold text-primary flex items-center justify-center">

client/src/components/WeatherWidget.tsx

@@ -121,7 +121,11 @@ export default function WeatherWidget() {
   const { data: weather, isLoading, error } = useQuery<WeatherResponse>({
     queryKey: ['/api/weather/current'],
     refetchInterval: 30 * 60 * 1000, // Refetch every 30 minutes
-    retry: 1,
+    // Données valables jusqu'au prochain rafraîchissement : pas de rechargement au remontage
+    staleTime: 30 * 60 * 1000,
+    // Pas de nouvel essai : un 404 (météo non configurée) ne changera pas, et le
+    // serveur peut appeler l'API météo externe à chaque requête
+    retry: false,
   });
 
 

client/src/components/modals/CreateDeliveryModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } 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";
@@ -15,6 +15,9 @@ import { format } from "date-fns";
 import { safeFormat } from "@/lib/dateUtils";
 import type { Group, Supplier, OrderWithRelations } from "@shared/schema";
 
+// Référence stable tant que les magasins ne sont pas chargés
+const NO_GROUPS: Group[] = [];
+
 interface CreateDeliveryModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -45,20 +48,29 @@ export default function CreateDeliveryModal({
     queryKey: ['/api/suppliers'],
   });
 
-  const { data: groupsData = [] } = useQuery<Group[]>({
+  const { data: groupsData = NO_GROUPS } = useQuery<Group[]>({
     queryKey: ['/api/groups'],
   });
   
   // Filtrer les groupes selon le magasin sélectionné pour les admins
-  const groups = Array.isArray(groupsData) ? (
+  // (mémorisé : la liste est une dépendance de l'effet ci-dessous, qui
+  // tournait sinon à chaque rendu, donc à chaque frappe dans le formulaire)
+  const groups = useMemo(() => Array.isArray(groupsData) ? (
     user?.role === 'admin' && selectedStoreId 
       ? groupsData.filter(g => g.id === selectedStoreId)
       : groupsData
-  ) : [];
+  ) : NO_GROUPS, [groupsData, user?.role, selectedStoreId]);
 
-  // Filtrer les commandes par fournisseur sélectionné
+  // Commandes du magasin du formulaire uniquement (paramètre storeId, dont
+  // l'accès est contrôlé par le serveur) au lieu de tout l'historique de tous
+  // les magasins ; filtrées ensuite par fournisseur
   const { data: allOrders = [] } = useQuery<OrderWithRelations[]>({
-    queryKey: ['/api/orders'],
+    queryKey: ['/api/orders', 'store', formData.groupId],
+    queryFn: async () => {
+      const data = await apiRequest(`/api/orders?storeId=${formData.groupId}`);
+      return Array.isArray(data) ? data : [];
+    },
+    enabled: !!formData.groupId,
   });
 
   // Filtrer les commandes par fournisseur ET magasin sélectionnés - montrer toutes les commandes non livrées
@@ -74,21 +86,8 @@ export default function CreateDeliveryModal({
 
   // 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;
     }
@@ -103,21 +102,13 @@ export default function CreateDeliveryModal({
         } 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 }));
       }
     }
@@ -148,7 +139,6 @@ export default function CreateDeliveryModal({
       });
       
       // 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;
         const firstKey = key[0]?.toString() || '';

client/src/components/modals/CreateOrderModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } 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";
@@ -14,6 +14,9 @@ import { isUnauthorizedError } from "@/lib/authUtils";
 import { format } from "date-fns";
 import type { Group, Supplier } from "@shared/schema";
 
+// Référence stable tant que les magasins ne sont pas chargés
+const NO_GROUPS: Group[] = [];
+
 interface CreateOrderModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -41,34 +44,23 @@ export default function CreateOrderModal({
     queryKey: ['/api/suppliers'],
   });
 
-  const { data: groupsData = [] } = useQuery<Group[]>({
+  const { data: groupsData = NO_GROUPS } = useQuery<Group[]>({
     queryKey: ['/api/groups'],
   });
   
   // Filtrer les groupes selon le magasin sélectionné pour les admins
-  const groups = Array.isArray(groupsData) ? (
+  // (mémorisé : la liste est une dépendance de l'effet ci-dessous, qui
+  // tournait sinon à chaque rendu, donc à chaque frappe dans le formulaire)
+  const groups = useMemo(() => Array.isArray(groupsData) ? (
     user?.role === 'admin' && selectedStoreId 
       ? groupsData.filter(g => g.id === selectedStoreId)
       : groupsData
-  ) : [];
+  ) : NO_GROUPS, [groupsData, user?.role, selectedStoreId]);
 
   // 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;
     }
@@ -83,20 +75,12 @@ export default function CreateOrderModal({
         } 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 }));
       }
     }
@@ -104,9 +88,7 @@ export default function CreateOrderModal({
 
   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: () => {
@@ -114,8 +96,6 @@ export default function CreateOrderModal({
         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) => {

client/src/components/modals/EditDeliveryModal.tsx

@@ -47,8 +47,16 @@ export default function EditDeliveryModal({
     queryKey: ['/api/groups'],
   });
 
+  // Commandes du magasin du formulaire uniquement (paramètre storeId, dont
+  // l'accès est contrôlé par le serveur) au lieu de tout l'historique de tous
+  // les magasins ; même clé que la modale de création
   const { data: allOrders = [] } = useQuery<OrderWithRelations[]>({
-    queryKey: ['/api/orders'],
+    queryKey: ['/api/orders', 'store', formData.groupId],
+    queryFn: async () => {
+      const data = await apiRequest(`/api/orders?storeId=${formData.groupId}`);
+      return Array.isArray(data) ? data : [];
+    },
+    enabled: !!formData.groupId,
   });
 
   // Filtrer les commandes par fournisseur sélectionné et groupe - montrer toutes les commandes non livrées du même groupe

client/src/components/modals/ValidateDeliveryModal.tsx

@@ -54,9 +54,9 @@ export default function ValidateDeliveryModal({
         title: "Succès",
         description: "Livraison validée avec succès",
       });
-      // Invalider tous les caches liés aux livraisons
+      // Invalider tous les caches liés aux livraisons et les caches BL/Rapprochement
-      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      // avec toutes les variations de clés, en un seul appel (un second appel sur
-      // Invalider tous les caches BL/Rapprochement avec toutes les variations de clés
+      // ['/api/deliveries'] relançait le chargement des listes affichées)
       queryClient.invalidateQueries({
         predicate: (query) => 
           query.queryKey[0] === '/api/deliveries/bl' || 

client/src/hooks/use-mobile.tsx

@@ -3,7 +3,10 @@ import { useState, useEffect } from "react"
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined)
+  // Valeur calculée dès le premier rendu (évite un second rendu au montage)
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(() =>
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : undefined
+  )
 
   useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)

client/src/hooks/use-screen-size.ts

@@ -14,26 +14,24 @@ const defaultBreakpoints: ScreenBreakpoints = {
   desktop: 1280
 }
 
-export function useScreenSize(breakpoints: ScreenBreakpoints = defaultBreakpoints) {
+const getScreenSize = (width: number, breakpoints: ScreenBreakpoints): ScreenSize => {
-  const [screenSize, setScreenSize] = useState<ScreenSize>('desktop')
-  const [dimensions, setDimensions] = useState({
-    width: typeof window !== 'undefined' ? window.innerWidth : 1200,
-    height: typeof window !== 'undefined' ? window.innerHeight : 800
-  })
-
-  useEffect(() => {
-    const getScreenSize = (width: number): ScreenSize => {
   if (width < breakpoints.mobile) return 'mobile'
   if (width <= breakpoints.tablet) return 'tablet' // Inclut 1024px comme tablette
   return 'desktop'
-    }
+}
 
+export function useScreenSize(breakpoints: ScreenBreakpoints = defaultBreakpoints) {
+  // Palier calculé dès le premier rendu (pas de passage transitoire par 'desktop')
+  const [screenSize, setScreenSize] = useState<ScreenSize>(() =>
+    typeof window !== 'undefined' ? getScreenSize(window.innerWidth, breakpoints) : 'desktop'
+  )
+
+  useEffect(() => {
+    // Seul le palier est stocké : setScreenSize avec la même valeur ne provoque
+    // pas de re-rendu, donc l'arbre n'est re-rendu que lorsque le palier change
+    // et non à chaque pixel de redimensionnement
     const updateScreenSize = () => {
-      const width = window.innerWidth
+      setScreenSize(getScreenSize(window.innerWidth, breakpoints))
-      const height = window.innerHeight
-      
-      setDimensions({ width, height })
-      setScreenSize(getScreenSize(width))
     }
 
     // Set initial values
@@ -46,6 +44,13 @@ export function useScreenSize(breakpoints: ScreenBreakpoints = defaultBreakpoint
     return () => window.removeEventListener('resize', updateScreenSize)
   }, [breakpoints])
 
+  // Dimensions lues au moment du rendu (non stockées dans l'état pour ne pas
+  // re-rendre à chaque redimensionnement)
+  const dimensions = {
+    width: typeof window !== 'undefined' ? window.innerWidth : 1200,
+    height: typeof window !== 'undefined' ? window.innerHeight : 800
+  }
+
   return {
     screenSize,
     dimensions,

client/src/hooks/useAuth.ts

@@ -1,28 +1,3 @@
-import { useQuery } from "@tanstack/react-query";
+// Conservé pour compatibilité : délègue au hook unifié (même cache React Query
-
+// partagé, un seul GET /api/user pour toute l'application)
-export function useAuth() {
+export { useAuthUnified as useAuth } from './useAuthUnified';
-  const { data: user, isLoading, error } = useQuery({
-    queryKey: ["/api/user"],
-    retry: (failureCount, error: any) => {
-      // Ne pas retry si c'est une erreur d'authentification
-      if (error?.message?.includes('401') || error?.message?.includes('Unauthorized')) {
-        return false;
-      }
-      return failureCount < 2;
-    },
-    refetchInterval: false,
-    refetchOnWindowFocus: false,
-    refetchOnMount: true, // Permettre le rechargement au montage
-    refetchOnReconnect: false,
-    staleTime: 5 * 60 * 1000, // 5 minutes
-    gcTime: 10 * 60 * 1000, // 10 minutes
-    enabled: true,
-  });
-
-  return {
-    user: user || null,
-    isLoading,
-    isAuthenticated: !!user,
-    error,
-  };
-}

client/src/hooks/useAuthProduction.ts

@@ -1,70 +1,3 @@
-import { useState, useEffect } from 'react';
+// Conservé pour compatibilité : délègue au hook unifié (même cache React Query
-
+// partagé, un seul GET /api/user pour toute l'application)
-// Hook d'authentification spécifique pour la production
+export { useAuthUnified as useAuthProduction } from './useAuthUnified';
-// Utilise fetch direct sans React Query pour éviter les problèmes de cache
-export function useAuthProduction() {
-  const [user, setUser] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<any>(null);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-
-  const checkAuth = async () => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      
-      console.log('🔄 Production auth check starting...');
-      
-      const response = await fetch('/api/user', {
-        credentials: 'include',
-        cache: 'no-cache',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        }
-      });
-      
-      console.log('🔄 Production auth response:', response.status);
-      
-      if (response.ok) {
-        const userData = await response.json();
-        console.log('✅ Production auth success:', { username: userData?.username, id: userData?.id });
-        setUser(userData);
-        setError(null);
-      } else if (response.status === 401) {
-        console.log('❌ Production auth 401 - user not authenticated');
-        setUser(null);
-        setError(null);
-      } else {
-        throw new Error(`Auth failed: ${response.status}`);
-      }
-    } catch (err) {
-      console.error('❌ Production auth error:', err);
-      setError(err);
-      setUser(null);
-    } finally {
-      setIsLoading(false);
-      console.log('🔄 Production auth check completed');
-    }
-  };
-
-  // Authentification au montage et lors des triggers
-  useEffect(() => {
-    checkAuth();
-  }, [refreshTrigger]);
-
-  // Fonction pour rafraîchir l'authentification
-  const refreshAuth = () => {
-    console.log('🔄 RefreshAuth called for production');
-    setRefreshTrigger(prev => prev + 1);
-  };
-
-  return {
-    user,
-    isLoading,
-    isAuthenticated: !!user,
-    error,
-    refreshAuth,
-    environment: 'production'
-  };
-}

client/src/hooks/useAuthSimple.ts

@@ -1,63 +1,3 @@
-import { useState, useEffect } from 'react';
+// Conservé pour compatibilité : délègue au hook unifié (même cache React Query
-
+// partagé, un seul GET /api/user pour toute l'application)
-// Hook d'authentification simplifié qui fonctionne dans tous les environnements
+export { useAuthUnified as useAuthSimple } from './useAuthUnified';
-export function useAuthSimple() {
-  const [user, setUser] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<any>(null);
-  const [refreshCounter, setRefreshCounter] = useState(0);
-
-  // Fonction pour vérifier l'authentification
-  const checkAuth = async () => {
-    try {
-      setIsLoading(true);
-      
-      const response = await fetch('/api/user', {
-        credentials: 'include',
-        cache: 'no-cache',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        }
-      });
-      
-      if (response.ok) {
-        const userData = await response.json();
-        console.log('✅ Auth check successful:', { username: userData?.username, id: userData?.id });
-        setUser(userData);
-        setError(null);
-      } else if (response.status === 401) {
-        console.log('❌ Auth check 401 - user not authenticated');
-        setUser(null);
-        setError(null);
-      } else {
-        throw new Error(`Auth failed: ${response.status}`);
-      }
-    } catch (err) {
-      console.error('Auth check error:', err);
-      setError(err);
-      setUser(null);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Fonction pour forcer un refresh de l'authentification
-  const refreshAuth = () => {
-    console.log('🔄 Refreshing authentication...');
-    setRefreshCounter(prev => prev + 1);
-  };
-
-  // Vérifier l'authentification au montage et lors des refresh
-  useEffect(() => {
-    checkAuth();
-  }, [refreshCounter]);
-
-  return {
-    user,
-    isLoading,
-    error,
-    isAuthenticated: !!user,
-    refreshAuth
-  };
-}

client/src/hooks/useAuthUnified.ts

@@ -1,242 +1,57 @@
-import { useState, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { AUTH_QUERY_KEY, fetchCurrentUser } from "@/lib/queryClient";
 
-// Hook d'authentification unifié qui s'adapte automatiquement
+// Conservé dans le retour du hook pour compatibilité (utilisé pour le débogage)
-// En production utilise fetch direct, en développement utilise React Query
+const environment = import.meta.env.DEV ? 'development' : 'production';
+
+// Hook d'authentification unique (développement et production) : l'utilisateur
+// connecté est lu une seule fois via GET /api/user puis partagé par toute
+// l'application à travers le cache React Query (clé ['/api/user']).
+// Un 401 donne user = null (non connecté), sans redirection.
 export function useAuthUnified() {
-  // Détection d'environnement plus robuste
-  const isDevelopment = typeof window !== 'undefined' && 
-    (window.location.hostname === 'localhost' || 
-     window.location.hostname.includes('replit.dev')) &&
-     import.meta.env.DEV === true;
-
-  // Debug logging uniquement en développement
-  if (import.meta.env.DEV) {
-    console.log('🔍 Auth Environment Debug:', {
-      hostname: typeof window !== 'undefined' ? window.location.hostname : 'N/A',
-      isDev: import.meta.env.DEV,
-      environment: isDevelopment ? 'development' : 'production'
-    });
-  }
-
-  // État pour la version production (fetch direct)
-  const [productionUser, setProductionUser] = useState<any>(null);
-  const [productionLoading, setProductionLoading] = useState(true);
-  const [productionError, setProductionError] = useState<any>(null);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-
-  // Hook React Query pour le développement
-  const developmentQuery = useQuery({
-    queryKey: ["/api/user"],
-    retry: (failureCount, error: any) => {
-      if (error?.message?.includes('401') || error?.message?.includes('Unauthorized')) {
-        return false;
-      }
-      return failureCount < 2;
-    },
-    refetchInterval: false,
-    refetchOnWindowFocus: false,
-    refetchOnMount: true,
-    refetchOnReconnect: false,
-    staleTime: 10 * 60 * 1000, // 10 minutes de cache pour l'auth
-    gcTime: 15 * 60 * 1000, // 15 minutes
-    enabled: isDevelopment, // Seulement en développement
-  });
-
-  // Fonction pour rafraîchir l'authentification
-  const refreshAuth = () => {
-    if (import.meta.env.DEV) {
-      console.log('🔄 RefreshAuth called, isDevelopment:', isDevelopment);
-    }
-    if (!isDevelopment) {
-      if (import.meta.env.DEV) {
-        console.log('🔄 Triggering production auth refresh');
-      }
-      setRefreshTrigger(prev => {
-        const newValue = prev + 1;
-        if (import.meta.env.DEV) {
-          console.log('🔄 Production refresh trigger updated:', prev, '->', newValue);
-        }
-        return newValue;
-      });
-    } else {
-      if (import.meta.env.DEV) {
-        console.log('🔄 Development mode - using React Query refresh');
-      }
-      developmentQuery.refetch();
-    }
-  };
-
-  // Fonction pour rafraîchir de manière synchrone (pour après login)
-  const forceAuthRefresh = async () => {
-    if (import.meta.env.DEV) {
-      console.log('🔄 ForceAuthRefresh called, isDevelopment:', isDevelopment);
-    }
-    
-    if (!isDevelopment) {
-      // En production, faire un fetch immédiat et forcer un re-render
-      try {
-        if (import.meta.env.DEV) {
-          console.log('🔄 Production force refresh - fetching user data');
-        }
-        setProductionLoading(true);
-        
-        const response = await fetch('/api/user', {
-          credentials: 'include',
-          cache: 'no-cache',
-          headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json'
-          }
-        });
-        
-        if (response.ok) {
-          const userData = await response.json();
-          if (import.meta.env.DEV) {
-            console.log('✅ Production force refresh success:', { username: userData?.username, id: userData?.id });
-          }
-          setProductionUser(userData);
-          setProductionError(null);
-          setProductionLoading(false);
-          
-          // Forcer un trigger de refresh pour déclencher les re-renders
-          setRefreshTrigger(prev => prev + 1);
-          
-          return userData;
-        } else {
-          if (import.meta.env.DEV) {
-            console.log('❌ Production force refresh failed:', response.status);
-          }
-          setProductionUser(null);
-          setProductionError(null);
-          setProductionLoading(false);
-          return null;
-        }
-      } catch (error) {
-        if (import.meta.env.DEV) {
-          console.error('❌ Production force refresh error:', error);
-        }
-        setProductionError(error);
-        setProductionUser(null);
-        setProductionLoading(false);
-        return null;
-      }
-    } else {
-      // En développement, forcer un refetch avec invalidation du cache
-      if (import.meta.env.DEV) {
-        console.log('🔄 Development mode - invalidating cache and refetching');
-      }
   const queryClient = useQueryClient();
-      queryClient.invalidateQueries({ queryKey: ['/api/user'] });
 
-      // Attendre un court délai pour la propagation
+  const authQuery = useQuery<any>({
-      await new Promise(resolve => setTimeout(resolve, 50));
+    queryKey: AUTH_QUERY_KEY,
-      
+    queryFn: fetchCurrentUser,
-      const result = await developmentQuery.refetch();
+    staleTime: Infinity,
-      if (import.meta.env.DEV) {
+    retry: false,
-        console.log('🔄 Development refetch result:', { 
+    // Après une erreur serveur, ne pas relancer la requête à chaque montage d'un
-          success: result.isSuccess, 
+    // composant (AuthPage) : sinon boucle chargement / page de connexion
-          hasData: !!result.data,
+    retryOnMount: false,
-          userId: (result.data as any)?.id 
   });
-      }
-      return result.data;
-    }
-  };
 
-  // Authentification production (fetch direct)
+  // Rafraîchissement en arrière-plan : tous les composants abonnés reçoivent
-  useEffect(() => {
+  // le nouvel utilisateur quand la réponse arrive
-    if (isDevelopment) return; // Ne pas exécuter en développement
+  const refreshAuth = useCallback(() => {
+    return queryClient.invalidateQueries({ queryKey: AUTH_QUERY_KEY });
+  }, [queryClient]);
 
-    let isMounted = true;
+  // Rechargement immédiat (après connexion) : attend la réponse du serveur,
-    
+  // met à jour le cache partagé et renvoie l'utilisateur (ou null)
-    const checkAuth = async () => {
+  const forceAuthRefresh = useCallback(async () => {
     try {
-        if (import.meta.env.DEV) {
+      return await queryClient.fetchQuery({
-          console.log('🔄 Production auth check starting, refreshTrigger:', refreshTrigger);
+        queryKey: AUTH_QUERY_KEY,
-        }
+        queryFn: fetchCurrentUser,
-        setProductionLoading(true);
+        staleTime: 0,
-        
-        const response = await fetch('/api/user', {
-          credentials: 'include',
-          cache: 'no-cache',
-          headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json'
-          }
       });
+    } catch (error) {
+      console.error("Erreur lors du rafraîchissement de l'authentification:", error);
+      return null;
+    }
+  }, [queryClient]);
 
-        if (import.meta.env.DEV) {
+  const user = authQuery.data ?? null;
-          console.log('🔄 Production auth response:', response.status);
-        }
 
-        if (!isMounted) return;
-        
-        if (response.ok) {
-          const userData = await response.json();
-          if (import.meta.env.DEV) {
-            console.log('✅ Production auth success:', { username: userData?.username, id: userData?.id });
-          }
-          if (isMounted) {
-            setProductionUser(userData);
-            setProductionError(null);
-          }
-        } else if (response.status === 401) {
-          if (import.meta.env.DEV) {
-            console.log('❌ Production auth 401 - user not authenticated');
-          }
-          if (isMounted) {
-            setProductionUser(null);
-            setProductionError(null);
-          }
-        } else {
-          throw new Error(`Auth failed: ${response.status}`);
-        }
-      } catch (err) {
-        if (import.meta.env.DEV) {
-          console.error('Production auth error:', err);
-        }
-        if (isMounted) {
-          setProductionError(err);
-          setProductionUser(null);
-        }
-      } finally {
-        if (isMounted) {
-          if (import.meta.env.DEV) {
-            console.log('🔄 Production auth check complete, loading set to false');
-          }
-          setProductionLoading(false);
-        }
-      }
-    };
-    
-    checkAuth();
-    
-    return () => {
-      isMounted = false;
-    };
-  }, [isDevelopment, refreshTrigger]); // Ajout du refreshTrigger
-
-  // Retourner les bonnes données selon l'environnement
-  if (isDevelopment) {
   return {
-      user: developmentQuery.data || null,
+    user,
-      isLoading: developmentQuery.isLoading,
+    isLoading: authQuery.isLoading,
-      isAuthenticated: !!developmentQuery.data,
+    isAuthenticated: !!user,
-      error: developmentQuery.error,
+    error: authQuery.error,
-      refreshAuth: refreshAuth,
+    refreshAuth,
-      forceAuthRefresh: forceAuthRefresh,
+    forceAuthRefresh,
-      environment: 'development'
+    environment
   };
-  } else {
-    return {
-      user: productionUser,
-      isLoading: productionLoading,
-      isAuthenticated: !!productionUser,
-      error: productionError,
-      refreshAuth: refreshAuth,
-      forceAuthRefresh: forceAuthRefresh,
-      environment: 'production'
-    };
-  }
 }

client/src/lib/queryClient.ts

@@ -66,6 +66,26 @@ export const getQueryFn: <T>(options: {
     return await res.json();
   };
 
+// Clé de cache de l'utilisateur connecté, partagée par toute l'application
+export const AUTH_QUERY_KEY = ["/api/user"] as const;
+
+// Lecture de l'utilisateur connecté. Un 401 signifie simplement « non connecté » :
+// on renvoie null sans rediriger (sinon boucle sur la page de connexion).
+export async function fetchCurrentUser(): Promise<any> {
+  const res = await fetch("/api/user", {
+    credentials: "include",
+    cache: "no-cache",
+    headers: { Accept: "application/json" },
+  });
+
+  if (res.status === 401) {
+    return null;
+  }
+
+  await throwIfResNotOk(res);
+  return await res.json();
+}
+
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -77,15 +97,22 @@ export const queryClient = new QueryClient({
       staleTime: 30 * 1000, // 30 secondes de cache pour de meilleures performances
       gcTime: 10 * 60 * 1000, // 10 minutes  
       retry: (failureCount, error: any) => {
+        const message: string = error?.message ?? '';
         // Ne pas retry les erreurs d'authentification et rediriger
-        if (error?.message?.includes('401') || error?.message?.includes('Unauthorized')) {
+        if (message.includes('401') || message.includes('Unauthorized')) {
           if (typeof window !== 'undefined' && window.location.pathname !== '/auth') {
             console.log('🔄 Query 401 - Redirecting to auth page');
             window.location.href = '/auth';
           }
           return false;
         }
-        return failureCount < 2;
+        // Erreur côté client (403 droit refusé, 404...) : un nouvel essai
+        // donnerait le même résultat et retarderait l'affichage de l'erreur
+        if (/^4\d\d\b/.test(message)) {
+          return false;
+        }
+        // Erreur serveur ou réseau : un seul nouvel essai
+        return failureCount < 1;
       },
     },
     mutations: {
@@ -93,3 +120,19 @@ export const queryClient = new QueryClient({
     },
   },
 });
+
+// Données de référence qui changent rarement (les mutations fournisseurs et
+// magasins invalident déjà ces clés) : pas de rechargement à chaque ouverture
+// de page ou de modale.
+queryClient.setQueryDefaults(["/api/suppliers"], { staleTime: 5 * 60 * 1000 });
+queryClient.setQueryDefaults(["/api/groups"], { staleTime: 5 * 60 * 1000 });
+
+// Utilisateur connecté : chargé une seule fois pour toute l'application, puis
+// rafraîchi explicitement (connexion, refreshAuth). Pas de nouvel essai, ni au
+// montage d'un composant : un échec équivaut à « non connecté ».
+queryClient.setQueryDefaults(AUTH_QUERY_KEY, {
+  queryFn: fetchCurrentUser,
+  staleTime: Infinity,
+  retry: false,
+  retryOnMount: false,
+});

client/src/main.tsx

@@ -2,4 +2,21 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
 
+// Les pages sont chargées à la demande : après une mise en production, les
+// anciens fichiers JS n'existent plus sur le serveur et le chargement d'une page
+// échoue. On recharge alors l'application une seule fois pour récupérer la
+// nouvelle version (au plus une fois par minute, pour ne pas boucler si le
+// serveur est indisponible ; l'erreur est alors affichée normalement).
+window.addEventListener("vite:preloadError", () => {
+  const storageKey = "logiflow-chunk-reload-at";
+  try {
+    const lastReload = Number(sessionStorage.getItem(storageKey) || 0);
+    if (Date.now() - lastReload < 60 * 1000) return;
+    sessionStorage.setItem(storageKey, String(Date.now()));
+  } catch {
+    return;
+  }
+  window.location.reload();
+});
+
 createRoot(document.getElementById("root")!).render(<App />);

client/src/pages/Analytics.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -52,11 +52,13 @@ export default function Analytics() {
     return params.toString();
   }, [dateRange, selectedSuppliers, selectedStores, selectedStatus]);
 
-  // Récupération des données
+  // Récupération des données. Au changement de filtre (période, fournisseur,
-  const { data: summary, isLoading: summaryLoading } = useQuery({
+  // magasin, granularité), les résultats précédents restent affichés, atténués
+  // et signalés par « Mise à jour… », au lieu de remplacer toute la page par un
+  // spinner : le chargement plein écran ne concerne que le premier affichage.
+  const { data: summary, isLoading: summaryLoading, isPlaceholderData: summaryUpdating } = useQuery({
     queryKey: ['/api/analytics/summary', queryParams],
     queryFn: async () => {
-      console.log('📊 [ANALYTICS] Fetching summary with params:', queryParams);
       const response = await fetch(`/api/analytics/summary?${queryParams}`, {
         credentials: 'include'
       });
@@ -64,18 +66,16 @@ export default function Analytics() {
         console.error('❌ [ANALYTICS] Summary fetch failed:', response.status, response.statusText);
         throw new Error('Failed to fetch summary');
       }
-      const data = await response.json();
+      return response.json();
-      console.log('✅ [ANALYTICS] Summary data received:', data);
-      return data;
     },
+    placeholderData: keepPreviousData,
     refetchInterval: isRefreshing ? 30000 : false
   });
 
-  const { data: timeseries } = useQuery({
+  const { data: timeseries, isPlaceholderData: timeseriesUpdating } = useQuery({
     queryKey: ['/api/analytics/timeseries', queryParams, granularity],
     queryFn: async () => {
       const url = `/api/analytics/timeseries?${queryParams}&granularity=${granularity}`;
-      console.log('📊 [ANALYTICS] Fetching timeseries:', url);
       const response = await fetch(url, {
         credentials: 'include'
       });
@@ -83,13 +83,12 @@ export default function Analytics() {
         console.error('❌ [ANALYTICS] Timeseries fetch failed:', response.status, response.statusText);
         throw new Error('Failed to fetch timeseries');
       }
-      const data = await response.json();
+      return response.json();
-      console.log('✅ [ANALYTICS] Timeseries data received:', data?.length || 0, 'entries');
+    },
-      return data;
+    placeholderData: keepPreviousData,
-    }
   });
 
-  const { data: bySupplier } = useQuery({
+  const { data: bySupplier, isPlaceholderData: bySupplierUpdating } = useQuery({
     queryKey: ['/api/analytics/by-supplier', queryParams],
     queryFn: async () => {
       const response = await fetch(`/api/analytics/by-supplier?${queryParams}`, {
@@ -97,10 +96,11 @@ export default function Analytics() {
       });
       if (!response.ok) throw new Error('Failed to fetch by supplier');
       return response.json();
-    }
+    },
+    placeholderData: keepPreviousData,
   });
 
-  const { data: byStore } = useQuery({
+  const { data: byStore, isPlaceholderData: byStoreUpdating } = useQuery({
     queryKey: ['/api/analytics/by-store', queryParams],
     queryFn: async () => {
       const response = await fetch(`/api/analytics/by-store?${queryParams}`, {
@@ -108,9 +108,14 @@ export default function Analytics() {
       });
       if (!response.ok) throw new Error('Failed to fetch by store');
       return response.json();
-    }
+    },
+    placeholderData: keepPreviousData,
   });
 
+  const isUpdating = summaryUpdating || timeseriesUpdating || bySupplierUpdating || byStoreUpdating;
+  // Bloc dont les chiffres viennent encore des filtres précédents
+  const updatingClass = (updating: boolean) => `transition-opacity ${updating ? 'opacity-60' : ''}`;
+
   const { data: suppliers } = useQuery({
     queryKey: ['/api/suppliers'],
   });
@@ -161,6 +166,12 @@ export default function Analytics() {
             <p className="text-gray-600 mt-1">Analysez vos performances logistiques</p>
           </div>
           <div className="flex items-center gap-2">
+            {isUpdating && (
+              <span className="flex items-center text-sm text-gray-500" role="status">
+                <RefreshCw className="h-4 w-4 mr-1 animate-spin" />
+                Mise à jour…
+              </span>
+            )}
             <Button
               variant="outline"
               size="sm"
@@ -330,7 +341,7 @@ export default function Analytics() {
       </Card>
 
       {/* KPIs */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 ${updatingClass(summaryUpdating)}`}>
         <Card>
           <CardHeader className="pb-3">
             <CardTitle className="text-sm font-medium text-gray-600">
@@ -395,7 +406,7 @@ export default function Analytics() {
       {/* Graphiques */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Évolution temporelle */}
-        <Card>
+        <Card className={updatingClass(timeseriesUpdating)}>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <Activity className="h-5 w-5" />
@@ -429,7 +440,7 @@ export default function Analytics() {
         </Card>
 
         {/* Répartition par fournisseur */}
-        <Card>
+        <Card className={updatingClass(bySupplierUpdating)}>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <PieChart className="h-5 w-5" />
@@ -471,7 +482,7 @@ export default function Analytics() {
         </Card>
 
         {/* Performance par magasin */}
-        <Card>
+        <Card className={updatingClass(byStoreUpdating)}>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <Store className="h-5 w-5" />
@@ -511,7 +522,7 @@ export default function Analytics() {
         </Card>
 
         {/* Top fournisseurs */}
-        <Card>
+        <Card className={updatingClass(summaryUpdating)}>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <TrendingUp className="h-5 w-5" />

client/src/pages/AuthPage.tsx

@@ -62,13 +62,19 @@ export default function AuthPage() {
       if (response.ok) {
         toast({
           title: "Connexion réussie",
-          description: "Redirection en cours...",
+          description: "Bienvenue dans LogiFlow",
         });
         
-        // En production, recharger la page pour éviter les problèmes de synchronisation
+        // L'utilisateur est relu une fois et placé dans le cache partagé : toute
-        setTimeout(() => {
+        // l'application bascule directement sur le tableau de bord, sans attente
+        // ni rechargement complet
+        const refreshedUserData = await forceAuthRefresh();
+        if (refreshedUserData && refreshedUserData.id) {
+          setLocation("/", { replace: true });
+        } else {
+          // Session pas encore visible : rechargement complet comme auparavant
           window.location.href = "/";
-        }, 500);
+        }
       } else {
         const errorData = await response.json().catch(() => ({}));
         toast({
@@ -138,16 +144,6 @@ export default function AuthPage() {
     },
   });
 
-  // Debug logging for authentication state
-  if (import.meta.env.DEV) {
-    console.log('🔍 AuthPage Debug:', {
-      isAuthenticated,
-      isLoading,
-      userId: user?.id,
-      username: user?.username
-    });
-  }
-
   useEffect(() => {
     if (defaultCredentialsCheck) {
       setShowDefaultCredentials(defaultCredentialsCheck.showDefault);

client/src/pages/Avoirs.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, useRef, useDeferredValue } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Plus, Search, FileText, CheckCircle, AlertCircle, Clock, Edit, Trash2, UserCheck, Send, Upload, XCircle, MessageSquare, Settings } from "lucide-react";
 import { useStore } from "@/contexts/StoreContext";
@@ -21,6 +21,7 @@ import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest } from "@/lib/queryClient";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
 
 // Types
 interface Avoir {
@@ -108,6 +109,58 @@ type AvoirUpdateData = AvoirFormData & {
   nocodbVerifiedAt?: Date | null;
 };
 
+// Tableau vide stable tant que la liste n'est pas chargée (évite de relancer
+// effets et calculs mémoïsés à chaque rendu)
+const NO_AVOIRS: Avoir[] = [];
+
+// Nombre maximal de vérifications de facture simultanées
+const MAX_CONCURRENT_VERIFICATIONS = 4;
+
+// Le montant de l'avoir doit-il être remplacé par celui de la facture ?
+// Oui s'il est vide ou différent au centime près ; sinon la mise à jour ne
+// changerait rien et la requête est évitée.
+function amountDiffers(current: unknown, invoiceAmount: number) {
+  if (current === null || current === undefined || current === '') return true;
+  return Math.round(Number(current) * 100) !== Math.round(Number(invoiceAmount) * 100);
+}
+
+// Filtrage par recherche (fournisseur, référence, commentaire)
+function filterAvoirsBySearch(avoirsList: Avoir[], searchTerm: string) {
+  const searchLower = searchTerm.toLowerCase();
+  return avoirsList.filter((avoir) => (
+    avoir.supplier?.name?.toLowerCase().includes(searchLower) ||
+    avoir.invoiceReference?.toLowerCase().includes(searchLower) ||
+    avoir.comment?.toLowerCase().includes(searchLower)
+  ));
+}
+
+// Durée d'envoi affichée dans le modal d'attente. Le compteur vit dans ce
+// composant pour ne pas re-rendre toute la page chaque seconde ; il repart de
+// zéro à chaque ouverture du modal et s'arrête à sa fermeture.
+function UploadElapsedTime() {
+  const [processingSeconds, setProcessingSeconds] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProcessingSeconds(prev => prev + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <p className="text-sm text-gray-600 text-center">
+        Envoi du fichier vers le webhook... {processingSeconds}s
+      </p>
+      {processingSeconds > 30 && (
+        <p className="text-xs text-gray-500 mt-2 text-center">
+          Le traitement peut prendre quelques minutes
+        </p>
+      )}
+    </>
+  );
+}
+
 export default function Avoirs() {
   const [activeTab, setActiveTab] = useState("pending");
   const [searchTerm, setSearchTerm] = useState("");
@@ -122,10 +175,8 @@ export default function Avoirs() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
   
-  // État pour le modal d'attente du webhook
+  // État pour le modal d'attente du webhook (compteur dans UploadElapsedTime)
   const [showWaitingModal, setShowWaitingModal] = useState(false);
-  const [processingSeconds, setProcessingSeconds] = useState(0);
-  const [processingTimeout, setProcessingTimeout] = useState<NodeJS.Timeout | null>(null);
   
   // États pour le système de vérification de facture
   const [avoirVerificationResults, setAvoirVerificationResults] = useState<Record<number, any>>({});
@@ -143,10 +194,8 @@ export default function Avoirs() {
   const queryClient = useQueryClient();
 
 
-  // Fetch user profile
+  // Utilisateur connecté : cache partagé par toute l'application (pas de requête supplémentaire)
-  const { data: user } = useQuery({
+  const { user } = useAuthUnified();
-    queryKey: ['/api/user'],
-  });
 
   // Fetch groups for store filter
   const { data: groups = [] } = useQuery<Group[]>({
@@ -162,86 +211,110 @@ export default function Avoirs() {
 
   // Fetch avoirs avec filtrage par groupe (comme Orders/Deliveries)
   const avoirsUrl = `/api/avoirs${selectedStoreId ? `?storeId=${selectedStoreId}` : ''}`;
-  const { data: avoirs = [], isLoading } = useQuery<Avoir[]>({
+  const { data: avoirs = NO_AVOIRS, isLoading } = useQuery<Avoir[]>({
     queryKey: [avoirsUrl, selectedStoreId, (user as any)?.role],
     queryFn: async () => {
-      console.log('💰 Fetching avoirs from:', avoirsUrl);
       const response = await fetch(avoirsUrl, { credentials: 'include' });
       if (!response.ok) {
         throw new Error('Failed to fetch avoirs');
       }
       const data = await response.json();
-      console.log('💰 Avoirs received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items');
-      
-      // 🔍 Debug: Vérifier les champs nocodbVerified
-      if (Array.isArray(data) && data.length > 0) {
-        console.log('🔍 Premiers avoirs avec nocodbVerified:', data.map(a => ({
-          id: a.id,
-          invoiceReference: a.invoiceReference,
-          nocodbVerified: a.nocodbVerified,
-          nocodbVerifiedAt: a.nocodbVerifiedAt
-        })));
-      }
-      
       return Array.isArray(data) ? data : [];
     },
     enabled: !!user,
   });
 
-  // 🔄 Charger les vérifications depuis le cache serveur au démarrage
+  // Recharge la liste des avoirs, quelle que soit la variante de clé
-  useEffect(() => {
+  // (avec ou sans magasin sélectionné, bureau ou mobile)
-    const loadCachedVerifications = async () => {
+  const invalidateAvoirs = () => queryClient.invalidateQueries({
-      console.log('🔍 LoadCache - Début vérification:', { 
+    predicate: (query) => {
-        hasAvoirs: !!avoirs, 
+      return query.queryKey[0]?.toString().includes('/api/avoirs') || false;
-        avoirCount: avoirs?.length || 0 
+    }
   });
 
-      if (!avoirs || avoirs.length === 0) return;
+  // Données du PUT qui reporte le montant de la facture sur l'avoir : le serveur
+  // remet à null les champs absents, on renvoie donc les valeurs actuelles
+  const buildAmountUpdate = (avoir: Avoir, amount: number): AvoirUpdateData => ({
+    supplierId: avoir.supplierId,
+    groupId: avoir.groupId,
+    invoiceReference: avoir.invoiceReference || "",
+    amount,
+    comment: avoir.comment || "",
+    commercialProcessed: avoir.commercialProcessed || false,
+    status: avoir.status as "En attente de demande" | "Demandé" | "Reçu",
+  });
+
+  // ---------------------------------------------------------------------------
+  // File d'attente des vérifications de facture : au plus
+  // MAX_CONCURRENT_VERIFICATIONS requêtes simultanées, au lieu d'une boucle
+  // séquentielle au chargement ou d'une rafale de requêtes (« Vérifier toutes »).
+  // ---------------------------------------------------------------------------
+  const verificationQueueRef = useRef<Array<() => Promise<void>>>([]);
+  const activeVerificationsRef = useRef(0);
+  // Référence déjà vérifiée (ou en cours) pour chaque avoir : un rechargement de
+  // la liste ne relance pas les vérifications déjà faites
+  const verifiedReferencesRef = useRef<Map<number, string>>(new Map());
+  // Dernière liste reçue, relue au moment de remplir un montant
+  const avoirsRef = useRef<Avoir[]>(avoirs);
+  avoirsRef.current = avoirs;
+
+  const drainVerificationQueue = () => {
+    while (
+      activeVerificationsRef.current < MAX_CONCURRENT_VERIFICATIONS &&
+      verificationQueueRef.current.length > 0
+    ) {
+      const task = verificationQueueRef.current.shift();
+      if (!task) break;
+
+      activeVerificationsRef.current += 1;
+      task().finally(() => {
+        activeVerificationsRef.current -= 1;
+        drainVerificationQueue();
+      });
+    }
+  };
+
+  // Met les tâches en file ; la promesse est résolue quand toutes sont terminées
+  // (chaque tâche traite elle-même ses erreurs)
+  const runVerificationTasks = (tasks: Array<() => Promise<void>>) =>
+    Promise.all(tasks.map(task => new Promise<void>(resolve => {
+      verificationQueueRef.current.push(() => task().catch(() => undefined).finally(resolve));
+      drainVerificationQueue();
+    })));
+
+  // 🔄 Charger les vérifications depuis le cache serveur à l'affichage de la liste.
+  // Seuls les avoirs non validés dont la référence n'a pas encore été vérifiée
+  // sont envoyés (un avoir validé affiche « Validé » quel que soit le résultat) ;
+  // les résultats sont appliqués en une seule fois, comme auparavant.
+  useEffect(() => {
+    const avoirsToVerify = avoirs.filter(avoir =>
+      avoir.invoiceReference?.trim() &&
+      !avoir.nocodbVerified &&
+      verifiedReferencesRef.current.get(avoir.id) !== avoir.invoiceReference
+    );
+    if (avoirsToVerify.length === 0) return;
+
+    // Marquage immédiat : un rechargement pendant la vérification ne la double pas
+    avoirsToVerify.forEach(avoir => verifiedReferencesRef.current.set(avoir.id, avoir.invoiceReference || ''));
 
     const cachedResults: Record<number, any> = {};
-      
+    runVerificationTasks(avoirsToVerify.map(avoir => async () => {
-      // Charger les vérifications depuis le cache serveur pour TOUS les avoirs avec référence
-      for (const avoir of avoirs) {
-        console.log('🔍 LoadCache - Avoir analysé:', {
-          id: avoir.id,
-          hasInvoiceRef: !!avoir.invoiceReference?.trim(),
-          invoiceReference: avoir.invoiceReference,
-          nocodbVerified: avoir.nocodbVerified
-        });
-        
-        // Si l'avoir a une référence de facture, vérifier le cache serveur
-        if (avoir.invoiceReference?.trim()) {
       try {
         const result = await apiRequest(`/api/avoirs/${avoir.id}/verify-invoice`, 'POST', {
           invoiceReference: avoir.invoiceReference,
           forceRefresh: false // Utiliser le cache si disponible
         });
-            
+        if (result?.exists !== undefined) {
-            console.log('🔍 LoadCache - Résultat cache serveur pour avoir', avoir.id, ':', result);
-            
-            if (result.exists !== undefined) {
           cachedResults[avoir.id] = result;
-              console.log('✅ LoadCache - Avoir ajouté au cache depuis serveur:', avoir.id);
         }
-          } catch (error) {
+      } catch {
-            console.log('⚠️ LoadCache - Erreur cache serveur pour avoir', avoir.id, ':', error);
+        // Vérification silencieuse : la loupe reste disponible pour réessayer
-            // Continuer sans erreur si le cache échoue
       }
-        }
+    })).then(() => {
-      }
-      
-      console.log('🔍 LoadCache - Résultats finaux:', {
-        cachedCount: Object.keys(cachedResults).length,
-        cachedResults
-      });
-      
       if (Object.keys(cachedResults).length > 0) {
         setAvoirVerificationResults(prev => ({ ...prev, ...cachedResults }));
-        console.log('✅ Vérifications chargées depuis le serveur:', cachedResults);
       }
-    };
+    });
-    
-    loadCachedVerifications();
   }, [avoirs]);
 
   // Create avoir mutation
@@ -262,11 +335,7 @@ export default function Avoirs() {
     },
     onSuccess: () => {
       // ✅ FIX: Invalider toutes les variations de queryKey avoirs
-      queryClient.invalidateQueries({ 
+      invalidateAvoirs();
-        predicate: (query) => {
-          return query.queryKey[0]?.toString().includes('/api/avoirs') || false;
-        }
-      });
       setIsCreateDialogOpen(false);
       toast({
         title: "Avoir créé",
@@ -300,11 +369,7 @@ export default function Avoirs() {
     },
     onSuccess: () => {
       // ✅ FIX: Invalider toutes les variations de queryKey avoirs
-      queryClient.invalidateQueries({ 
+      invalidateAvoirs();
-        predicate: (query) => {
-          return query.queryKey[0]?.toString().includes('/api/avoirs') || false;
-        }
-      });
       setIsEditDialogOpen(false);
       setSelectedAvoir(null);
       toast({
@@ -335,11 +400,7 @@ export default function Avoirs() {
     },
     onSuccess: () => {
       // ✅ FIX: Invalider toutes les variations de queryKey avoirs
-      queryClient.invalidateQueries({ 
+      invalidateAvoirs();
-        predicate: (query) => {
-          return query.queryKey[0]?.toString().includes('/api/avoirs') || false;
-        }
-      });
       setIsDeleteDialogOpen(false);
       setSelectedAvoir(null);
       toast({
@@ -411,13 +472,6 @@ export default function Avoirs() {
         amount: finalAmount
       };
       
-      console.log('💰 Editing avoir - Form data sent:', {
-        originalCommercial: selectedAvoir.commercialProcessed,
-        formCommercial: finalData.commercialProcessed,
-        editAmountValue,
-        finalAmount,
-        fullData: finalData
-      });
       editAvoirMutation.mutate({ id: selectedAvoir.id, data: finalData });
     }
   };
@@ -498,34 +552,22 @@ export default function Avoirs() {
   // Handle validation/devalidation
   const handleValidateAvoir = async (avoirId: number) => {
     try {
-      // Utiliser la route spécifique pour la vérification NocoDB
+      // Utiliser la route spécifique pour la vérification NocoDB. Elle marque
+      // aussi le cache de vérification comme réconcilié (permanent) : un appel
+      // séparé à /api/cache/mark-reconciled serait redondant.
       await apiRequest(`/api/avoirs/${avoirId}/nocodb-verification`, 'PUT', {
         verified: true
       });
 
-      // Marquer le cache comme réconcilié (permanent)
-      const avoir = avoirs.find(a => a.id === avoirId);
-      if (avoir?.invoiceReference) {
-        try {
-          await apiRequest('/api/cache/mark-reconciled', 'POST', {
-            invoiceReference: avoir.invoiceReference,
-            groupId: avoir.groupId
-          });
-        } catch (cacheError) {
-          console.warn('Cache marking failed but verification succeeded:', cacheError);
-        }
-      }
-
       // ✅ Mettre à jour l'état local immédiatement pour affichage instantané
       setAvoirVerificationResults(prev => ({
         ...prev,
         [avoirId]: { exists: true, fromCache: true, permanent: true, validated: true }
       }));
 
-      console.log('✅ Avoir validé - État local mis à jour:', avoirId);
+      // Recharger les avoirs pour voir les changements en base (toutes les
-
+      // variantes de clé : la clé contient l'URL avec le magasin sélectionné)
-      // Recharger les avoirs pour voir les changements en base
+      invalidateAvoirs();
-      queryClient.invalidateQueries({ queryKey: ['/api/avoirs'] });
 
       toast({
         title: "Avoir validé",
@@ -553,11 +595,12 @@ export default function Avoirs() {
         delete updated[avoirId]; // Supprimer complètement l'entrée
         return updated;
       });
+      // L'avoir sera revérifié au rechargement de la liste
+      verifiedReferencesRef.current.delete(avoirId);
 
-      console.log('✅ Avoir dévalidé - État local mis à jour:', avoirId);
+      // Recharger les avoirs pour voir les changements en base (toutes les
-
+      // variantes de clé : la clé contient l'URL avec le magasin sélectionné)
-      // Recharger les avoirs pour voir les changements en base
+      invalidateAvoirs();
-      queryClient.invalidateQueries({ queryKey: ['/api/avoirs'] });
 
       toast({
         title: "Avoir dévalidé",
@@ -593,26 +636,14 @@ export default function Avoirs() {
       }));
 
       // Auto-remplissage sécurisé si facture trouvée et montant disponible
+      // (seulement si le montant change : sinon la mise à jour serait inutile)
       if (result?.exists === true && result?.invoiceAmount !== undefined && result?.invoiceAmount !== null) {
         const avoir = avoirs?.find(a => a?.id === variables.avoirId);
-        if (avoir && avoir.supplierId && avoir.groupId) {
+        if (avoir && avoir.supplierId && avoir.groupId && amountDiffers(avoir.amount, result.invoiceAmount)) {
-          try {
-            console.log('🔄 Auto-remplissage montant:', { avoirId: variables.avoirId, amount: result.invoiceAmount });
           editAvoirMutation.mutate({
             id: variables.avoirId,
-              data: {
+            data: buildAmountUpdate(avoir, result.invoiceAmount),
-                supplierId: avoir.supplierId,
-                groupId: avoir.groupId,
-                invoiceReference: avoir.invoiceReference || "",
-                amount: result.invoiceAmount,
-                comment: avoir.comment || "",
-                commercialProcessed: avoir.commercialProcessed || false,
-                status: avoir.status as "En attente de demande" | "Demandé" | "Reçu",
-              }
           });
-          } catch (autoFillError) {
-            console.error('❌ Erreur auto-remplissage:', autoFillError);
-          }
         }
       }
       
@@ -669,13 +700,8 @@ export default function Avoirs() {
       return;
     }
 
-    console.log('🔍 Déclenchement vérification avoir:', {
+    // Référence vérifiée : le rechargement de la liste ne la revérifiera pas
-      avoirId: avoir.id,
+    verifiedReferencesRef.current.set(avoir.id, avoir.invoiceReference || '');
-      invoiceReference: avoir.invoiceReference,
-      supplier: avoir.supplier?.name,
-      group: avoir.group?.name
-    });
-    
     setVerifyingAvoirs(prev => new Set(prev).add(avoir.id));
     
     verifyAvoirInvoiceMutation.mutate({
@@ -685,8 +711,11 @@ export default function Avoirs() {
     });
   };
 
-  // Fonction pour vérifier tous les avoirs avec une référence facture
+  // Fonction pour vérifier tous les avoirs avec une référence facture.
-  const handleVerifyAllAvoirInvoices = () => {
+  // File d'attente bornée, montants remplis sans recharger la liste à chaque
+  // avoir (ni toast, ni fermeture de modale), puis un seul rafraîchissement et
+  // un seul toast récapitulatif à la fin.
+  const handleVerifyAllAvoirInvoices = async () => {
     const avoirsToVerify = avoirs.filter(avoir => 
       avoir.invoiceReference?.trim() && 
       (avoir.group?.nocodbTableName || avoir.group?.nocodbConfigId)
@@ -700,21 +729,84 @@ export default function Avoirs() {
       return;
     }
 
-    avoirsToVerify.forEach((avoir, index) => {
-      // Délai échelonné pour éviter la surcharge
-      setTimeout(() => {
-        handleVerifyAvoirInvoice(avoir, true); // Force refresh pour tous
-      }, index * 200); // 200ms entre chaque vérification
-    });
-
     toast({
       title: "Vérification lancée",
       description: `Vérification de ${avoirsToVerify.length} avoir(s) en cours...`,
     });
-  };
 
-  // ✅ SUPPRIMÉ : Le chargement automatique causait des crashes JavaScript
+    setVerifyingAvoirs(prev => {
-  // Les vérifications se font maintenant uniquement à la demande utilisateur
+      const next = new Set(prev);
+      avoirsToVerify.forEach(avoir => next.add(avoir.id));
+      return next;
+    });
+    avoirsToVerify.forEach(avoir => verifiedReferencesRef.current.set(avoir.id, avoir.invoiceReference || ''));
+
+    let found = 0;
+    let notFound = 0;
+    let failed = 0;
+    let amountsUpdated = 0;
+
+    await runVerificationTasks(avoirsToVerify.map(avoir => async () => {
+      let result: any;
+      let requestFailed = false;
+      try {
+        result = await apiRequest(`/api/avoirs/${avoir.id}/verify-invoice`, 'POST', {
+          invoiceReference: avoir.invoiceReference,
+          forceRefresh: true // Force refresh pour tous
+        });
+      } catch (error) {
+        console.error('Erreur vérification facture avoir:', error);
+        requestFailed = true;
+        result = {
+          exists: false,
+          matchType: 'none',
+          errorMessage: error instanceof Error ? error.message : 'Erreur inconnue'
+        };
+      }
+
+      setAvoirVerificationResults(prev => ({ ...prev, [avoir.id]: result }));
+      setVerifyingAvoirs(prev => {
+        const next = new Set(prev);
+        next.delete(avoir.id);
+        return next;
+      });
+
+      if (requestFailed) {
+        failed += 1;
+        return;
+      }
+      if (result?.exists !== true) {
+        notFound += 1;
+        return;
+      }
+      found += 1;
+
+      // Report du montant de la facture, à partir des données les plus récentes de l'avoir
+      if (result.invoiceAmount === undefined || result.invoiceAmount === null) return;
+      const current = avoirsRef.current.find(a => a?.id === avoir.id) ?? avoir;
+      if (!current.supplierId || !current.groupId || !amountDiffers(current.amount, result.invoiceAmount)) return;
+      try {
+        await apiRequest(`/api/avoirs/${avoir.id}`, 'PUT', buildAmountUpdate(current, result.invoiceAmount));
+        amountsUpdated += 1;
+      } catch (error) {
+        console.error('❌ Erreur auto-remplissage:', error);
+      }
+    }));
+
+    // Un seul rechargement de la liste, seulement si des montants ont changé
+    if (amountsUpdated > 0) {
+      invalidateAvoirs();
+    }
+
+    const details = [`${found} facture(s) trouvée(s)`, `${notFound} introuvable(s)`];
+    if (failed > 0) details.push(`${failed} erreur(s)`);
+    if (amountsUpdated > 0) details.push(`${amountsUpdated} montant(s) mis à jour`);
+    toast({
+      title: "Vérification terminée",
+      description: details.join(', '),
+      variant: failed > 0 ? "destructive" : "default",
+    });
+  };
 
   // 🔥 FONCTIONS WEBHOOK MODAL (comme rapprochement)
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -743,22 +835,9 @@ export default function Avoirs() {
     setIsUploading(false);
   };
 
-  const startProcessingTimer = () => {
-    setProcessingSeconds(0);
-    const interval = setInterval(() => {
-      setProcessingSeconds(prev => prev + 1);
-    }, 1000);
-    setProcessingTimeout(interval);
-  };
-
   const handleCloseWaitingModal = () => {
     setShowWaitingModal(false);
     setIsUploading(false);
-    setProcessingSeconds(0);
-    if (processingTimeout) {
-      clearInterval(processingTimeout);
-      setProcessingTimeout(null);
-    }
   };
 
   const handleSendAvoir = async () => {
@@ -789,7 +868,6 @@ export default function Avoirs() {
     setShowAvoirModal(false);
     setShowWaitingModal(true);
     setIsUploading(true);
-    startProcessingTimer();
 
     try {
       const formData = new FormData();
@@ -833,11 +911,7 @@ export default function Avoirs() {
       setSelectedFile(null);
 
       // Invalider les caches pour recharger
-      queryClient.invalidateQueries({ 
+      invalidateAvoirs();
-        predicate: (query) => {
-          return query.queryKey[0]?.toString().includes('/api/avoirs') || false;
-        }
-      });
       
     } catch (error: any) {
       handleCloseWaitingModal();
@@ -867,17 +941,6 @@ export default function Avoirs() {
     }
   };
 
-  // Filter avoirs based on search term
-  const filteredAvoirs = avoirs.filter(avoir =>
-    avoir.invoiceReference?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    avoir.supplier?.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    avoir.comment?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    (avoir.creator.firstName && avoir.creator.lastName 
-      ? `${avoir.creator.firstName} ${avoir.creator.lastName}`.toLowerCase().includes(searchTerm.toLowerCase())
-      : avoir.creator.username.toLowerCase().includes(searchTerm.toLowerCase())
-    )
-  );
-
   // Status badge variant
   const getStatusVariant = (status: string) => {
     switch (status) {
@@ -906,24 +969,27 @@ export default function Avoirs() {
     }
   };
 
-  // Séparer les avoirs par statut : Finalisé = Reçu ET validé
+  // Séparer les avoirs par statut : Finalisé = Reçu ET validé (recalculé
-  const pendingAvoirs = avoirs.filter(avoir => !(avoir.status === 'Reçu' && avoir.nocodbVerified));
+  // seulement quand la liste change, pas à chaque frappe ou résultat de vérification)
-  const completedAvoirs = avoirs.filter(avoir => avoir.status === 'Reçu' && avoir.nocodbVerified);
+  const pendingAvoirs = useMemo(
-
+    () => avoirs.filter(avoir => !(avoir.status === 'Reçu' && avoir.nocodbVerified)),
-  // Filtrage par recherche
+    [avoirs]
-  const filterAvoirs = (avoirsList: Avoir[]) => {
+  );
-    return avoirsList.filter((avoir) => {
+  const completedAvoirs = useMemo(
-      const searchLower = searchTerm.toLowerCase();
+    () => avoirs.filter(avoir => avoir.status === 'Reçu' && avoir.nocodbVerified),
-      return (
+    [avoirs]
-        avoir.supplier?.name?.toLowerCase().includes(searchLower) ||
-        avoir.invoiceReference?.toLowerCase().includes(searchLower) ||
-        avoir.comment?.toLowerCase().includes(searchLower)
   );
-    });
-  };
 
-  const filteredPendingAvoirs = filterAvoirs(pendingAvoirs);
+  // Filtrage par recherche, différée pour garder la saisie fluide
-  const filteredCompletedAvoirs = filterAvoirs(completedAvoirs);
+  const deferredSearchTerm = useDeferredValue(searchTerm);
+  const filteredPendingAvoirs = useMemo(
+    () => filterAvoirsBySearch(pendingAvoirs, deferredSearchTerm),
+    [pendingAvoirs, deferredSearchTerm]
+  );
+  const filteredCompletedAvoirs = useMemo(
+    () => filterAvoirsBySearch(completedAvoirs, deferredSearchTerm),
+    [completedAvoirs, deferredSearchTerm]
+  );
 
   const canEditDelete = ['admin', 'directeur'].includes((user as any)?.role);
 
@@ -1243,7 +1309,8 @@ export default function Avoirs() {
               </CardDescription>
             </CardHeader>
             <CardContent className="p-0">
-              {renderAvoirTable(filteredPendingAvoirs)}
+              {/* Seul le tableau de l'onglet affiché est construit */}
+              {activeTab === "pending" && renderAvoirTable(filteredPendingAvoirs)}
             </CardContent>
           </Card>
         </TabsContent>
@@ -1260,7 +1327,7 @@ export default function Avoirs() {
               </CardDescription>
             </CardHeader>
             <CardContent className="p-0">
-              {renderAvoirTable(filteredCompletedAvoirs)}
+              {activeTab === "completed" && renderAvoirTable(filteredCompletedAvoirs)}
             </CardContent>
           </Card>
         </TabsContent>
@@ -1691,14 +1758,7 @@ export default function Avoirs() {
           
           <div className="flex flex-col items-center p-6">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-            <p className="text-sm text-gray-600 text-center">
+            <UploadElapsedTime />
-              Envoi du fichier vers le webhook... {processingSeconds}s
-            </p>
-            {processingSeconds > 30 && (
-              <p className="text-xs text-gray-500 mt-2 text-center">
-                Le traitement peut prendre quelques minutes
-              </p>
-            )}
           </div>
         </DialogContent>
       </Dialog>

client/src/pages/BLReconciliation.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo, useDeferredValue } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { safeFormat } from "@/lib/dateUtils";
 import { Button } from "@/components/ui/button";
@@ -20,6 +20,82 @@ import { Textarea } from "@/components/ui/textarea";
 import ReconciliationComments from "@/components/ReconciliationComments";
 import ReconciliationModal from "@/components/modals/ReconciliationModal";
 
+// Tableau vide stable tant que la liste n'est pas chargée (évite de relancer
+// effets et calculs mémoïsés à chaque rendu)
+const NO_DELIVERIES: any[] = [];
+
+// Clé de la liste du rapprochement : elle commence par '/api/deliveries', donc
+// toute invalidation des livraisons (ici ou depuis une autre page) l'atteint
+const RECONCILIATION_QUERY_KEY = ['/api/deliveries', 'reconciliation'] as const;
+
+// Filtrage des livraisons par recherche uniquement
+function filterDeliveriesBySearch(deliveries: any[], searchTerm: string) {
+  if (!searchTerm) return deliveries;
+
+  const searchLower = searchTerm.toLowerCase();
+  return deliveries.filter((delivery: any) => {
+    return (
+      delivery.supplier?.name?.toLowerCase().includes(searchLower) ||
+      delivery.blNumber?.toLowerCase().includes(searchLower) ||
+      delivery.invoiceReference?.toLowerCase().includes(searchLower) ||
+      delivery.group?.name?.toLowerCase().includes(searchLower)
+    );
+  });
+}
+
+// Progression affichée dans le modal d'attente (60 s max). Le compteur vit dans
+// ce composant pour ne pas re-rendre toute la page chaque seconde ; il repart de
+// zéro à chaque ouverture du modal et s'arrête à sa fermeture.
+function WaitingProgress() {
+  const [processingSeconds, setProcessingSeconds] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProcessingSeconds(prev => {
+        if (prev >= 60) {
+          clearInterval(interval);
+          return 60;
+        }
+        return prev + 1;
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="text-center">
+      <div className="w-16 h-16 mx-auto mb-4 relative">
+        <div className="w-16 h-16 border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin"></div>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-xs font-bold text-blue-600">{processingSeconds}s</span>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="font-medium text-gray-900">
+          Traitement de votre facture en cours...
+        </h3>
+        <p className="text-sm text-gray-600">
+          Le workflow peut prendre jusqu'à 1 minute.
+          <br />
+          Veuillez patienter.
+        </p>
+      </div>
+
+      <div className="mt-4 bg-gray-100 rounded-full h-2 w-full">
+        <div
+          className="bg-blue-600 h-2 rounded-full transition-all duration-1000 ease-out"
+          style={{ width: `${Math.min((processingSeconds / 60) * 100, 100)}%` }}
+        ></div>
+      </div>
+
+      <div className="mt-2 text-xs text-gray-500">
+        {processingSeconds < 60 ? `${60 - processingSeconds}s restantes (max)` : 'Finalisation...'}
+      </div>
+    </div>
+  );
+}
+
 export default function BLReconciliation() {
   const { user } = useAuthUnified();
   const { selectedStoreId } = useStore();
@@ -59,10 +135,8 @@ export default function BLReconciliation() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
   
-  // État pour le modal d'attente du webhook
+  // État pour le modal d'attente du webhook (compteur dans WaitingProgress)
   const [showWaitingModal, setShowWaitingModal] = useState(false);
-  const [processingSeconds, setProcessingSeconds] = useState(0);
-  const [processingTimeout, setProcessingTimeout] = useState<NodeJS.Timeout | null>(null);
   
   // État pour le système de vérification de facture
   const [verificationResults, setVerificationResults] = useState<Record<number, any>>({});
@@ -74,11 +148,6 @@ export default function BLReconciliation() {
   const [showCommentModal, setShowCommentModal] = useState(false);
   const [selectedDeliveryForComment, setSelectedDeliveryForComment] = useState<any>(null);
 
-  // Récupérer les fournisseurs pour la logique automatique
-  const { data: suppliers = [] } = useQuery<any[]>({
-    queryKey: ['/api/suppliers'],
-  });
-
   // Historique des relances fournisseurs : dernier envoi affiché sur l'icône mail
   const { data: supplierMailLogs = [] } = useQuery<any[]>({
     queryKey: ['/api/supplier-mail-logs', selectedStoreId],
@@ -125,6 +194,15 @@ export default function BLReconciliation() {
   // Invalidation de cache différée : une seule fois quand la file est vidée
   const needsCacheInvalidationRef = useRef(false);
 
+  // Après une modification de livraison : la liste du rapprochement et les
+  // autres listes de livraisons sont invalidées par préfixe (seules les requêtes
+  // affichées sont rechargées) ; l'échéancier, calculé à partir des mêmes
+  // livraisons, est seulement marqué périmé.
+  const invalidateDeliveries = () => Promise.all([
+    queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] }),
+    queryClient.invalidateQueries({ queryKey: ['/api/payment-schedule'] }),
+  ]);
+
   // Fonction de vérification de facture
   const verifyInvoiceMutation = useMutation({
     mutationFn: async ({ deliveryId, invoiceReference, blNumber, forceRefresh }: { deliveryId: number; invoiceReference?: string; blNumber?: string; forceRefresh?: boolean; silent?: boolean }) => {
@@ -148,42 +226,17 @@ export default function BLReconciliation() {
       
       // Pas de toast - affichage silencieux des coches vertes/rouges
 
-      // Auto-remplissage si facture trouvée (référence facture OU numéro BL)
+      // Auto-remplissage : le serveur (verify-invoice) enregistre déjà sur la
-      if (result.exists) {
+      // livraison la référence, les montants et l'échéance trouvés. Il suffit de
-        const updateData: any = {};
+      // recharger la liste, une seule fois quand la file est vidée : sinon
-
+      // chaque résultat relancerait un refetch complet, qui relancerait l'effet
-        // Ajouter la référence de facture SEULEMENT si trouvée via BL (pas déjà renseignée)
+      // de vérification automatique.
-        if (result.invoiceReference && result.matchType === 'bl_number') {
+      if (result.exists && (
-          updateData.invoiceReference = result.invoiceReference;
+        (result.invoiceReference && result.matchType === 'bl_number') ||
-        }
+        (result.invoiceAmount !== undefined && result.invoiceAmount !== null) ||
-
+        result.dueDate
-        // TOUJOURS mettre à jour le montant si disponible (peu importe le matchType)
+      )) {
-        if (result.invoiceAmount !== undefined && result.invoiceAmount !== null) {
-          updateData.invoiceAmount = result.invoiceAmount;
-        }
-
-        // TOUJOURS mettre à jour la date d'échéance si disponible (peu importe le matchType)
-        if (result.dueDate) {
-          updateData.dueDate = result.dueDate;
-        }
-
-        if (import.meta.env.DEV) {
-          console.log('📝 Auto-remplissage:', { deliveryId: variables.deliveryId, updateData, matchType: result.matchType });
-        }
-
-        // Ne faire l'appel que si on a des données à mettre à jour
-        if (Object.keys(updateData).length > 0) {
-          apiRequest(`/api/deliveries/${variables.deliveryId}`, "PUT", updateData)
-            .then(() => {
-              // Invalidation différée : sinon chaque auto-remplissage relance un
-              // refetch complet de la liste, qui relance l'effet, qui relance des
-              // vérifications... jusqu'à saturer le navigateur.
         needsCacheInvalidationRef.current = true;
-            })
-            .catch((error) => {
-              console.error('❌ Erreur auto-remplissage:', error);
-            });
-        }
       }
 
       setVerifyingDeliveries(prev => {
@@ -234,16 +287,6 @@ export default function BLReconciliation() {
       const { delivery, forceRefresh, silent } = next;
       activeVerificationsRef.current += 1;
 
-      if (import.meta.env.DEV) {
-        console.log('🔍 Déclenchement vérification:', {
-          deliveryId: delivery.id,
-          invoiceReference: delivery.invoiceReference,
-          blNumber: delivery.blNumber,
-          supplier: delivery.supplier?.name,
-          enAttente: verificationQueueRef.current.length
-        });
-      }
-
       verifyInvoiceMutation
         .mutateAsync({
           deliveryId: delivery.id,
@@ -266,8 +309,7 @@ export default function BLReconciliation() {
             needsCacheInvalidationRef.current
           ) {
             needsCacheInvalidationRef.current = false;
-            queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
+            invalidateDeliveries();
-            queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
           }
         });
     }
@@ -345,11 +387,14 @@ export default function BLReconciliation() {
     });
   };
 
-  // Récupérer les livraisons validées avec BL - CACHE INVALIDÉ après modifications
+  // Récupérer les livraisons livrées (onglets manuel et validées). Toute
-  const { data: deliveriesWithBL = [], isLoading, refetch } = useQuery({
+  // modification de livraison invalide ['/api/deliveries'], donc cette liste :
-    queryKey: ['/api/deliveries/bl', selectedStoreId],
+  // le cache par défaut (30 s) évite de la retélécharger à chaque visite.
+  const { data: deliveriesWithBL = NO_DELIVERIES, isLoading } = useQuery<any[]>({
+    queryKey: [...RECONCILIATION_QUERY_KEY, selectedStoreId],
     queryFn: async () => {
-      const params = new URLSearchParams({});
+      // Seules les livraisons livrées sont demandées (filtre appliqué en base)
+      const params = new URLSearchParams({ status: 'delivered' });
       if (selectedStoreId && (user?.role === 'admin' || user?.role === 'directeur')) {
         params.append('storeId', selectedStoreId.toString());
       }
@@ -364,31 +409,23 @@ export default function BLReconciliation() {
       
       const deliveries = await response.json();
       
-      // Debug désactivé en production pour éviter latence
+      // Filtre conservé par sécurité si le serveur ignore le paramètre status
-      if (import.meta.env.DEV && deliveries[0]) {
-        console.log('🔍 DEBUG - Première livraison:', deliveries[0]);
-      }
       const filtered = Array.isArray(deliveries) ? deliveries.filter((d: any) => d.status === 'delivered') : [];
       
       return filtered.sort((a: any, b: any) => new Date(b.deliveredDate || b.updatedAt).getTime() - new Date(a.deliveredDate || a.updatedAt).getTime());
     },
     enabled: !!user,
-    staleTime: 0 // Éviter la mise en cache pour toujours avoir les dernières données BL
   });
 
   // VÉRIFICATION AUTOMATIQUE AU CHARGEMENT avec système de cache
   //
-  // Cet effet ne dépend QUE des données (livraisons + fournisseurs) : y ajouter
+  // Cet effet ne dépend QUE des livraisons : y ajouter
   // verificationResults/verifyingDeliveries le relançait à chaque résultat reçu,
   // ce qui reprogrammait en boucle les mêmes vérifications.
   // Le dédoublonnage s'appuie sur autoRequestedIdsRef (ref, pas state) pour être
   // effectif immédiatement, sans attendre un re-rendu.
   useEffect(() => {
-    if (!deliveriesWithBL.length || !suppliers.length) return;
+    if (!deliveriesWithBL.length) return;
-
-    if (import.meta.env.DEV) {
-      console.log('🔄 Déclenchement vérifications automatiques...');
-    }
 
     // Résultats déduits localement (sans appel réseau) pour afficher les coches
     const cachedResults: Record<number, any> = {};
@@ -450,19 +487,19 @@ export default function BLReconciliation() {
 
       return changed ? merged : prev;
     });
-  }, [deliveriesWithBL, suppliers]);
+  }, [deliveriesWithBL]);
 
-  // Séparer les livraisons : non validées manuelles et toutes les validées
+  // Séparer les livraisons : non validées manuelles et toutes les validées.
-  const manualNotValidatedDeliveries = deliveriesWithBL.filter((delivery: any) => {
+  // Le fournisseur (dont automaticReconciliation) est joint à chaque livraison.
-    const supplier = suppliers.find(s => s.id === delivery.supplierId);
+  const manualNotValidatedDeliveries = useMemo(() => deliveriesWithBL.filter((delivery: any) => {
-    const isManual = supplier?.automaticReconciliation !== true;
+    const isManual = delivery.supplier?.automaticReconciliation !== true;
     const isNotValidated = delivery.reconciled !== true && delivery.reconciled !== 1;
     return isManual && isNotValidated;
-  });
+  }), [deliveriesWithBL]);
 
-  const allValidatedDeliveries = deliveriesWithBL.filter((delivery: any) => {
+  const allValidatedDeliveries = useMemo(() => deliveriesWithBL.filter((delivery: any) => {
     return delivery.reconciled === true || delivery.reconciled === 1;
-  });
+  }), [deliveriesWithBL]);
 
   // Fonctions de gestion
   const handleOpenModal = (delivery: any) => {
@@ -477,9 +514,13 @@ export default function BLReconciliation() {
 
   const handleSaveReconciliation = async () => {
     try {
-      // Force refetch immédiat pour mettre à jour l'affichage
+      // Mise à jour de l'affichage : seules les listes affichées sont rechargées.
-      await queryClient.refetchQueries({ queryKey: ['/api/deliveries/bl'] });
+      // cancelRefetch: false réutilise le rechargement déjà lancé par la modale
-      await queryClient.refetchQueries({ queryKey: ['/api/deliveries'] });
+      // (après l'enregistrement) au lieu d'en relancer un second.
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] }, { cancelRefetch: false }),
+        queryClient.invalidateQueries({ queryKey: ['/api/payment-schedule'] }),
+      ]);
       handleCloseModal();
     } catch (error) {
       toast({
@@ -517,25 +558,6 @@ export default function BLReconciliation() {
 
   const handleCloseWaitingModal = () => {
     setShowWaitingModal(false);
-    setProcessingSeconds(0);
-    if (processingTimeout) {
-      clearTimeout(processingTimeout);
-      setProcessingTimeout(null);
-    }
-  };
-
-  const startProcessingTimer = () => {
-    setProcessingSeconds(0);
-    const interval = setInterval(() => {
-      setProcessingSeconds(prev => {
-        if (prev >= 60) {
-          clearInterval(interval);
-          return 60;
-        }
-        return prev + 1;
-      });
-    }, 1000);
-    setProcessingTimeout(interval);
   };
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -574,7 +596,6 @@ export default function BLReconciliation() {
     setShowInvoiceModal(false);
     setShowWaitingModal(true);
     setIsUploading(true);
-    startProcessingTimer();
 
     try {
       const formData = new FormData();
@@ -609,19 +630,13 @@ export default function BLReconciliation() {
 
       // Relancer la vérification de la facture qui vient d'être traitée
       try {
-        // Invalidation des caches pour forcer le rechargement des données
+        // Recharger les livraisons (une seule requête pour la liste affichée)
-        queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
+        await invalidateDeliveries();
-        queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
-        
-        // Recharger les données
-        await refetch();
         
         // Attendre un peu que les données soient à jour, puis vérifier cette livraison spécifique
         setTimeout(() => {
           handleVerifyInvoice(selectedDeliveryForInvoice, true);
         }, 1000);
-        
-        console.log('🔄 Vérification automatique relancée pour la livraison traitée par webhook');
       } catch (error) {
         console.error('Erreur lors de la relance de la vérification:', error);
       }
@@ -658,28 +673,13 @@ export default function BLReconciliation() {
     // Et il faut qu'il y ait un magasin assigné avec un webhook
     const hasValidGroup = delivery.group && delivery.group.webhookUrl;
 
-    // Debug uniquement en développement
-    if (import.meta.env.DEV && delivery && delivery.supplier?.name) {
-      console.log(`🔍 Debug bouton facture pour ${delivery.supplier.name}:`, {
-        isNotValidated,
-        hasNoInvoiceReference,
-        hasValidGroup,
-        shouldShow: (isNotValidated || hasNoInvoiceReference) && hasValidGroup
-      });
-    }
-    
     return (isNotValidated || hasNoInvoiceReference) && hasValidGroup;
   };
 
-  // Email du fournisseur : donnée jointe à la livraison, avec repli sur la liste des fournisseurs
+  // Email du fournisseur : la fiche fournisseur complète est jointe à la livraison
   const getSupplierEmail = (delivery: any): string => {
-    const fromDelivery = delivery?.supplier?.email;
+    const email = delivery?.supplier?.email;
-    if (fromDelivery && String(fromDelivery).trim()) {
+    return email && String(email).trim() ? String(email).trim() : '';
-      return String(fromDelivery).trim();
-    }
-
-    const supplier = suppliers.find((s: any) => s.id === delivery?.supplierId);
-    return supplier?.email ? String(supplier.email).trim() : '';
   };
 
   // Envoi de la demande de facture (PDF) / BL (Excel) au fournisseur.
@@ -745,7 +745,7 @@ export default function BLReconciliation() {
       });
       
       // Mise à jour optimiste du cache local pour disparition immédiate
-      queryClient.setQueryData(['/api/deliveries/bl', selectedStoreId], (oldData: any) => {
+      queryClient.setQueryData([...RECONCILIATION_QUERY_KEY, selectedStoreId], (oldData: any) => {
         if (!oldData) return oldData;
         return oldData.map((d: any) => 
           d.id === delivery.id 
@@ -754,12 +754,11 @@ export default function BLReconciliation() {
         );
       });
       
-      // Force refetch pour synchroniser avec le serveur
+      // Synchronisation avec le serveur (listes affichées uniquement)
-      queryClient.refetchQueries({ queryKey: ['/api/deliveries/bl'] });
+      invalidateDeliveries();
-      queryClient.refetchQueries({ queryKey: ['/api/deliveries'] });
     } catch (error) {
-      // En cas d'erreur, refetch pour annuler la mise à jour optimiste
+      // En cas d'erreur, rechargement pour resynchroniser la liste
-      queryClient.refetchQueries({ queryKey: ['/api/deliveries/bl'] });
+      queryClient.invalidateQueries({ queryKey: RECONCILIATION_QUERY_KEY });
       toast({
         title: "Erreur",
         description: "Impossible de valider le rapprochement",
@@ -793,9 +792,8 @@ export default function BLReconciliation() {
         description: "Rapprochement dévalidé avec succès",
       });
       
-      // Force refetch immédiat pour déplacer la facture dans l'onglet manuel
+      // Rechargement immédiat pour déplacer la facture dans l'onglet manuel
-      await queryClient.refetchQueries({ queryKey: ['/api/deliveries/bl'] });
+      await invalidateDeliveries();
-      await queryClient.refetchQueries({ queryKey: ['/api/deliveries'] });
     } catch (error) {
       toast({
         title: "Erreur",
@@ -828,17 +826,16 @@ export default function BLReconciliation() {
       });
       
       // Mise à jour optimiste du cache local pour disparition immédiate
-      queryClient.setQueryData(['/api/deliveries/bl', selectedStoreId], (oldData: any) => {
+      queryClient.setQueryData([...RECONCILIATION_QUERY_KEY, selectedStoreId], (oldData: any) => {
         if (!oldData) return oldData;
         return oldData.filter((d: any) => d.id !== deliveryId);
       });
       
-      // Force refetch pour synchroniser avec le serveur
+      // Synchronisation avec le serveur (listes affichées uniquement)
-      queryClient.refetchQueries({ queryKey: ['/api/deliveries/bl'] });
+      invalidateDeliveries();
-      queryClient.refetchQueries({ queryKey: ['/api/deliveries'] });
     } catch (error) {
-      // En cas d'erreur, refetch pour annuler la mise à jour optimiste
+      // En cas d'erreur, rechargement pour resynchroniser la liste
-      queryClient.refetchQueries({ queryKey: ['/api/deliveries/bl'] });
+      queryClient.invalidateQueries({ queryKey: RECONCILIATION_QUERY_KEY });
       toast({
         title: "Erreur",
         description: "Impossible de supprimer la livraison",
@@ -847,23 +844,17 @@ export default function BLReconciliation() {
     }
   };
 
-  // Filtrage des livraisons par recherche uniquement
+  // Filtrage par recherche, recalculé seulement quand la liste ou la recherche
-  const filterDeliveries = (deliveries: any[]) => {
+  // change ; la recherche différée garde la saisie fluide sur une longue liste
-    if (!searchTerm) return deliveries;
+  const deferredSearchTerm = useDeferredValue(searchTerm);
-    
+  const filteredManualDeliveries = useMemo(
-    const searchLower = searchTerm.toLowerCase();
+    () => filterDeliveriesBySearch(manualNotValidatedDeliveries, deferredSearchTerm),
-    return deliveries.filter((delivery: any) => {
+    [manualNotValidatedDeliveries, deferredSearchTerm]
-      return (
+  );
-        delivery.supplier?.name?.toLowerCase().includes(searchLower) ||
+  const filteredValidatedDeliveries = useMemo(
-        delivery.blNumber?.toLowerCase().includes(searchLower) ||
+    () => filterDeliveriesBySearch(allValidatedDeliveries, deferredSearchTerm),
-        delivery.invoiceReference?.toLowerCase().includes(searchLower) ||
+    [allValidatedDeliveries, deferredSearchTerm]
-        delivery.group?.name?.toLowerCase().includes(searchLower)
   );
-    });
-  };
-
-  const filteredManualDeliveries = filterDeliveries(manualNotValidatedDeliveries);
-  const filteredValidatedDeliveries = filterDeliveries(allValidatedDeliveries);
 
   // Pagination pour les rapprochements manuels
   const {
@@ -1419,21 +1410,11 @@ export default function BLReconciliation() {
                     </thead>
                       <tbody className="bg-white divide-y divide-gray-200">
                         {paginatedValidatedDeliveries.map((delivery: any) => {
-                          const supplier = suppliers.find(s => s.id === delivery.supplierId);
+                          const isAutomatic = delivery.supplier?.automaticReconciliation === true;
-                          const isAutomatic = supplier?.automaticReconciliation === true;
                           const ecart = delivery.blAmount && delivery.invoiceAmount ? 
                             ((parseFloat(delivery.invoiceAmount) - parseFloat(delivery.blAmount)) / parseFloat(delivery.blAmount) * 100).toFixed(1) : 
                             null;
                           
-                          // Log pour déboguer le problème des commentaires
-                          if (import.meta.env.DEV && delivery.reconciliationCommentsCount) {
-                            console.log('🔍 Validated delivery comments:', {
-                              deliveryId: delivery.id,
-                              commentsCount: delivery.reconciliationCommentsCount,
-                              hasComments: delivery.reconciliationCommentsCount > 0
-                            });
-                          }
-                          
                           return (
                             <tr key={delivery.id} className="hover:bg-gray-50 bg-green-50">
                               <td className="px-6 py-4 whitespace-nowrap">
@@ -1690,36 +1671,7 @@ export default function BLReconciliation() {
             </DialogTitle>
           </DialogHeader>
           <div className="grid gap-6 py-6">
-            <div className="text-center">
+            <WaitingProgress />
-              <div className="w-16 h-16 mx-auto mb-4 relative">
-                <div className="w-16 h-16 border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin"></div>
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <span className="text-xs font-bold text-blue-600">{processingSeconds}s</span>
-                </div>
-              </div>
-              
-              <div className="space-y-2">
-                <h3 className="font-medium text-gray-900">
-                  Traitement de votre facture en cours...
-                </h3>
-                <p className="text-sm text-gray-600">
-                  Le workflow peut prendre jusqu'à 1 minute.
-                  <br />
-                  Veuillez patienter.
-                </p>
-              </div>
-              
-              <div className="mt-4 bg-gray-100 rounded-full h-2 w-full">
-                <div 
-                  className="bg-blue-600 h-2 rounded-full transition-all duration-1000 ease-out"
-                  style={{ width: `${Math.min((processingSeconds / 60) * 100, 100)}%` }}
-                ></div>
-              </div>
-              
-              <div className="mt-2 text-xs text-gray-500">
-                {processingSeconds < 60 ? `${60 - processingSeconds}s restantes (max)` : 'Finalisation...'}
-              </div>
-            </div>
             
             {selectedDeliveryForInvoice && (
               <div className="bg-blue-50 p-3 rounded-md">

client/src/pages/BackupManager.tsx

@@ -54,11 +54,19 @@ export default function BackupManager() {
   const canManageBackups = hasPermission(user?.role || '', 'backups', 'manage');
 
   // Fetch backup list
+  // Rafraîchissement automatique, suspendu quand l'onglet du navigateur est en
+  // arrière-plan (comportement par défaut de React Query) : toutes les 30 s tant
+  // qu'une sauvegarde est en cours, sinon toutes les 5 min (la liste ne change
+  // qu'à la sauvegarde automatique ou après une action, déjà suivie d'un rechargement)
   const { data: backups = [], isLoading, error } = useQuery({
     queryKey: ['/api/backups'],
     queryFn: () => apiRequest('/api/backups'),
     enabled: canManageBackups,
-    refetchInterval: 30000, // Refresh every 30 seconds
+    refetchInterval: (query) => {
+      const list = query.state.data;
+      const hasRunningBackup = Array.isArray(list) && list.some((backup: BackupFile) => backup.status === 'creating');
+      return hasRunningBackup ? 30 * 1000 : 5 * 60 * 1000;
+    },
   });
 
   // Fetch utilities configuration

client/src/pages/Calendar.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient, keepPreviousData } from "@tanstack/react-query";
 import { ChevronLeft, ChevronRight, Plus, RefreshCw, Calendar as CalendarIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import CalendarGrid from "@/components/CalendarGrid";
@@ -16,6 +16,9 @@ import { format, startOfMonth, endOfMonth } from "date-fns";
 import { fr } from "date-fns/locale";
 import { hasPermission } from "@/lib/permissions";
 
+// Référence stable tant que les données ne sont pas chargées (CalendarGrid est mémorisé)
+const NO_ITEMS: any[] = [];
+
 export default function Calendar() {
   const { user } = useAuthUnified();
   const { selectedStoreId } = useStore();
@@ -30,36 +33,20 @@ export default function Calendar() {
   const [selectedItem, setSelectedItem] = useState<any>(null);
 
 
-  const monthStart = startOfMonth(currentDate);
+  const startDate = format(startOfMonth(currentDate), 'yyyy-MM-dd');
-  const monthEnd = endOfMonth(currentDate);
+  const endDate = format(endOfMonth(currentDate), 'yyyy-MM-dd');
 
   // Fetch orders and deliveries for the current month with store filtering
-  const { data: orders = [], isLoading: loadingOrders } = useQuery({
+  const { data: orders = NO_ITEMS, isLoading: loadingOrders, isPlaceholderData: ordersPlaceholder } = useQuery({
-    queryKey: ['/api/orders', selectedStoreId, {
+    queryKey: ['/api/orders', selectedStoreId, { startDate, endDate }],
-      startDate: format(monthStart, 'yyyy-MM-dd'),
-      endDate: format(monthEnd, 'yyyy-MM-dd')
-    }],
     queryFn: async () => {
-      const params = new URLSearchParams({
+      const params = new URLSearchParams({ startDate, endDate });
-        startDate: format(monthStart, 'yyyy-MM-dd'),
-        endDate: format(monthEnd, 'yyyy-MM-dd')
-      });
       // CRITICAL FIX: Appliquer le filtrage par storeId pour TOUS les rôles, pas seulement admin
       if (selectedStoreId) {
         params.append('storeId', selectedStoreId.toString());
       }
 
-      const url = `/api/orders?${params.toString()}`;
+      const response = await fetch(`/api/orders?${params.toString()}`, {
-      if (import.meta.env.DEV) {
-        console.log('📅 Calendar fetching orders:', {
-          url,
-          selectedStoreId,
-          userRole: user?.role,
-          params: params.toString()
-        });
-      }
-
-      const response = await fetch(url, {
         credentials: 'include'
       });
 
@@ -68,9 +55,6 @@ export default function Calendar() {
       }
 
       const data = await response.json();
-      if (import.meta.env.DEV) {
-        console.log('📅 Calendar orders received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items');
-      }
 
       // Protection contre les données invalides en production
       if (!Array.isArray(data)) {
@@ -81,34 +65,22 @@ export default function Calendar() {
     },
     staleTime: 5 * 60 * 1000, // 5 minutes de cache pour éviter la disparition des données
     gcTime: 10 * 60 * 1000, // 10 minutes en cache
+    // Changement de mois : garder la grille affichée pendant le chargement au lieu
+    // du spinner. Jamais au changement de magasin (données d'un autre magasin).
+    placeholderData: (previousData, previousQuery) =>
+      previousQuery?.queryKey[1] === selectedStoreId ? keepPreviousData(previousData) : undefined,
   });
 
-  const { data: deliveries = [], isLoading: loadingDeliveries } = useQuery({
+  const { data: deliveries = NO_ITEMS, isLoading: loadingDeliveries, isPlaceholderData: deliveriesPlaceholder } = useQuery({
-    queryKey: ['/api/deliveries', selectedStoreId, {
+    queryKey: ['/api/deliveries', selectedStoreId, { startDate, endDate }],
-      startDate: format(monthStart, 'yyyy-MM-dd'),
-      endDate: format(monthEnd, 'yyyy-MM-dd')
-    }],
     queryFn: async () => {
-      const params = new URLSearchParams({
+      const params = new URLSearchParams({ startDate, endDate });
-        startDate: format(monthStart, 'yyyy-MM-dd'),
-        endDate: format(monthEnd, 'yyyy-MM-dd')
-      });
       // CRITICAL FIX: Appliquer le filtrage par storeId pour TOUS les rôles, pas seulement admin
       if (selectedStoreId) {
         params.append('storeId', selectedStoreId.toString());
       }
 
-      const url = `/api/deliveries?${params.toString()}`;
+      const response = await fetch(`/api/deliveries?${params.toString()}`, {
-      if (import.meta.env.DEV) {
-        console.log('📅 Calendar fetching deliveries:', {
-          url,
-          selectedStoreId,
-          userRole: user?.role,
-          params: params.toString()
-        });
-      }
-
-      const response = await fetch(url, {
         credentials: 'include'
       });
 
@@ -117,9 +89,6 @@ export default function Calendar() {
       }
 
       const data = await response.json();
-      if (import.meta.env.DEV) {
-        console.log('📅 Calendar deliveries received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items');
-      }
 
       // Protection contre les données invalides en production
       if (!Array.isArray(data)) {
@@ -130,10 +99,13 @@ export default function Calendar() {
     },
     staleTime: 5 * 60 * 1000, // 5 minutes de cache pour éviter la disparition des données
     gcTime: 10 * 60 * 1000, // 10 minutes en cache
+    // Même règle que pour les commandes : jamais au changement de magasin
+    placeholderData: (previousData, previousQuery) =>
+      previousQuery?.queryKey[1] === selectedStoreId ? keepPreviousData(previousData) : undefined,
   });
 
   // Fetch publicities for the current year
-  const { data: publicities = [], isLoading: loadingPublicities } = useQuery({
+  const { data: publicities = NO_ITEMS } = useQuery({
     queryKey: ['/api/ad-campaigns', currentDate.getFullYear(), selectedStoreId],
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -142,17 +114,7 @@ export default function Calendar() {
         params.append('storeId', selectedStoreId.toString());
       }
 
-      const url = `/api/ad-campaigns?${params.toString()}`;
+      const response = await fetch(`/api/ad-campaigns?${params.toString()}`, {
-      if (import.meta.env.DEV) {
-        console.log('📅 Calendar fetching publicities:', {
-          url,
-          selectedStoreId,
-          userRole: user?.role,
-          year: currentDate.getFullYear()
-        });
-      }
-
-      const response = await fetch(url, {
         credentials: 'include'
       });
 
@@ -161,11 +123,12 @@ export default function Calendar() {
       }
 
       const data = await response.json();
-      if (import.meta.env.DEV) {
-        console.log('📅 Calendar publicities received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items');
-      }
       return Array.isArray(data) ? data : [];
     },
+    // Changement d'année : garder les publicités affichées pendant le chargement,
+    // sauf au changement de magasin
+    placeholderData: (previousData, previousQuery) =>
+      previousQuery?.queryKey[2] === selectedStoreId ? keepPreviousData(previousData) : undefined,
   });
 
   const navigateMonth = (direction: 'prev' | 'next') => {
@@ -178,16 +141,18 @@ export default function Calendar() {
     setCurrentDate(newDate);
   };
 
-  const handleDateClick = (date: Date) => {
+  // Gestionnaires stables : CalendarGrid (mémorisé) n'est pas re-rendu à
+  // l'ouverture ou à la fermeture des modales
+  const handleDateClick = useCallback((date: Date) => {
     setSelectedDate(date);
     setShowQuickCreate(true);
-  };
+  }, []);
 
-  const handleItemClick = (item: any, type: 'order' | 'delivery') => {
+  const handleItemClick = useCallback((item: any, type: 'order' | 'delivery') => {
     // Ne pas invalider le cache à l'ouverture pour éviter la disparition des données
     setSelectedItem({ ...item, type });
     setShowOrderDetail(true);
-  };
+  }, []);
 
   const handleCreateOrder = () => {
     setShowQuickCreate(false);
@@ -201,7 +166,10 @@ export default function Calendar() {
 
 
 
-  const isLoading = loadingOrders || loadingDeliveries || loadingPublicities;
+  // La grille n'attend pas les publicités : elles s'affichent dès leur arrivée
+  const isLoading = loadingOrders || loadingDeliveries;
+  // Mois précédent encore affiché pendant le chargement du nouveau mois
+  const isMonthLoading = ordersPlaceholder || deliveriesPlaceholder;
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
@@ -284,16 +252,21 @@ export default function Calendar() {
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
           </div>
         ) : (
+          <div
+            className={`transition-opacity ${isMonthLoading ? 'opacity-60' : ''}`}
+            aria-busy={isMonthLoading}
+          >
             <CalendarGrid
               currentDate={currentDate}
-            orders={orders || []}
+              orders={orders}
-            deliveries={deliveries || []}
+              deliveries={deliveries}
-            publicities={publicities || []}
+              publicities={publicities}
               selectedStoreId={selectedStoreId}
-            userGroups={user?.userGroups || []}
+              userGroups={user?.userGroups || NO_ITEMS}
               onDateClick={handleDateClick}
               onItemClick={handleItemClick}
             />
+          </div>
         )}
       </div>
 

client/src/pages/Contacts.tsx

@@ -69,18 +69,14 @@ export default function Contacts() {
     queryKey: ["/api/suppliers"],
   });
 
-  const contactsQueryKey = effectiveGroupId
+  // Clé structurée : l'invalidation par préfixe ["/api/contacts"] des mutations
-    ? [`/api/contacts?groupId=${effectiveGroupId}`]
+  // ci-dessous rafraîchit aussi la liste filtrée par magasin
-    : ["/api/contacts"];
-
   const { data: contacts = [] } = useQuery<Contact[]>({
-    queryKey: contactsQueryKey,
+    queryKey: ["/api/contacts", effectiveGroupId ?? null],
-    queryFn: async () => {
+    queryFn: () =>
-      const url = effectiveGroupId
+      apiRequest(effectiveGroupId ? `/api/contacts?groupId=${effectiveGroupId}` : "/api/contacts", "GET"),
-        ? `/api/contacts?groupId=${effectiveGroupId}`
+    // Sans magasin, un non-admin ne voit pas la liste : pas de requête
-        : "/api/contacts";
+    enabled: !!user && (isAdmin || !!effectiveGroupId),
-      return await apiRequest(url, "GET");
-    },
   });
 
   const createMutation = useMutation({

client/src/pages/CustomerOrders.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
+import { useState, useMemo, useEffect } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -30,13 +30,12 @@ import {
 } from "@/components/ui/select";
 import { Pagination, usePagination } from "@/components/ui/pagination";
 import { Plus, Edit, Trash2, Phone, PhoneCall, Printer, Eye, Package, AlertCircle, MessageSquare } from "lucide-react";
-import JsBarcode from 'jsbarcode';
 import { safeFormat, safeDate } from "@/lib/dateUtils";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import { apiRequest } from "@/lib/queryClient";
 import { toast } from "@/hooks/use-toast";
-import type { CustomerOrderWithRelations, Group } from "@shared/schema";
+import type { CustomerOrderWithRelations } from "@shared/schema";
 import { CustomerOrderForm } from "@/components/CustomerOrderForm";
 import { CustomerOrderDetails } from "@/components/CustomerOrderDetails";
 import { ConfirmationModal } from "@/components/ConfirmationModal";
@@ -44,6 +43,10 @@ import ClientCallsModal from "@/components/modals/ClientCallsModal";
 import { useStore } from "@/contexts/StoreContext";
 import { usePermissions } from "@shared/permissions";
 
+// Référence stable tant que la liste n'est pas chargée (évite de recalculer
+// filtre et tri à chaque rendu)
+const NO_ORDERS: CustomerOrderWithRelations[] = [];
+
 export default function CustomerOrders() {
   const { user } = useAuthUnified();
   const { selectedStoreId } = useStore();
@@ -65,13 +68,11 @@ export default function CustomerOrders() {
   const [filterSupplier, setFilterSupplier] = useState<string>("all");
   const [filterStatus, setFilterStatus] = useState<string>("all");
 
-  // Fetch groups for store filter
-  const { data: groups = [] } = useQuery<Group[]>({
-    queryKey: ['/api/groups'],
-  });
-
   // Query pour les appels clients en attente
-  const { data: pendingCalls = [], isLoading: isPendingCallsLoading } = useQuery<CustomerOrderWithRelations[]>({
+  // Le serveur refuse cette liste aux employés (403) : la requête et son
+  // rafraîchissement toutes les 30 s ne sont lancés que pour les autres rôles.
+  const canViewPendingCalls = !!user && user.role !== 'employee';
+  const { data: pendingCalls = NO_ORDERS, isLoading: isPendingCallsLoading } = useQuery<CustomerOrderWithRelations[]>({
     queryKey: ['/api/customer-orders/pending-calls', selectedStoreId],
     queryFn: async () => {
       const pendingCallsUrl = `/api/customer-orders/pending-calls${selectedStoreId ? `?storeId=${selectedStoreId}` : ''}`;
@@ -79,11 +80,11 @@ export default function CustomerOrders() {
       if (!response.ok) {
         throw new Error('Failed to fetch pending calls');
       }
-      const data = await response.json();
+      return response.json();
-      console.log('📞 Customer Orders - Pending calls received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items');
-      return data;
     },
+    enabled: canViewPendingCalls,
     refetchInterval: 30000, // Refetch every 30 seconds
+    refetchIntervalInBackground: false, // pas de rafraîchissement onglet masqué
   });
 
   // Fetch suppliers for filter
@@ -93,21 +94,20 @@ export default function CustomerOrders() {
 
   // Fetch customer orders with store filtering for admins
   const customerOrdersUrl = `/api/customer-orders${selectedStoreId && user?.role === 'admin' ? `?storeId=${selectedStoreId}` : ''}`;
-  const { data: customerOrders = [], isLoading } = useQuery<CustomerOrderWithRelations[]>({
+  const { data: customerOrders = NO_ORDERS, isLoading, isPlaceholderData } = useQuery<CustomerOrderWithRelations[]>({
     queryKey: [customerOrdersUrl, selectedStoreId],
+    // Au changement de magasin, la liste précédente reste affichée (estompée,
+    // non cliquable, avec un indicateur) au lieu de l'écran « Chargement... »
+    placeholderData: keepPreviousData,
   });
 
   // Create mutation
   const createMutation = useMutation({
-    mutationFn: (data: any) => {
+    mutationFn: (data: any) => apiRequest('/api/customer-orders', 'POST', data),
-      console.log("🔥 CREATE MUTATION STARTED with data:", data);
+    onSuccess: () => {
-      return apiRequest('/api/customer-orders', 'POST', data);
+      // invalidateQueries recharge les listes affichées et marque les autres
-    },
+      // comme périmées (pas de second rechargement forcé)
-    onSuccess: (result) => {
-      console.log("✅ CREATE MUTATION SUCCESS:", result);
-      // Force refresh of the query with store context
       queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0]?.toString()?.includes('/api/customer-orders') ?? false });
-      queryClient.refetchQueries({ predicate: (query) => query.queryKey[0]?.toString()?.includes('/api/customer-orders') ?? false });
       setShowCreateModal(false);
       toast({
         title: "Succès",
@@ -243,15 +243,7 @@ export default function CustomerOrders() {
   };
 
   const handleCreateOrder = (data: any) => {
-    console.log("🎯 HANDLE CREATE ORDER CALLED with data:", data);
-    console.log("🎯 createMutation state:", { 
-      isIdle: createMutation.isIdle,
-      isPending: createMutation.isPending,
-      isError: createMutation.isError,
-      isSuccess: createMutation.isSuccess
-    });
     createMutation.mutate(data);
-    console.log("🎯 createMutation.mutate CALLED");
   };
 
   const handleEditOrder = (data: any) => {
@@ -298,7 +290,8 @@ export default function CustomerOrders() {
   };
 
   // Fonction pour générer un code-barres scannable
-  const generateEAN13Barcode = (code: string): string => {
+  // (JsBarcode est chargé à la demande par handlePrintLabel)
+  const generateEAN13Barcode = (JsBarcode: typeof import('jsbarcode'), code: string): string => {
     try {
       // Créer un canvas temporaire
       const canvas = document.createElement('canvas');
@@ -318,8 +311,6 @@ export default function CustomerOrders() {
       const checksum = calculateEAN13Checksum(processedCode);
       const ean13 = processedCode + checksum;
       
-      console.log('Code original:', code, 'EAN13 généré:', ean13);
-      
       // Générer le code-barres avec jsbarcode
       JsBarcode(canvas, ean13, {
         format: "EAN13",
@@ -378,11 +369,32 @@ export default function CustomerOrders() {
     }
   };
 
-  const handlePrintLabel = (order: CustomerOrderWithRelations) => {
+  const handlePrintLabel = async (order: CustomerOrderWithRelations) => {
-    // Ouvrir une nouvelle fenêtre pour imprimer l'étiquette
+    // Ouvrir une nouvelle fenêtre pour imprimer l'étiquette (immédiatement, dans
+    // le clic, pour ne pas être bloquée par le navigateur)
     const printWindow = window.open('', '_blank');
     if (printWindow) {
-      const barcodeDisplay = order.gencode ? generateEAN13Barcode(order.gencode) : '';
+      let barcodeDisplay = '';
+      if (order.gencode) {
+        // JsBarcode n'est téléchargé qu'au moment d'imprimer une étiquette
+        let JsBarcode: typeof import('jsbarcode');
+        try {
+          ({ default: JsBarcode } = await import('jsbarcode'));
+        } catch (error) {
+          // Fichier introuvable (nouvelle version en ligne) ou réseau coupé :
+          // pas d'étiquette avec un faux code-barres
+          console.error('Chargement du générateur de code-barres impossible:', error);
+          printWindow.close();
+          toast({
+            title: "Erreur",
+            description: "Impossible de préparer l'étiquette, réessayez",
+            variant: "destructive",
+          });
+          return;
+        }
+        barcodeDisplay = generateEAN13Barcode(JsBarcode, order.gencode);
+      }
+      if (printWindow.closed) return;
       const isImageBarcode = barcodeDisplay.startsWith('data:');
       
       printWindow.document.write(`
@@ -653,16 +665,23 @@ export default function CustomerOrders() {
     }
   };
 
+  // Filtre et tri recalculés seulement quand la liste ou un critère change
+  // (et non à chaque rendu, par exemple à chaque frappe dans le commentaire d'appel)
+  const sortedOrders = useMemo(() => {
+    if (!Array.isArray(customerOrders)) return NO_ORDERS;
+
+    const search = searchTerm.toLowerCase();
+
     // Filter orders based on search term, supplier, and status
-  const filteredOrders = Array.isArray(customerOrders) ? customerOrders.filter(order => {
+    const filteredOrders = customerOrders.filter(order => {
       // Search term filter
       const matchesSearch = !searchTerm ||
-      order.customerName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        order.customerName.toLowerCase().includes(search) ||
-      order.productDesignation.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        order.productDesignation.toLowerCase().includes(search) ||
         order.customerPhone.includes(searchTerm) ||
-      (order.productReference && order.productReference.toLowerCase().includes(searchTerm.toLowerCase())) ||
+        (order.productReference && order.productReference.toLowerCase().includes(search)) ||
-      (order.gencode && order.gencode.toLowerCase().includes(searchTerm.toLowerCase())) ||
+        (order.gencode && order.gencode.toLowerCase().includes(search)) ||
-      (order.supplier && order.supplier.name.toLowerCase().includes(searchTerm.toLowerCase()));
+        (order.supplier && order.supplier.name.toLowerCase().includes(search));
 
       // Supplier filter
       const matchesSupplier = filterSupplier === "all" ||
@@ -672,55 +691,41 @@ export default function CustomerOrders() {
       const matchesStatus = filterStatus === "all" || order.status === filterStatus;
 
       return matchesSearch && matchesSupplier && matchesStatus;
-  }) : [];
+    });
-
-  // Sort orders - Active orders first, then "Retiré" orders last
-  const sortedOrders = (() => {
-    // Séparer les commandes en deux groupes
-    const activeOrders = filteredOrders.filter(order => order.status !== "Retiré");
-    const retiredOrders = filteredOrders.filter(order => order.status === "Retiré");
-    
-    // Fonction de tri commune
-    const sortFunction = (a: any, b: any) => {
-      let aValue: string | number;
-      let bValue: string | number;
 
+    // Valeur de tri calculée une seule fois par commande (et non à chaque comparaison)
+    const getSortValue = (order: CustomerOrderWithRelations): string | number => {
       switch (sortBy) {
-        case "date":
-          const dateA = safeDate(a.createdAt);
-          const dateB = safeDate(b.createdAt);
-          aValue = dateA ? dateA.getTime() : 0;
-          bValue = dateB ? dateB.getTime() : 0;
-          break;
         case "status":
-          aValue = a.status;
+          return order.status;
-          bValue = b.status;
-          break;
         case "supplier":
-          aValue = a.supplier?.name || "";
+          return order.supplier?.name || "";
-          bValue = b.supplier?.name || "";
+        case "date":
-          break;
+        default: {
-        default:
+          const date = safeDate(order.createdAt);
-          const defaultDateA = safeDate(a.createdAt);
+          return date ? date.getTime() : 0;
-          const defaultDateB = safeDate(b.createdAt);
-          aValue = defaultDateA ? defaultDateA.getTime() : 0;
-          bValue = defaultDateB ? defaultDateB.getTime() : 0;
         }
-
-      if (sortOrder === "desc") {
-        return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
-      } else {
-        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
       }
     };
 
-    // Trier chaque groupe séparément
+    // Fonction de tri commune
-    const sortedActiveOrders = [...activeOrders].sort(sortFunction);
+    const sortGroup = (orders: CustomerOrderWithRelations[]) =>
-    const sortedRetiredOrders = [...retiredOrders].sort(sortFunction);
+      orders
+        .map(order => ({ order, value: getSortValue(order) }))
+        .sort((a, b) => {
+          if (sortOrder === "desc") {
+            return a.value > b.value ? -1 : a.value < b.value ? 1 : 0;
+          } else {
+            return a.value < b.value ? -1 : a.value > b.value ? 1 : 0;
+          }
+        })
+        .map(entry => entry.order);
 
-    // Concaténer : commandes actives d'abord, puis retiré en dernier
+    // Sort orders - Active orders first, then "Retiré" orders last
-    return [...sortedActiveOrders, ...sortedRetiredOrders];
+    const activeOrders = filteredOrders.filter(order => order.status !== "Retiré");
-  })();
+    const retiredOrders = filteredOrders.filter(order => order.status === "Retiré");
+    return [...sortGroup(activeOrders), ...sortGroup(retiredOrders)];
+  }, [customerOrders, searchTerm, filterSupplier, filterStatus, sortBy, sortOrder]);
 
   // Pagination
   const {
@@ -733,6 +738,12 @@ export default function CustomerOrders() {
     totalItems
   } = usePagination(sortedOrders, 10);
 
+  // Retour à la première page au changement de magasin (la liste précédente
+  // reste affichée pendant le chargement, sa longueur ne change donc pas)
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [selectedStoreId, setCurrentPage]);
+
   return (
     <div className="p-6 space-y-6">
       {/* Alerte pour les appels clients en attente */}
@@ -823,9 +834,19 @@ export default function CustomerOrders() {
         <CardHeader>
           <CardTitle className="text-lg">
             Commandes ({totalItems})
+            {isPlaceholderData && (
+              <span className="inline-flex items-center gap-1 ml-2 text-xs font-normal text-gray-500" role="status">
+                <span className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary" />
+                Mise à jour…
+              </span>
+            )}
           </CardTitle>
         </CardHeader>
-        <CardContent>
+        {/* Estompé et non cliquable tant que la liste du nouveau magasin n'est pas arrivée */}
+        <CardContent
+          className={isPlaceholderData ? "opacity-60 pointer-events-none transition-opacity" : ""}
+          aria-busy={isPlaceholderData}
+        >
           {isLoading ? (
             <div>Chargement...</div>
           ) : (

client/src/pages/Dashboard.tsx

@@ -1,54 +1,47 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Calendar, Package, ShoppingCart, TrendingUp, Clock, MapPin, User, AlertTriangle, CheckCircle, Truck, FileText, BarChart3, Megaphone, Shield, XCircle, CheckSquare, Circle, Info, Star, Sparkles, X } from "lucide-react";
+import { Calendar, Package, Clock, User, AlertTriangle, Truck, BarChart3, Megaphone, XCircle, CheckSquare, Circle, Info, Star, Sparkles, X } from "lucide-react";
 import { safeFormat, safeDate } from "@/lib/dateUtils";
-import type { PublicityWithRelations, DashboardMessage } from "@shared/schema";
+import type { PublicityWithRelations } from "@shared/schema";
-import AnnouncementCard from "@/components/AnnouncementCard";
+import AnnouncementCard, { getAnnouncementsQueryOptions, type AnnouncementWithRelations } from "@/components/AnnouncementCard";
 import { DlcAlertModal } from "@/components/DlcAlertModal";
 
+// Annonce la plus récente créée il y a moins de 2 jours (null s'il n'y en a pas)
+const selectRecentAnnouncement = (announcements: AnnouncementWithRelations[]): AnnouncementWithRelations | null => {
+  const twoDaysAgo = new Date();
+  twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
+
+  const recentAnnouncements = announcements.filter(announcement => {
+    if (!announcement.createdAt) return false;
+    const createdAt = safeDate(announcement.createdAt);
+    return createdAt && createdAt >= twoDaysAgo;
+  });
+
+  // filter() renvoie une copie : le tri ne modifie pas le cache partagé
+  return recentAnnouncements.length > 0
+    ? recentAnnouncements.sort((a, b) => {
+      const dateA = safeDate(a.createdAt);
+      const dateB = safeDate(b.createdAt);
+      return (dateB?.getTime() || 0) - (dateA?.getTime() || 0);
+    })[0]
+    : null;
+};
+
 export default function Dashboard() {
   const { user } = useAuthUnified();
   const { selectedStoreId } = useStore();
-  const queryClient = useQueryClient();
   const [showAnnouncementModal, setShowAnnouncementModal] = useState(false);
   const [showDlcAlertModal, setShowDlcAlertModal] = useState(false);
 
-  // Invalider les queries DLC quand le magasin change
+  // Toutes les requêtes attendent l'utilisateur (enabled: !!user) : le storeId envoyé
-  useEffect(() => {
+  // dépend de son rôle, et une réponse obtenue sans lui resterait en cache sous la
-    queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"] });
+  // clé du magasin sélectionné
-    queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"] });
-  }, [selectedStoreId, queryClient]);
-
-  const { data: stats } = useQuery({
-    queryKey: ['/api/stats/monthly', selectedStoreId],
-    queryFn: async () => {
-      const currentDate = new Date();
-      const params = new URLSearchParams({
-        year: currentDate.getFullYear().toString(),
-        month: (currentDate.getMonth() + 1).toString(),
-      });
-
-      if (selectedStoreId && user?.role === 'admin') {
-        params.append('storeId', selectedStoreId.toString());
-      }
-
-      const response = await fetch(`/api/stats/monthly?${params.toString()}`, {
-        credentials: 'include'
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch stats');
-      }
-
-      return response.json();
-    },
-  });
 
   // Statistiques annuelles pour la carte de délai moyen
   const { data: yearlyStats } = useQuery({
@@ -73,65 +66,29 @@ export default function Dashboard() {
 
       return response.json();
     },
+    enabled: !!user,
   });
 
   // Construire les URLs pour récupérer toutes les données (pas de filtrage par date)
   const ordersUrl = `/api/orders${selectedStoreId && user?.role === 'admin' ? `?storeId=${selectedStoreId}` : ''}`;
   const deliveriesUrl = `/api/deliveries${selectedStoreId && user?.role === 'admin' ? `?storeId=${selectedStoreId}` : ''}`;
-  const customerOrdersUrl = `/api/customer-orders${selectedStoreId && user?.role === 'admin' ? `?storeId=${selectedStoreId}` : ''}`;
 
   // Utiliser les mêmes clés de cache que les autres pages pour assurer la cohérence
   const { data: allOrders = [] } = useQuery({
     queryKey: [ordersUrl, selectedStoreId],
+    enabled: !!user,
   });
 
   const { data: allDeliveries = [] } = useQuery({
     queryKey: [deliveriesUrl, selectedStoreId],
+    enabled: !!user,
   });
 
-  const { data: customerOrders = [] } = useQuery({
+  // Dernière annonce récente (créée il y a moins de 2 jours), extraite de la
-    queryKey: [customerOrdersUrl, selectedStoreId],
+  // requête des annonces partagée avec AnnouncementCard
-  });
+  const { data: recentAnnouncement } = useQuery({
-
+    ...getAnnouncementsQueryOptions(selectedStoreId, user?.role),
-  // Récupérer la dernière annonce récente (créée il y a moins de 2 jours)
+    select: selectRecentAnnouncement,
-  const { data: recentAnnouncement } = useQuery<DashboardMessage | null>({
-    queryKey: ['/api/announcements/recent', selectedStoreId],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      if (selectedStoreId && user?.role === 'admin') {
-        params.append('storeId', selectedStoreId.toString());
-      }
-      params.append('recent', 'true');
-
-      const response = await fetch(`/api/announcements?${params.toString()}`, {
-        credentials: 'include'
-      });
-
-      if (!response.ok) {
-        return null;
-      }
-
-      const announcements: DashboardMessage[] = await response.json();
-
-      // Filtrer les annonces créées il y a moins de 2 jours côté client
-      const twoDaysAgo = new Date();
-      twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
-
-      const recentAnnouncements = announcements.filter(announcement => {
-        if (!announcement.createdAt) return false;
-        const createdAt = safeDate(announcement.createdAt);
-        return createdAt && createdAt >= twoDaysAgo;
-      });
-
-      // Retourner la plus récente
-      return recentAnnouncements.length > 0
-        ? recentAnnouncements.sort((a, b) => {
-          const dateA = safeDate(a.createdAt);
-          const dateB = safeDate(b.createdAt);
-          return (dateB?.getTime() || 0) - (dateA?.getTime() || 0);
-        })[0]
-        : null;
-    },
     enabled: !!user,
   });
 
@@ -193,43 +150,48 @@ export default function Dashboard() {
     }
   };
 
-  // Récupérer les publicités à venir (chercher dans 2024 ET 2025) - TOUTES les publicités
+  // Récupérer les publicités à venir (années N-1, N et N+1) - TOUTES les publicités
   const { data: upcomingPublicities = [] } = useQuery<PublicityWithRelations[]>({
     queryKey: ['/api/ad-campaigns', 'upcoming'],
     queryFn: async () => {
-      // Essayer d'abord 2024, puis 2025 pour avoir toutes les publicités
       const currentYear = new Date().getFullYear();
       const years = [currentYear - 1, currentYear, currentYear + 1];
-      let allPublicities: PublicityWithRelations[] = [];
 
-      for (const year of years) {
+      // Les trois années sont demandées en parallèle ; une année en échec est ignorée
+      const publicitiesByYear = await Promise.all(years.map(async (year): Promise<PublicityWithRelations[]> => {
         const params = new URLSearchParams();
         params.append('year', year.toString());
         // NE PAS filtrer par magasin - on veut toutes les publicités
 
         try {
           const response = await fetch(`/api/ad-campaigns?${params}`, { credentials: 'include' });
-          if (response.ok) {
+          if (!response.ok) return [];
           const yearPublicities = await response.json();
-            allPublicities = [...allPublicities, ...yearPublicities];
+          return Array.isArray(yearPublicities) ? yearPublicities : [];
-          }
         } catch (error) {
-          console.log(`Erreur lors de la récupération des publicités ${year}:`, error);
+          console.warn(`Erreur lors de la récupération des publicités ${year}:`, error);
-        }
+          return [];
         }
+      }));
 
       // Filtrer les publicités à venir et les trier par date
-      const futurePublicities = allPublicities
+      const now = new Date();
-        .filter((publicity: any) => new Date(publicity.startDate) > new Date())
+      const futurePublicities = publicitiesByYear
+        .flat()
+        .filter((publicity: any) => new Date(publicity.startDate) > now)
         .sort((a: any, b: any) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
 
       return futurePublicities;
     },
+    enabled: !!user,
   });
 
   // Fetch DLC stats
+  // Clé distincte de celle de DlcPage, qui n'envoie storeId que pour l'admin (réponse
+  // différente pour un non-admin multi-magasins). Le préfixe reste couvert par les
+  // invalidations des mutations DLC.
   const { data: dlcStats = { active: 0, expiringSoon: 0, expired: 0 } } = useQuery({
-    queryKey: ["/api/dlc-products/stats", selectedStoreId],
+    queryKey: ["/api/dlc-products/stats", selectedStoreId, "dashboard"],
     queryFn: () => {
       const params = new URLSearchParams();
       // Envoyer selectedStoreId pour tous les utilisateurs (le backend gère les permissions)
@@ -238,6 +200,7 @@ export default function Dashboard() {
         credentials: 'include'
       }).then(res => res.json());
     },
+    enabled: !!user,
   });
 
   // Effet pour afficher automatiquement le modal DLC pour les utilisateurs non-admin
@@ -287,55 +250,66 @@ export default function Dashboard() {
         credentials: 'include'
       }).then(res => res.json());
     },
+    enabled: !!user,
   });
 
-  // Données dérivées pour les sections
+  // Données dérivées pour les sections, recalculées seulement quand les données
-  const recentOrders = Array.isArray(allOrders) ? allOrders
+  // changent. Les tris portent sur des copies : le cache React Query reste intact.
-    .sort((a: any, b: any) => {
-      const dateA = safeDate(a.createdAt);
-      const dateB = safeDate(b.createdAt);
-      return (dateB ? dateB.getTime() : 0) - (dateA ? dateA.getTime() : 0);
-    })
-    .slice(0, 4) : []; // Afficher les 4 dernières commandes
 
-  // Toutes les commandes en attente
+  // Toutes les commandes en attente, les plus récentes d'abord
-  const pendingOrders = Array.isArray(allOrders) ? allOrders
+  const pendingOrders = useMemo(() => {
+    if (!Array.isArray(allOrders)) return [];
+    const createdTime = (order: any) => safeDate(order.createdAt)?.getTime() ?? 0;
+    return allOrders
       .filter((order: any) => order.status === 'pending')
-    .sort((a: any, b: any) => {
+      .sort((a: any, b: any) => createdTime(b) - createdTime(a));
-      const dateA = safeDate(a.createdAt);
+  }, [allOrders]);
-      const dateB = safeDate(b.createdAt);
-      return (dateB ? dateB.getTime() : 0) - (dateA ? dateA.getTime() : 0);
-    }) : []; // Afficher toutes les commandes en attente
 
-  const upcomingDeliveries = Array.isArray(allDeliveries) ? allDeliveries
+  // Livraisons : un seul passage pour les livraisons prévues et les compteurs du mois
-    .filter((d: any) => d.status === 'planned')
+  const { upcomingDeliveries, deliveredThisMonth, totalPalettes } = useMemo(() => {
-    .sort((a: any, b: any) => new Date(a.scheduledDate).getTime() - new Date(b.scheduledDate).getTime())
+    const planned: any[] = [];
-    .slice(0, 4) : [];
+    let deliveredCount = 0;
+    let palettes = 0;
+
+    if (Array.isArray(allDeliveries)) {
+      const now = new Date();
+      for (const delivery of allDeliveries) {
+        if (delivery.status === 'planned') {
+          planned.push(delivery);
+        } else if (delivery.status === 'delivered') {
+          const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt);
+          if (deliveryDate && deliveryDate.getMonth() === now.getMonth() && deliveryDate.getFullYear() === now.getFullYear()) {
+            deliveredCount++;
+            // Total des palettes pour les livraisons 'delivered' du mois en cours
+            if (delivery.unit === 'palettes') {
+              palettes += delivery.quantity || 0;
+            }
+          }
+        }
+      }
+      planned.sort((a: any, b: any) => new Date(a.scheduledDate).getTime() - new Date(b.scheduledDate).getTime());
+    }
+
+    return {
+      upcomingDeliveries: planned.slice(0, 4),
+      deliveredThisMonth: deliveredCount,
+      totalPalettes: palettes,
+    };
+  }, [allDeliveries]);
+
+  // Tâches non terminées, les plus anciennes d'abord (5 au maximum)
+  const openTasks = useMemo(() => {
+    if (!Array.isArray(tasks)) return [];
+    const createdTime = (task: any) => safeDate(task.createdAt)?.getTime() ?? 0;
+    return tasks
+      .filter((task: any) => task.status !== 'completed')
+      .sort((a: any, b: any) => createdTime(a) - createdTime(b))
+      .slice(0, 5);
+  }, [tasks]);
 
   // Calculs pour les statistiques
-  const pendingOrdersCount = Array.isArray(allOrders) ? allOrders.filter((order: any) => order.status === 'pending').length : 0;
+  const pendingOrdersCount = pendingOrders.length;
   const averageDeliveryTime = Math.round(yearlyStats?.averageDeliveryTime || 0);
-  const deliveredThisMonth = Array.isArray(allDeliveries) ? allDeliveries.filter((delivery: any) => {
-    const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt);
-    if (!deliveryDate) return false;
-    const now = new Date();
-    return deliveryDate.getMonth() === now.getMonth() &&
-      deliveryDate.getFullYear() === now.getFullYear() &&
-      delivery.status === 'delivered';
-  }).length : 0;
-
-  // Calculer le total des palettes pour les livraisons 'delivered' du mois en cours
-  const totalPalettes = Array.isArray(allDeliveries) ? allDeliveries.reduce((total: number, delivery: any) => {
-    if (delivery.status === 'delivered' && delivery.unit === 'palettes') {
-      const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt);
-      if (!deliveryDate) return total;
-      const now = new Date();
-      if (deliveryDate.getMonth() === now.getMonth() && deliveryDate.getFullYear() === now.getFullYear()) {
-        return total + (delivery.quantity || 0);
-      }
-    }
-    return total;
-  }, 0) : 0;
 
   // Fonction pour obtenir la configuration des priorités (identique au module Tasks)
   const getPriorityConfig = (priority: string) => {
@@ -367,25 +341,6 @@ export default function Dashboard() {
     }
   };
 
-
-  // Statistiques pour les commandes clients
-  const ordersByStatus = {
-    pending: Array.isArray(allOrders) ? allOrders.filter((o: any) => o.status === 'pending').length : 0,
-    planned: Array.isArray(allOrders) ? allOrders.filter((o: any) => o.status === 'planned').length : 0,
-    delivered: Array.isArray(allOrders) ? allOrders.filter((o: any) => o.status === 'delivered').length : 0,
-    total: Array.isArray(allOrders) ? allOrders.length : 0
-  };
-
-  // Statistiques pour les commandes clients (nouveau module)
-  const customerOrderStats = {
-    waiting: Array.isArray(customerOrders) ? customerOrders.filter((o: any) => o.status === 'En attente de Commande').length : 0,
-    inProgress: Array.isArray(customerOrders) ? customerOrders.filter((o: any) => o.status === 'Commande en Cours').length : 0,
-    available: Array.isArray(customerOrders) ? customerOrders.filter((o: any) => o.status === 'Disponible').length : 0,
-    withdrawn: Array.isArray(customerOrders) ? customerOrders.filter((o: any) => o.status === 'Retiré').length : 0,
-    canceled: Array.isArray(customerOrders) ? customerOrders.filter((o: any) => o.status === 'Annulé').length : 0,
-    total: Array.isArray(customerOrders) ? customerOrders.length : 0
-  };
-
   return (
     <div className="p-4 sm:p-6 space-y-4 sm:space-y-6">
       {/* Header */}
@@ -660,14 +615,7 @@ export default function Dashboard() {
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-3 p-6">
-            {Array.isArray(tasks) && tasks.length > 0 ? tasks
+            {Array.isArray(tasks) && tasks.length > 0 ? openTasks
-              .filter((task: any) => task.status !== 'completed')
-              .sort((a: any, b: any) => {
-                const dateA = safeDate(a.createdAt);
-                const dateB = safeDate(b.createdAt);
-                return (dateA ? dateA.getTime() : 0) - (dateB ? dateB.getTime() : 0);
-              })
-              .slice(0, 5)
               .map((task: any) => {
                 const priorityConfig = getPriorityConfig(task.priority);
                 const PriorityIcon = priorityConfig.icon;

client/src/pages/Deliveries.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -35,6 +35,9 @@ import ValidateDeliveryModal from "@/components/modals/ValidateDeliveryModal";
 import ConfirmDeleteModal from "@/components/modals/ConfirmDeleteModal";
 import type { DeliveryWithRelations } from "@shared/schema";
 
+// Référence stable pendant le chargement (pour la mémoïsation du filtrage)
+const NO_DELIVERIES: DeliveryWithRelations[] = [];
+
 export default function Deliveries() {
   const { user } = useAuthUnified();
   const { selectedStoreId } = useStore();
@@ -79,38 +82,29 @@ export default function Deliveries() {
   // CRITICAL FIX: Appliquer le filtrage par storeId pour TOUS les rôles, pas seulement admin
   const deliveriesUrl = `/api/deliveries${selectedStoreId ? `?storeId=${selectedStoreId}` : ''}`;
   
-  const { data: deliveriesData = [], isLoading } = useQuery<DeliveryWithRelations[]>({
+  const { data: deliveriesData = NO_DELIVERIES, isLoading } = useQuery<DeliveryWithRelations[]>({
     queryKey: ['/api/deliveries', selectedStoreId, user?.role],
     queryFn: async () => {
-      const url = deliveriesUrl;
+      const response = await fetch(deliveriesUrl, { credentials: 'include' });
-      console.log('🚚 Fetching deliveries from:', url);
-      const response = await fetch(url, { credentials: 'include' });
       if (!response.ok) {
         throw new Error('Failed to fetch deliveries');
       }
       const data = await response.json();
-      console.log('🚚 Deliveries received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items', data.slice(0, 2));
-      console.log('🚚 Sample delivery data:', data[0]);
       return Array.isArray(data) ? data : [];
     },
   });
 
   // Production Bug Fix: Ensure array safety for all data operations
-  const deliveries = Array.isArray(deliveriesData) ? deliveriesData : [];
+  const deliveries = Array.isArray(deliveriesData) ? deliveriesData : NO_DELIVERIES;
 
-  console.log('🚚 Deliveries Debug:', { 
+  // Clé construite sur l'URL (tableau de bord admin avec magasin sélectionné).
-    isLoading, 
+  // Sans magasin, elle vaut ['/api/deliveries'], déjà invalidée : la réinvalider
-    deliveriesCount: deliveries?.length, 
+  // relancerait une seconde fois le chargement complet des livraisons.
-    deliveries: deliveries?.slice(0, 2),
+  const invalidateDeliveriesUrlKey = () => {
-    selectedStoreId,
+    if (selectedStoreId) {
-    deliveriesUrl 
+      queryClient.invalidateQueries({ queryKey: [deliveriesUrl] });
-  });
+    }
-
+  };
-  const { data: groupsData = [] } = useQuery({
-    queryKey: ['/api/groups'],
-  });
-  
-  const groups = Array.isArray(groupsData) ? groupsData : [];
 
 
   const markControlValidatedMutation = useMutation({
@@ -123,7 +117,7 @@ export default function Deliveries() {
         description: "Contrôle validé avec succès",
       });
       queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
-      queryClient.invalidateQueries({ queryKey: [deliveriesUrl] });
+      invalidateDeliveriesUrlKey();
     },
     onError: (error: any) => {
       if (isUnauthorizedError(error)) {
@@ -148,8 +142,10 @@ export default function Deliveries() {
       });
       // Invalider tous les caches liés aux livraisons
       queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
-      queryClient.invalidateQueries({ queryKey: [deliveriesUrl] });
+      invalidateDeliveriesUrlKey();
       queryClient.invalidateQueries({ queryKey: ['/api/stats/monthly'] });
+      // L'échéancier (cache de 5 min) liste les livraisons facturées
+      queryClient.invalidateQueries({ queryKey: ['/api/payment-schedule'] });
     },
     onError: (error) => {
       if (isUnauthorizedError(error)) {
@@ -171,16 +167,19 @@ export default function Deliveries() {
     },
   });
 
-  const filteredDeliveries = Array.isArray(deliveries) ? deliveries.filter(delivery => {
+  // Filtrage recalculé seulement quand la liste, la recherche ou le statut changent
-    console.log('🔍 Filtering delivery:', delivery.id, { searchTerm, statusFilter });
+  const filteredDeliveries = useMemo(() => {
-    const matchesSearch = delivery.supplier?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    const search = searchTerm.toLowerCase();
-                         delivery.group?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    return deliveries.filter(delivery => {
-                         delivery.notes?.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesSearch = delivery.supplier?.name.toLowerCase().includes(search) ||
+                           delivery.group?.name.toLowerCase().includes(search) ||
+                           delivery.notes?.toLowerCase().includes(search);
       
       const matchesStatus = statusFilter === "all" || delivery.status === statusFilter;
       
       return matchesSearch && matchesStatus;
-  }) : [];
+    });
+  }, [deliveries, searchTerm, statusFilter]);
 
   // Pagination
   const {

client/src/pages/DlcPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useRef } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useMutationState, useQueryClient, keepPreviousData } from "@tanstack/react-query";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -37,6 +37,14 @@ const dlcFormSchema = z.object({
 
 type DlcFormData = z.infer<typeof dlcFormSchema>;
 
+// Référence stable tant que la liste n'est pas chargée (évite de recalculer
+// les listes d'impression à chaque rendu)
+const NO_PRODUCTS: DlcProductWithRelations[] = [];
+
+// Préfixe des actions faites depuis une ligne du tableau : sert à savoir
+// quelles lignes ont une action en cours
+const DLC_ROW_ACTION_KEY = "dlc-row-action";
+
 export default function DlcPage() {
   const { user, isLoading: authLoading } = useAuthUnified();
   const { toast } = useToast();
@@ -76,7 +84,7 @@ export default function DlcPage() {
   });
 
   // Fetch DLC products - optimized with server-side search
-  const { data: dlcProducts = [], isLoading: productsLoading } = useQuery({
+  const { data: dlcProducts = NO_PRODUCTS, isLoading: productsLoading, isPlaceholderData } = useQuery({
     queryKey: ["/api/dlc-products", selectedStoreId, statusFilter, supplierFilter, debouncedSearchTerm],
     queryFn: () => {
       const params = new URLSearchParams();
@@ -89,6 +97,11 @@ export default function DlcPage() {
     },
     enabled: !authLoading,
     staleTime: 2 * 60 * 1000, // 2 minutes cache for DLC data
+    // Changement de filtre ou de recherche : le tableau précédent reste affiché
+    // (estompé, avec un indicateur) au lieu de disparaître. Jamais au
+    // changement de magasin (produits d'un autre magasin).
+    placeholderData: (previousData, previousQuery) =>
+      previousQuery?.queryKey[1] === selectedStoreId ? keepPreviousData(previousData) : undefined,
   });
 
   // Fetch DLC stats - optimized cache
@@ -175,13 +188,30 @@ export default function DlcPage() {
     };
   }, [gencodeValue, suppliers]);
 
+  // Après une modification, la liste et les compteurs changent : seules les
+  // requêtes affichées sont rechargées, les autres (autres filtres, tableau de
+  // bord) sont seulement marquées périmées
+  const invalidateDlcData = () =>
+    Promise.all([
+      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], refetchType: "active" }),
+      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], refetchType: "active" }),
+    ]);
+
+  // Actions en cours, par produit : seuls les boutons de la ligne concernée sont
+  // désactivés (et non ceux de toutes les lignes), y compris si plusieurs
+  // produits sont traités à la suite
+  const pendingRowActions = useMutationState({
+    filters: { mutationKey: [DLC_ROW_ACTION_KEY], status: "pending" },
+    select: (mutation) => `${String(mutation.options.mutationKey?.[1])}:${String(mutation.state.variables)}`,
+  });
+  const isRowActionPending = (action: string, productId: number) =>
+    pendingRowActions.includes(`${action}:${productId}`);
+
   // Create mutation - optimized cache invalidation
   const createMutation = useMutation({
     mutationFn: (data: InsertDlcProduct) => apiRequest("/api/dlc-products", "POST", data),
     onSuccess: () => {
-      // Selective cache invalidation
+      invalidateDlcData();
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Produit DLC créé avec succès" });
       setIsDialogOpen(false);
       form.reset();
@@ -201,8 +231,7 @@ export default function DlcPage() {
     mutationFn: ({ id, data }: { id: number; data: Partial<InsertDlcProduct> }) =>
       apiRequest(`/api/dlc-products/${id}`, "PUT", data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
+      invalidateDlcData();
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Produit DLC mis à jour avec succès" });
       setIsDialogOpen(false);
       form.reset();
@@ -219,11 +248,12 @@ export default function DlcPage() {
 
   // Validate mutation - optimized cache invalidation
   const validateMutation = useMutation({
+    mutationKey: [DLC_ROW_ACTION_KEY, "validate"],
     mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/validate`, "POST"),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Produit validé avec succès" });
+      // La ligne reste désactivée jusqu'au rechargement de la liste
+      return invalidateDlcData();
     },
     onError: (error: any) => {
       toast({
@@ -236,11 +266,12 @@ export default function DlcPage() {
 
   // Delete mutation - optimized cache invalidation
   const deleteMutation = useMutation({
+    mutationKey: [DLC_ROW_ACTION_KEY, "delete"],
     mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}`, "DELETE"),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Produit supprimé avec succès" });
+      // La ligne reste désactivée jusqu'au rechargement de la liste
+      return invalidateDlcData();
     },
     onError: (error: any) => {
       toast({
@@ -253,11 +284,12 @@ export default function DlcPage() {
 
   // Stock épuisé mutation - accessible à tous
   const markStockEpuiseMutation = useMutation({
+    mutationKey: [DLC_ROW_ACTION_KEY, "stock-epuise"],
     mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/stock-epuise`, "PUT"),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Produit marqué comme stock épuisé" });
+      // La ligne reste désactivée jusqu'au rechargement de la liste
+      return invalidateDlcData();
     },
     onError: (error: any) => {
       toast({
@@ -270,11 +302,12 @@ export default function DlcPage() {
 
   // Restaurer stock mutation - réservé aux admins, directeurs et managers
   const restoreStockMutation = useMutation({
+    mutationKey: [DLC_ROW_ACTION_KEY, "restore-stock"],
     mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/restore-stock`, "PUT"),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Stock restauré avec succès" });
+      // La ligne reste désactivée jusqu'au rechargement de la liste
+      return invalidateDlcData();
     },
     onError: (error: any) => {
       toast({
@@ -287,11 +320,12 @@ export default function DlcPage() {
 
   // Marquer comme traité mutation - accessible à tous
   const markProcessedMutation = useMutation({
+    mutationKey: [DLC_ROW_ACTION_KEY, "mark-processed"],
     mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/mark-processed`, "PUT"),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Produit marqué comme traité" });
+      // La ligne reste désactivée jusqu'au rechargement de la liste
+      return invalidateDlcData();
     },
     onError: (error: any) => {
       toast({
@@ -304,11 +338,12 @@ export default function DlcPage() {
 
   // Annuler traitement mutation - réservé aux admins, directeurs et managers
   const unmarkProcessedMutation = useMutation({
+    mutationKey: [DLC_ROW_ACTION_KEY, "unmark-processed"],
     mutationFn: (id: number) => apiRequest(`/api/dlc-products/${id}/unmark-processed`, "PUT"),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products"], exact: false });
-      queryClient.invalidateQueries({ queryKey: ["/api/dlc-products/stats"], exact: false });
       toast({ title: "Traitement annulé avec succès" });
+      // La ligne reste désactivée jusqu'au rechargement de la liste
+      return invalidateDlcData();
     },
     onError: (error: any) => {
       toast({
@@ -330,32 +365,17 @@ export default function DlcPage() {
     if (user?.userGroups?.[0]?.groupId) {
       // Utilisateur avec groupe assigné : TOUJOURS utiliser ce groupe
       groupId = user.userGroups[0].groupId;
-      console.log("🎯 DLC Frontend: Using user's assigned group (PRIORITY):", groupId);
     } else if (user?.role === 'admin' && selectedStoreId) {
       // Admin avec magasin sélectionné ET pas de groupe assigné
       groupId = selectedStoreId;
-      console.log("🎯 DLC Frontend: Using admin selected store:", groupId);
     } else if (user?.role === 'admin' && stores?.[0]?.id) {
       // Admin sans sélection : premier magasin disponible
       groupId = stores[0].id;
-      console.log("🎯 DLC Frontend: Using first available store for admin:", groupId);
     } else {
       // Fallback d'urgence
       groupId = 1;
-      console.log("🚨 DLC Frontend: Using emergency fallback groupId:", groupId);
     }
 
-    console.log("🏪 DLC GroupId Selection DEBUG:", {
-      userRole: user?.role,
-      selectedStoreId,
-      userGroups: user?.userGroups?.map((ug: any) => ({groupId: ug.groupId, groupName: ug.group?.name})),
-      availableStores: stores.map((s: any) => ({id: s.id, name: s.name})),
-      userGroupsRaw: user?.userGroups,
-      firstUserGroup: user?.userGroups?.[0],
-      finalGroupId: groupId,
-      logicPath: !groupId ? 'need-fallback' : 'already-set'
-    });
-    
     const dlcData: any = {
       ...data,
       name: data.productName, // Copier productName vers name (requis dans la DB)
@@ -615,7 +635,7 @@ export default function DlcPage() {
   };
 
   // Products are already filtered server-side, no client filtering needed
-  const filteredProducts = dlcProducts || [];
+  const filteredProducts = dlcProducts || NO_PRODUCTS;
 
   // Memoized calculations for print functions
   const { expiringSoonProducts, expiredProducts } = useMemo(() => {
@@ -647,6 +667,13 @@ export default function DlcPage() {
     totalItems
   } = usePagination(filteredProducts, 10);
 
+  // Retour à la première page quand le magasin, un filtre ou la recherche change
+  // (le tableau précédent reste affiché pendant le chargement : sa longueur ne
+  // change pas forcément)
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [selectedStoreId, statusFilter, supplierFilter, debouncedSearchTerm, setCurrentPage]);
+
   if (authLoading) {
     return <div className="flex justify-center items-center h-64">Chargement...</div>;
   }
@@ -926,7 +953,15 @@ export default function DlcPage() {
         <Card>
           <CardHeader>
             <div className="flex justify-between items-center">
-              <CardTitle>Produits DLC ({totalItems})</CardTitle>
+              <CardTitle>
+                Produits DLC ({totalItems})
+                {isPlaceholderData && (
+                  <span className="inline-flex items-center gap-1 ml-2 text-xs font-normal text-gray-500" role="status">
+                    <span className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary" />
+                    Mise à jour…
+                  </span>
+                )}
+              </CardTitle>
               <Button variant="outline" size="sm">
                 <Download className="w-4 h-4 mr-2" />
                 Exporter PDF
@@ -934,14 +969,17 @@ export default function DlcPage() {
             </div>
           </CardHeader>
           <CardContent>
-            {productsLoading ? (
+            {productsLoading || (isPlaceholderData && totalItems === 0) ? (
               <div className="flex justify-center items-center h-32">Chargement des produits...</div>
             ) : totalItems === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
                 Aucun produit DLC trouvé
               </div>
             ) : (
-              <div>
+              <div
+                className={isPlaceholderData ? "opacity-60 pointer-events-none transition-opacity" : ""}
+                aria-busy={isPlaceholderData}
+              >
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -992,7 +1030,7 @@ export default function DlcPage() {
                                 variant="default"
                                 size="sm"
                                 onClick={() => handleValidate(product.id)}
-                                disabled={validateMutation.isPending}
+                                disabled={isRowActionPending("validate", product.id)}
                                 className="bg-green-600 hover:bg-green-700"
                                 data-testid={`button-validate-${product.id}`}
                                 title="Valider définitivement ce produit"
@@ -1010,7 +1048,7 @@ export default function DlcPage() {
                                       variant="outline"
                                       size="sm"
                                       onClick={() => handleMarkProcessed(product.id)}
-                                      disabled={markProcessedMutation.isPending}
+                                      disabled={isRowActionPending("mark-processed", product.id)}
                                       className="border-blue-300 text-blue-700 hover:bg-blue-50"
                                       data-testid={`button-mark-processed-${product.id}`}
                                     >
@@ -1036,7 +1074,7 @@ export default function DlcPage() {
                                       variant="outline"
                                       size="sm"
                                       onClick={() => handleUnmarkProcessed(product.id)}
-                                      disabled={unmarkProcessedMutation.isPending}
+                                      disabled={isRowActionPending("unmark-processed", product.id)}
                                       className="border-orange-300 text-orange-700 hover:bg-orange-50"
                                     >
                                       <X className="w-4 h-4" />
@@ -1062,7 +1100,7 @@ export default function DlcPage() {
                                       variant="outline"
                                       size="sm"
                                       onClick={() => handleMarkStockEpuise(product.id)}
-                                      disabled={markStockEpuiseMutation.isPending}
+                                      disabled={isRowActionPending("stock-epuise", product.id)}
                                       className="border-yellow-300 text-yellow-700 hover:bg-yellow-50"
                                     >
                                       <PackageX className="w-4 h-4" />
@@ -1087,7 +1125,7 @@ export default function DlcPage() {
                                       variant="outline"
                                       size="sm"
                                       onClick={() => handleRestoreStock(product.id)}
-                                      disabled={restoreStockMutation.isPending}
+                                      disabled={isRowActionPending("restore-stock", product.id)}
                                       className="border-blue-300 text-blue-700 hover:bg-blue-50"
                                     >
                                       <RotateCcw className="w-4 h-4" />
@@ -1106,7 +1144,7 @@ export default function DlcPage() {
                               variant="destructive"
                               size="sm"
                               onClick={() => handleDelete(product.id)}
-                              disabled={deleteMutation.isPending}
+                              disabled={isRowActionPending("delete", product.id)}
                             >
                               <Trash2 className="w-4 h-4" />
                             </Button>

client/src/pages/Groups.tsx

@@ -81,8 +81,13 @@ export default function Groups() {
     queryKey: ['/api/groups'],
   });
 
+  // Configurations NocoDB (liste déroulante de la fenêtre magasin) : réservées à
+  // l'admin, le serveur répond 403 aux autres rôles. Les mutations de la page
+  // NocoDB invalident déjà cette clé.
   const { data: rawNocodbConfigs = [] } = useQuery<NocodbConfig[]>({
     queryKey: ['/api/nocodb-config'],
+    enabled: user?.role === 'admin',
+    staleTime: 5 * 60 * 1000,
   });
 
   // Protection renforcée contre les erreurs TypeError
@@ -96,10 +101,7 @@ export default function Groups() {
 
   const createMutation = useMutation({
     mutationFn: async (data: any) => {
-      console.log('🏪 Frontend: Creating group with data:', data);
+      return await apiRequest("/api/groups", "POST", data);
-      const result = await apiRequest("/api/groups", "POST", data);
-      console.log('🏪 Frontend: Group creation result:', result);
-      return result;
     },
     onSuccess: () => {
       toast({

client/src/pages/NocoDBConfig.tsx

@@ -53,7 +53,7 @@ export default function NocoDBConfig() {
   const [showTokens, setShowTokens] = useState<{ [key: number]: boolean }>({});
 
   // Queries avec protection complète
-  const { data: rawConfigs, isLoading, error } = useQuery({
+  const { data: rawConfigs, isLoading } = useQuery({
     queryKey: ['/api/nocodb-config'],
     enabled: user?.role === 'admin',
   });
@@ -62,21 +62,6 @@ export default function NocoDBConfig() {
   const configs = rawConfigs || [];
   const safeConfigs = Array.isArray(configs) ? configs : [];
 
-  // Log pour debug production avec plus de détails
-  console.log('🔍 NocoDBConfig Debug:', { 
-    rawConfigs, 
-    rawConfigsType: typeof rawConfigs,
-    configs,
-    configsType: typeof configs,
-    isArray: Array.isArray(configs), 
-    safeConfigs, 
-    safeConfigsType: typeof safeConfigs,
-    length: safeConfigs.length,
-    error,
-    userRole: user?.role,
-    environment: window.location.hostname
-  });
-
   // Mutations
   const createConfigMutation = useMutation({
     mutationFn: (data: NocodbConfigForm) => 

client/src/pages/Orders.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -30,6 +30,9 @@ import OrderDetailModal from "@/components/modals/OrderDetailModal";
 import ConfirmDeleteModal from "@/components/modals/ConfirmDeleteModal";
 import type { OrderWithRelations } from "@shared/schema";
 
+// Référence stable pendant le chargement (pour la mémoïsation du filtrage)
+const NO_ORDERS: OrderWithRelations[] = [];
+
 export default function Orders() {
   const { user } = useAuthUnified();
   const { selectedStoreId } = useStore();
@@ -73,7 +76,7 @@ export default function Orders() {
   const ordersUrl = `/api/orders${selectedStoreId ? `?storeId=${selectedStoreId}` : ''}`;
   
   
-  const { data: ordersData = [], isLoading } = useQuery<OrderWithRelations[]>({
+  const { data: ordersData = NO_ORDERS, isLoading } = useQuery<OrderWithRelations[]>({
     queryKey: [ordersUrl, selectedStoreId],
     queryFn: async () => {
       const response = await fetch(ordersUrl, { credentials: 'include' });
@@ -81,69 +84,32 @@ export default function Orders() {
         throw new Error('Failed to fetch orders');
       }
       const data = await response.json();
-      console.log('📦 Orders received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items', data.slice(0, 2));
-      console.log('📦 Sample order data:', data[0]);
       return Array.isArray(data) ? data : [];
     },
   });
 
   // Production Bug Fix: Ensure array safety for all data operations
-  const orders = Array.isArray(ordersData) ? ordersData : [];
+  const orders = Array.isArray(ordersData) ? ordersData : NO_ORDERS;
-  
-  console.log('📦 Orders Debug:', { 
-    isLoading, 
-    ordersCount: orders?.length, 
-    orders: orders?.slice(0, 2),
-    selectedStoreId,
-    ordersUrl 
-  });
-
-  const { data: groupsData = [] } = useQuery({
-    queryKey: ['/api/groups'],
-  });
-  
-  const groups = Array.isArray(groupsData) ? groupsData : [];
 
   const deleteMutation = useMutation({
     mutationFn: async (id: number) => {
-      console.log('🗑️ Deleting order:', id);
       await apiRequest(`/api/orders/${id}`, "DELETE");
     },
     onSuccess: () => {
-      console.log('✅ Order deleted successfully, invalidating cache...');
       toast({
         title: "Succès",
         description: "Commande supprimée avec succès",
       });
       
-      console.log('🗑️ Order deleted, clearing ALL cache to avoid inconsistencies:', { 
+      // Invalidation ciblée sans clear() pour préserver le contexte : les requêtes
-        ordersUrl, 
+      // affichées sont rechargées tout de suite, les autres (mois du calendrier
-        selectedStoreId
+      // déjà visités, autres pages) seulement quand elles seront réaffichées
-      });
-      
-      // Sauvegarder le selectedStoreId avant le nettoyage
-      if (selectedStoreId) {
-        localStorage.setItem('selectedStoreId', selectedStoreId.toString());
-      }
-      
-      // 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');
-        }
-      });
     },
     onError: (error) => {
       if (isUnauthorizedError(error)) {
@@ -165,16 +131,19 @@ export default function Orders() {
     },
   });
 
-  const filteredOrders = Array.isArray(orders) ? orders.filter(order => {
+  // Filtrage recalculé seulement quand la liste, la recherche ou le statut changent
-    console.log('🔍 Filtering order:', order.id, { searchTerm, statusFilter });
+  const filteredOrders = useMemo(() => {
-    const matchesSearch = order.supplier?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    const search = searchTerm.toLowerCase();
-                         order.group?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    return orders.filter(order => {
-                         order.notes?.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesSearch = order.supplier?.name.toLowerCase().includes(search) ||
+                           order.group?.name.toLowerCase().includes(search) ||
+                           order.notes?.toLowerCase().includes(search);
       
       const matchesStatus = statusFilter === "all" || order.status === statusFilter;
       
       return matchesSearch && matchesStatus;
-  }) : [];
+    });
+  }, [orders, searchTerm, statusFilter]);
 
   // Pagination
   const {

client/src/pages/PaymentSchedulePage.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useStore } from "@/contexts/StoreContext";
 import { useToast } from "@/hooks/use-toast";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -53,6 +53,7 @@ interface PaymentScheduleResponse {
 export default function PaymentSchedulePage() {
   const { selectedStoreId } = useStore();
   const { toast } = useToast();
+  const queryClient = useQueryClient();
   const [selectedMonth, setSelectedMonth] = useState<string>(() => {
     const now = new Date();
     return format(now, 'yyyy-MM');
@@ -75,7 +76,12 @@ export default function PaymentSchedulePage() {
       if (!response.ok) {
         throw new Error(`Erreur ${response.status}: ${response.statusText}`);
       }
-      return response.json();
+      const result = await response.json();
+      // Ce calcul peut compléter en base les échéances et montants manquants des
+      // livraisons : les listes de livraisons en cache sont marquées périmées
+      // (rechargées à leur prochain affichage, pas immédiatement)
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'], refetchType: 'none' });
+      return result;
     },
     enabled: !!selectedStoreId,
   });
@@ -251,11 +257,51 @@ export default function PaymentSchedulePage() {
     );
   }
 
+  // En-tête (titre, export, choix du mois) : conservé pendant le chargement,
+  // notamment au changement de magasin, au lieu d'un écran entièrement vide
+  const header = (
+    <div className="flex justify-between items-center">
+      <div>
+        <h1 className="text-3xl font-bold">Échéancier des Paiements</h1>
+        <p className="text-gray-600 mt-1">Gestion des échéances fournisseurs</p>
+      </div>
+      <div className="flex items-center gap-4">
+        <Button
+          onClick={handleOpenExportModal}
+          variant="outline"
+          className="gap-2"
+          disabled={filteredSchedules.length === 0}
+          data-testid="button-export-csv"
+        >
+          <FileSpreadsheet className="h-4 w-4" />
+          Exporter CSV
+        </Button>
+        <div className="w-64">
+          <Select value={selectedMonth} onValueChange={setSelectedMonth}>
+            <SelectTrigger data-testid="select-month">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {availableMonths.map(month => (
+                <SelectItem key={month.value} value={month.value}>
+                  {month.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+
   if (isLoading) {
     return (
-      <div className="flex-1 flex items-center justify-center">
+      <div className="p-6 space-y-6">
+        {header}
+        <div className="flex items-center justify-center py-16">
           <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
         </div>
+      </div>
     );
   }
 
@@ -292,38 +338,7 @@ export default function PaymentSchedulePage() {
   return (
     <div className="p-6 space-y-6">
       {/* En-tête */}
-      <div className="flex justify-between items-center">
+      {header}
-        <div>
-          <h1 className="text-3xl font-bold">Échéancier des Paiements</h1>
-          <p className="text-gray-600 mt-1">Gestion des échéances fournisseurs</p>
-        </div>
-        <div className="flex items-center gap-4">
-          <Button
-            onClick={handleOpenExportModal}
-            variant="outline"
-            className="gap-2"
-            disabled={filteredSchedules.length === 0}
-            data-testid="button-export-csv"
-          >
-            <FileSpreadsheet className="h-4 w-4" />
-            Exporter CSV
-          </Button>
-          <div className="w-64">
-            <Select value={selectedMonth} onValueChange={setSelectedMonth}>
-              <SelectTrigger data-testid="select-month">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {availableMonths.map(month => (
-                  <SelectItem key={month.value} value={month.value}>
-                    {month.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </div>
 
       {/* Statistiques du mois */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">

client/src/pages/Publicities.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
 import { Plus, Calendar, Edit, Trash2, Eye, Filter, Grid, List, Download } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -9,12 +9,16 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } f
 import { useToast } from "@/hooks/use-toast";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
-import { format, startOfMonth, endOfMonth, eachWeekOfInterval, eachDayOfInterval, startOfWeek, endOfWeek, isSameMonth, isWithinInterval, startOfYear, endOfYear, getWeek, getMonth } from "date-fns";
+import { format, startOfMonth, endOfMonth, eachWeekOfInterval, eachDayOfInterval, startOfWeek, endOfWeek, isSameMonth, startOfYear, endOfYear, getMonth } from "date-fns";
 import { fr } from "date-fns/locale";
-import { safeFormat, safeDate, safeCompareDate } from "@/lib/dateUtils";
+import { safeFormat, safeDate } from "@/lib/dateUtils";
 import type { PublicityWithRelations, Group } from "@shared/schema";
 import PublicityForm from "@/components/PublicityForm";
 
+// Références stables tant que les données ne sont pas chargées (dépendances des useMemo)
+const NO_PUBLICITIES: PublicityWithRelations[] = [];
+const NO_GROUPS: Group[] = [];
+
 export default function Publicities() {
   const [selectedYear, setSelectedYear] = useState(new Date().getFullYear()); // Année courante par défaut
   const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth()); // Mois courant par défaut
@@ -39,7 +43,7 @@ export default function Publicities() {
   const startYear = currentYear - 2;
   const yearOptions = Array.from({ length: 13 }, (_, i) => startYear + i);
 
-  const { data: publicities = [], isLoading } = useQuery<PublicityWithRelations[]>({
+  const { data: publicities = NO_PUBLICITIES, isLoading, isPlaceholderData } = useQuery<PublicityWithRelations[]>({
     queryKey: ['/api/ad-campaigns', selectedYear, selectedStoreId],
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -52,43 +56,18 @@ export default function Publicities() {
         throw new Error('Failed to fetch publicities');
       }
       const data = await response.json();
-      console.log('📢 Publicities received:', data.length, 'items', data.slice(0, 2));
+      // Liste déjà triée par N° côté serveur (même tri numérique) : pas de second tri ici
-
+      return Array.isArray(data) ? data : [];
-      // CRITICAL FIX: Force frontend sorting by pubNumber to ensure correct order
-      const sortedData = Array.isArray(data)
-        ? data.sort((a, b) => {
-          const numA = parseInt(a.pubNumber) || 0;
-          const numB = parseInt(b.pubNumber) || 0;
-          return numA - numB;
-        })
-        : [];
-
-      console.log('📢 Publicities after frontend sort:', {
-        first5: sortedData.slice(0, 5).map(p => `N°${p.pubNumber}`),
-        total: sortedData.length
-      });
-
-      return sortedData;
     },
+    // Les créations, modifications et suppressions invalident déjà cette clé
+    staleTime: 5 * 60 * 1000,
+    // Changement d'année : garder la liste affichée (atténuée) pendant le
+    // chargement, mais jamais au changement de magasin
+    placeholderData: (previousData, previousQuery) =>
+      previousQuery?.queryKey[2] === selectedStoreId ? keepPreviousData(previousData) : undefined,
   });
 
-  console.log('📢 Publicities Debug:', {
+  const { data: groups = NO_GROUPS } = useQuery<Group[]>({
-    isLoading,
-    publicitiesCount: publicities?.length,
-    selectedYear,
-    selectedStoreId,
-    publicities: publicities?.slice(0, 2)
-  });
-
-  console.log('📢 Publicities Debug:', {
-    isLoading,
-    publicitiesCount: publicities?.length,
-    selectedYear,
-    selectedStoreId,
-    publicities: publicities?.slice(0, 2)
-  });
-
-  const { data: groups = [] } = useQuery<Group[]>({
     queryKey: ['/api/groups'],
     enabled: !!user,
   });
@@ -96,8 +75,6 @@ export default function Publicities() {
   const deleteMutation = useMutation({
     mutationFn: async (id: number) => {
       // Try POST first (for production environments that block DELETE)
-      console.log(`🗑️ [Frontend] Attempting to delete publicity ${id} using POST method`);
-
       try {
         const response = await fetch(`/api/ad-campaigns/${id}/delete`, {
           method: 'POST',
@@ -106,11 +83,9 @@ export default function Publicities() {
         });
 
         if (response.ok) {
-          console.log(`✅ [Frontend] Successfully deleted publicity ${id} using POST`);
           return response.json();
         } else if (response.status === 404) {
           // Route not found, try DELETE method as fallback (for dev environment)
-          console.log(`⚠️ [Frontend] POST route not found, trying DELETE method`);
           const deleteResponse = await fetch(`/api/ad-campaigns/${id}`, { method: 'DELETE' });
 
           if (!deleteResponse.ok) {
@@ -152,47 +127,34 @@ export default function Publicities() {
     label: format(new Date(selectedYear, i, 1), 'MMMM', { locale: fr })
   }));
 
-  // Calendar helper functions
+  // Magasins indexés par id (couleur et nom des pastilles)
-  const getWeekParticipation = (weekStart: Date, weekEnd: Date) => {
+  const groupsById = useMemo(() => new Map(groups.map(group => [group.id, group])), [groups]);
-    // Vérifier que publicities est un tableau
-    if (!Array.isArray(publicities)) {
-      return {
-        publicities: [],
-        participatingStores: [],
-        storeColors: []
-      };
-    }
 
-    const weekPublicities = publicities.filter(pub => {
+  // Dates de début et de fin converties une seule fois par publicité, et non
-      const pubStart = safeDate(pub.startDate);
+  // pour chaque semaine de la vue d'ensemble ou chaque jour du calendrier
-      const pubEnd = safeDate(pub.endDate);
+  const publicityPeriods = useMemo(() => {
+    if (!Array.isArray(publicities)) return [];
+    return publicities.map(pub => ({
+      pub,
+      start: safeDate(pub.startDate),
+      end: safeDate(pub.endDate),
+    }));
+  }, [publicities]);
 
-      // More robust overlap detection: check if any part of the publicity period overlaps with the week
+  // Vue d'ensemble : semaines de l'année regroupées par mois, calculées
-      return pubStart && pubEnd && (pubStart <= weekEnd && pubEnd >= weekStart);
+  // seulement quand la vue est affichée et que l'année ou les données changent
-    });
+  const weeksByMonth = useMemo(() => {
+    const byMonth = Array.from({ length: 12 }, () => [] as Array<{
+      weekStart: Date;
+      weekEnd: Date;
+      weekNumber: number;
+      month: number;
+      publicities: PublicityWithRelations[];
+      participatingStores: number[];
+      storeColors: string[];
+    }>);
+    if (!showYearOverview) return byMonth;
 
-    const participatingStores = new Set<number>();
-    weekPublicities.forEach(pub => {
-      // Vérifier que participations existe et est un tableau
-      if (pub.participations && Array.isArray(pub.participations)) {
-        pub.participations.forEach(participation => {
-          participatingStores.add(participation.groupId);
-        });
-      }
-    });
-
-    return {
-      publicities: weekPublicities,
-      participatingStores: Array.from(participatingStores),
-      storeColors: Array.from(participatingStores).map(storeId => {
-        const group = groups.find(g => g.id === storeId);
-        return group?.color || '#666666';
-      })
-    };
-  };
-
-  // Year overview - Generate weeks for the selected year
-  const getYearWeeks = () => {
     const yearStart = startOfYear(new Date(selectedYear, 0, 1));
     const yearEnd = endOfYear(new Date(selectedYear, 11, 31));
 
@@ -201,7 +163,7 @@ export default function Publicities() {
       { weekStartsOn: 1 }
     );
 
-    return weeks.map((weekStart, index) => {
+    weeks.forEach((weekStart, index) => {
       const weekEnd = endOfWeek(weekStart, { weekStartsOn: 1 });
       const weekNumber = index + 1;
 
@@ -214,19 +176,72 @@ export default function Publicities() {
         month = 11; // Décembre
       }
 
-      const participation = getWeekParticipation(weekStart, weekEnd);
+      // Une publicité compte pour la semaine dès que sa période chevauche la semaine
+      const weekPublicities = publicityPeriods
+        .filter(({ start, end }) => start && end && (start <= weekEnd && end >= weekStart))
+        .map(({ pub }) => pub);
 
-      return {
+      const participatingStores = new Set<number>();
+      weekPublicities.forEach(pub => {
+        // Vérifier que participations existe et est un tableau
+        if (pub.participations && Array.isArray(pub.participations)) {
+          pub.participations.forEach(participation => {
+            participatingStores.add(participation.groupId);
+          });
+        }
+      });
+
+      byMonth[month].push({
         weekStart,
         weekEnd,
         weekNumber,
         month,
-        ...participation
+        publicities: weekPublicities,
+        participatingStores: Array.from(participatingStores),
+        storeColors: Array.from(participatingStores).map(storeId =>
+          groupsById.get(storeId)?.color || '#666666'
+        ),
+      });
+    });
+
+    return byMonth;
+  }, [showYearOverview, selectedYear, publicityPeriods, groupsById]);
+
+  // Vue calendrier : jours du mois sélectionné avec leurs publicités, calculés
+  // seulement quand cette vue est affichée
+  const calendarDays = useMemo(() => {
+    if (viewMode !== 'calendar') return [];
+
+    const monthStart = startOfMonth(new Date(selectedYear, selectedMonth, 1));
+    const monthEnd = endOfMonth(monthStart);
+    const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
+    const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 });
+
+    return eachDayOfInterval({ start: startDate, end: endDate }).map(day => {
+      const dayPublicities = publicityPeriods
+        .filter(({ start, end }) => start && end && day >= start && day <= end)
+        .map(({ pub }) => pub);
+
+      const participatingStores = new Set<number>();
+      dayPublicities.forEach(pub => {
+        pub.participations.forEach(participation => {
+          participatingStores.add(participation.groupId);
+        });
+      });
+
+      return {
+        day,
+        isCurrentMonth: isSameMonth(day, monthStart),
+        dayPublicities,
+        participatingStores: Array.from(participatingStores),
       };
     });
-  };
+  }, [viewMode, selectedYear, selectedMonth, publicityPeriods]);
 
-  const yearWeeks = getYearWeeks();
+  // Compteurs des cartes : recalculés à chaque rendu car ils dépendent de l'heure courante
+  const now = new Date();
+  const activeCount = publicityPeriods.filter(({ start, end }) => start && end && start <= now && now <= end).length;
+  const upcomingCount = publicityPeriods.filter(({ start }) => start && start > now).length;
 
   const handleView = (publicity: PublicityWithRelations) => {
     setSelectedPublicity(publicity);
@@ -405,6 +420,11 @@ export default function Publicities() {
         </div>
       </div>
 
+      {/* Données de l'année précédente affichées atténuées pendant le chargement de la nouvelle année */}
+      <div
+        className={`space-y-6 transition-opacity ${isPlaceholderData ? 'opacity-60' : ''}`}
+        aria-busy={isPlaceholderData}
+      >
         {/* Stats */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <Card>
@@ -429,14 +449,7 @@ export default function Publicities() {
                 </div>
                 <div>
                   <p className="text-sm text-gray-600">En cours</p>
-                <p className="text-2xl font-semibold">
+                  <p className="text-2xl font-semibold">{activeCount}</p>
-                  {publicities.filter(p => {
-                    const now = new Date();
-                    const start = safeDate(p.startDate);
-                    const end = safeDate(p.endDate);
-                    return start && end && start <= now && now <= end;
-                  }).length}
-                </p>
                 </div>
               </div>
             </CardContent>
@@ -450,12 +463,7 @@ export default function Publicities() {
                 </div>
                 <div>
                   <p className="text-sm text-gray-600">À venir</p>
-                <p className="text-2xl font-semibold">
+                  <p className="text-2xl font-semibold">{upcomingCount}</p>
-                  {publicities.filter(p => {
-                    const startDate = safeDate(p.startDate);
-                    return startDate && startDate > new Date();
-                  }).length}
-                </p>
                 </div>
               </div>
             </CardContent>
@@ -477,7 +485,7 @@ export default function Publicities() {
                 <div className="grid grid-cols-12 gap-2">
                   {Array.from({ length: 12 }, (_, monthIndex) => {
                     const monthName = format(new Date(selectedYear, monthIndex, 1), 'MMM', { locale: fr });
-                  const monthWeeks = yearWeeks.filter(week => week.month === monthIndex);
+                    const monthWeeks = weeksByMonth[monthIndex];
 
                     return (
                       <div key={monthIndex} className="space-y-2">
@@ -611,29 +619,7 @@ export default function Publicities() {
                   ))}
 
                   {/* Calendar days */}
-                {(() => {
+                  {calendarDays.map(({ day, isCurrentMonth, dayPublicities, participatingStores }) => {
-                  const monthStart = startOfMonth(new Date(selectedYear, selectedMonth, 1));
-                  const monthEnd = endOfMonth(monthStart);
-                  const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
-                  const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 });
-
-                  const days = eachDayOfInterval({ start: startDate, end: endDate });
-
-                  return days.map(day => {
-                    const isCurrentMonth = isSameMonth(day, monthStart);
-                    const dayPublicities = publicities.filter(pub => {
-                      const pubStart = safeDate(pub.startDate);
-                      const pubEnd = safeDate(pub.endDate);
-                      return pubStart && pubEnd && day >= pubStart && day <= pubEnd;
-                    });
-
-                    const participatingStores = new Set<number>();
-                    dayPublicities.forEach(pub => {
-                      pub.participations.forEach(participation => {
-                        participatingStores.add(participation.groupId);
-                      });
-                    });
-
                     return (
                       <div
                         key={day.toISOString()}
@@ -665,10 +651,10 @@ export default function Publicities() {
                           </div>
                         )}
                         {/* Store participation indicators */}
-                        {participatingStores.size > 0 && (
+                        {participatingStores.length > 0 && (
                           <div className="flex gap-1 mt-1">
-                            {Array.from(participatingStores).slice(0, 3).map(storeId => {
+                            {participatingStores.slice(0, 3).map(storeId => {
-                              const group = groups.find(g => g.id === storeId);
+                              const group = groupsById.get(storeId);
                               return (
                                 <div
                                   key={storeId}
@@ -678,15 +664,14 @@ export default function Publicities() {
                                 />
                               );
                             })}
-                            {participatingStores.size > 3 && (
+                            {participatingStores.length > 3 && (
-                              <div className="text-xs text-gray-500">+{participatingStores.size - 3}</div>
+                              <div className="text-xs text-gray-500">+{participatingStores.length - 3}</div>
                             )}
                           </div>
                         )}
                       </div>
                     );
-                  });
+                  })}
-                })()}
                 </div>
 
                 {/* Legend */}
@@ -851,6 +836,7 @@ export default function Publicities() {
             </CardContent>
           </Card>
         )}
+      </div>
 
       {/* Create Modal */}
       <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>

client/src/pages/SavTickets.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -49,6 +49,10 @@ const priorityConfig = {
   critique: { label: "Critique", color: "bg-red-100 text-red-800" }
 };
 
+// Références stables tant que les données ne sont pas chargées (évitent de recalculer les filtres)
+const NO_TICKETS: SavTicketWithRelations[] = [];
+const NO_GROUPS: Group[] = [];
+
 export default function SavTickets() {
   const { user } = useAuthUnified();
   const { toast } = useToast();
@@ -94,10 +98,15 @@ export default function SavTickets() {
   
   const ticketsUrl = `/api/sav/tickets${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
 
-  const { data: ticketsData = [], isLoading } = useQuery<SavTicketWithRelations[]>({
+  const { data: ticketsData = NO_TICKETS, isLoading, isPlaceholderData } = useQuery<SavTicketWithRelations[]>({
     queryKey: [ticketsUrl, selectedStoreId],
     enabled: !!user && (user.role !== 'admin' || storeInitialized),
     staleTime: 1000 * 60 * 5, // 5 minutes
+    // Changement de filtre : les tickets précédents restent affichés (estompés)
+    // pendant le chargement. Jamais au changement de magasin, pour ne pas montrer
+    // un instant les tickets d'un autre magasin.
+    placeholderData: (previousData, previousQuery) =>
+      previousQuery?.queryKey[1] === selectedStoreId ? keepPreviousData(previousData) : undefined,
   });
 
   const { data: suppliersData = [] } = useQuery<Supplier[]>({
@@ -105,7 +114,7 @@ export default function SavTickets() {
     staleTime: 1000 * 60 * 10, // 10 minutes
   });
 
-  const { data: groupsData = [] } = useQuery<Group[]>({
+  const { data: groupsData = NO_GROUPS } = useQuery<Group[]>({
     queryKey: ['/api/groups'],
     staleTime: 1000 * 60 * 10, // 10 minutes
   });
@@ -288,30 +297,32 @@ export default function SavTickets() {
   const canModify = ['admin', 'directeur', 'manager'].includes(user?.role || '');
   const canDelete = ['admin', 'directeur'].includes(user?.role || '');
 
-  // Get user's available groups for auto-assignment
+  // Get user's available groups for auto-assignment (recalculé seulement quand
-  const getUserGroups = () => {
+  // l'utilisateur ou la liste des magasins change, et non à chaque frappe)
+  const availableGroups = useMemo(() => {
     if (!user || user.role === 'admin') {
-      console.log('🎫 [CLIENT] Admin user - can access all groups:', groupsData?.length || 0);
       return groupsData; // Admin can access all groups
     }
     
     // For other users, get their assigned groups
     const userGroups = (user as any).userGroups || [];
-    const filteredGroups = groupsData.filter(group => 
+    return groupsData.filter(group => 
       userGroups.some((ug: any) => ug.groupId === group.id)
     );
+  }, [user, groupsData]);
 
-    console.log('🎫 [CLIENT] Non-admin user groups:', {
+  // Filter tickets by search term
-      userRole: user.role,
+  const filteredTickets = useMemo(() => {
-      userUsername: user.username,
+    if (!searchTerm) return ticketsData;
-      allUserGroups: userGroups,
+    const searchLower = searchTerm.toLowerCase();
-      filteredGroups: filteredGroups.map(g => ({ id: g.id, name: g.name }))
+    return ticketsData.filter(ticket => (
-    });
+      ticket.ticketNumber.toLowerCase().includes(searchLower) ||
-    
+      ticket.clientName?.toLowerCase().includes(searchLower) ||
-    return filteredGroups;
+      ticket.problemDescription?.toLowerCase().includes(searchLower) ||
-  };
+      ticket.productDesignation?.toLowerCase().includes(searchLower) ||
-
+      ticket.supplier?.name.toLowerCase().includes(searchLower)
-  const availableGroups = getUserGroups();
+    ));
+  }, [ticketsData, searchTerm]);
 
   // Handle form submission
   const handleCreateTicket = () => {
@@ -327,17 +338,9 @@ export default function SavTickets() {
     // Auto-assign group based on user role and available groups
     let selectedGroupId = formData.groupId ? parseInt(formData.groupId) : null;
     
-    console.log('🎫 [CLIENT] User groups analysis:', {
-      userRole: user?.role,
-      formDataGroupId: formData.groupId,
-      availableGroups: availableGroups.map(g => ({ id: g.id, name: g.name })),
-      selectedGroupId
-    });
-    
     if (!selectedGroupId && availableGroups.length > 0) {
       // Auto-assign first available group
       selectedGroupId = availableGroups[0].id;
-      console.log('🎫 [CLIENT] Auto-assigned group:', selectedGroupId, availableGroups[0].name);
     }
 
     const ticketData: InsertSavTicket = {
@@ -355,14 +358,6 @@ export default function SavTickets() {
       clientPhone: formData.clientPhone || undefined,
     };
 
-    console.log('🎫 [CLIENT] Creating ticket with data:', {
-      ...ticketData,
-      userInfo: {
-        role: user?.role,
-        username: user?.username,
-        availableGroups: availableGroups.length
-      }
-    });
     createTicketMutation.mutate(ticketData);
   };
 
@@ -372,13 +367,6 @@ export default function SavTickets() {
     setShowDetailModal(true);
   };
 
-  // Query pour récupérer les détails complets du ticket avec historique
-  const { data: ticketDetails } = useQuery({
-    queryKey: [`/api/sav/tickets/${selectedTicket?.id}`],
-    enabled: !!selectedTicket && showDetailModal,
-    staleTime: 0, // Toujours récupérer les derniers commentaires
-  });
-
   // Function to check if ticket has recent comments (last 24h)
   const hasRecentComments = (ticket: SavTicketWithRelations) => {
     if (!ticket.history || ticket.history.length === 0) return false;
@@ -441,19 +429,6 @@ export default function SavTickets() {
     );
   }
 
-  // Filter tickets by search term
-  const filteredTickets = ticketsData.filter(ticket => {
-    if (!searchTerm) return true;
-    const searchLower = searchTerm.toLowerCase();
-    return (
-      ticket.ticketNumber.toLowerCase().includes(searchLower) ||
-      ticket.clientName?.toLowerCase().includes(searchLower) ||
-      ticket.problemDescription?.toLowerCase().includes(searchLower) ||
-      ticket.productDesignation?.toLowerCase().includes(searchLower) ||
-      ticket.supplier?.name.toLowerCase().includes(searchLower)
-    );
-  });
-
   return (
     <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
       {/* Header */}
@@ -823,7 +798,11 @@ export default function SavTickets() {
             Liste des tickets de service après-vente
           </CardDescription>
         </CardHeader>
-        <CardContent className="p-0">
+        {/* Estompé pendant le chargement d'un nouveau filtre (anciens résultats affichés) */}
+        <CardContent
+          className={`p-0 ${isPlaceholderData ? 'opacity-60 transition-opacity' : ''}`}
+          aria-busy={isPlaceholderData}
+        >
           {isLoading ? (
             <div className="p-8 text-center">
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>

client/src/pages/Suppliers.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -31,6 +31,10 @@ import {
 } from "lucide-react";
 import type { EntityActivityStats, Supplier } from "@shared/schema";
 
+// Références stables tant que les données ne sont pas chargées (dépendances des useMemo)
+const NO_SUPPLIERS: Supplier[] = [];
+const NO_STATS: EntityActivityStats[] = [];
+
 export default function Suppliers() {
   const { user } = useAuthUnified();
   const { toast } = useToast();
@@ -52,22 +56,19 @@ export default function Suppliers() {
     paymentMethod: "",
   });
 
-  const { data: suppliers = [], isLoading } = useQuery<Supplier[]>({
+  const { data: suppliers = NO_SUPPLIERS, isLoading } = useQuery<Supplier[]>({
     queryKey: ['/api/suppliers'],
   });
 
   // Comptages agrégés en base : la page n'affiche que des totaux, inutile de
   // rapatrier l'historique complet des commandes et des livraisons.
-  const { data: supplierStats = [] } = useQuery<EntityActivityStats[]>({
+  const { data: supplierStats = NO_STATS } = useQuery<EntityActivityStats[]>({
     queryKey: ['/api/stats/by-supplier'],
   });
 
   const createMutation = useMutation({
     mutationFn: async (data: any) => {
-      console.log('🚚 Frontend: Creating supplier with data:', data);
+      return await apiRequest("/api/suppliers", "POST", data);
-      const result = await apiRequest("/api/suppliers", "POST", data);
-      console.log('🚚 Frontend: Supplier creation result:', result);
-      return result;
     },
     onSuccess: () => {
       toast({
@@ -100,14 +101,10 @@ export default function Suppliers() {
 
   const updateMutation = useMutation({
     mutationFn: async (data: any) => {
-      console.log('🔧 Frontend: Updating supplier with data:', data);
+      return await apiRequest(`/api/suppliers/${selectedSupplier?.id}`, "PUT", data);
-      const result = await apiRequest(`/api/suppliers/${selectedSupplier?.id}`, "PUT", data);
-      console.log('🔧 Frontend: Supplier update result:', result);
-      return result;
     },
     onMutate: async (newData) => {
       // Mise à jour optimiste - mettre à jour l'interface immédiatement
-      console.log('🚀 Frontend: Optimistic update starting...');
       await queryClient.cancelQueries({ queryKey: ['/api/suppliers'] });
       
       const previousSuppliers = queryClient.getQueryData(['/api/suppliers']);
@@ -119,14 +116,12 @@ export default function Suppliers() {
             : supplier
         );
         queryClient.setQueryData(['/api/suppliers'], updatedSuppliers);
-        console.log('✅ Frontend: Optimistic update applied');
       }
       
       return { previousSuppliers };
     },
     onError: (error, newData, context) => {
       // Rollback en cas d'erreur
-      console.log('⚠️ Frontend: Rolling back optimistic update due to error');
       if (context?.previousSuppliers) {
         queryClient.setQueryData(['/api/suppliers'], context.previousSuppliers);
       }
@@ -153,13 +148,15 @@ export default function Suppliers() {
         title: "Succès",
         description: "Fournisseur modifié avec succès",
       });
-      queryClient.invalidateQueries({ queryKey: ['/api/suppliers'] });
       setShowEditModal(false);
       setSelectedSupplier(null);
       resetForm();
     },
+    // Une seule invalidation, après succès comme après échec
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['/api/suppliers'] });
+      // Le mode de paiement est affiché dans l'échéancier (cache de 5 min)
+      queryClient.invalidateQueries({ queryKey: ['/api/payment-schedule'] });
     },
   });
 
@@ -273,14 +270,20 @@ export default function Suppliers() {
     }
   };
 
-  const filteredSuppliers = suppliers.filter(supplier =>
+  // Filtre recalculé seulement quand la liste ou la recherche change, terme normalisé une seule fois
-    supplier.name.toLowerCase().includes(searchTerm.toLowerCase())
+  const filteredSuppliers = useMemo(() => {
+    const term = searchTerm.toLowerCase();
+    return suppliers.filter(supplier => supplier.name.toLowerCase().includes(term));
+  }, [suppliers, searchTerm]);
+
+  // Statistiques indexées par fournisseur (au lieu d'une recherche par carte)
+  const statsBySupplierId = useMemo(
+    () => new Map(Array.isArray(supplierStats) ? supplierStats.map(s => [s.id, s]) : []),
+    [supplierStats]
   );
 
   const getSupplierStats = (supplierId: number) => {
-    const stats = Array.isArray(supplierStats)
+    const stats = statsBySupplierId.get(supplierId);
-      ? supplierStats.find(s => s.id === supplierId)
-      : undefined;
 
     return {
       orders: stats?.orders ?? 0,

client/src/pages/Tasks.tsx

@@ -1,15 +1,15 @@
-import { useState, useEffect } from "react";
+import { useState, useMemo, useDeferredValue } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient, useMutation, keepPreviousData } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
 import { useToast } from "@/hooks/use-toast";
+import { useScreenSize, type ScreenBreakpoints } from "@/hooks/use-screen-size";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { Pagination, usePagination } from "@/components/ui/pagination";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { 
   ListTodo, 
@@ -42,9 +42,17 @@ type TaskWithRelations = Task & {
   isFutureTask?: boolean; // Pour les tâches futures (admin/directeur uniquement)
 };
 
+// Référence stable tant que la liste n'est pas chargée (évite de recalculer les filtres)
+const NO_TASKS: TaskWithRelations[] = [];
+
+// Seuils alignés sur le point de rupture « lg » de Tailwind (1024 px) qui séparait
+// les deux mises en page jusque-là masquées en CSS : bureau à partir de 1024 px
+const TASKS_LAYOUT_BREAKPOINTS: ScreenBreakpoints = { mobile: 768, tablet: 1023, desktop: 1280 };
+
 // Composant TaskForm inline - Version production ultra-simple
 function TaskFormInline({ task, onClose, selectedStoreId, user }: any) {
   const { toast } = useToast();
+  const queryClient = useQueryClient();
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     
@@ -91,22 +99,12 @@ function TaskFormInline({ task, onClose, selectedStoreId, user }: any) {
         (taskData as any).createdBy = user?.username || 'admin';
       }
 
-      console.log('📤 Tasks.tsx - Sending request:', { 
-        url, 
-        method, 
-        taskData,
-        selectedStoreId,
-        finalGroupId: (taskData as any).groupId 
-      });
-      
       const response = await fetch(url, {
         method,
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(taskData),
       });
 
-      console.log('📥 Response:', { status: response.status, ok: response.ok });
-
       if (!response.ok) {
         const errorText = await response.text();
         console.error('❌ API Error:', { status: response.status, error: errorText });
@@ -117,7 +115,10 @@ function TaskFormInline({ task, onClose, selectedStoreId, user }: any) {
         title: "Succès",
         description: task ? "Tâche modifiée avec succès" : "Tâche créée avec succès",
       });
-      window.location.reload();
+      // Rechargement ciblé de la liste des tâches (plus de rechargement complet de
+      // la page) : filtres, recherche et pagination sont conservés
+      await queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+      onClose();
 
     } catch (error) {
       console.error('Erreur:', error);
@@ -277,35 +278,11 @@ function TaskFormInline({ task, onClose, selectedStoreId, user }: any) {
 
 export default function Tasks() {
   const { user } = useAuthUnified();
-  const { selectedStoreId, storeInitialized } = useStore();
+  const { selectedStoreId } = useStore();
   const { toast } = useToast();
   const queryClient = useQueryClient();
-
+  // Une seule des deux mises en page (tablette ou bureau) est montée
-  // Debug enablement condition for tasks query
+  const { isDesktop: isLargeScreen } = useScreenSize(TASKS_LAYOUT_BREAKPOINTS);
-  const isQueryEnabled = !!user && (user.role === 'admin' || (user.role === 'directeur' || user.role === 'manager' ? !!selectedStoreId : true));
-  console.log('🔍 TASK QUERY ENABLEMENT DEBUG:', {
-    hasUser: !!user,
-    userRole: user?.role,
-    selectedStoreId,
-    isAdmin: user?.role === 'admin',
-    isDirecteurOrManager: user?.role === 'directeur' || user?.role === 'manager',
-    hasSelectedStore: !!selectedStoreId,
-    finalEnabled: isQueryEnabled,
-    storeInitialized,
-    timestamp: new Date().toISOString()
-  });
-
-  // Force refresh when selectedStoreId changes for directeur/manager
-  useEffect(() => {
-    if (user && (user.role === 'directeur' || user.role === 'manager') && selectedStoreId) {
-      console.log('🔄 FORCE REFRESH: selectedStoreId changed for directeur/manager:', {
-        userRole: user.role,
-        selectedStoreId,
-        timestamp: new Date().toISOString()
-      });
-      queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
-    }
-  }, [selectedStoreId, user, queryClient]);
 
   // États locaux
   const [searchTerm, setSearchTerm] = useState("");
@@ -322,9 +299,15 @@ export default function Tasks() {
   const [selectedTask, setSelectedTask] = useState<TaskWithRelations | null>(null);
   const [taskToDelete, setTaskToDelete] = useState<TaskWithRelations | null>(null);
 
-  // Fetch tasks - attendre que l'initialisation des stores soit terminée pour les admins
+  // Clé propre à cette page : le tableau de bord utilise ['/api/tasks', storeId]
-  const { data: tasks = [], isLoading, error } = useQuery({
+  // avec une URL différente pour les non-admins (sans storeId), sa réponse ne doit
-    queryKey: ["/api/tasks", selectedStoreId],
+  // donc jamais être réutilisée ici. Le changement de magasin change la clé, ce
+  // qui suffit à recharger la liste (plus d'invalidation forcée au montage).
+  const tasksQueryKey = ["/api/tasks", { storeId: selectedStoreId }];
+
+  // Fetch tasks
+  const { data: tasks = NO_TASKS, isLoading, isPlaceholderData } = useQuery({
+    queryKey: tasksQueryKey,
     queryFn: async () => {
       try {
         const params = new URLSearchParams();
@@ -332,16 +315,6 @@ export default function Tasks() {
         if (selectedStoreId) {
           params.append('storeId', selectedStoreId.toString());
         }
-        console.log('📋 TASKS QUERY - Fetching with params:', { 
-          selectedStoreId, 
-          userRole: user?.role,
-          storeInitialized,
-          url: `/api/tasks?${params.toString()}`,
-          willFilterByStore: !!selectedStoreId,
-          enabled: !!user,
-          timestamp: new Date().toISOString(),
-          userGroups: user?.userGroups?.map((ug: any) => ug.groupId) || 'NONE'
-        });
 
         const response = await fetch(`/api/tasks?${params.toString()}`, {
           credentials: 'include'
@@ -353,18 +326,6 @@ export default function Tasks() {
 
         const data = await response.json();
 
-        console.log('📋 TASKS QUERY - Response received:', {
-          dataType: typeof data,
-          isArray: Array.isArray(data),
-          length: data?.length,
-          firstTask: data?.[0] ? {
-            id: data[0].id,
-            title: data[0].title,
-            hasStartDate: !!data[0].startDate,
-            hasGroup: !!data[0].group
-          } : null
-        });
-        
         // Valider et nettoyer les données reçues
         if (!Array.isArray(data)) {
           console.error('Tasks API returned non-array data:', data);
@@ -379,31 +340,33 @@ export default function Tasks() {
       }
     },
     enabled: !!user, // Charger les données dès que l'utilisateur est connecté
+    // Au changement de magasin, la liste précédente reste affichée (estompée et
+    // non cliquable, avec un indicateur) au lieu d'un spinner plein écran
+    placeholderData: keepPreviousData,
   });
 
-  // Fetch users for task assignment - seulement pour admin/manager/directeur
+  // Mise à jour optimiste de la liste affichée ; renvoie l'état précédent pour
-  const { data: users = [] } = useQuery({
+  // pouvoir le restaurer si le serveur refuse l'opération
-    queryKey: ["/api/users"],
+  const updateCachedTasks = async (update: (list: TaskWithRelations[]) => TaskWithRelations[]) => {
-    queryFn: () => fetch('/api/users', {
+    const queryKey = tasksQueryKey;
-      credentials: 'include'
+    await queryClient.cancelQueries({ queryKey });
-    }).then(res => {
+    const previousTasks = queryClient.getQueryData<TaskWithRelations[]>(queryKey);
-      if (!res.ok) {
+    if (Array.isArray(previousTasks)) {
-        throw new Error(`HTTP error! status: ${res.status}`);
+      queryClient.setQueryData<TaskWithRelations[]>(queryKey, update(previousTasks));
     }
-      return res.json();
+    return { queryKey, previousTasks };
-    }),
-    enabled: !!user && (user.role === 'admin' || user.role === 'manager' || user.role === 'directeur'),
-  });
-
-
-
-  const handleEditTask = (task: TaskWithRelations) => {
-    setSelectedTask(task);
-    setShowEditModal(true);
   };
 
-  const handleCompleteTask = async (taskId: number) => {
+  const restoreCachedTasks = (context?: { queryKey: unknown[]; previousTasks?: TaskWithRelations[] }) => {
-    try {
+    if (context?.previousTasks) {
+      queryClient.setQueryData(context.queryKey, context.previousTasks);
+    }
+  };
+
+  // Terminer : la tâche passe tout de suite dans les tâches terminées, puis la
+  // liste est rechargée depuis le serveur
+  const completeTaskMutation = useMutation({
+    mutationFn: async (taskId: number) => {
       const response = await fetch(`/api/tasks/${taskId}/complete`, {
         method: 'POST',
         headers: {
@@ -416,32 +379,39 @@ export default function Tasks() {
       if (!response.ok) {
         throw new Error('Erreur lors de la completion de la tâche');
       }
-
+    },
-      await queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+    onMutate: (taskId: number) => {
+      const now = new Date();
+      return updateCachedTasks((list) => list.map((task) =>
+        task.id === taskId
+          ? { ...task, status: 'completed', completedAt: now, completedBy: user?.id ?? task.completedBy, updatedAt: now }
+          : task
+      ));
+    },
+    onSuccess: () => {
       toast({
         title: "Succès",
         description: "Tâche marquée comme terminée",
       });
-    } catch (error) {
+    },
+    onError: (error, _taskId, context) => {
+      restoreCachedTasks(context);
       console.error("Error completing task:", error);
       toast({
         title: "Erreur",
         description: "Impossible de terminer la tâche",
         variant: "destructive",
       });
-    }
+    },
-  };
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+    },
+  });
 
-  const handleDeleteClick = (task: TaskWithRelations) => {
+  // Supprimer : la tâche disparaît tout de suite de la liste et la modale se ferme
-    setTaskToDelete(task);
+  const deleteTaskMutation = useMutation({
-    setShowDeleteModal(true);
+    mutationFn: async (taskId: number) => {
-  };
+      const response = await fetch(`/api/tasks/${taskId}`, {
-
-  const handleConfirmDelete = async () => {
-    if (!taskToDelete) return;
-
-    try {
-      const response = await fetch(`/api/tasks/${taskToDelete.id}`, {
         method: 'DELETE',
         credentials: 'include',
       });
@@ -449,31 +419,61 @@ export default function Tasks() {
       if (!response.ok) {
         throw new Error('Erreur lors de la suppression');
       }
-
+    },
-      await queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+    onMutate: (taskId: number) => updateCachedTasks((list) => list.filter((task) => task.id !== taskId)),
+    onSuccess: () => {
       toast({
         title: "Succès",
         description: "Tâche supprimée avec succès",
       });
-      
+    },
-      setShowDeleteModal(false);
+    onError: (error, _taskId, context) => {
-      setTaskToDelete(null);
+      restoreCachedTasks(context);
-    } catch (error) {
       console.error("Error deleting task:", error);
       toast({
         title: "Erreur",
         description: "Impossible de supprimer la tâche",
         variant: "destructive",
       });
-    }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+    },
+  });
+
+  const handleEditTask = (task: TaskWithRelations) => {
+    setSelectedTask(task);
+    setShowEditModal(true);
   };
 
-  // Filtrer et trier les tâches
+  const handleCompleteTask = (taskId: number) => {
-  const filteredTasks = tasks
+    completeTaskMutation.mutate(taskId);
+  };
+
+  const handleDeleteClick = (task: TaskWithRelations) => {
+    setTaskToDelete(task);
+    setShowDeleteModal(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (!taskToDelete) return;
+
+    deleteTaskMutation.mutate(taskToDelete.id);
+    setShowDeleteModal(false);
+    setTaskToDelete(null);
+  };
+
+  // La recherche est différée : la saisie reste fluide pendant le filtrage
+  const deferredSearchTerm = useDeferredValue(searchTerm);
+
+  // Filtrer et trier les tâches (recalculé seulement quand la liste ou un filtre change)
+  const filteredTasks = useMemo(() => {
+    const search = deferredSearchTerm.toLowerCase();
+    return tasks
       .filter((task: TaskWithRelations) => {
         // Filtre par recherche
-      if (searchTerm && !task.title.toLowerCase().includes(searchTerm.toLowerCase()) && 
+        if (search && !task.title.toLowerCase().includes(search) &&
-          !task.description?.toLowerCase().includes(searchTerm.toLowerCase())) {
+            !task.description?.toLowerCase().includes(search)) {
           return false;
         }
 
@@ -529,6 +529,7 @@ export default function Tasks() {
         const bDate = b.createdAt ? new Date(b.createdAt).getTime() : 0;
         return bDate - aDate;
       });
+  }, [tasks, deferredSearchTerm, statusFilter, priorityFilter, dueDateFilter]);
 
   // Pagination
   const {
@@ -541,6 +542,18 @@ export default function Tasks() {
     totalItems
   } = usePagination(filteredTasks, 10);
 
+  // Sous-listes calculées une seule fois par rendu (page courante et Kanban)
+  const pagePendingTasks = paginatedTasks.filter((task: TaskWithRelations) => task.status === 'pending');
+  const pageCompletedTasks = paginatedTasks.filter((task: TaskWithRelations) => task.status === 'completed');
+  const { kanbanPendingTasks, kanbanCompletedTasks } = useMemo(() => ({
+    kanbanPendingTasks: filteredTasks.filter((task: TaskWithRelations) => task.status === 'pending'),
+    kanbanCompletedTasks: filteredTasks.filter((task: TaskWithRelations) => task.status === 'completed'),
+  }), [filteredTasks]);
+
+  // Liste du magasin précédent affichée pendant le chargement du nouveau magasin :
+  // estompée et non cliquable pour ne pas agir sur une tâche de l'ancien magasin
+  const listBusyClass = isPlaceholderData ? "opacity-60 pointer-events-none transition-opacity" : "";
+
   const getPriorityConfig = (priority: string) => {
     switch (priority) {
       case 'high':
@@ -687,6 +700,12 @@ export default function Tasks() {
             </h2>
             <p className="text-gray-600 mt-1 text-sm sm:text-base">
               {totalItems} tâche{totalItems !== 1 ? 's' : ''} trouvée{totalItems !== 1 ? 's' : ''}
+              {isPlaceholderData && (
+                <span className="inline-flex items-center gap-1 ml-2 text-xs text-gray-500" role="status">
+                  <span className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary" />
+                  Mise à jour…
+                </span>
+              )}
             </p>
           </div>
           <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
@@ -757,8 +776,9 @@ export default function Tasks() {
         </div>
       </div>
 
-      {/* Section filtres - Responsive */}
+      {/* Section filtres - Responsive (tablette uniquement) */}
-      <div className={`${filtersOpen ? 'block' : 'hidden'} lg:hidden mb-4`}>
+      {!isLargeScreen && (
+      <div className={`${filtersOpen ? 'block' : 'hidden'} mb-4`}>
         <Card className="mb-4 sm:mb-6">
           <CardHeader className="pb-3 sm:pb-4">
             <div className="flex items-center justify-between">
@@ -846,9 +866,11 @@ export default function Tasks() {
           </CardContent>
         </Card>
       </div>
+      )}
 
       {/* Zone principale mobile/tablet - Contenu pleine largeur */}
-      <div className="block lg:hidden">
+      {!isLargeScreen && (
+      <div className={listBusyClass} aria-busy={isPlaceholderData}>
         <Tabs value={viewMode} onValueChange={setViewMode} className="h-full">
           <TabsContent value="list" className="mt-0">
             {/* Contenu mobile identique au desktop mais optimisé */}
@@ -865,14 +887,13 @@ export default function Tasks() {
             ) : (
               <div className="space-y-3 sm:space-y-4">
                 {/* Tâches en cours - Mobile optimisé */}
-                {paginatedTasks.filter(task => task.status === 'pending').length > 0 && (
+                {pagePendingTasks.length > 0 && (
                   <div>
                     <h4 className="text-base sm:text-lg font-semibold text-gray-900 mb-3 px-1">
-                      Tâches en cours ({paginatedTasks.filter(task => task.status === 'pending').length})
+                      Tâches en cours ({pagePendingTasks.length})
                     </h4>
                     <div className="space-y-2 sm:space-y-3">
-                      {paginatedTasks
+                      {pagePendingTasks
-                        .filter(task => task.status === 'pending')
                         .map((task) => {
                           const priorityConfig = getPriorityConfig(task.priority);
                           const PriorityIcon = priorityConfig.icon;
@@ -1024,14 +1045,13 @@ export default function Tasks() {
                 )}
 
                 {/* Tâches terminées - Mobile optimisé */}
-                {paginatedTasks.filter(task => task.status === 'completed').length > 0 && (
+                {pageCompletedTasks.length > 0 && (
                   <div>
                     <h4 className="text-base sm:text-lg font-semibold text-gray-900 mb-3 mt-6 px-1">
-                      Tâches terminées ({paginatedTasks.filter(task => task.status === 'completed').length})
+                      Tâches terminées ({pageCompletedTasks.length})
                     </h4>
                     <div className="space-y-2 sm:space-y-3">
-                      {paginatedTasks
+                      {pageCompletedTasks
-                        .filter(task => task.status === 'completed')
                         .map((task) => {
                           const priorityConfig = getPriorityConfig(task.priority);
                           const PriorityIcon = priorityConfig.icon;
@@ -1088,9 +1108,11 @@ export default function Tasks() {
           </TabsContent>
         </Tabs>
       </div>
+      )}
 
       {/* Sidebar desktop uniquement */}
-      <div className="hidden lg:flex gap-6">
+      {isLargeScreen && (
+      <div className="flex gap-6">
         {/* Sidebar avec filtres desktop */}
         <div className="w-80 bg-gray-50 border-r border-gray-200 p-4 flex-shrink-0">
           <Card>
@@ -1167,7 +1189,7 @@ export default function Tasks() {
         </div>
 
         {/* Zone principale avec les tâches - Desktop */}
-        <div className="flex-1">
+        <div className={`flex-1 ${listBusyClass}`} aria-busy={isPlaceholderData}>
           {/* Contenu selon la vue sélectionnée */}
           <Tabs value={viewMode} onValueChange={setViewMode} className="h-full">
             <TabsContent value="list" className="mt-0">
@@ -1186,14 +1208,13 @@ export default function Tasks() {
             ) : (
               <div className="space-y-4">
                 {/* Tâches en cours */}
-                {paginatedTasks.filter(task => task.status === 'pending').length > 0 && (
+                {pagePendingTasks.length > 0 && (
                   <div>
                     <h4 className="text-lg font-semibold text-gray-900 mb-3">
-                      Tâches en cours ({paginatedTasks.filter(task => task.status === 'pending').length})
+                      Tâches en cours ({pagePendingTasks.length})
                     </h4>
                     <div className="space-y-3">
-                      {paginatedTasks
+                      {pagePendingTasks
-                        .filter(task => task.status === 'pending')
                         .map((task) => {
                           const priorityConfig = getPriorityConfig(task.priority);
                           const PriorityIcon = priorityConfig.icon;
@@ -1334,14 +1355,13 @@ export default function Tasks() {
                 )}
 
                 {/* Tâches terminées */}
-                {paginatedTasks.filter(task => task.status === 'completed').length > 0 && (
+                {pageCompletedTasks.length > 0 && (
                   <div>
                     <h4 className="text-lg font-semibold text-gray-900 mb-3 mt-8">
-                      Tâches terminées ({paginatedTasks.filter(task => task.status === 'completed').length})
+                      Tâches terminées ({pageCompletedTasks.length})
                     </h4>
                     <div className="space-y-3">
-                      {paginatedTasks
+                      {pageCompletedTasks
-                        .filter(task => task.status === 'completed')
                         .map((task) => {
                           const priorityConfig = getPriorityConfig(task.priority);
                           const PriorityIcon = priorityConfig.icon;
@@ -1426,10 +1446,10 @@ export default function Tasks() {
                   <div className="bg-gray-50 rounded-lg p-4">
                     <h3 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
                       <Circle className="w-5 h-5 text-yellow-500" />
-                      En cours ({filteredTasks.filter((task: TaskWithRelations) => task.status === 'pending').length})
+                      En cours ({kanbanPendingTasks.length})
                     </h3>
                     <div className="space-y-3 max-h-[600px] overflow-y-auto">
-                      {filteredTasks.filter((task: TaskWithRelations) => task.status === 'pending').map((task: TaskWithRelations) => {
+                      {kanbanPendingTasks.map((task: TaskWithRelations) => {
                         const priorityConfig = getPriorityConfig(task.priority);
                         const PriorityIcon = priorityConfig.icon;
                         const dueDateStatus = getDueDateStatus(task.dueDate, task.status);
@@ -1506,10 +1526,10 @@ export default function Tasks() {
                   <div className="bg-green-50 rounded-lg p-4">
                     <h3 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
                       <CheckCircle className="w-5 h-5 text-green-500" />
-                      Terminées ({filteredTasks.filter((task: TaskWithRelations) => task.status === 'completed').length})
+                      Terminées ({kanbanCompletedTasks.length})
                     </h3>
                     <div className="space-y-3 max-h-[600px] overflow-y-auto">
-                      {filteredTasks.filter((task: TaskWithRelations) => task.status === 'completed').map((task: TaskWithRelations) => {
+                      {kanbanCompletedTasks.map((task: TaskWithRelations) => {
                         const priorityConfig = getPriorityConfig(task.priority);
                         const PriorityIcon = priorityConfig.icon;
                         
@@ -1562,6 +1582,7 @@ export default function Tasks() {
           </Tabs>
         </div>
       </div>
+      )}
 
 {/* Modal d'édition */}
       {showEditModal && selectedTask && (

client/src/pages/Users.tsx

@@ -28,7 +28,7 @@ import {
 import type { UserWithGroups, Group } from "@shared/schema";
 
 export default function UsersPage() {
-  const { user } = useAuthUnified();
+  const { user, refreshAuth } = useAuthUnified();
   const { toast } = useToast();
   const queryClient = useQueryClient();
   
@@ -132,12 +132,17 @@ export default function UsersPage() {
       const response = await apiRequest(`/api/users/${data.id}`, "PUT", cleanedUpdates);
       return response;
     },
-    onSuccess: (updatedUser) => {
+    onSuccess: (updatedUser, variables) => {
       toast({
         title: "Succès",
         description: "Utilisateur mis à jour avec succès",
       });
 
+      // Compte de l'administrateur connecté : rafraîchir l'utilisateur partagé par l'application
+      if (variables.id === user?.id) {
+        refreshAuth();
+      }
+      
       // Update the form with the response data before closing
       if (updatedUser) {
         setEditForm({
@@ -224,25 +229,24 @@ export default function UsersPage() {
 
   const assignGroupMutation = useMutation({
     mutationFn: async (data: { userId: string; groupId: number }) => {
-      console.log('📤 Assigning group:', data);
       const response = await apiRequest(
         `/api/users/${data.userId}/groups`, 
         "POST",
         { groupId: data.groupId }
       );
-      console.log('✅ Group assignment response:', response);
       return response;
     },
-    onSuccess: () => {
+    onSuccess: (_response, variables) => {
-      console.log('✅ Group assigned successfully');
       toast({
         title: "Succès",
         description: "Utilisateur assigné au groupe avec succès",
       });
-      // Invalidation complète du cache
+      // Seule la liste des utilisateurs change : la liste des magasins
+      // (['/api/groups']) ne dépend pas des affectations
       queryClient.invalidateQueries({ queryKey: ['/api/users'] });
-      
+      if (variables.userId === user?.id) {
-      queryClient.invalidateQueries({ queryKey: ['/api/groups'] });
+        refreshAuth();
+      }
     },
     onError: (error: any) => {
       console.error('❌ Error assigning group:', error);
@@ -270,24 +274,23 @@ export default function UsersPage() {
 
   const removeGroupMutation = useMutation({
     mutationFn: async (data: { userId: string; groupId: number }) => {
-      console.log('🗑️ Removing group:', data);
       const response = await apiRequest(
         `/api/users/${data.userId}/groups/${data.groupId}`, 
         "DELETE"
       );
-      console.log('✅ Group removal response:', response);
       return response;
     },
-    onSuccess: () => {
+    onSuccess: (_response, variables) => {
-      console.log('✅ Group removed successfully');
       toast({
         title: "Succès",
         description: "Utilisateur retiré du groupe avec succès",
       });
-      // Invalidation complète du cache
+      // Seule la liste des utilisateurs change : la liste des magasins
+      // (['/api/groups']) ne dépend pas des affectations
       queryClient.invalidateQueries({ queryKey: ['/api/users'] });
-      
+      if (variables.userId === user?.id) {
-      queryClient.invalidateQueries({ queryKey: ['/api/groups'] });
+        refreshAuth();
+      }
     },
     onError: (error: any) => {
       console.error('❌ Error removing group:', error);

client/src/pages/mobile/AvoirsPage.tsx

@@ -2,7 +2,7 @@
  * MobileAvoirsPage.tsx
  * Version mobile de la page Gestion des Avoirs
  */
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
@@ -68,16 +68,20 @@ const avoirSchema = z.object({
     status: z.enum(["En attente de demande", "Demandé", "Reçu"]).default("En attente de demande"),
 });
 
+// Tableau vide stable tant que la liste n'est pas chargée (calculs mémoïsés)
+const NO_AVOIRS: any[] = [];
+
 export default function MobileAvoirsPage() {
     const { user } = useAuthUnified();
-    const { selectedStoreId } = useStore();
+    // Magasins déjà chargés par l'application (même liste que /api/groups)
+    const { selectedStoreId, stores } = useStore();
     const [searchTerm, setSearchTerm] = useState("");
     const [isCreateOpen, setIsCreateOpen] = useState(false);
     const { toast } = useToast();
     const queryClient = useQueryClient();
 
     // Queries
-    const { data: avoirs = [], isLoading } = useQuery({
+    const { data: avoirs = NO_AVOIRS, isLoading } = useQuery<any[]>({
         queryKey: ["/api/avoirs", selectedStoreId],
         queryFn: async () => {
             if (!selectedStoreId) return [];
@@ -88,14 +92,11 @@ export default function MobileAvoirsPage() {
         enabled: !!selectedStoreId && !!user,
     });
 
+    // Fournisseurs : utiles seulement dans la feuille de création, chargés à son ouverture
     const { data: suppliers = [] } = useQuery({
         queryKey: ['/api/suppliers'],
-        queryFn: () => apiRequest('/api/suppliers')
+        queryFn: () => apiRequest('/api/suppliers'),
-    });
+        enabled: isCreateOpen,
-
-    const { data: groups = [] } = useQuery({
-        queryKey: ['/api/groups'],
-        queryFn: () => apiRequest('/api/groups')
     });
 
     // Mutations
@@ -142,7 +143,7 @@ export default function MobileAvoirsPage() {
     const onSubmit = (data: any) => {
         let groupId = selectedStoreId;
         if (!groupId && user?.userGroups?.[0]?.groupId) groupId = user.userGroups[0].groupId;
-        if (!groupId && groups.length > 0 && user?.role === 'admin') groupId = groups[0].id;
+        if (!groupId && stores.length > 0 && user?.role === 'admin') groupId = stores[0].id;
 
         if (!groupId) {
             toast({ title: "Erreur", description: "Aucun magasin sélectionné", variant: "destructive" });
@@ -155,13 +156,31 @@ export default function MobileAvoirsPage() {
         });
     };
 
-    const sortedAvoirs = [...avoirs].sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    // Tri et filtrage recalculés seulement quand la liste ou la recherche change
-
+    const sortedAvoirs = useMemo(
-    const filteredAvoirs = sortedAvoirs.filter((a: any) =>
+        () => [...avoirs].sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
-        (a.supplier?.name?.toLowerCase().includes(searchTerm.toLowerCase()) || "") ||
+        [avoirs]
-        (a.invoiceReference?.toLowerCase().includes(searchTerm.toLowerCase()) || "")
     );
 
+    const filteredAvoirs = useMemo(() => {
+        const searchLower = searchTerm.toLowerCase();
+        return sortedAvoirs.filter((a: any) =>
+            (a.supplier?.name?.toLowerCase().includes(searchLower) || "") ||
+            (a.invoiceReference?.toLowerCase().includes(searchLower) || "")
+        );
+    }, [sortedAvoirs, searchTerm]);
+
+    // Changement de statut : le PUT remet à null montant, référence et
+    // commentaire absents du corps. On envoie donc le statut et les valeurs
+    // actuelles de ces trois champs (une valeur nulle est omise et reste nulle),
+    // sans l'avoir complet et ses relations (fournisseur, magasin, créateur).
+    const buildStatusUpdate = (avoir: any, status: string) => ({
+        status,
+        amount: avoir.amount ?? null,
+        ...(avoir.invoiceReference != null ? { invoiceReference: avoir.invoiceReference } : {}),
+        ...(avoir.comment != null ? { comment: avoir.comment } : {}),
+    });
+
     const getStatusBadge = (status: string) => {
         switch (status) {
             case "En attente de demande": return <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200">En attente</Badge>;
@@ -238,19 +257,19 @@ export default function MobileAvoirsPage() {
                                             <DropdownMenuContent align="end">
                                                 <DropdownMenuItem onClick={() => updateStatusMutation.mutate({
                                                     id: avoir.id,
-                                                    data: { ...avoir, status: 'En attente de demande' }
+                                                    data: buildStatusUpdate(avoir, 'En attente de demande')
                                                 })}>
                                                     Marquer En attente
                                                 </DropdownMenuItem>
                                                 <DropdownMenuItem onClick={() => updateStatusMutation.mutate({
                                                     id: avoir.id,
-                                                    data: { ...avoir, status: 'Demandé' }
+                                                    data: buildStatusUpdate(avoir, 'Demandé')
                                                 })}>
                                                     Marquer Demandé
                                                 </DropdownMenuItem>
                                                 <DropdownMenuItem onClick={() => updateStatusMutation.mutate({
                                                     id: avoir.id,
-                                                    data: { ...avoir, status: 'Reçu' }
+                                                    data: buildStatusUpdate(avoir, 'Reçu')
                                                 })}>
                                                     Marquer Reçu
                                                 </DropdownMenuItem>

client/src/pages/mobile/CalendarPage.tsx

@@ -2,7 +2,7 @@
  * CalendarPage Mobile - Calendrier simplifié pour mobile
  * Affiche les commandes et livraisons comme événements
  */
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
@@ -42,6 +42,10 @@ type CalendarEvent = {
     supplier?: { name: string };
 };
 
+// Références stables (évite de recalculer l'index des événements à chaque rendu)
+const NO_DATA: any[] = [];
+const NO_EVENTS: CalendarEvent[] = [];
+
 export default function MobileCalendarPage() {
     const { user } = useAuthUnified();
     const { selectedStoreId } = useStore();
@@ -49,7 +53,7 @@ export default function MobileCalendarPage() {
     const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
     // Fetch orders for current month
-    const { data: orders = [] } = useQuery({
+    const { data: orders = NO_DATA } = useQuery({
         queryKey: ["/api/orders", selectedStoreId, format(currentMonth, 'yyyy-MM')],
         queryFn: async () => {
             const start = format(startOfMonth(currentMonth), 'yyyy-MM-dd');
@@ -74,7 +78,7 @@ export default function MobileCalendarPage() {
     });
 
     // Fetch deliveries for current month
-    const { data: deliveries = [] } = useQuery({
+    const { data: deliveries = NO_DATA } = useQuery({
         queryKey: ["/api/deliveries", selectedStoreId, format(currentMonth, 'yyyy-MM')],
         queryFn: async () => {
             const start = format(startOfMonth(currentMonth), 'yyyy-MM-dd');
@@ -98,7 +102,10 @@ export default function MobileCalendarPage() {
         enabled: !!user,
     });
 
-    // Combine orders and deliveries into events
+    // Combine orders and deliveries into events, indexés par jour ('yyyy-MM-dd',
+    // heure locale comme isSameDay) une seule fois par chargement au lieu d'un
+    // filtrage complet pour chaque case du calendrier
+    const { events, eventsByDay } = useMemo(() => {
         const events: CalendarEvent[] = [
             ...orders.map((order: any) => ({
                 id: order.id,
@@ -118,6 +125,23 @@ export default function MobileCalendarPage() {
             }))
         ];
 
+        const eventsByDay = new Map<string, CalendarEvent[]>();
+        for (const event of events) {
+            if (!event.date) continue;
+            const eventDate = new Date(event.date);
+            if (isNaN(eventDate.getTime())) continue;
+            const key = format(eventDate, 'yyyy-MM-dd');
+            const dayEvents = eventsByDay.get(key);
+            if (dayEvents) {
+                dayEvents.push(event);
+            } else {
+                eventsByDay.set(key, [event]);
+            }
+        }
+
+        return { events, eventsByDay };
+    }, [orders, deliveries]);
+
     const monthStart = startOfMonth(currentMonth);
     const monthEnd = endOfMonth(currentMonth);
 
@@ -126,24 +150,14 @@ export default function MobileCalendarPage() {
     const calendarEnd = endOfWeek(monthEnd, { locale: fr });
     const calendarDays = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
 
-    // Get events for selected date
-    const selectedDateEvents = selectedDate
-        ? events.filter((event) => {
-            if (!event.date) return false;
-            const eventDate = new Date(event.date);
-            return !isNaN(eventDate.getTime()) && isSameDay(eventDate, selectedDate);
-        })
-        : [];
-
     // Check if a day has events
     const getEventsForDay = (day: Date) => {
-        return events.filter((event) => {
+        return eventsByDay.get(format(day, 'yyyy-MM-dd')) || NO_EVENTS;
-            if (!event.date) return false;
-            const eventDate = new Date(event.date);
-            return !isNaN(eventDate.getTime()) && isSameDay(eventDate, day);
-        });
     };
 
+    // Get events for selected date
+    const selectedDateEvents = selectedDate ? getEventsForDay(selectedDate) : NO_EVENTS;
+
     const navigateMonth = (direction: 'prev' | 'next') => {
         setCurrentMonth(direction === 'prev'
             ? subMonths(currentMonth, 1)

client/src/pages/mobile/CustomerOrdersPage.tsx

@@ -2,7 +2,7 @@
  * MobileCustomerOrdersPage.tsx
  * Version mobile de la page Commandes Clients avec création
  */
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
@@ -77,6 +77,9 @@ const customerOrderFormSchema = z.object({
     deposit: z.coerce.number().optional().default(0),
 });
 
+// Référence stable tant que la liste n'est pas chargée
+const NO_ORDERS: any[] = [];
+
 export default function MobileCustomerOrdersPage() {
     const { user } = useAuthUnified();
     const { selectedStoreId } = useStore();
@@ -88,7 +91,7 @@ export default function MobileCustomerOrdersPage() {
     const queryClient = useQueryClient();
 
     // Queries
-    const { data: orders = [], isLoading } = useQuery({
+    const { data: orders = NO_ORDERS, isLoading } = useQuery({
         queryKey: ["/api/customer-orders", selectedStoreId],
         queryFn: async () => {
             if (!selectedStoreId) return [];
@@ -267,11 +270,16 @@ export default function MobileCustomerOrdersPage() {
         createMutation.mutate(submitData);
     };
 
-    const filteredOrders = orders.filter((order: any) =>
+    // Recalculé seulement quand la liste ou la recherche change (et non à
-        order.customerName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    // chaque frappe dans le commentaire de contact)
-        order.productDesignation.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    const filteredOrders = useMemo(() => {
-        (order.productReference && order.productReference.toLowerCase().includes(searchTerm.toLowerCase()))
+        const search = searchTerm.toLowerCase();
+        return orders.filter((order: any) =>
+            order.customerName.toLowerCase().includes(search) ||
+            order.productDesignation.toLowerCase().includes(search) ||
+            (order.productReference && order.productReference.toLowerCase().includes(search))
         );
+    }, [orders, searchTerm]);
 
     const getStatusColor = (status: string) => {
         switch (status) {

client/src/pages/mobile/DashboardPage.tsx

@@ -2,6 +2,7 @@
  * DashboardPage Mobile - Tableau de bord simplifié pour mobile
  */
 import { useQuery } from "@tanstack/react-query";
+import { Link } from "wouter";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
 import MobileLayout from "./MobileLayout";
@@ -59,22 +60,6 @@ export default function MobileDashboardPage() {
     const { user } = useAuthUnified();
     const { selectedStoreId } = useStore();
 
-    // Fetch stats
-    const { data: stats, isLoading } = useQuery({
-        queryKey: ["/api/stats/dashboard", selectedStoreId],
-        queryFn: async () => {
-            const params = new URLSearchParams();
-            if (selectedStoreId) params.append('storeId', selectedStoreId.toString());
-
-            const response = await fetch(`/api/stats/dashboard?${params}`, {
-                credentials: 'include'
-            });
-            if (!response.ok) return null;
-            return response.json();
-        },
-        enabled: !!user,
-    });
-
     // Fetch pending tasks count
     const { data: tasks = [] } = useQuery({
         queryKey: ["/api/tasks", selectedStoreId],
@@ -92,13 +77,18 @@ export default function MobileDashboardPage() {
         enabled: !!user,
     });
 
+    // Date du jour : le serveur filtre sur startDate/endDate (le paramètre 'date'
+    // était ignoré et renvoyait tout l'historique)
+    const today = format(new Date(), 'yyyy-MM-dd');
+
     // Fetch today's orders
     const { data: orders = [] } = useQuery({
-        queryKey: ["/api/orders/today", selectedStoreId],
+        queryKey: ["/api/orders/today", selectedStoreId, today],
         queryFn: async () => {
             const params = new URLSearchParams();
             if (selectedStoreId) params.append('storeId', selectedStoreId.toString());
-            params.append('date', format(new Date(), 'yyyy-MM-dd'));
+            params.append('startDate', today);
+            params.append('endDate', today);
 
             const response = await fetch(`/api/orders?${params}`, {
                 credentials: 'include'
@@ -112,11 +102,12 @@ export default function MobileDashboardPage() {
 
     // Fetch today's deliveries
     const { data: deliveries = [] } = useQuery({
-        queryKey: ["/api/deliveries/today", selectedStoreId],
+        queryKey: ["/api/deliveries/today", selectedStoreId, today],
         queryFn: async () => {
             const params = new URLSearchParams();
             if (selectedStoreId) params.append('storeId', selectedStoreId.toString());
-            params.append('date', format(new Date(), 'yyyy-MM-dd'));
+            params.append('startDate', today);
+            params.append('endDate', today);
 
             const response = await fetch(`/api/deliveries?${params}`, {
                 credentials: 'include'
@@ -183,15 +174,16 @@ export default function MobileDashboardPage() {
                             { icon: Calendar, label: "Agenda", path: "/calendar" },
                         ].map((item) => {
                             const Icon = item.icon;
+                            // Lien wouter : navigation interne sans recharger l'application
                             return (
-                                <a
+                                <Link
                                     key={item.path}
                                     href={item.path}
                                     className="flex flex-col items-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100"
                                 >
                                     <Icon className="h-6 w-6 text-gray-600 mb-1" />
                                     <span className="text-xs text-gray-600">{item.label}</span>
-                                </a>
+                                </Link>
                             );
                         })}
                     </div>

client/src/pages/mobile/DlcPage.tsx

@@ -70,30 +70,40 @@ const dlcFormSchema = z.object({
     notes: z.string().optional(),
 });
 
+// Référence stable tant que la liste n'est pas chargée
+const NO_PRODUCTS: any[] = [];
+
 export default function MobileDlcPage() {
     const { user } = useAuthUnified();
     const { selectedStoreId } = useStore();
     const [searchTerm, setSearchTerm] = useState("");
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
     const [statusFilter, setStatusFilter] = useState("en_cours"); // en_cours, expires_soon, expires, valides
     const [isCreateOpen, setIsCreateOpen] = useState(false);
     const { toast } = useToast();
     const queryClient = useQueryClient();
 
+    // Recherche appliquée 300 ms après la dernière frappe (filtrage local)
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearchTerm(searchTerm);
+        }, 300);
+
+        return () => clearTimeout(timer);
+    }, [searchTerm]);
+
     // Data fetching
-    const { data: dlcProducts = [], isLoading } = useQuery({
+    // Toute la liste du magasin est chargée une seule fois : l'onglet et la
-        queryKey: ["/api/dlc-products", selectedStoreId, statusFilter, searchTerm],
+    // recherche filtrent localement, sans nouvelle requête (clé propre au mobile,
+    // toujours invalidée par le préfixe "/api/dlc-products" des mutations)
+    const { data: dlcProducts = NO_PRODUCTS, isLoading } = useQuery({
+        queryKey: ["/api/dlc-products", "mobile", selectedStoreId],
         queryFn: async () => {
-            const params = new URLSearchParams();
+            if (!selectedStoreId) return [];
-            if (selectedStoreId) params.append("storeId", selectedStoreId.toString());
+            return apiRequest(`/api/dlc-products?storeId=${selectedStoreId}`);
-            // Simplify fetching everything client side for mobile smoothness or filter server side?
-            // Let's filter client side for better UX given the likely smaller dataset per store
-            if (selectedStoreId) {
-                const res = await fetch(`/api/dlc-products?storeId=${selectedStoreId}`, { credentials: 'include' });
-                return res.json();
-            }
-            return [];
         },
         enabled: !!selectedStoreId && !!user,
+        staleTime: 2 * 60 * 1000, // 2 minutes, comme sur ordinateur
     });
 
     const { data: suppliers = [] } = useQuery({
@@ -230,8 +240,8 @@ export default function MobileDlcPage() {
         let filtered = dlcProducts;
 
         // Search
-        if (searchTerm) {
+        if (debouncedSearchTerm) {
-            const lower = searchTerm.toLowerCase();
+            const lower = debouncedSearchTerm.toLowerCase();
             filtered = filtered.filter((p: any) =>
                 p.productName.toLowerCase().includes(lower) ||
                 (p.gencode && p.gencode.includes(lower))
@@ -254,7 +264,7 @@ export default function MobileDlcPage() {
         });
 
         return filtered.sort((a: any, b: any) => new Date(a.expiryDate).getTime() - new Date(b.expiryDate).getTime());
-    }, [dlcProducts, searchTerm, statusFilter]);
+    }, [dlcProducts, debouncedSearchTerm, statusFilter]);
 
     const getDaysBadge = (dateStr: string) => {
         const today = new Date();

client/src/pages/mobile/MobileApp.tsx

@@ -2,16 +2,33 @@
  * MobileApp - Wrapper pour l'application mobile avec StoreProvider
  * Fournit le contexte Store à toutes les pages mobiles
  */
-import { ReactNode, useState, useEffect } from "react";
+import { ReactNode, Suspense, useState, useEffect, useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { StoreProvider } from "@/contexts/StoreContext";
+import MobileLayout from "./MobileLayout";
 import type { Group } from "@shared/schema";
 
 interface MobileAppProps {
     children: ReactNode;
 }
 
+// Tableau vide stable : évite de recréer la valeur du contexte magasin à chaque
+// rendu tant que /api/groups n'a pas répondu
+const EMPTY_STORES: Group[] = [];
+
+// Affiché pendant le chargement du code d'une page : en-tête et barre de
+// navigation restent visibles
+function MobilePageFallback() {
+    return (
+        <MobileLayout>
+            <div className="flex items-center justify-center py-16">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            </div>
+        </MobileLayout>
+    );
+}
+
 export default function MobileApp({ children }: MobileAppProps) {
     const { user } = useAuthUnified();
 
@@ -26,7 +43,7 @@ export default function MobileApp({ children }: MobileAppProps) {
     const [storeInitialized, setStoreInitialized] = useState(false);
 
     // Fetch stores
-    const { data: stores = [] } = useQuery<Group[]>({
+    const { data: stores = EMPTY_STORES } = useQuery<Group[]>({
         queryKey: ['/api/groups'],
         enabled: !!user,
     });
@@ -52,7 +69,9 @@ export default function MobileApp({ children }: MobileAppProps) {
         }
     }, [selectedStoreId]);
 
-    const storeContextValue = {
+    // Valeur du contexte mémorisée : les consommateurs de useStore() ne sont
+    // re-rendus que lorsqu'une de ces valeurs change réellement
+    const storeContextValue = useMemo(() => ({
         selectedStoreId,
         setSelectedStoreId,
         stores,
@@ -61,11 +80,13 @@ export default function MobileApp({ children }: MobileAppProps) {
         mobileMenuOpen,
         setMobileMenuOpen,
         storeInitialized
-    };
+    }), [selectedStoreId, stores, sidebarCollapsed, mobileMenuOpen, storeInitialized]);
 
     return (
         <StoreProvider value={storeContextValue}>
+            <Suspense fallback={<MobilePageFallback />}>
                 {children}
+            </Suspense>
         </StoreProvider>
     );
 }

client/src/pages/mobile/MobileBottomNav.tsx

@@ -18,7 +18,6 @@ import {
     Receipt
 } from "lucide-react";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
-import { useAuthUnified } from "@/hooks/useAuthUnified";
 
 interface NavItem {
     path: string;
@@ -44,7 +43,6 @@ const moreItems: NavItem[] = [
 
 export default function MobileBottomNav() {
     const [location] = useLocation();
-    const { user } = useAuthUnified();
     const [moreOpen, setMoreOpen] = useState(false);
 
     const isActive = (path: string) => {

client/src/pages/mobile/TasksPage.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
+import { useState, useMemo } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient, useMutation, keepPreviousData } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/contexts/StoreContext";
 import { useToast } from "@/hooks/use-toast";
@@ -32,9 +32,13 @@ type TaskWithRelations = Task & {
     isFutureTask?: boolean;
 };
 
+// Référence stable tant que la liste n'est pas chargée (évite de recalculer les filtres)
+const NO_TASKS: TaskWithRelations[] = [];
+
 // Mobile Task Form Component
 function MobileTaskForm({ task, onClose, selectedStoreId, user }: any) {
     const { toast } = useToast();
+    const queryClient = useQueryClient();
     const [isSubmitting, setIsSubmitting] = useState(false);
 
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -84,7 +88,9 @@ function MobileTaskForm({ task, onClose, selectedStoreId, user }: any) {
                 title: "Succès",
                 description: task ? "Tâche modifiée" : "Tâche créée",
             });
-            window.location.reload();
+            // Rechargement ciblé de la liste (plus de rechargement complet de la page)
+            await queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+            onClose();
 
         } catch (error) {
             toast({ title: "Erreur", description: "Erreur lors de l'opération", variant: "destructive" });
@@ -291,9 +297,11 @@ export default function MobileTasksPage() {
     const [editingTask, setEditingTask] = useState<TaskWithRelations | null>(null);
     const [deletingTask, setDeletingTask] = useState<TaskWithRelations | null>(null);
 
+    const tasksQueryKey = ["/api/tasks", selectedStoreId];
+
     // Fetch tasks
-    const { data: tasks = [], isLoading } = useQuery({
+    const { data: tasks = NO_TASKS, isLoading, isPlaceholderData } = useQuery({
-        queryKey: ["/api/tasks", selectedStoreId],
+        queryKey: tasksQueryKey,
         queryFn: async () => {
             const params = new URLSearchParams();
             if (selectedStoreId) params.append('storeId', selectedStoreId.toString());
@@ -305,17 +313,22 @@ export default function MobileTasksPage() {
             return Array.isArray(data) ? data.filter((t: any) => t && t.id) : [];
         },
         enabled: !!user,
+        // Au changement de magasin, la liste précédente reste affichée (estompée et
+        // non cliquable, avec un indicateur) au lieu d'un spinner plein écran
+        placeholderData: keepPreviousData,
     });
 
-    // Filter tasks
+    // Filter tasks (recalculé seulement quand la liste, l'onglet ou la recherche change)
-    const filteredTasks = tasks
+    const filteredTasks = useMemo(() => {
+        const search = searchTerm.toLowerCase();
+        return tasks
             .filter((task: TaskWithRelations) => {
                 // Tab filter
                 if (activeTab === 'pending' && task.status === 'completed') return false;
                 if (activeTab === 'completed' && task.status !== 'completed') return false;
 
                 // Search filter
-            if (searchTerm && !task.title.toLowerCase().includes(searchTerm.toLowerCase())) {
+                if (search && !task.title.toLowerCase().includes(search)) {
                     return false;
                 }
                 return true;
@@ -327,33 +340,86 @@ export default function MobileTasksPage() {
                 return (priorityOrder[b.priority as keyof typeof priorityOrder] || 2) -
                     (priorityOrder[a.priority as keyof typeof priorityOrder] || 2);
             });
+    }, [tasks, activeTab, searchTerm]);
 
-    // Handlers
+    // Mise à jour optimiste de la liste affichée ; renvoie l'état précédent pour
-    const handleComplete = async (taskId: number) => {
+    // pouvoir le restaurer si le serveur refuse l'opération
-        try {
+    const updateCachedTasks = async (update: (list: TaskWithRelations[]) => TaskWithRelations[]) => {
-            await fetch(`/api/tasks/${taskId}/complete`, {
+        const queryKey = tasksQueryKey;
+        await queryClient.cancelQueries({ queryKey });
+        const previousTasks = queryClient.getQueryData<TaskWithRelations[]>(queryKey);
+        if (Array.isArray(previousTasks)) {
+            queryClient.setQueryData<TaskWithRelations[]>(queryKey, update(previousTasks));
+        }
+        return { queryKey, previousTasks };
+    };
+
+    const restoreCachedTasks = (context?: { queryKey: unknown[]; previousTasks?: TaskWithRelations[] }) => {
+        if (context?.previousTasks) {
+            queryClient.setQueryData(context.queryKey, context.previousTasks);
+        }
+    };
+
+    // Terminer : la carte passe tout de suite en « terminée », puis la liste est
+    // rechargée depuis le serveur ; le succès n'est annoncé que si l'API l'accepte
+    const completeMutation = useMutation({
+        mutationFn: async (taskId: number) => {
+            const response = await fetch(`/api/tasks/${taskId}/complete`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
                 body: JSON.stringify({}),
             });
-            queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+            if (!response.ok) throw new Error(`Erreur ${response.status}`);
+        },
+        onMutate: (taskId: number) => {
+            const now = new Date();
+            return updateCachedTasks((list) => list.map((task) =>
+                task.id === taskId
+                    ? { ...task, status: 'completed', completedAt: now, completedBy: user?.id ?? task.completedBy, updatedAt: now }
+                    : task
+            ));
+        },
+        onSuccess: () => {
             toast({ title: "✅ Tâche terminée" });
-        } catch (error) {
+        },
+        onError: (_error, _taskId, context) => {
+            restoreCachedTasks(context);
             toast({ title: "Erreur", variant: "destructive" });
-        }
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+        },
+    });
+
+    // Supprimer : la carte disparaît et la feuille se ferme tout de suite
+    const deleteMutation = useMutation({
+        mutationFn: async (taskId: number) => {
+            const response = await fetch(`/api/tasks/${taskId}`, { method: 'DELETE', credentials: 'include' });
+            if (!response.ok) throw new Error(`Erreur ${response.status}`);
+        },
+        onMutate: (taskId: number) => updateCachedTasks((list) => list.filter((task) => task.id !== taskId)),
+        onSuccess: () => {
+            toast({ title: "🗑️ Tâche supprimée" });
+        },
+        onError: (_error, _taskId, context) => {
+            restoreCachedTasks(context);
+            toast({ title: "Erreur", variant: "destructive" });
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
+        },
+    });
+
+    // Handlers
+    const handleComplete = (taskId: number) => {
+        completeMutation.mutate(taskId);
     };
 
-    const handleDelete = async () => {
+    const handleDelete = () => {
         if (!deletingTask) return;
-        try {
+        deleteMutation.mutate(deletingTask.id);
-            await fetch(`/api/tasks/${deletingTask.id}`, { method: 'DELETE', credentials: 'include' });
-            queryClient.invalidateQueries({ queryKey: ["/api/tasks"] });
-            toast({ title: "🗑️ Tâche supprimée" });
         setDeletingTask(null);
-        } catch (error) {
-            toast({ title: "Erreur", variant: "destructive" });
-        }
     };
 
     const canEdit = user?.role === 'admin' || user?.role === 'manager' || user?.role === 'directeur';
@@ -378,6 +444,12 @@ export default function MobileTasksPage() {
                             <div className="flex items-center gap-2">
                                 <ListTodo className="w-5 h-5 text-blue-600" />
                                 <h1 className="text-lg font-bold">Tâches</h1>
+                                {isPlaceholderData && (
+                                    <span className="inline-flex items-center gap-1 text-xs text-gray-500" role="status">
+                                        <span className="animate-spin rounded-full h-3 w-3 border-b-2 border-blue-600" />
+                                        Mise à jour…
+                                    </span>
+                                )}
                             </div>
                             <Badge variant="secondary">{filteredTasks.length}</Badge>
                         </div>
@@ -423,8 +495,12 @@ export default function MobileTasksPage() {
                     </div>
                 </div>
 
-                {/* Task List */}
+                {/* Task List (liste du magasin précédent estompée et non cliquable pendant le chargement) */}
-                <div className="px-3 py-2 overflow-hidden" style={{ maxWidth: '100%' }}>
+                <div
+                    className={`px-3 py-2 overflow-hidden ${isPlaceholderData ? 'opacity-60 pointer-events-none transition-opacity' : ''}`}
+                    style={{ maxWidth: '100%' }}
+                    aria-busy={isPlaceholderData}
+                >
                     {filteredTasks.length === 0 ? (
                         <div className="text-center py-12 text-gray-500">
                             <ListTodo className="w-12 h-12 mx-auto mb-3 opacity-50" />

vite.config.ts

@@ -38,10 +38,14 @@ export default defineConfig({
         // elles ne changent qu'aux montées de version et restent donc en
         // cache navigateur entre deux déploiements, au lieu de faire
         // retélécharger 1,7 Mo à chaque mise en production.
+        // recharts n'est volontairement pas listé ici : un chunk manuel
+        // embarque aussi les dépendances partagées (clsx...) importées par
+        // l'application, ce qui le faisait précharger dès l'écran de
+        // connexion. Sans entrée, il n'est téléchargé qu'avec la page
+        // Statistiques (chargée à la demande).
         manualChunks: {
           "vendor-react": ["react", "react-dom", "wouter"],
           "vendor-query": ["@tanstack/react-query"],
-          "vendor-charts": ["recharts"],
           "vendor-icons": ["lucide-react"],
         },
       },