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

RECONCILIATION-MODAL-FIX.md

@@ -0,0 +1,111 @@
+# Fix Complet - Modal de Rapprochement et Actions
+
+## ✅ Problèmes Résolus
+
+### 1. **Validation impossible** ❌ → ✅
+**Avant :** Bouton "Valider" sans vérification des données requises
+**Après :** 
+- Validation conditionnelle : BL number requis
+- Message d'erreur explicite : "Le numéro de BL est requis. Cliquez sur 'Voir les détails' pour le renseigner"
+- Action rapide si données complètes, sinon redirection vers modal
+
+### 2. **Pas de modal d'édition** ❌ → ✅ 
+**Avant :** Bouton "Voir les détails" ne faisait rien
+**Après :**
+- **Modal ReconciliationModal.tsx** complet avec :
+  - Édition BL : N° BL (requis) + Montant BL
+  - Édition Facture : Référence + Montant  
+  - Actions : Enregistrer + Valider directement
+  - Distinction Manuel/Automatique avec badges
+  - Validation en temps réel
+
+### 3. **Dévalidation automatique** 🔄 → À tester
+**Fonctionnalité :** 
+- Bouton dévalider visible pour admin uniquement
+- Confirmation avant action
+- API call vers `/api/deliveries/${id}` PUT
+
+## 🎯 Nouvelles Fonctionnalités
+
+### Modal de Rapprochement
+```typescript
+// Ouverture via bouton "Voir les détails"
+const handleOpenModal = (delivery: any) => {
+  setSelectedDelivery(delivery);
+  setIsModalOpen(true);
+};
+```
+
+### Actions Intelligentes
+- **Validation rapide** : Si BL number présent → validation directe
+- **Validation guidée** : Si BL number manquant → ouverture modal
+- **Édition complète** : Modal avec tous les champs BL/Facture
+
+### Interface Améliorée
+- ✅ Boutons d'action fonctionnels avec tooltips
+- ✅ Indicateurs visuels par statut
+- ✅ Confirmations de sécurité (window.confirm)
+- ✅ Messages d'erreur contextuels
+
+## 📋 Tests à Effectuer en Production
+
+### Test 1 : Modal d'Édition
+- [ ] Cliquer sur icône "œil" (Eye) → Modal s'ouvre
+- [ ] Remplir N° BL obligatoire
+- [ ] Remplir montants optionnels
+- [ ] Cliquer "Enregistrer" → Données sauvegardées
+- [ ] Cliquer "Valider le rapprochement" → Rapprochement validé
+
+### Test 2 : Validation Rapide
+- [ ] Livraison avec BL number → Bouton vert "Valider" fonctionne
+- [ ] Livraison sans BL number → Message "Données manquantes"
+
+### Test 3 : Dévalidation Automatique
+- [ ] Se connecter en tant qu'admin
+- [ ] Onglet "Rapprochement Automatique"
+- [ ] Cliquer bouton orange "Dévalider" → Confirmation puis action
+
+### Test 4 : Permissions
+- **Admin** : Tous boutons visibles (Valider, Supprimer, Dévalider)
+- **Directeur** : Valider + Supprimer (pas dévalider)
+- **Manager** : Accès refusé au module
+- **Employee** : Accès refusé au module
+
+## 🔧 Debug Dévalidation Automatique
+
+Si la dévalidation ne fonctionne toujours pas :
+
+### Vérifier API
+```bash
+# Test manuel API
+curl -X PUT /api/deliveries/[ID] \
+  -H "Content-Type: application/json" \
+  -d '{"reconciled": false, "validatedAt": null}'
+```
+
+### Vérifier Permissions
+```javascript
+// Dans console navigateur
+console.log("User role:", user?.role);
+console.log("Is admin:", user?.role === 'admin');
+```
+
+### Vérifier Console Erreurs
+- F12 → Console → Vérifier erreurs JavaScript
+- Network → Vérifier requêtes API (200 vs 4xx/5xx)
+
+## 🚀 Déploiement
+
+### Fichiers Modifiés
+```
+client/src/components/modals/ReconciliationModal.tsx  # ✅ Nouveau
+client/src/pages/BLReconciliation.tsx                # ✅ Modifié
+```
+
+### Points de Contrôle
+- ✅ Modal shadcn/ui Dialog (pas React.forwardRef problématique)
+- ✅ Confirmations via window.confirm (évite erreurs React)
+- ✅ Gestion d'état locale simple (useState)
+- ✅ API calls via apiRequest (standardisé)
+
+**Status :** ✅ Prêt pour déploiement et test production

client/src/components/modals/ReconciliationModal.tsx

@@ -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>
+  );
+}

client/src/pages/BLReconciliation.tsx

@@ -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>
   );
 }