Michael/Regisflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Regisflow.git synced 2026-10-21 06:08:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve the display of sale details in the information modal window

Browse Source 
Refactors SaleDetailsModal.tsx to enhance the visual presentation with borders and spacing.

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/4099a3be-c3a6-4039-915b-a1ce8a3727fa.jpg
This commit is contained in:
michaelschal committed 2025-07-11 18:52:54 +00:00
1 parent 08e3258a32
commit f9e44b06bb
1 file changed
+60 -68
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/SaleDetailsModal.tsx
+60 -68
View File
@@ -33,34 +33,29 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
<div className="mobile-spacing mobile-padding"> <div className="mobile-spacing mobile-padding">
{/* Seller Information */} {/* Seller Information */}
<div className="mobile-form-section border-l-4 border-primary pl-4"> <div className="border border-gray-200 p-4 bg-gray-50">
<h4 className="responsive-subtitle text-gray-900 mb-3">Informations Vendeur</h4> <h4 className="font-medium text-gray-900 mb-3">Informations Vendeur</h4>
<div className="mobile-form-row responsive-body"> <div className="text-sm space-y-1">
<div><span className="font-medium">Vendeur:</span> {sale.vendeur}</div> <div><span className="font-medium">Vendeur:</span> {sale.vendeur}</div>
<div><span className="font-medium">Date de vente:</span> {formatDateTime(sale.timestamp)}</div> <div><span className="font-medium">Date de vente:</span> {formatDateTime(sale.timestamp)}</div>
</div> </div>
</div> </div>
{/* Product Information */} {/* Product Information */}
<div className="mobile-form-section border-l-4 border-blue-500 pl-4"> <div className="border border-gray-200 p-4 bg-white">
<h4 className="responsive-subtitle text-gray-900 mb-3">Informations Produit</h4> <h4 className="font-medium text-gray-900 mb-3">Informations Produit</h4>
<div className="mobile-form-row responsive-body"> <div className="text-sm space-y-1">
<div><span className="font-medium">Type d'article:</span> {sale.typeArticle}</div> <div><span className="font-medium">Type d'article:</span> {sale.typeArticle}</div>
<div> <div><span className="font-medium">Catégorie:</span> {sale.categorie}</div>
<span className="font-medium">Catégorie:</span>{' '}
<Badge variant={sale.categorie === 'F2' ? 'secondary' : 'destructive'}>
{sale.categorie}
</Badge>
</div>
<div><span className="font-medium">Quantité:</span> {sale.quantite}</div> <div><span className="font-medium">Quantité:</span> {sale.quantite}</div>
<div><span className="font-medium">Code produit:</span> {sale.gencode || 'Non spécifié'}</div> <div><span className="font-medium">Code produit:</span> {sale.gencode || 'Non spécifié'}</div>
</div> </div>
</div> </div>
{/* Customer Information */} {/* Customer Information */}
<div className="mobile-form-section border-l-4 border-green-500 pl-4"> <div className="border border-gray-200 p-4 bg-gray-50">
<h4 className="responsive-subtitle text-gray-900 mb-3">Informations Client</h4> <h4 className="font-medium text-gray-900 mb-3">Informations Client</h4>
<div className="mobile-form-row responsive-body"> <div className="text-sm space-y-1">
<div><span className="font-medium">Nom:</span> {sale.nom}</div> <div><span className="font-medium">Nom:</span> {sale.nom}</div>
<div><span className="font-medium">Prénom:</span> {sale.prenom}</div> <div><span className="font-medium">Prénom:</span> {sale.prenom}</div>
<div> <div>
@@ -73,9 +68,9 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
</div> </div>
{/* Identity Document */} {/* Identity Document */}
<div className="mobile-form-section border-l-4 border-yellow-500 pl-4"> <div className="border border-gray-200 p-4 bg-white">
<h4 className="responsive-subtitle text-gray-900 mb-3">Pièce d'Identité</h4> <h4 className="font-medium text-gray-900 mb-3">Pièce d'Identité</h4>
<div className="mobile-form-row responsive-body"> <div className="text-sm space-y-1">
<div><span className="font-medium">Type:</span> {sale.typeIdentite || 'Non spécifié'}</div> <div><span className="font-medium">Type:</span> {sale.typeIdentite || 'Non spécifié'}</div>
<div><span className="font-medium">Numéro:</span> {sale.numeroIdentite || 'Non spécifié'}</div> <div><span className="font-medium">Numéro:</span> {sale.numeroIdentite || 'Non spécifié'}</div>
<div><span className="font-medium">Autorité de délivrance:</span> {sale.autoriteDelivrance || 'Non spécifiée'}</div> <div><span className="font-medium">Autorité de délivrance:</span> {sale.autoriteDelivrance || 'Non spécifiée'}</div>
@@ -88,52 +83,44 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
{/* Photos */} {/* Photos */}
{(sale.photo_recto || sale.photo_verso || sale.photo_ticket) && ( {(sale.photo_recto || sale.photo_verso || sale.photo_ticket) && (
<div className="mobile-form-section border-l-4 border-purple-500 pl-4"> <div className="border border-gray-200 p-4 bg-white">
<h4 className="responsive-subtitle text-gray-900 mb-3">Photos</h4> <h4 className="font-medium text-gray-900 mb-4">Photos</h4>
{/* Photos de la pièce d'identité */} {/* Photos de la pièce d'identité */}
{(sale.photo_recto || sale.photo_verso) && ( {(sale.photo_recto || sale.photo_verso) && (
<div className="mb-4"> <div className="mb-6">
<h5 className="text-sm font-semibold text-gray-700 mb-3">Pièce d'identité</h5> <h5 className="text-sm font-medium text-gray-700 mb-3">Pièce d'identité</h5>
<div className="mobile-form-row"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> {sale.photo_recto && (
<span className="text-sm font-medium">Photo Recto:</span> <div>
{sale.photo_recto ? ( <span className="text-xs text-gray-600 mb-2 block">Photo Recto</span>
<div className="mt-2 space-y-2"> <img src={sale.photo_recto} alt="Photo recto" className="w-full h-48 object-cover border mb-2" />
<img src={sale.photo_recto} alt="Photo recto" className="w-32 h-auto rounded border" /> <Button
<Button variant="outline"
variant="outline" size="sm"
size="sm" onClick={() => downloadPhoto(sale.photo_recto!, `vente-${sale.id}-recto.jpg`)}
onClick={() => downloadPhoto(sale.photo_recto!, `vente-${sale.id}-recto.jpg`)} className="w-full"
className="w-full" >
> <Download className="h-4 w-4 mr-2" />
<Download className="h-4 w-4 mr-2" /> Télécharger Recto
Télécharger Recto </Button>
</Button> </div>
</div> )}
) : ( {sale.photo_verso && (
<p className="text-sm text-gray-500 mt-2">Aucune photo</p> <div>
)} <span className="text-xs text-gray-600 mb-2 block">Photo Verso</span>
</div> <img src={sale.photo_verso} alt="Photo verso" className="w-full h-48 object-cover border mb-2" />
<div> <Button
<span className="text-sm font-medium">Photo Verso:</span> variant="outline"
{sale.photo_verso ? ( size="sm"
<div className="mt-2 space-y-2"> onClick={() => downloadPhoto(sale.photo_verso!, `vente-${sale.id}-verso.jpg`)}
<img src={sale.photo_verso} alt="Photo verso" className="w-32 h-auto rounded border" /> className="w-full"
<Button >
variant="outline" <Download className="h-4 w-4 mr-2" />
size="sm" Télécharger Verso
onClick={() => downloadPhoto(sale.photo_verso!, `vente-${sale.id}-verso.jpg`)} </Button>
className="w-full" </div>
> )}
<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>
)}
</div>
</div> </div>
</div> </div>
)} )}
@@ -141,9 +128,9 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
{/* Photo du ticket de caisse */} {/* Photo du ticket de caisse */}
{sale.photo_ticket && ( {sale.photo_ticket && (
<div> <div>
<h5 className="text-sm font-semibold text-gray-700 mb-3">Ticket de caisse</h5> <h5 className="text-sm font-medium text-gray-700 mb-3">Ticket de caisse</h5>
<div className="max-w-xs"> <div className="max-w-sm">
<img src={sale.photo_ticket} 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 border mb-2" />
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@@ -160,11 +147,16 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
)} )}
{/* System Information */} {/* System Information */}
<div className="border-l-4 border-gray-400 pl-4"> <div className="border border-gray-200 p-4 bg-gray-50">
<h4 className="font-medium text-gray-900 mb-2">Informations Système</h4> <h4 className="font-medium text-gray-900 mb-3">Informations Système</h4>
<div className="text-sm"> <div className="text-sm space-y-1">
<div><span className="font-medium">Timestamp:</span> {formatDateTime(sale.timestamp)}</div>
<div><span className="font-medium">ID:</span> {sale.id}</div> <div><span className="font-medium">ID:</span> {sale.id}</div>
<div><span className="font-medium">Timestamp:</span> {formatDateTime(sale.timestamp)}</div>
{/* Debug temporaire */}
<div className="mt-2 p-2 bg-yellow-100 text-xs">
<div><span className="font-medium">Debug Photo Ticket:</span> {sale.photo_ticket ? 'PRÉSENTE' : 'ABSENTE'}</div>
<div><span className="font-medium">Longueur:</span> {sale.photo_ticket?.length || 0}</div>
</div>
</div> </div>
</div> </div>
</div> </div>