Merge pull request #429 from R0m1k3/1.1

1.1

client/src/components/ReconciliationComments.tsx

@@ -1,16 +1,14 @@
 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 { Card, CardContent } 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";
+import { MessageSquare, Plus, Edit2, Trash2, Save, X } from "lucide-react";
 
 interface ReconciliationCommentsProps {
   deliveryId: number;
@@ -20,7 +18,6 @@ interface ReconciliationCommentsProps {
 interface ReconciliationComment {
   id: number;
   content: string;
-  type: 'info' | 'warning' | 'error' | 'success';
   deliveryId: number;
   authorId: string;
   groupId: number;
@@ -33,47 +30,14 @@ interface ReconciliationComment {
   };
 }
 
-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<{
+  const [newComment, setNewComment] = useState("");
-    content: string;
+  const [editComment, setEditComment] = useState("");
-    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({
@@ -84,8 +48,8 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
 
   // Créer un commentaire
   const createCommentMutation = useMutation({
-    mutationFn: async (data: { content: string; type: string }) => {
+    mutationFn: async (content: string) => {
-      return apiRequest(`/api/deliveries/${deliveryId}/reconciliation-comments`, "POST", data);
+      return apiRequest(`/api/deliveries/${deliveryId}/reconciliation-comments`, "POST", { content });
     },
     onSuccess: () => {
       toast({
@@ -94,7 +58,7 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
       });
       queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
       setIsAdding(false);
-      setNewComment({ content: "", type: "info" });
+      setNewComment("");
     },
     onError: (error: any) => {
       toast({
@@ -107,8 +71,8 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
 
   // Modifier un commentaire
   const updateCommentMutation = useMutation({
-    mutationFn: async ({ id, data }: { id: number; data: { content: string; type: string } }) => {
+    mutationFn: async ({ id, content }: { id: number; content: string }) => {
-      return apiRequest(`/api/reconciliation-comments/${id}`, "PUT", data);
+      return apiRequest(`/api/reconciliation-comments/${id}`, "PUT", { content });
     },
     onSuccess: () => {
       toast({
@@ -150,31 +114,28 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
 
   const handleAddComment = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!newComment.content.trim()) return;
+    if (!newComment.trim()) return;
     
     createCommentMutation.mutate(newComment);
   };
 
   const handleEditComment = (comment: ReconciliationComment) => {
     setEditingId(comment.id);
-    setEditComment({
+    setEditComment(comment.content);
-      content: comment.content,
-      type: comment.type,
-    });
   };
 
   const handleSaveEdit = () => {
-    if (!editComment.content.trim() || !editingId) return;
+    if (!editComment.trim() || !editingId) return;
     
     updateCommentMutation.mutate({
       id: editingId,
-      data: editComment,
+      content: editComment,
     });
   };
 
   const handleCancelEdit = () => {
     setEditingId(null);
-    setEditComment({ content: "", type: "info" });
+    setEditComment("");
   };
 
   const handleDeleteComment = (id: number) => {
@@ -197,7 +158,7 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
       <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
+          Commentaires
           {comments.length > 0 && (
             <Badge variant="secondary" className="ml-2">
               {comments.length}
@@ -205,52 +166,31 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
           )}
         </h4>
         
-        {!isAdding && (
+        <Button
-          <Button
+          onClick={() => setIsAdding(true)}
-            size="sm"
+          size="sm"
-            variant="outline"
+          variant="outline"
-            onClick={() => setIsAdding(true)}
+          className="text-xs"
-          >
+        >
-            <Plus className="w-4 h-4 mr-1" />
+          <Plus className="w-3 h-3 mr-1" />
-            Ajouter
+          Ajouter
-          </Button>
+        </Button>
-        )}
       </div>
 
       {/* Formulaire d'ajout */}
       {isAdding && (
-        <Card className="mb-4 border-dashed">
+        <Card className="mb-4 border-blue-200 bg-blue-50">
-          <CardHeader className="pb-2">
+          <CardContent className="p-4">
-            <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>
+                <Label htmlFor="new-comment">Nouveau commentaire</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"
+                  id="new-comment"
-                  value={newComment.content}
+                  value={newComment}
-                  onChange={(e) => setNewComment(prev => ({ ...prev, content: e.target.value }))}
+                  onChange={(e) => setNewComment(e.target.value)}
-                  placeholder="Saisissez votre commentaire..."
+                  placeholder="Tapez votre commentaire..."
                   rows={3}
+                  required
                 />
               </div>
               
@@ -261,18 +201,18 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
                   size="sm"
                   onClick={() => {
                     setIsAdding(false);
-                    setNewComment({ content: "", type: "info" });
+                    setNewComment("");
                   }}
                 >
-                  <X className="w-4 h-4 mr-1" />
+                  <X className="w-3 h-3 mr-1" />
                   Annuler
                 </Button>
                 <Button
                   type="submit"
                   size="sm"
-                  disabled={!newComment.content.trim() || createCommentMutation.isPending}
+                  disabled={createCommentMutation.isPending || !newComment.trim()}
                 >
-                  <Save className="w-4 h-4 mr-1" />
+                  <Save className="w-3 h-3 mr-1" />
                   {createCommentMutation.isPending ? "Ajout..." : "Ajouter"}
                 </Button>
               </div>
@@ -290,38 +230,19 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
           </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]}`}>
+              <Card key={comment.id} className="border">
                 <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}
+                          value={editComment}
-                          onChange={(e) => setEditComment(prev => ({ ...prev, content: e.target.value }))}
+                          onChange={(e) => setEditComment(e.target.value)}
                           rows={3}
                         />
                       </div>
@@ -333,56 +254,49 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
                           size="sm"
                           onClick={handleCancelEdit}
                         >
-                          <X className="w-4 h-4 mr-1" />
+                          <X className="w-3 h-3 mr-1" />
                           Annuler
                         </Button>
                         <Button
                           type="button"
                           size="sm"
                           onClick={handleSaveEdit}
-                          disabled={!editComment.content.trim() || updateCommentMutation.isPending}
+                          disabled={updateCommentMutation.isPending || !editComment.trim()}
                         >
-                          <Save className="w-4 h-4 mr-1" />
+                          <Save className="w-3 h-3 mr-1" />
-                          {updateCommentMutation.isPending ? "Sauvegarde..." : "Sauvegarder"}
+                          {updateCommentMutation.isPending ? "Enregistrement..." : "Enregistrer"}
                         </Button>
                       </div>
                     </div>
                   ) : (
                     <div>
                       <div className="flex items-start justify-between mb-2">
-                        <div className="flex items-center space-x-2">
+                        <div className="flex-1">
-                          <TypeIcon className="w-4 h-4" />
+                          <p className="text-gray-900 mb-2">{comment.content}</p>
-                          <Badge variant="outline">
+                          <div className="text-xs text-gray-500">
-                            {typeLabels[comment.type]}
+                            Par {comment.author.email} • {safeFormat(comment.createdAt, "dd/MM/yyyy 'à' HH:mm")}
-                          </Badge>
+                          </div>
                         </div>
                         
-                        <div className="flex items-center space-x-1">
+                        <div className="flex space-x-1 ml-2">
                           <Button
-                            size="sm"
                             variant="ghost"
+                            size="sm"
                             onClick={() => handleEditComment(comment)}
-                            className="h-6 w-6 p-0"
+                            className="h-8 w-8 p-0"
                           >
                             <Edit2 className="w-3 h-3" />
                           </Button>
                           <Button
-                            size="sm"
                             variant="ghost"
+                            size="sm"
                             onClick={() => handleDeleteComment(comment.id)}
-                            className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                            className="h-8 w-8 p-0 text-red-600 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>

client/src/pages/BLReconciliation.tsx

@@ -143,16 +143,18 @@ export default function BLReconciliation() {
     }
   });
 
-  // Mutation pour mettre à jour les notes
+  // Mutation pour créer un nouveau commentaire de rapprochement
-  const updateNoteMutation = useMutation({
+  const createCommentMutation = useMutation({
-    mutationFn: async ({ deliveryId, notes }: { deliveryId: number; notes: string }) => {
+    mutationFn: async ({ deliveryId, content }: { deliveryId: number; content: string }) => {
-      const response = await apiRequest(`/api/deliveries/${deliveryId}/notes`, 'PUT', { notes });
+      const response = await apiRequest(`/api/deliveries/${deliveryId}/reconciliation-comments`, 'POST', { 
+        content
+      });
       return response;
     },
     onSuccess: () => {
       toast({
-        title: "Commentaire sauvegardé",
+        title: "Commentaire ajouté",
-        description: "Le commentaire a été mis à jour avec succès",
+        description: "Le commentaire a été ajouté avec succès",
       });
       // Rafraîchir les données
       queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
@@ -160,10 +162,10 @@ export default function BLReconciliation() {
       handleCloseCommentModal();
     },
     onError: (error) => {
-      console.error('Erreur sauvegarde commentaire:', error);
+      console.error('Erreur ajout commentaire:', error);
       toast({
         title: "Erreur",
-        description: "Impossible de sauvegarder le commentaire",
+        description: "Impossible d'ajouter le commentaire",
         variant: "destructive",
       });
     }
@@ -171,11 +173,11 @@ export default function BLReconciliation() {
 
   // Fonction pour sauvegarder le commentaire
   const handleSaveComment = () => {
-    if (!selectedDeliveryForComment) return;
+    if (!selectedDeliveryForComment || !commentText.trim()) return;
     
-    updateNoteMutation.mutate({
+    createCommentMutation.mutate({
       deliveryId: selectedDeliveryForComment.id,
-      notes: commentText
+      content: commentText
     });
   };
 
@@ -1440,16 +1442,16 @@ export default function BLReconciliation() {
             <Button 
               variant="outline" 
               onClick={handleCloseCommentModal}
-              disabled={updateNoteMutation.isPending}
+              disabled={createCommentMutation.isPending}
             >
               {selectedDeliveryForComment?.reconciled ? "Fermer" : "Annuler"}
             </Button>
             {!selectedDeliveryForComment?.reconciled && (
               <Button 
                 onClick={handleSaveComment}
-                disabled={updateNoteMutation.isPending || commentText.length > 500}
+                disabled={createCommentMutation.isPending || commentText.length > 500}
               >
-                {updateNoteMutation.isPending ? "Sauvegarde..." : "Enregistrer"}
+                {createCommentMutation.isPending ? "Sauvegarde..." : "Enregistrer"}
               </Button>
             )}
           </DialogFooter>

server/storage.ts

@@ -2585,7 +2585,6 @@ export class DatabaseStorage implements IStorage {
         deliveryId: reconciliationComments.deliveryId,
         groupId: reconciliationComments.groupId,
         content: reconciliationComments.content,
-        type: reconciliationComments.type,
         authorId: reconciliationComments.authorId,
         createdAt: reconciliationComments.createdAt,
         updatedAt: reconciliationComments.updatedAt,

shared/schema.ts

@@ -183,7 +183,6 @@ export const reconciliationComments = pgTable("reconciliation_comments", {
   deliveryId: integer("delivery_id").notNull(), // Référence vers la livraison concernée
   groupId: integer("group_id").notNull(), // Magasin/groupe pour filtrage
   content: text("content").notNull(), // Contenu du commentaire
-  type: varchar("type", { length: 50 }).notNull().default("info"), // info, warning, error, success
   authorId: varchar("author_id").notNull(), // Utilisateur auteur du commentaire
   createdAt: timestamp("created_at").defaultNow(),
   updatedAt: timestamp("updated_at").defaultNow(),