Improve reconciliation process by adding a modal for details

Add a new modal to edit reconciliation details and validate shipments, along with checks for required information. Replit-Commit-Author: Agent Replit-Commit-Session-Id: b163d4c0-de5e-4f4e-a9c0-aed4c7049718 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/b163d4c0-de5e-4f4e-a9c0-aed4c7049718/qtt4Qmj
2026-10-14 02:38:58 +02:00 · 2025-08-12 11:35:05 +00:00
1 parent f3fe6ef1d4
commit e6d261f1f7
@@ -0,0 +1,268 @@
+import React, { useState, useEffect } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { safeFormat } from "@/lib/dateUtils";
+import { FileText, Settings, Check, X } from "lucide-react";
+
+interface ReconciliationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  delivery: any;
+  onSave?: () => void;
+}
+
+export default function ReconciliationModal({
+  isOpen,
+  onClose,
+  delivery,
+  onSave
+}: ReconciliationModalProps) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [formData, setFormData] = useState({
+    blNumber: "",
+    blAmount: "",
+    invoiceReference: "",
+    invoiceAmount: "",
+    reconciled: false,
+  });
+
+  // Initialiser le formulaire avec les données de la livraison
+  useEffect(() => {
+    if (delivery) {
+      setFormData({
+        blNumber: delivery.blNumber || "",
+        blAmount: delivery.blAmount || "",
+        invoiceReference: delivery.invoiceReference || "",
+        invoiceAmount: delivery.invoiceAmount || "",
+        reconciled: delivery.reconciled || false,
+      });
+    }
+  }, [delivery]);
+
+  const updateDeliveryMutation = useMutation({
+    mutationFn: async (data: any) => {
+      await apiRequest(`/api/deliveries/${delivery?.id}`, "PUT", data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Données de rapprochement mises à jour avec succès",
+      });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
+      if (onSave) onSave();
+      onClose();
+    },
+    onError: (error) => {
+      toast({
+        title: "Erreur",
+        description: "Impossible de mettre à jour les données",
+        variant: "destructive",
+      });
+    }
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Validation basique
+    if (!formData.blNumber.trim()) {
+      toast({
+        title: "Erreur",
+        description: "Le numéro de BL est requis",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    updateDeliveryMutation.mutate({
+      blNumber: formData.blNumber.trim(),
+      blAmount: formData.blAmount ? parseFloat(formData.blAmount) : null,
+      invoiceReference: formData.invoiceReference.trim() || null,
+      invoiceAmount: formData.invoiceAmount ? parseFloat(formData.invoiceAmount) : null,
+    });
+  };
+
+  const handleValidateReconciliation = () => {
+    if (!formData.blNumber.trim()) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez d'abord renseigner le numéro de BL",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    updateDeliveryMutation.mutate({
+      blNumber: formData.blNumber.trim(),
+      blAmount: formData.blAmount ? parseFloat(formData.blAmount) : null,
+      invoiceReference: formData.invoiceReference.trim() || null,
+      invoiceAmount: formData.invoiceAmount ? parseFloat(formData.invoiceAmount) : null,
+      reconciled: true,
+      validatedAt: new Date().toISOString()
+    });
+  };
+
+  const isAutomaticMode = delivery?.supplier?.automaticReconciliation;
+  const canValidate = formData.blNumber.trim().length > 0;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center space-x-2">
+            {isAutomaticMode ? (
+              <Settings className="w-5 h-5 text-blue-600" />
+            ) : (
+              <FileText className="w-5 h-5 text-gray-600" />
+            )}
+            <span>
+              Rapprochement {isAutomaticMode ? 'Automatique' : 'Manuel'}
+            </span>
+            <Badge variant={isAutomaticMode ? "default" : "secondary"}>
+              {isAutomaticMode ? "AUTO" : "MANUEL"}
+            </Badge>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Informations de la livraison */}
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <h3 className="font-medium text-gray-900 mb-3">Informations de la livraison</h3>
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <span className="text-gray-600">Fournisseur :</span>
+                <div className="font-medium">{delivery?.supplier?.name}</div>
+              </div>
+              <div>
+                <span className="text-gray-600">Date prévue :</span>
+                <div className="font-medium">
+                  {safeFormat(delivery?.scheduledDate, 'dd/MM/yyyy')}
+                </div>
+              </div>
+              <div>
+                <span className="text-gray-600">Magasin :</span>
+                <div className="font-medium">{delivery?.group?.name}</div>
+              </div>
+              <div>
+                <span className="text-gray-600">Statut :</span>
+                <Badge variant={delivery?.reconciled ? "default" : "secondary"}>
+                  {delivery?.reconciled ? "Rapproché" : "En attente"}
+                </Badge>
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Formulaire de rapprochement */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              {/* Données BL */}
+              <div className="space-y-4">
+                <h4 className="font-medium text-gray-900">Bon de Livraison (BL)</h4>
+                
+                <div>
+                  <Label htmlFor="blNumber">N° BL *</Label>
+                  <Input
+                    id="blNumber"
+                    value={formData.blNumber}
+                    onChange={(e) => setFormData(prev => ({ ...prev, blNumber: e.target.value }))}
+                    placeholder="Ex: BL-2025-001"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="blAmount">Montant BL (€)</Label>
+                  <Input
+                    id="blAmount"
+                    type="number"
+                    step="0.01"
+                    value={formData.blAmount}
+                    onChange={(e) => setFormData(prev => ({ ...prev, blAmount: e.target.value }))}
+                    placeholder="0.00"
+                  />
+                </div>
+              </div>
+
+              {/* Données Facture */}
+              <div className="space-y-4">
+                <h4 className="font-medium text-gray-900">Facture</h4>
+                
+                <div>
+                  <Label htmlFor="invoiceReference">Référence Facture</Label>
+                  <Input
+                    id="invoiceReference"
+                    value={formData.invoiceReference}
+                    onChange={(e) => setFormData(prev => ({ ...prev, invoiceReference: e.target.value }))}
+                    placeholder="Ex: FAC-2025-001"
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="invoiceAmount">Montant Facture (€)</Label>
+                  <Input
+                    id="invoiceAmount"
+                    type="number"
+                    step="0.01"
+                    value={formData.invoiceAmount}
+                    onChange={(e) => setFormData(prev => ({ ...prev, invoiceAmount: e.target.value }))}
+                    placeholder="0.00"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex justify-between pt-4">
+              <div className="flex space-x-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onClose}
+                  disabled={updateDeliveryMutation.isPending}
+                >
+                  <X className="w-4 h-4 mr-2" />
+                  Annuler
+                </Button>
+                
+                <Button
+                  type="submit"
+                  variant="outline"
+                  disabled={updateDeliveryMutation.isPending}
+                >
+                  {updateDeliveryMutation.isPending ? "Enregistrement..." : "Enregistrer"}
+                </Button>
+              </div>
+
+              <Button
+                type="button"
+                onClick={handleValidateReconciliation}
+                disabled={!canValidate || updateDeliveryMutation.isPending}
+                className="bg-green-600 hover:bg-green-700"
+              >
+                <Check className="w-4 h-4 mr-2" />
+                {updateDeliveryMutation.isPending ? "Validation..." : "Valider le rapprochement"}
+              </Button>
+            </div>
+          </form>
+
+          {/* Note d'aide */}
+          <div className="text-xs text-gray-500 bg-blue-50 p-3 rounded">
+            <strong>Note :</strong> Le numéro de BL est obligatoire pour valider un rapprochement. 
+            Les montants sont optionnels mais recommandés pour un suivi précis.
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -11,6 +11,7 @@ import { useStore } from "@/components/Layout";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { usePermissions } from "@shared/permissions";
 import { Search, Edit, FileText, Settings, Eye, AlertTriangle, X, Check, Trash2, Ban } from "lucide-react";
+import ReconciliationModal from "@/components/modals/ReconciliationModal";

 export default function BLReconciliation() {
  const { user } = useAuthUnified();
@@ -42,6 +43,8 @@ export default function BLReconciliation() {
  
  const [activeTab, setActiveTab] = useState("manual");
  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedDelivery, setSelectedDelivery] = useState<any>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);

  // Récupérer les fournisseurs pour la logique automatique
  const { data: suppliers = [] } = useQuery<any[]>({
@@ -83,8 +86,14 @@ export default function BLReconciliation() {
    return supplier?.automaticReconciliation;
  });

-  // Fonction pour valider un rapprochement (admins et directeurs)
-  const handleValidateReconciliation = async (deliveryId: number) => {
+  // Fonction pour ouvrir le modal d'édition
+  const handleOpenModal = (delivery: any) => {
+    setSelectedDelivery(delivery);
+    setIsModalOpen(true);
+  };
+
+  // Fonction pour valider un rapprochement rapidement (avec validation des données)
+  const handleQuickValidate = async (delivery: any) => {
    if (!permissions.canValidate('reconciliation')) {
      toast({
        title: "Accès refusé",
@@ -94,12 +103,22 @@ export default function BLReconciliation() {
      return;
    }

+    // Vérifier que les données minimales sont présentes
+    if (!delivery.blNumber || delivery.blNumber.trim() === '') {
+      toast({
+        title: "Données manquantes",
+        description: "Le numéro de BL est requis. Cliquez sur 'Voir les détails' pour le renseigner.",
+        variant: "destructive",
+      });
+      return;
+    }
+
    if (!window.confirm("Êtes-vous sûr de vouloir valider ce rapprochement ?")) {
      return;
    }

    try {
-      await apiRequest(`/api/deliveries/${deliveryId}`, "PUT", {
+      await apiRequest(`/api/deliveries/${delivery.id}`, "PUT", {
        reconciled: true,
        validatedAt: new Date().toISOString()
      });
@@ -405,7 +424,7 @@ export default function BLReconciliation() {
                              <>
                                {permissions.canValidate('reconciliation') && (
                                  <button
-                                    onClick={() => handleValidateReconciliation(delivery.id)}
+                                    onClick={() => handleQuickValidate(delivery)}
                                    className="text-gray-600 hover:text-green-600 transition-colors duration-200 p-1 hover:bg-green-50 rounded"
                                    title="Valider le rapprochement"
                                  >
@@ -447,8 +466,9 @@ export default function BLReconciliation() {
                            )}
                            {/* Bouton Voir les détails toujours disponible */}
                            <button
+                              onClick={() => handleOpenModal(delivery)}
                              className="text-gray-600 hover:text-blue-600 transition-colors duration-200 p-1 hover:bg-blue-50 rounded"
-                              title="Voir les détails"
+                              title="Voir les détails / Éditer"
                            >
                              <Eye className="w-4 h-4" />
                            </button>
@@ -591,8 +611,9 @@ export default function BLReconciliation() {
                        <td className="px-3 py-2 text-sm">
                          <div className="flex items-center space-x-2">
                            <button
+                              onClick={() => handleOpenModal(delivery)}
                              className="text-gray-600 hover:text-blue-600 transition-colors duration-200 p-1 hover:bg-blue-50 rounded"
-                              title="Voir les détails"
+                              title="Voir les détails / Éditer"
                            >
                              <Eye className="w-4 h-4" />
                            </button>
@@ -617,6 +638,17 @@ export default function BLReconciliation() {
          )}
        </TabsContent>
      </Tabs>
+
+      {/* Modal de rapprochement */}
+      <ReconciliationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        delivery={selectedDelivery}
+        onSave={() => {
+          // Rafraîchir les données après sauvegarde
+          queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
+        }}
+      />
    </div>
  );
 }