mirror of
https://github.com/R0m1k3/Regisflow.git
synced 2026-10-13 02:06:35 +02:00
Enhance user interface with mobile optimizations and visual improvements
Adds CSS keyframes and mobile-first responsive utilities in index.css, adjusts styles in NewSaleForm.tsx and SaleDetailsModal.tsx and SalesHistory.tsx. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/b77c9129-16e4-4c03-a447-09edfb2aa967.jpg
This commit is contained in:
michaelschal committed
1 parent
f64493d9bb
commit
d3e263bf05
4 files changed
+377
-70
No files matched your search
@@ -177,9 +177,9 @@ export default function NewSaleForm() {
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
|
||||
{/* Seller Information */}
|
||||
<div className="modern-card bg-muted/30 mobile-form-section rounded-xl border-l-4 border-primary">
|
||||
<div className="modern-card bg-muted bg-opacity-30 mobile-form-section rounded-xl border-l-4 border-primary">
|
||||
<h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
|
||||
<div className="p-1.5 sm:p-2 bg-primary/10 rounded-lg">
|
||||
<div className="p-1.5 sm:p-2 bg-primary bg-opacity-10 rounded-lg">
|
||||
<User className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
|
||||
</div>
|
||||
<span className="truncate">Informations Vendeur</span>
|
||||
@@ -215,9 +215,9 @@ export default function NewSaleForm() {
|
||||
</div>
|
||||
|
||||
{/* Product Information */}
|
||||
<div className="modern-card bg-blue-50/50 mobile-form-section rounded-xl border-l-4 border-blue-500">
|
||||
<div className="modern-card bg-blue-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-blue-500">
|
||||
<h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
|
||||
<div className="p-1.5 sm:p-2 bg-blue-500/10 rounded-lg">
|
||||
<div className="p-1.5 sm:p-2 bg-blue-500 bg-opacity-10 rounded-lg">
|
||||
<Package className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
|
||||
</div>
|
||||
<span className="truncate">Informations Produit</span>
|
||||
|
||||
@@ -16,25 +16,25 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Détails de la Vente</DialogTitle>
|
||||
<DialogContent className="mobile-modal-content max-w-4xl max-h-[90vh] overflow-y-auto slide-in-up">
|
||||
<DialogHeader className="mobile-padding">
|
||||
<DialogTitle className="responsive-title">Détails de la Vente</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="mobile-spacing mobile-padding">
|
||||
{/* Seller Information */}
|
||||
<div className="border-l-4 border-primary pl-4">
|
||||
<h4 className="font-medium text-gray-900 mb-2">Informations Vendeur</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="mobile-form-section border-l-4 border-primary pl-4">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Product Information */}
|
||||
<div className="border-l-4 border-info pl-4">
|
||||
<h4 className="font-medium text-gray-900 mb-2">Informations Produit</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="mobile-form-section border-l-4 border-blue-500 pl-4">
|
||||
<h4 className="responsive-subtitle text-gray-900 mb-3">Informations Produit</h4>
|
||||
<div className="mobile-form-row responsive-body">
|
||||
<div><span className="font-medium">Type d'article:</span> {sale.typeArticle}</div>
|
||||
<div>
|
||||
<span className="font-medium">Catégorie:</span>{' '}
|
||||
@@ -48,9 +48,9 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
|
||||
</div>
|
||||
|
||||
{/* Customer Information */}
|
||||
<div className="border-l-4 border-success pl-4">
|
||||
<h4 className="font-medium text-gray-900 mb-2">Informations Client</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="mobile-form-section border-l-4 border-green-500 pl-4">
|
||||
<h4 className="responsive-subtitle text-gray-900 mb-3">Informations Client</h4>
|
||||
<div className="mobile-form-row responsive-body">
|
||||
<div><span className="font-medium">Nom:</span> {sale.nom}</div>
|
||||
<div><span className="font-medium">Prénom:</span> {sale.prenom}</div>
|
||||
<div>
|
||||
@@ -63,9 +63,9 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
|
||||
</div>
|
||||
|
||||
{/* Identity Document */}
|
||||
<div className="border-l-4 border-yellow-500 pl-4">
|
||||
<h4 className="font-medium text-gray-900 mb-2">Pièce d'Identité</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="mobile-form-section border-l-4 border-yellow-500 pl-4">
|
||||
<h4 className="responsive-subtitle text-gray-900 mb-3">Pièce d'Identité</h4>
|
||||
<div className="mobile-form-row responsive-body">
|
||||
<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">Autorité de délivrance:</span> {sale.autoriteDelivrance || 'Non spécifiée'}</div>
|
||||
@@ -77,9 +77,9 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
|
||||
</div>
|
||||
|
||||
{/* Photos */}
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<h4 className="font-medium text-gray-900 mb-2">Photos de la Pièce d'Identité</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="mobile-form-section border-l-4 border-purple-500 pl-4">
|
||||
<h4 className="responsive-subtitle text-gray-900 mb-3">Photos de la Pièce d'Identité</h4>
|
||||
<div className="mobile-form-row">
|
||||
<div>
|
||||
<span className="text-sm font-medium">Photo Recto:</span>
|
||||
{sale.photoRecto ? (
|
||||
|
||||
@@ -264,7 +264,7 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
|
||||
</CardHeader>
|
||||
<CardContent className="mobile-card-content mobile-form-responsive">
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-end mobile-form-section bg-muted/30 rounded-xl border border-border/50">
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-end mobile-form-section bg-muted bg-opacity-30 rounded-xl border border-border border-opacity-50">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 flex-1 w-full">
|
||||
<div>
|
||||
<label className="responsive-caption font-medium">Date de début</label>
|
||||
|
||||
Reference in new issue
Block a user