Show the images in the sales history modal and correct date display

Fixes image display and date formatting issues in SaleDetailsModal.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/e8963daf-6ce4-40c7-aab9-e1134317a31e.jpg

client/src/components/SaleDetailsModal.tsx

@@ -2,7 +2,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { X, Download } from 'lucide-react';
-import { Sale } from '@/types/sale';
+import { Sale } from '@shared/schema';
 import { formatDate, formatDateTime } from '@/lib/export';
 
 interface SaleDetailsModalProps {
@@ -37,7 +37,7 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
             <h4 className="responsive-subtitle text-gray-900 mb-3">Informations Vendeur</h4>
             <div className="mobile-form-row responsive-body">
               <div><span className="font-medium">Vendeur:</span> {sale.vendeur}</div>
-              <div><span className="font-medium">Date de vente:</span> {formatDate(sale.dateVente)}</div>
+              <div><span className="font-medium">Date de vente:</span> {formatDateTime(sale.timestamp)}</div>
             </div>
           </div>
           
@@ -87,24 +87,24 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
           </div>
           
           {/* Photos */}
-          {(sale.photoRecto || sale.photoVerso || sale.photoTicket) && (
+          {(sale.photo_recto || sale.photo_verso || sale.photo_ticket) && (
             <div className="mobile-form-section border-l-4 border-purple-500 pl-4">
               <h4 className="responsive-subtitle text-gray-900 mb-3">Photos</h4>
               
               {/* Photos de la pièce d'identité */}
-              {(sale.photoRecto || sale.photoVerso) && (
+              {(sale.photo_recto || sale.photo_verso) && (
                 <div className="mb-4">
                   <h5 className="text-sm font-semibold text-gray-700 mb-3">Pièce d'identité</h5>
                   <div className="mobile-form-row">
                     <div>
                       <span className="text-sm font-medium">Photo Recto:</span>
-                      {sale.photoRecto ? (
+                      {sale.photo_recto ? (
                         <div className="mt-2 space-y-2">
-                          <img src={sale.photoRecto} alt="Photo recto" className="w-32 h-auto rounded border" />
+                          <img src={sale.photo_recto} alt="Photo recto" className="w-32 h-auto rounded border" />
                           <Button
                             variant="outline"
                             size="sm"
-                            onClick={() => downloadPhoto(sale.photoRecto!, `vente-${sale.id}-recto.jpg`)}
+                            onClick={() => downloadPhoto(sale.photo_recto!, `vente-${sale.id}-recto.jpg`)}
                             className="w-full"
                           >
                             <Download className="h-4 w-4 mr-2" />
@@ -117,13 +117,13 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
                     </div>
                     <div>
                       <span className="text-sm font-medium">Photo Verso:</span>
-                      {sale.photoVerso ? (
+                      {sale.photo_verso ? (
                         <div className="mt-2 space-y-2">
-                          <img src={sale.photoVerso} alt="Photo verso" className="w-32 h-auto rounded border" />
+                          <img src={sale.photo_verso} alt="Photo verso" className="w-32 h-auto rounded border" />
                           <Button
                             variant="outline"
                             size="sm"
-                            onClick={() => downloadPhoto(sale.photoVerso!, `vente-${sale.id}-verso.jpg`)}
+                            onClick={() => downloadPhoto(sale.photo_verso!, `vente-${sale.id}-verso.jpg`)}
                             className="w-full"
                           >
                             <Download className="h-4 w-4 mr-2" />
@@ -139,15 +139,15 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
               )}
 
               {/* Photo du ticket de caisse */}
-              {sale.photoTicket && (
+              {sale.photo_ticket && (
                 <div>
                   <h5 className="text-sm font-semibold text-gray-700 mb-3">Ticket de caisse</h5>
                   <div className="max-w-xs">
-                    <img src={sale.photoTicket} alt="Photo ticket" className="w-full h-auto rounded border mb-2" />
+                    <img src={sale.photo_ticket} alt="Photo ticket" className="w-full h-auto rounded border mb-2" />
                     <Button
                       variant="outline"
                       size="sm"
-                      onClick={() => downloadPhoto(sale.photoTicket!, `vente-${sale.id}-ticket.jpg`)}
+                      onClick={() => downloadPhoto(sale.photo_ticket!, `vente-${sale.id}-ticket.jpg`)}
                       className="w-full"
                     >
                       <Download className="h-4 w-4 mr-2" />

client/src/components/SalesHistory.tsx

@@ -11,6 +11,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { apiRequest } from '@/lib/queryClient';
 import type { Sale } from '@shared/schema';
 import { History, Download, Trash2, Eye, Filter, FileText, Search, X, Calendar, Users } from 'lucide-react';
+import SaleDetailsModal from '@/components/SaleDetailsModal';
 
 interface SalesHistoryProps {
   canDelete?: boolean;
@@ -399,80 +400,12 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
                     <td className="text-sm">{sale.modePaiement}</td>
                     <td>
                       <div className="flex items-center gap-2">
-                        <Dialog>
-                          <DialogTrigger asChild>
-                            <button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
-                              <Eye className="h-4 w-4" />
-                            </button>
-                          </DialogTrigger>
-                          <DialogContent className="max-w-2xl">
-                            <DialogHeader>
-                              <DialogTitle>Détails de la vente</DialogTitle>
-                            </DialogHeader>
-                            <div className="space-y-4">
-                              <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Date et heure de vente</label>
-                                  <p className="font-mono">{new Date(sale.timestamp).toLocaleString('fr-FR')}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Vendeur</label>
-                                  <p>{sale.vendeur}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Client</label>
-                                  <p>{sale.nom} {sale.prenom}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Date de naissance</label>
-                                  <p>{new Date(sale.dateNaissance).toLocaleDateString('fr-FR')}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Lieu de naissance</label>
-                                  <p>{sale.lieuNaissance || 'Non renseigné'}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Type d'article</label>
-                                  <p>{sale.typeArticle}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Catégorie</label>
-                                  <p>{sale.categorie}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Quantité</label>
-                                  <p>{sale.quantite}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Gencode</label>
-                                  <p className="font-mono">{sale.gencode}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Mode de paiement</label>
-                                  <p>{sale.modePaiement}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Type d'identité</label>
-                                  <p>{sale.typeIdentite}</p>
-                                </div>
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Numéro d'identité</label>
-                                  <p className="font-mono">{sale.numeroIdentite}</p>
-                                </div>
-                                {sale.autoriteDelivrance && (
-                                  <div>
-                                    <label className="text-sm font-medium text-gray-600">Autorité de délivrance</label>
-                                    <p>{sale.autoriteDelivrance}</p>
-                                  </div>
-                                )}
-                                <div>
-                                  <label className="text-sm font-medium text-gray-600">Date de délivrance</label>
-                                  <p>{new Date(sale.dateDelivrance).toLocaleDateString('fr-FR')}</p>
-                                </div>
-                              </div>
-                            </div>
-                          </DialogContent>
-                        </Dialog>
+                        <button 
+                          onClick={() => setSelectedSale(sale)}
+                          className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                        >
+                          <Eye className="h-4 w-4" />
+                        </button>
 
                         {canDelete && (
                           <AlertDialog>
@@ -515,6 +448,13 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
           </table>
         </div>
       </div>
+      
+      {/* Modal de détails de la vente */}
+      <SaleDetailsModal 
+        isOpen={!!selectedSale}
+        sale={selectedSale}
+        onClose={() => setSelectedSale(null)}
+      />
     </div>
   );
 }