({
+ queryKey: contactsQueryKey,
+ queryFn: async () => {
+ const url = effectiveGroupId
+ ? `/api/contacts?groupId=${effectiveGroupId}`
+ : "/api/contacts";
+ return await apiRequest(url, "GET");
+ },
+ });
+
+ const createMutation = useMutation({
+ mutationFn: (data: any) => apiRequest("/api/contacts", "POST", data),
+ onSuccess: () => {
+ toast({ title: "Succès", description: "Contact créé avec succès" });
+ queryClient.invalidateQueries({ queryKey: ["/api/contacts"] });
+ closeModal();
+ },
+ onError: () => {
+ toast({ title: "Erreur", description: "Impossible de créer le contact", variant: "destructive" });
+ },
+ });
+
+ const updateMutation = useMutation({
+ mutationFn: (data: any) => apiRequest(`/api/contacts/${selectedContact?.id}`, "PUT", data),
+ onSuccess: () => {
+ toast({ title: "Succès", description: "Contact modifié avec succès" });
+ queryClient.invalidateQueries({ queryKey: ["/api/contacts"] });
+ closeModal();
+ },
+ onError: () => {
+ toast({ title: "Erreur", description: "Impossible de modifier le contact", variant: "destructive" });
+ },
+ });
+
+ const deleteMutation = useMutation({
+ mutationFn: (id: number) => apiRequest(`/api/contacts/${id}`, "DELETE"),
+ onSuccess: () => {
+ toast({ title: "Succès", description: "Contact supprimé" });
+ queryClient.invalidateQueries({ queryKey: ["/api/contacts"] });
+ },
+ onError: () => {
+ toast({ title: "Erreur", description: "Impossible de supprimer le contact", variant: "destructive" });
+ },
+ });
+
+ const openCreate = () => {
+ setSelectedContact(null);
+ setFormData({
+ groupId: effectiveGroupId ?? 0,
+ name: "",
+ role: "",
+ phone: "",
+ email: "",
+ notes: "",
+ });
+ setShowModal(true);
+ };
+
+ const openEdit = (contact: Contact) => {
+ setSelectedContact(contact);
+ setFormData({
+ groupId: contact.groupId,
+ name: contact.name,
+ role: contact.role || "",
+ phone: contact.phone || "",
+ email: contact.email || "",
+ notes: contact.notes || "",
+ });
+ setShowModal(true);
+ };
+
+ const closeModal = () => {
+ setShowModal(false);
+ setSelectedContact(null);
+ };
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ const payload = { ...formData, groupId: effectiveGroupId ?? formData.groupId };
+ if (selectedContact) {
+ updateMutation.mutate(payload);
+ } else {
+ createMutation.mutate(payload);
+ }
+ };
+
+ const handleDelete = (contact: Contact) => {
+ if (confirm(`Supprimer le contact "${contact.name}" ?`)) {
+ deleteMutation.mutate(contact.id);
+ }
+ };
+
+ const filteredSuppliers = suppliers.filter((s) =>
+ s.name.toLowerCase().includes(supplierSearch.toLowerCase()) ||
+ (s.contact || "").toLowerCase().includes(supplierSearch.toLowerCase())
+ );
+
+ const filteredContacts = contacts.filter((c) =>
+ c.name.toLowerCase().includes(contactSearch.toLowerCase()) ||
+ (c.role || "").toLowerCase().includes(contactSearch.toLowerCase())
+ );
+
+ const groupName = (groupId: number) =>
+ stores.find((s) => s.id === groupId)?.name ?? `Magasin #${groupId}`;
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ Contacts
+
+
+ Fournisseurs et contacts par magasin
+
+
+
+ {canEdit && effectiveGroupId && (
+
+ )}
+
+
+ {/* Sélecteur de magasin (admin uniquement) */}
+ {isAdmin && (
+
+
+
+
+ )}
+
+ {/* Deux colonnes */}
+
+ {/* Colonne Fournisseurs */}
+
+
+
+
+ Fournisseurs ({filteredSuppliers.length})
+
+
+
+
+
+ setSupplierSearch(e.target.value)}
+ className="pl-10"
+ />
+
+
+
+ {filteredSuppliers.length === 0 ? (
+
+
+ Aucun fournisseur trouvé
+
+ ) : (
+ filteredSuppliers.map((supplier) => (
+
+
+
+
+
+
+
+
{supplier.name}
+ {supplier.contact && (
+
+
+ {supplier.contact}
+
+ )}
+
+
+
+
+
+ ))
+ )}
+
+
+
+ {/* Colonne Autres contacts */}
+
+
+
+
+ Autres contacts ({filteredContacts.length})
+
+
+
+
+
+ setContactSearch(e.target.value)}
+ className="pl-10"
+ />
+
+
+ {!effectiveGroupId && !isAdmin && (
+
+
+ Sélectionnez un magasin pour voir les contacts
+
+ )}
+
+ {(effectiveGroupId || isAdmin) && (
+
+ {filteredContacts.length === 0 ? (
+
+
+ Aucun contact
+ {canEdit && effectiveGroupId && (
+
+
+
+ )}
+
+ ) : (
+ filteredContacts.map((contact) => (
+
+
+
+
+
+
+
+
{contact.name}
+ {contact.role && (
+
{contact.role}
+ )}
+ {isAdmin && (
+
{groupName(contact.groupId)}
+ )}
+
+
+ {canEdit && (
+
+
+
+
+ )}
+
+
+
+ ))
+ )}
+
+ )}
+
+
+
+ {/* Modal créer / modifier contact */}
+
+
+
+ {(supplier as any).email}
+
+ )}
{supplier.paymentMethod && (
@@ -528,6 +538,17 @@ export default function Suppliers() {
/>
+
+
+ handleChange('email', e.target.value)}
+ placeholder="Email du contact fournisseur"
+ />
+
+