From a589c8b770c1c7d44b7720514c23b43204a4763e Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 11 Jul 2025 15:40:31 +0000
Subject: [PATCH] Enable users to download photos attached to sales records
 easily

Implement photo download functionality in SaleDetailsModal.tsx using a downloadPhoto function and the Download icon.

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/3a1a5de6-d311-4504-a90c-e46ce001fd4a.jpg
---
 client/src/components/SaleDetailsModal.tsx | 38 ++++++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/client/src/components/SaleDetailsModal.tsx b/client/src/components/SaleDetailsModal.tsx
index dbb086b..b4320ba 100644
--- a/client/src/components/SaleDetailsModal.tsx
+++ b/client/src/components/SaleDetailsModal.tsx
@@ -1,7 +1,7 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { X } from 'lucide-react';
+import { X, Download } from 'lucide-react';
 import { Sale } from '@/types/sale';
 import { formatDate, formatDateTime } from '@/lib/export';
 
@@ -14,6 +14,16 @@ interface SaleDetailsModalProps {
 export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsModalProps) {
   if (!sale) return null;
 
+  // Fonction pour télécharger une photo
+  const downloadPhoto = (photoData: string, fileName: string) => {
+    const link = document.createElement('a');
+    link.href = photoData;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="mobile-modal-content max-w-4xl max-h-[90vh] overflow-y-auto slide-in-up">
@@ -83,7 +93,18 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
               <div>
                 <span className="text-sm font-medium">Photo Recto:</span>
                 {sale.photoRecto ? (
-                  <img src={sale.photoRecto} alt="Photo recto" className="mt-2 w-32 h-auto rounded border" />
+                  <div className="mt-2 space-y-2">
+                    <img src={sale.photoRecto} alt="Photo recto" className="w-32 h-auto rounded border" />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => downloadPhoto(sale.photoRecto!, `vente-${sale.id}-recto.jpg`)}
+                      className="w-full"
+                    >
+                      <Download className="h-4 w-4 mr-2" />
+                      Télécharger Recto
+                    </Button>
+                  </div>
                 ) : (
                   <p className="text-sm text-gray-500 mt-2">Aucune photo</p>
                 )}
@@ -91,7 +112,18 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
               <div>
                 <span className="text-sm font-medium">Photo Verso:</span>
                 {sale.photoVerso ? (
-                  <img src={sale.photoVerso} alt="Photo verso" className="mt-2 w-32 h-auto rounded border" />
+                  <div className="mt-2 space-y-2">
+                    <img src={sale.photoVerso} alt="Photo verso" className="w-32 h-auto rounded border" />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => downloadPhoto(sale.photoVerso!, `vente-${sale.id}-verso.jpg`)}
+                      className="w-full"
+                    >
+                      <Download className="h-4 w-4 mr-2" />
+                      Télécharger Verso
+                    </Button>
+                  </div>
                 ) : (
                   <p className="text-sm text-gray-500 mt-2">Aucune photo</p>
                 )}