From 2bf4bf579c52d5c4f0d1f798c5a785c5e76ca779 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 14 Aug 2025 13:38:48 +0000
Subject: [PATCH] Improve SAV ticket display with better French translations
 and layout

Update the UI for the SAV Tickets page to use improved French translations for product, problem, and client information sections.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 31f9bd88-0285-4787-81b3-31ceeea5a08b
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/31f9bd88-0285-4787-81b3-31ceeea5a08b/kdjV7Um
---
 client/src/pages/SavTickets.tsx | 126 ++++++++++++++++++++++++--------
 1 file changed, 97 insertions(+), 29 deletions(-)

diff --git a/client/src/pages/SavTickets.tsx b/client/src/pages/SavTickets.tsx
index 8cb766d..540eb53 100644
--- a/client/src/pages/SavTickets.tsx
+++ b/client/src/pages/SavTickets.tsx
@@ -822,26 +822,27 @@ export default function SavTickets() {
               <div className="space-y-6 overflow-y-auto max-h-[70vh] pr-2">
                 {/* Product Info */}
                 <div className="space-y-4">
-                <h3 className="text-lg font-medium">Informations produit</h3>
-                <div className="grid grid-cols-2 gap-4 text-sm">
-                  <div>
-                    <span className="font-medium">Code-barres:</span>
-                    <p>{selectedTicket.productGencode}</p>
-                  </div>
-                  <div>
-                    <span className="font-medium">Référence:</span>
-                    <p>{selectedTicket.productReference || "Non renseignée"}</p>
-                  </div>
-                  <div className="col-span-2">
-                    <span className="font-medium">Désignation:</span>
-                    <p>{selectedTicket.productDesignation}</p>
+                  <h3 className="text-lg font-medium">Informations produit</h3>
+                  <div className="grid grid-cols-2 gap-4 text-sm">
+                    <div>
+                      <span className="font-medium">Code-barres:</span>
+                      <p>{selectedTicket.productGencode}</p>
+                    </div>
+                    <div>
+                      <span className="font-medium">Référence:</span>
+                      <p>{selectedTicket.productReference || "Non renseignée"}</p>
+                    </div>
+                    <div className="col-span-2">
+                      <span className="font-medium">Désignation:</span>
+                      <p>{selectedTicket.productDesignation}</p>
+                    </div>
                   </div>
                 </div>
 
                 {/* Problem Info */}
                 <div className="space-y-4">
-                <h3 className="text-lg font-medium">Problème</h3>
-                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <h3 className="text-lg font-medium">Problème</h3>
+                  <div className="grid grid-cols-2 gap-4 text-sm">
                   <div>
                     <span className="font-medium">Type:</span>
                     <p>{selectedTicket.problemType}</p>
@@ -852,32 +853,34 @@ export default function SavTickets() {
                       {priorityConfig[selectedTicket.priority as keyof typeof priorityConfig]?.label}
                     </Badge>
                   </div>
-                  <div className="col-span-2">
-                    <span className="font-medium">Description:</span>
-                    <p className="mt-1 p-2 bg-gray-50 rounded">{selectedTicket.problemDescription}</p>
+                    <div className="col-span-2">
+                      <span className="font-medium">Description:</span>
+                      <p className="mt-1 p-2 bg-gray-50 rounded">{selectedTicket.problemDescription}</p>
+                    </div>
                   </div>
                 </div>
 
                 {/* Client Info */}
                 {(selectedTicket.clientName || selectedTicket.clientPhone) && (
                   <div className="space-y-4">
-                  <h3 className="text-lg font-medium">Client</h3>
-                  <div className="grid grid-cols-2 gap-4 text-sm">
-                    <div>
-                      <span className="font-medium">Nom:</span>
-                      <p>{selectedTicket.clientName || "Non renseigné"}</p>
-                    </div>
-                    <div>
-                      <span className="font-medium">Téléphone:</span>
-                      <p>{selectedTicket.clientPhone || "Non renseigné"}</p>
+                    <h3 className="text-lg font-medium">Client</h3>
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="font-medium">Nom:</span>
+                        <p>{selectedTicket.clientName || "Non renseigné"}</p>
+                      </div>
+                      <div>
+                        <span className="font-medium">Téléphone:</span>
+                        <p>{selectedTicket.clientPhone || "Non renseigné"}</p>
+                      </div>
                     </div>
                   </div>
                 )}
 
                 {/* Ticket Info */}
                 <div className="space-y-4">
-                <h3 className="text-lg font-medium">Informations ticket</h3>
-                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <h3 className="text-lg font-medium">Informations ticket</h3>
+                  <div className="grid grid-cols-2 gap-4 text-sm">
                   <div>
                     <span className="font-medium">Statut:</span>
                     <Badge className={statusConfig[selectedTicket.status as keyof typeof statusConfig]?.color}>
@@ -1015,6 +1018,71 @@ export default function SavTickets() {
                   </div>
                 )}
               </div>
+
+              {/* Colonne de droite - Commentaires et Suivi */}
+              <div className="space-y-4 overflow-y-auto max-h-[70vh] pl-2 border-l">
+                <h3 className="text-lg font-medium">Historique et commentaires</h3>
+                
+                {/* Affichage de l'historique existant */}
+                {ticketDetails?.history && ticketDetails.history.length > 0 ? (
+                  <div className="space-y-3 flex-1 overflow-y-auto">
+                    {ticketDetails.history.map((entry: any, index: number) => (
+                      <div key={index} className="bg-gray-50 rounded-lg p-3 text-sm">
+                        <div className="flex justify-between items-start mb-2">
+                          <span className="font-medium text-gray-900">
+                            {entry.action === 'comment' ? 'Commentaire' : entry.action}
+                          </span>
+                          <span className="text-gray-500 text-xs">
+                            {safeFormat(entry.createdAt, 'dd/MM/yyyy HH:mm')}
+                          </span>
+                        </div>
+                        <p className="text-gray-700">{entry.description}</p>
+                        {entry.creator && (
+                          <p className="text-gray-500 text-xs mt-1">Par: {entry.creator.username}</p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-gray-500 text-sm text-center py-8">
+                    Aucun commentaire pour le moment
+                  </div>
+                )}
+                
+                {/* Champ d'ajout de commentaire */}
+                {canModify && (
+                  <div className="border-t pt-4 space-y-3">
+                    <Label htmlFor="new-comment">Ajouter un commentaire</Label>
+                    <Textarea
+                      id="new-comment"
+                      value={newComment}
+                      onChange={(e) => setNewComment(e.target.value)}
+                      placeholder="Entrez votre commentaire..."
+                      rows={3}
+                      className="resize-none"
+                    />
+                    <div className="flex justify-end">
+                      <Button 
+                        size="sm"
+                        onClick={() => {
+                          if (!newComment.trim()) {
+                            toast({
+                              title: "Erreur",
+                              description: "Le commentaire ne peut pas être vide.",
+                              variant: "destructive",
+                            });
+                            return;
+                          }
+                          addCommentMutation.mutate({ ticketId: selectedTicket.id, comment: newComment.trim() });
+                        }}
+                        disabled={addCommentMutation.isPending}
+                      >
+                        {addCommentMutation.isPending ? "Ajout..." : "Ajouter commentaire"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
             </div>
           </DialogContent>
         </Dialog>