mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-23 15:08:22 +02:00
Revise the PDF upload interface for improved user experience
Refactor the BAP modal to completely redesign the PDF file upload component with improved styling and interaction, including a new drag-and-drop zone and a file selection button. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cfbfe47c-0c9a-4ebf-8a41-2937407eccff Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cfbfe47c-0c9a-4ebf-8a41-2937407eccff/ECRh2Iu
This commit is contained in:
michaelschal committed
1 parent
307b2a5135
commit
25a3c42345
2 files changed
+96
-75
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -620,101 +620,122 @@ export default function Sidebar() {
|
|||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Zone de sélection de fichier améliorée */}
|
{/* NOUVELLE zone de sélection de fichier */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-3">
|
||||||
<Label className="text-sm font-medium">Fichier PDF à envoyer</Label>
|
<Label className="text-sm font-semibold text-gray-800">Fichier PDF</Label>
|
||||||
|
|
||||||
{/* Zone de drop et bouton de sélection */}
|
{!selectedFile ? (
|
||||||
<div className="relative">
|
<div
|
||||||
<input
|
className="border-2 border-dashed border-blue-300 rounded-xl p-8 bg-gradient-to-br from-blue-50 to-indigo-50 hover:from-blue-100 hover:to-indigo-100 transition-all cursor-pointer group"
|
||||||
id="pdf-upload"
|
onClick={() => document.getElementById('hidden-file-input')?.click()}
|
||||||
type="file"
|
>
|
||||||
accept=".pdf"
|
<div className="text-center space-y-4">
|
||||||
onChange={handleFileChange}
|
<div className="mx-auto h-16 w-16 bg-blue-500 rounded-full flex items-center justify-center group-hover:bg-blue-600 transition-colors">
|
||||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
|
<FileUp className="h-8 w-8 text-white" />
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={`
|
|
||||||
border-2 border-dashed rounded-lg p-6 text-center transition-colors
|
|
||||||
${selectedFile
|
|
||||||
? 'border-green-300 bg-green-50'
|
|
||||||
: 'border-gray-300 bg-gray-50 hover:border-blue-400 hover:bg-blue-50'
|
|
||||||
}
|
|
||||||
`}>
|
|
||||||
{selectedFile ? (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-center">
|
|
||||||
<FileUp className="h-8 w-8 text-green-600" />
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
<p className="font-medium text-green-700">{selectedFile.name}</p>
|
|
||||||
<p className="text-gray-600">{(selectedFile.size / 1024 / 1024).toFixed(2)} MB</p>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedFile(null);
|
|
||||||
const input = document.getElementById('pdf-upload') as HTMLInputElement;
|
|
||||||
if (input) input.value = '';
|
|
||||||
}}
|
|
||||||
className="mt-2"
|
|
||||||
>
|
|
||||||
Changer de fichier
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<div>
|
||||||
<div className="space-y-2">
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">
|
||||||
<div className="flex items-center justify-center">
|
Cliquez ici pour choisir un fichier PDF
|
||||||
<FileUp className="h-8 w-8 text-gray-400" />
|
</h3>
|
||||||
</div>
|
<p className="text-sm text-gray-600 mb-4">
|
||||||
<div className="text-sm">
|
Ou glissez-déposez votre fichier dans cette zone
|
||||||
<p className="font-medium text-gray-700">Cliquez pour sélectionner un fichier PDF</p>
|
</p>
|
||||||
<p className="text-gray-500">ou glissez-déposez votre fichier ici</p>
|
<div className="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
|
||||||
</div>
|
<FileUp className="h-5 w-5 mr-2" />
|
||||||
<div className="mt-3">
|
Parcourir les fichiers
|
||||||
<Button variant="outline" className="pointer-events-none">
|
|
||||||
<FileUp className="h-4 w-4 mr-2" />
|
|
||||||
Choisir un fichier PDF
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<div className="border-2 border-green-300 rounded-xl p-6 bg-gradient-to-br from-green-50 to-emerald-50">
|
||||||
{selectedFile && (
|
<div className="flex items-center space-x-4">
|
||||||
<div className="text-xs text-gray-500 flex items-center gap-1">
|
<div className="h-12 w-12 bg-green-500 rounded-full flex items-center justify-center">
|
||||||
<svg className="h-3 w-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
<FileUp className="h-6 w-6 text-white" />
|
||||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
</div>
|
||||||
</svg>
|
<div className="flex-1">
|
||||||
Fichier PDF sélectionné avec succès
|
<h4 className="font-semibold text-green-800">{selectedFile.name}</h4>
|
||||||
|
<p className="text-sm text-green-600">
|
||||||
|
{(selectedFile.size / 1024 / 1024).toFixed(2)} MB • PDF
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedFile(null);
|
||||||
|
const input = document.getElementById('hidden-file-input') as HTMLInputElement;
|
||||||
|
if (input) input.value = '';
|
||||||
|
}}
|
||||||
|
className="border-green-300 text-green-700 hover:bg-green-100"
|
||||||
|
>
|
||||||
|
Changer
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Input caché */}
|
||||||
|
<input
|
||||||
|
id="hidden-file-input"
|
||||||
|
type="file"
|
||||||
|
accept=".pdf"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
{/* Sélection destinataire améliorée */}
|
||||||
<Label htmlFor="recipient">Envoyer à</Label>
|
<div className="space-y-3">
|
||||||
|
<Label className="text-sm font-semibold text-gray-800">Envoyer à</Label>
|
||||||
<Select value={selectedRecipient} onValueChange={setSelectedRecipient}>
|
<Select value={selectedRecipient} onValueChange={setSelectedRecipient}>
|
||||||
<SelectTrigger id="recipient" className="mt-1">
|
<SelectTrigger className="h-12 border-2 border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
|
||||||
<SelectValue placeholder="Sélectionner un destinataire" />
|
<SelectValue placeholder="🎯 Choisir le destinataire" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="Prissela">Prissela</SelectItem>
|
<SelectItem value="Prissela" className="py-3">
|
||||||
<SelectItem value="Célia">Célia</SelectItem>
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-sm font-medium text-purple-600">P</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-medium">Prissela</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="Célia" className="py-3">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="h-8 w-8 bg-pink-100 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-sm font-medium text-pink-600">C</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-medium">Célia</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end gap-2">
|
{/* Boutons améliorés */}
|
||||||
<Button variant="outline" onClick={() => setShowBapModal(false)}>
|
<div className="flex gap-3 pt-4 border-t border-gray-200">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowBapModal(false)}
|
||||||
|
className="flex-1 h-12 border-2 border-gray-200 hover:border-gray-300"
|
||||||
|
>
|
||||||
Annuler
|
Annuler
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={handleSendBap}
|
onClick={handleSendBap}
|
||||||
disabled={!selectedFile || !selectedRecipient || isUploading}
|
disabled={!selectedFile || !selectedRecipient || isUploading}
|
||||||
className="flex items-center gap-2"
|
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white font-medium"
|
||||||
>
|
>
|
||||||
<Send className="h-4 w-4" />
|
{isUploading ? (
|
||||||
{isUploading ? 'Envoi...' : 'Envoyer'}
|
<>
|
||||||
|
<div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full mr-2"></div>
|
||||||
|
Envoi en cours...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Send className="h-4 w-4 mr-2" />
|
||||||
|
Envoyer le BAP
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user