diff --git a/client/src/pages/CustomerOrders.tsx b/client/src/pages/CustomerOrders.tsx index 9822f30..f92a92d 100644 --- a/client/src/pages/CustomerOrders.tsx +++ b/client/src/pages/CustomerOrders.tsx @@ -29,7 +29,7 @@ import { SelectValue, } from "@/components/ui/select"; import { Pagination, usePagination } from "@/components/ui/pagination"; -import { Plus, Edit, Trash2, Phone, PhoneCall, Printer, Eye, Package, AlertCircle } from "lucide-react"; +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"; @@ -56,6 +56,9 @@ export default function CustomerOrders() { const [showStatusModal, setShowStatusModal] = useState(false); const [showClientCallsModal, setShowClientCallsModal] = useState(false); const [selectedOrder, setSelectedOrder] = useState(null); + const [showContactModal, setShowContactModal] = useState(false); + const [contactOrder, setContactOrder] = useState(null); + const [contactComment, setContactComment] = useState(""); const [searchTerm, setSearchTerm] = useState(""); const [sortBy, setSortBy] = useState<"date" | "status" | "supplier">("date"); const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc"); @@ -177,16 +180,28 @@ export default function CustomerOrders() { }, }); - // Notification mutation - const notificationMutation = useMutation({ - mutationFn: ({ id, customerNotified }: { id: number; customerNotified: boolean }) => - apiRequest(`/api/customer-orders/${id}`, 'PUT', { customerNotified }), + // Mutation marquer client contacté (avec date + commentaire) + const markCalledMutation = useMutation({ + mutationFn: ({ id, comment }: { id: number; comment?: string }) => + apiRequest(`/api/customer-orders/${id}/mark-called`, 'PATCH', { comment }), onSuccess: () => { queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0]?.toString()?.includes('/api/customer-orders') ?? false }); - toast({ - title: "Succès", - description: "Statut de notification mis à jour", - }); + toast({ title: "Client marqué comme contacté" }); + setShowContactModal(false); + setContactComment(""); + setContactOrder(null); + }, + }); + + // Mutation annuler contact + const unmarkCalledMutation = useMutation({ + mutationFn: (id: number) => + apiRequest(`/api/customer-orders/${id}`, 'PUT', { customerNotified: false, notifiedAt: null, notifiedComment: null }), + onSuccess: () => { + queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0]?.toString()?.includes('/api/customer-orders') ?? false }); + toast({ title: "Contact annulé" }); + setShowContactModal(false); + setContactOrder(null); }, }); @@ -266,10 +281,9 @@ export default function CustomerOrders() { }; const handleNotificationToggle = (order: CustomerOrderWithRelations) => { - notificationMutation.mutate({ - id: order.id, - customerNotified: !order.customerNotified - }); + setContactOrder(order); + setContactComment(""); + setShowContactModal(true); }; // Fonction pour calculer le checksum EAN13 @@ -904,10 +918,14 @@ export default function CustomerOrders() { variant="outline" size="sm" onClick={() => handleNotificationToggle(order)} - className={order.customerNotified ? "bg-green-100" : ""} + className={order.customerNotified ? "bg-green-100 border-green-300" : ""} + title={order.customerNotified && (order as any).notifiedAt + ? `Contacté le ${format(new Date((order as any).notifiedAt), "dd/MM/yyyy 'à' HH:mm", { locale: fr })}${(order as any).notifiedComment ? ` — ${(order as any).notifiedComment}` : ''}` + : "Marquer client comme contacté" + } > {order.customerNotified ? ( - + ) : ( )} @@ -1053,6 +1071,71 @@ export default function CustomerOrders() { onClose={() => setShowClientCallsModal(false)} pendingCalls={pendingCalls} /> + + {/* Modal contact client */} + { setShowContactModal(open); if (!open) { setContactOrder(null); setContactComment(""); } }}> + + + + {contactOrder?.customerNotified ? ( + <> Client déjà contacté + ) : ( + <> Marquer client comme contacté + )} + + {contactOrder && ( + + {contactOrder.customerName} — {contactOrder.productDesignation} + + )} + + + {contactOrder?.customerNotified ? ( +
+
+

+ Contacté le {contactOrder.notifiedAt ? format(new Date((contactOrder as any).notifiedAt), "dd/MM/yyyy 'à' HH:mm", { locale: fr }) : "—"} +

+ {(contactOrder as any).notifiedComment && ( +

+ + {(contactOrder as any).notifiedComment} +

+ )} +
+
+ + +
+
+ ) : ( +
+
+ +