Add comments and tabbed interface to reconciliation modal

Integrates a new `ReconciliationComments` component and `Tabs` UI element into the `ReconciliationModal` to support inline commenting and organize reconciliation data.

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/BOWXK9F

client/src/components/ReconciliationComments.tsx

@@ -0,0 +1,396 @@
+import React, { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { safeFormat } from "@/lib/dateUtils";
+import { MessageSquare, Plus, Edit2, Trash2, Save, X, AlertCircle, Info, CheckCircle, AlertTriangle } from "lucide-react";
+
+interface ReconciliationCommentsProps {
+  deliveryId: number;
+  className?: string;
+}
+
+interface ReconciliationComment {
+  id: number;
+  content: string;
+  type: 'info' | 'warning' | 'error' | 'success';
+  deliveryId: number;
+  authorId: string;
+  groupId: number;
+  createdAt: Date;
+  updatedAt: Date;
+  author: {
+    id: string;
+    email: string;
+    role: string;
+  };
+}
+
+const typeColors = {
+  info: "bg-blue-50 border-blue-200 text-blue-800",
+  warning: "bg-yellow-50 border-yellow-200 text-yellow-800",
+  error: "bg-red-50 border-red-200 text-red-800",
+  success: "bg-green-50 border-green-200 text-green-800",
+};
+
+const typeIcons = {
+  info: Info,
+  warning: AlertTriangle,
+  error: AlertCircle,
+  success: CheckCircle,
+};
+
+const typeLabels = {
+  info: "Information",
+  warning: "Attention",
+  error: "Erreur",
+  success: "Succès",
+};
+
+export default function ReconciliationComments({ deliveryId, className = "" }: ReconciliationCommentsProps) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  
+  const [isAdding, setIsAdding] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [newComment, setNewComment] = useState<{
+    content: string;
+    type: 'info' | 'warning' | 'error' | 'success';
+  }>({
+    content: "",
+    type: "info",
+  });
+  const [editComment, setEditComment] = useState<{
+    content: string;
+    type: 'info' | 'warning' | 'error' | 'success';
+  }>({
+    content: "",
+    type: "info",
+  });
+
+  // Récupérer les commentaires
+  const { data: comments = [], isLoading } = useQuery({
+    queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`],
+    queryFn: () => apiRequest(`/api/deliveries/${deliveryId}/reconciliation-comments`),
+    enabled: !!deliveryId,
+  });
+
+  // Créer un commentaire
+  const createCommentMutation = useMutation({
+    mutationFn: async (data: { content: string; type: string }) => {
+      return apiRequest(`/api/deliveries/${deliveryId}/reconciliation-comments`, "POST", data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Commentaire ajouté avec succès",
+      });
+      queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      setIsAdding(false);
+      setNewComment({ content: "", type: "info" });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Erreur",
+        description: error?.message || "Impossible d'ajouter le commentaire",
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Modifier un commentaire
+  const updateCommentMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: number; data: { content: string; type: string } }) => {
+      return apiRequest(`/api/reconciliation-comments/${id}`, "PUT", data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Commentaire modifié avec succès",
+      });
+      queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      setEditingId(null);
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Erreur",
+        description: error?.message || "Impossible de modifier le commentaire",
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Supprimer un commentaire
+  const deleteCommentMutation = useMutation({
+    mutationFn: async (id: number) => {
+      return apiRequest(`/api/reconciliation-comments/${id}`, "DELETE");
+    },
+    onSuccess: () => {
+      toast({
+        title: "Succès",
+        description: "Commentaire supprimé avec succès",
+      });
+      queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Erreur",
+        description: error?.message || "Impossible de supprimer le commentaire",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleAddComment = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newComment.content.trim()) return;
+    
+    createCommentMutation.mutate(newComment);
+  };
+
+  const handleEditComment = (comment: ReconciliationComment) => {
+    setEditingId(comment.id);
+    setEditComment({
+      content: comment.content,
+      type: comment.type,
+    });
+  };
+
+  const handleSaveEdit = () => {
+    if (!editComment.content.trim() || !editingId) return;
+    
+    updateCommentMutation.mutate({
+      id: editingId,
+      data: editComment,
+    });
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setEditComment({ content: "", type: "info" });
+  };
+
+  const handleDeleteComment = (id: number) => {
+    if (confirm("Êtes-vous sûr de vouloir supprimer ce commentaire ?")) {
+      deleteCommentMutation.mutate(id);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className={`animate-pulse ${className}`}>
+        <div className="h-4 bg-gray-200 rounded w-1/4 mb-2"></div>
+        <div className="h-20 bg-gray-200 rounded"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex items-center justify-between mb-4">
+        <h4 className="font-medium text-gray-900 flex items-center">
+          <MessageSquare className="w-4 h-4 mr-2" />
+          Commentaires de rapprochement
+          {comments.length > 0 && (
+            <Badge variant="secondary" className="ml-2">
+              {comments.length}
+            </Badge>
+          )}
+        </h4>
+        
+        {!isAdding && (
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setIsAdding(true)}
+          >
+            <Plus className="w-4 h-4 mr-1" />
+            Ajouter
+          </Button>
+        )}
+      </div>
+
+      {/* Formulaire d'ajout */}
+      {isAdding && (
+        <Card className="mb-4 border-dashed">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm text-gray-600">Nouveau commentaire</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleAddComment} className="space-y-3">
+              <div>
+                <Label htmlFor="comment-type">Type</Label>
+                <Select
+                  value={newComment.type}
+                  onValueChange={(value: any) => setNewComment(prev => ({ ...prev, type: value }))}
+                >
+                  <SelectTrigger id="comment-type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="info">Information</SelectItem>
+                    <SelectItem value="warning">Attention</SelectItem>
+                    <SelectItem value="error">Erreur</SelectItem>
+                    <SelectItem value="success">Succès</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              
+              <div>
+                <Label htmlFor="comment-content">Commentaire</Label>
+                <Textarea
+                  id="comment-content"
+                  value={newComment.content}
+                  onChange={(e) => setNewComment(prev => ({ ...prev, content: e.target.value }))}
+                  placeholder="Saisissez votre commentaire..."
+                  rows={3}
+                />
+              </div>
+              
+              <div className="flex justify-end space-x-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setIsAdding(false);
+                    setNewComment({ content: "", type: "info" });
+                  }}
+                >
+                  <X className="w-4 h-4 mr-1" />
+                  Annuler
+                </Button>
+                <Button
+                  type="submit"
+                  size="sm"
+                  disabled={!newComment.content.trim() || createCommentMutation.isPending}
+                >
+                  <Save className="w-4 h-4 mr-1" />
+                  {createCommentMutation.isPending ? "Ajout..." : "Ajouter"}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Liste des commentaires */}
+      <div className="space-y-3">
+        {comments.length === 0 ? (
+          <div className="text-center py-8 text-gray-500">
+            <MessageSquare className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p>Aucun commentaire pour cette livraison</p>
+          </div>
+        ) : (
+          comments.map((comment: ReconciliationComment) => {
+            const TypeIcon = typeIcons[comment.type];
+            const isEditing = editingId === comment.id;
+            
+            return (
+              <Card key={comment.id} className={`border ${typeColors[comment.type]}`}>
+                <CardContent className="p-4">
+                  {isEditing ? (
+                    <div className="space-y-3">
+                      <div>
+                        <Label htmlFor={`edit-type-${comment.id}`}>Type</Label>
+                        <Select
+                          value={editComment.type}
+                          onValueChange={(value: any) => setEditComment(prev => ({ ...prev, type: value }))}
+                        >
+                          <SelectTrigger id={`edit-type-${comment.id}`}>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="info">Information</SelectItem>
+                            <SelectItem value="warning">Attention</SelectItem>
+                            <SelectItem value="error">Erreur</SelectItem>
+                            <SelectItem value="success">Succès</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      
+                      <div>
+                        <Label htmlFor={`edit-content-${comment.id}`}>Commentaire</Label>
+                        <Textarea
+                          id={`edit-content-${comment.id}`}
+                          value={editComment.content}
+                          onChange={(e) => setEditComment(prev => ({ ...prev, content: e.target.value }))}
+                          rows={3}
+                        />
+                      </div>
+                      
+                      <div className="flex justify-end space-x-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={handleCancelEdit}
+                        >
+                          <X className="w-4 h-4 mr-1" />
+                          Annuler
+                        </Button>
+                        <Button
+                          type="button"
+                          size="sm"
+                          onClick={handleSaveEdit}
+                          disabled={!editComment.content.trim() || updateCommentMutation.isPending}
+                        >
+                          <Save className="w-4 h-4 mr-1" />
+                          {updateCommentMutation.isPending ? "Sauvegarde..." : "Sauvegarder"}
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div>
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="flex items-center space-x-2">
+                          <TypeIcon className="w-4 h-4" />
+                          <Badge variant="outline">
+                            {typeLabels[comment.type]}
+                          </Badge>
+                        </div>
+                        
+                        <div className="flex items-center space-x-1">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleEditComment(comment)}
+                            className="h-6 w-6 p-0"
+                          >
+                            <Edit2 className="w-3 h-3" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleDeleteComment(comment.id)}
+                            className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      </div>
+                      
+                      <p className="text-sm mb-2">{comment.content}</p>
+                      
+                      <div className="text-xs text-gray-500 flex items-center justify-between">
+                        <span>Par {comment.author.email}</span>
+                        <span>{safeFormat(new Date(comment.createdAt), 'dd/MM/yyyy HH:mm')}</span>
+                      </div>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

client/src/components/modals/ReconciliationModal.tsx

@@ -6,10 +6,12 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest } from "@/lib/queryClient";
 import { safeFormat } from "@/lib/dateUtils";
-import { FileText, Settings, Check, X } from "lucide-react";
+import { FileText, Settings, Check, X, MessageSquare } from "lucide-react";
+import ReconciliationComments from "@/components/ReconciliationComments";
 
 interface ReconciliationModalProps {
   isOpen: boolean;
@@ -91,7 +93,7 @@ export default function ReconciliationModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="flex items-center space-x-2">
             {isAutomaticMode ? (
@@ -138,94 +140,118 @@ export default function ReconciliationModal({
 
           <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 (optionnel)"
-                  />
+          {/* Onglets pour les données de rapprochement et les commentaires */}
+          <Tabs defaultValue="reconciliation" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="reconciliation" className="flex items-center space-x-2">
+                <FileText className="w-4 h-4" />
+                <span>Données de rapprochement</span>
+              </TabsTrigger>
+              <TabsTrigger value="comments" className="flex items-center space-x-2">
+                <MessageSquare className="w-4 h-4" />
+                <span>Commentaires</span>
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="reconciliation" className="space-y-4">
+              {/* 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 (optionnel)"
+                      />
+                    </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>
 
-                <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"
-                  />
+                {/* Actions */}
+                <div className="flex justify-end 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>
                 </div>
+              </form>
+
+              {/* Note d'aide */}
+              <div className="text-xs text-gray-500 bg-blue-50 p-3 rounded">
+                <strong>Note :</strong> Tous les champs sont optionnels. 
+                Les données BL et facture sont recommandées pour un suivi précis mais pas obligatoires.
               </div>
+            </TabsContent>
 
-              {/* 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-end 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>
-
-            </div>
-          </form>
-
-          {/* Note d'aide */}
-          <div className="text-xs text-gray-500 bg-blue-50 p-3 rounded">
-            <strong>Note :</strong> Tous les champs sont optionnels. 
-            Les données BL et facture sont recommandées pour un suivi précis mais pas obligatoires.
-          </div>
+            <TabsContent value="comments" className="space-y-4">
+              {delivery?.id && (
+                <ReconciliationComments 
+                  deliveryId={delivery.id}
+                  className="min-h-[400px]"
+                />
+              )}
+            </TabsContent>
+          </Tabs>
         </div>
       </DialogContent>
     </Dialog>