Add a feature to notify users about pending client calls

Introduce functionality for tracking and displaying pending client calls. This includes new API endpoints for fetching and marking clients as called, along with frontend components to alert users and manage these calls.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 95e8aab4-f39f-4b48-aa57-a759ec15ba3d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/95e8aab4-f39f-4b48-aa57-a759ec15ba3d/U4JJoTO

client/src/pages/Orders.tsx

@@ -3,6 +3,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Pagination, usePagination } from "@/components/ui/pagination";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
@@ -21,14 +22,16 @@ import {
   Edit,
   Trash2,
   Building,
-  User
+  User,
+  Phone
 } from "lucide-react";
 import { safeFormat } from "@/lib/dateUtils";
 import CreateOrderModal from "@/components/modals/CreateOrderModal";
 import EditOrderModal from "@/components/modals/EditOrderModal";
 import OrderDetailModal from "@/components/modals/OrderDetailModal";
 import ConfirmDeleteModal from "@/components/modals/ConfirmDeleteModal";
-import type { OrderWithRelations } from "@shared/schema";
+import ClientCallsModal from "@/components/modals/ClientCallsModal";
+import type { OrderWithRelations, CustomerOrderWithRelations } from "@shared/schema";
 
 export default function Orders() {
   const { user } = useAuthUnified();
@@ -65,6 +68,7 @@ export default function Orders() {
   const [showEditModal, setShowEditModal] = useState(false);
   const [showDetailModal, setShowDetailModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showClientCallsModal, setShowClientCallsModal] = useState(false);
   const [selectedOrder, setSelectedOrder] = useState<OrderWithRelations | null>(null);
   const [orderToDelete, setOrderToDelete] = useState<OrderWithRelations | null>(null);
 
@@ -72,6 +76,22 @@ export default function Orders() {
   // CRITICAL FIX: Appliquer le filtrage par storeId pour TOUS les rôles, pas seulement admin
   const ordersUrl = `/api/orders${selectedStoreId ? `?storeId=${selectedStoreId}` : ''}`;
   
+  // Query pour les appels clients en attente
+  const pendingCallsUrl = `/api/customer-orders/pending-calls${selectedStoreId ? `?storeId=${selectedStoreId}` : ''}`;
+  const { data: pendingCalls = [], isLoading: isPendingCallsLoading } = useQuery<CustomerOrderWithRelations[]>({
+    queryKey: [pendingCallsUrl, selectedStoreId],
+    queryFn: async () => {
+      const response = await fetch(pendingCallsUrl, { credentials: 'include' });
+      if (!response.ok) {
+        throw new Error('Failed to fetch pending calls');
+      }
+      const data = await response.json();
+      console.log('📞 Pending calls received:', Array.isArray(data) ? data.length : 'NOT_ARRAY', 'items');
+      return data;
+    },
+    refetchInterval: 30000, // Refetch every 30 seconds
+  });
+  
   const { data: ordersData = [], isLoading } = useQuery<OrderWithRelations[]>({
     queryKey: [ordersUrl, selectedStoreId],
     queryFn: async () => {
@@ -252,6 +272,23 @@ export default function Orders() {
         </div>
       </div>
 
+      {/* Alerte pour les appels clients en attente */}
+      {!isPendingCallsLoading && pendingCalls.length > 0 && (
+        <Alert 
+          className="sticky top-0 z-50 bg-orange-50 border-orange-200 cursor-pointer hover:bg-orange-100 transition-colors"
+          onClick={() => setShowClientCallsModal(true)}
+          data-testid="alert-client-calls"
+        >
+          <Phone className="h-4 w-4 text-orange-600" />
+          <AlertDescription className="text-orange-700">
+            <strong>📞 {pendingCalls.length} client{pendingCalls.length > 1 ? 's' : ''} à appeler</strong>
+            <span className="block text-sm mt-1">
+              Produits disponibles - Cliquez pour voir la liste des clients à contacter
+            </span>
+          </AlertDescription>
+        </Alert>
+      )}
+
       {/* Filters */}
       <div className="bg-gray-50 border border-gray-200 p-4 rounded-lg">
         <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
@@ -465,6 +502,13 @@ export default function Orders() {
         itemName={orderToDelete ? `${orderToDelete.supplier?.name} - ${safeFormat(orderToDelete.plannedDate, 'dd/MM/yyyy')}` : undefined}
         isLoading={deleteMutation.isPending}
       />
+
+      {/* Modal pour les appels clients */}
+      <ClientCallsModal
+        isOpen={showClientCallsModal}
+        onClose={() => setShowClientCallsModal(false)}
+        pendingCalls={pendingCalls}
+      />
     </div>
   );
 }