Add a feature to add comments to delivery reconciliation

Introduce a new modal component in the BLReconciliation page for users to add and save comments to delivery records.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9fcf4b21-eb0c-4e53-a567-e2ce4a6ad869
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/9fcf4b21-eb0c-4e53-a567-e2ce4a6ad869/yiEpJFx

client/src/pages/BLReconciliation.tsx

@@ -16,6 +16,7 @@ import { Search, Edit, FileText, Settings, Eye, AlertTriangle, X, Check, Trash2,
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import ReconciliationModal from "@/components/modals/ReconciliationModal";
 
 export default function BLReconciliation() {
@@ -1380,6 +1381,66 @@ export default function BLReconciliation() {
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* Modal de commentaire */}
+      <Dialog open={showCommentModal} onOpenChange={setShowCommentModal}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center space-x-2">
+              <MessageSquare className="w-5 h-5 text-blue-600" />
+              <span>Commentaire de livraison</span>
+            </DialogTitle>
+          </DialogHeader>
+          
+          {selectedDeliveryForComment && (
+            <div className="grid gap-4 py-4">
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <div className="text-sm font-medium text-gray-900">
+                  {selectedDeliveryForComment.supplier?.name}
+                </div>
+                <div className="text-sm text-gray-600">
+                  BL: {selectedDeliveryForComment.blNumber || 'Non renseigné'} | 
+                  Facture: {selectedDeliveryForComment.invoiceReference || 'Non renseignée'}
+                </div>
+                <div className="text-sm text-gray-600">
+                  Date prévue: {selectedDeliveryForComment.scheduledDate ? new Date(selectedDeliveryForComment.scheduledDate).toLocaleDateString('fr-FR') : 'Non renseignée'}
+                </div>
+              </div>
+              
+              <div className="grid gap-2">
+                <Label htmlFor="comment">Commentaire</Label>
+                <Textarea
+                  id="comment"
+                  placeholder="Ajouter un commentaire sur cette livraison..."
+                  value={commentText}
+                  onChange={(e) => setCommentText(e.target.value)}
+                  rows={4}
+                  className="min-h-[100px]"
+                />
+                <div className="text-xs text-gray-500">
+                  {commentText.length}/500 caractères
+                </div>
+              </div>
+            </div>
+          )}
+          
+          <DialogFooter>
+            <Button 
+              variant="outline" 
+              onClick={handleCloseCommentModal}
+              disabled={updateNoteMutation.isPending}
+            >
+              Annuler
+            </Button>
+            <Button 
+              onClick={handleSaveComment}
+              disabled={updateNoteMutation.isPending || commentText.length > 500}
+            >
+              {updateNoteMutation.isPending ? "Sauvegarde..." : "Enregistrer"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }