import ods/xls en + de csv

fix modal behavior on close, fine tune import file modal

src/app/admin/campaigns/[id]/participants/page.tsx

@@ -7,7 +7,7 @@ import { campaignService, participantService, voteService } from '@/lib/services
 import AddParticipantModal from '@/components/AddParticipantModal';
 import EditParticipantModal from '@/components/EditParticipantModal';
 import DeleteParticipantModal from '@/components/DeleteParticipantModal';
-import ImportCSVModal from '@/components/ImportCSVModal';
+import ImportFileModal from '@/components/ImportFileModal';
 import SendParticipantEmailModal from '@/components/SendParticipantEmailModal';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -166,7 +166,7 @@ function CampaignParticipantsPageContent() {
             <div className="flex gap-2">
               <Button variant="outline" onClick={() => setShowImportModal(true)}>
                 <Upload className="w-4 h-4 mr-2" />
-                Importer CSV
+                Importer
               </Button>
               <Button onClick={() => setShowAddModal(true)} size="lg">
                 ✨ Nouveau participant
@@ -409,7 +409,7 @@ function CampaignParticipantsPageContent() {
           />
         )}
 
-        <ImportCSVModal
+        <ImportFileModal
           isOpen={showImportModal}
           onClose={() => setShowImportModal(false)}
           onImport={handleImportParticipants}

src/app/admin/campaigns/[id]/propositions/page.tsx

@@ -7,7 +7,7 @@ import { campaignService, propositionService } from '@/lib/services';
 import AddPropositionModal from '@/components/AddPropositionModal';
 import EditPropositionModal from '@/components/EditPropositionModal';
 import DeletePropositionModal from '@/components/DeletePropositionModal';
-import ImportCSVModal from '@/components/ImportCSVModal';
+import ImportFileModal from '@/components/ImportFileModal';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -154,7 +154,7 @@ function CampaignPropositionsPageContent() {
             <div className="flex gap-2">
               <Button variant="outline" onClick={() => setShowImportModal(true)}>
                 <Upload className="w-4 h-4 mr-2" />
-                Importer CSV
+                Importer
               </Button>
               <Button onClick={() => setShowAddModal(true)} size="lg">
                 ✨ Nouvelle proposition
@@ -323,7 +323,7 @@ function CampaignPropositionsPageContent() {
           />
         )}
 
-        <ImportCSVModal
+        <ImportFileModal
           isOpen={showImportModal}
           onClose={() => setShowImportModal(false)}
           onImport={handleImportPropositions}

src/app/admin/campaigns/[id]/stats/page.tsx

@@ -362,7 +362,7 @@ function CampaignStatsPageContent() {
                     <div key={stat.proposition.id} className="border rounded-lg p-6 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                       <div className="flex items-start justify-between mb-4">
                         <div className="flex-1">
-                          <div className="flex items-center gap-3 mb-2">
+                          <div className="flex items-center gap-3 mb-4">
                             <Badge variant="outline" className="text-xs">
                               #{index + 1}
                             </Badge>
@@ -370,9 +370,6 @@ function CampaignStatsPageContent() {
                               {stat.proposition.title}
                             </h3>
                           </div>
-                          <p className="text-slate-600 dark:text-slate-300 text-sm">
-                            {stat.proposition.description}
-                          </p>
                         </div>
                         {index === 0 && stat.averageAmount > 0 && (
                           <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">

src/app/campaigns/[id]/vote/[participantId]/page.tsx

@@ -244,7 +244,7 @@ export default function PublicVotePage() {
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">
               <div>
-                <h1 className="text-lg font-semibold text-gray-900">Vote - {campaign?.title}</h1>
+                <h1 className="text-lg font-semibold text-gray-900">{campaign?.title}</h1>
                 <p className="text-lg font-bold text-indigo-600">
                   {participant?.first_name} {participant?.last_name}
                 </p>
@@ -287,7 +287,7 @@ export default function PublicVotePage() {
           <div className="grid grid-cols-1 md:grid-cols-1 gap-6">
             <div>
               <h3 className="text-sm font-medium text-gray-500">Description</h3>
-              <p className="mt-1 text-sm text-gray-900">{campaign?.description}</p>
+              <p className="mt-1 text-sm text-gray-900 whitespace-pre-wrap">{campaign?.description}</p>
               {isRandomOrder && (
                 <div className="mt-3 p-2 bg-blue-50 border border-blue-200 rounded-md">
                   <p className="text-xs text-blue-700 flex items-center gap-1">
@@ -319,7 +319,7 @@ export default function PublicVotePage() {
                       <h3 className="text-lg font-medium text-gray-900 mb-2">
                         {proposition.title}
                       </h3>
-                      <p className="text-sm text-gray-600 mb-4">
+                      <p className="text-sm text-gray-600 mb-4 whitespace-pre-wrap">
                         {proposition.description}
                       </p>
                     </div>
@@ -359,7 +359,7 @@ export default function PublicVotePage() {
                             const position = ((index + 1) / spendingTiers.length) * 100;
                             return (
                               <div 
-                                key={tier} 
+                                key={`tier-${index}-${tier}`} 
                                 className="absolute text-center" 
                                 style={{ 
                                   left: `${position}%`,

src/components/AddParticipantModal.tsx

@@ -58,8 +58,18 @@ export default function AddParticipantModal({ isOpen, onClose, onSuccess, campai
     }));
   };
 
+  const handleClose = () => {
+    setFormData({
+      first_name: '',
+      last_name: '',
+      email: ''
+    });
+    setError('');
+    onClose();
+  };
+
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle>Ajouter un participant</DialogTitle>
@@ -115,7 +125,7 @@ export default function AddParticipantModal({ isOpen, onClose, onSuccess, campai
           </div>
           
           <DialogFooter>
-            <Button type="button" variant="outline" onClick={onClose}>
+            <Button type="button" variant="outline" onClick={handleClose}>
               Annuler
             </Button>
             <Button type="submit" disabled={loading}>

src/components/AddPropositionModal.tsx

@@ -64,8 +64,20 @@ export default function AddPropositionModal({ isOpen, onClose, onSuccess, campai
     }));
   };
 
+  const handleClose = () => {
+    setFormData({
+      title: '',
+      description: '',
+      author_first_name: 'admin',
+      author_last_name: 'admin',
+      author_email: 'admin@example.com'
+    });
+    setError('');
+    onClose();
+  };
+
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle>Ajouter une proposition</DialogTitle>
@@ -149,7 +161,7 @@ export default function AddPropositionModal({ isOpen, onClose, onSuccess, campai
           </div>
           
           <DialogFooter>
-            <Button type="button" variant="outline" onClick={onClose}>
+            <Button type="button" variant="outline" onClick={handleClose}>
               Annuler
             </Button>
             <Button type="submit" disabled={loading}>

src/components/CreateCampaignModal.tsx

@@ -54,8 +54,19 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
     }));
   };
 
+  const handleClose = () => {
+    setFormData({
+      title: '',
+      description: '',
+      budget_per_user: '',
+      spending_tiers: ''
+    });
+    setError('');
+    onClose();
+  };
+
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle>Créer une nouvelle campagne</DialogTitle>
@@ -126,7 +137,7 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
           </div>
           
           <DialogFooter>
-            <Button type="button" variant="outline" onClick={onClose}>
+            <Button type="button" variant="outline" onClick={handleClose}>
               Annuler
             </Button>
             <Button type="submit" disabled={loading}>

src/components/ImportCSVModal.tsx

@@ -14,8 +14,9 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Upload, FileText, Download, AlertCircle } from 'lucide-react';
+import * as XLSX from 'xlsx';
 
-interface ImportCSVModalProps {
+interface ImportFileModalProps {
   isOpen: boolean;
   onClose: () => void;
   onImport: (data: any[]) => void;
@@ -23,13 +24,13 @@ interface ImportCSVModalProps {
   campaignTitle?: string;
 }
 
-export default function ImportCSVModal({ 
+export default function ImportFileModal({ 
   isOpen, 
   onClose, 
   onImport, 
   type, 
   campaignTitle 
-}: ImportCSVModalProps) {
+}: ImportFileModalProps) {
   const [file, setFile] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
@@ -38,13 +39,26 @@ export default function ImportCSVModal({
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
-      if (selectedFile.type !== 'text/csv' && !selectedFile.name.endsWith('.csv')) {
-        setError('Veuillez sélectionner un fichier CSV valide.');
+      // Vérifier le type de fichier
+      const isCSV = selectedFile.type === 'text/csv' || selectedFile.name.toLowerCase().endsWith('.csv');
+      const isODS = selectedFile.type === 'application/vnd.oasis.opendocument.spreadsheet' || 
+                   selectedFile.name.toLowerCase().endsWith('.ods') ||
+                   selectedFile.name.toLowerCase().endsWith('.xlsx') ||
+                   selectedFile.name.toLowerCase().endsWith('.xls');
+      
+      if (!isCSV && !isODS) {
+        setError('Veuillez sélectionner un fichier CSV, ODS, XLSX ou XLS valide.');
         return;
       }
+      
       setFile(selectedFile);
       setError('');
-      parseCSV(selectedFile);
+      
+      if (isCSV) {
+        parseCSV(selectedFile);
+      } else {
+        parseODS(selectedFile);
+      }
     }
   };
 
@@ -74,31 +88,100 @@ export default function ImportCSVModal({
     reader.readAsText(file);
   };
 
+  const parseODS = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const fileData = new Uint8Array(e.target?.result as ArrayBuffer);
+        const workbook = XLSX.read(fileData, { type: 'array' });
+        
+        // Prendre la première feuille
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        
+        // Convertir en JSON
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+        
+        if (jsonData.length < 2) {
+          setError('Le fichier ODS/Excel doit contenir au moins un en-tête et une ligne de données.');
+          return;
+        }
+
+        const headers = jsonData[0] as string[];
+        const rows = jsonData.slice(1) as any[][];
+        
+        const parsedData = rows.map(row => {
+          const rowData: any = {};
+          headers.forEach((header, index) => {
+            rowData[header] = row[index] || '';
+          });
+          return rowData;
+        });
+
+        setPreview(parsedData.slice(0, 5)); // Afficher les 5 premières lignes
+      } catch (error) {
+        setError('Erreur lors de la lecture du fichier ODS/Excel.');
+      }
+    };
+    reader.readAsArrayBuffer(file);
+  };
+
   const handleImport = async () => {
     if (!file) return;
     
     setLoading(true);
     try {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const text = e.target?.result as string;
-        const lines = text.split('\n').filter(line => line.trim());
-        const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
-        const data = lines.slice(1).map(line => {
-          const values = line.split(',').map(v => v.trim().replace(/"/g, ''));
-          const row: any = {};
-          headers.forEach((header, index) => {
-            row[header] = values[index] || '';
+      const isCSV = file.type === 'text/csv' || file.name.toLowerCase().endsWith('.csv');
+      
+      if (isCSV) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const text = e.target?.result as string;
+          const lines = text.split('\n').filter(line => line.trim());
+          const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
+          const data = lines.slice(1).map(line => {
+            const values = line.split(',').map(v => v.trim().replace(/"/g, ''));
+            const row: any = {};
+            headers.forEach((header, index) => {
+              row[header] = values[index] || '';
+            });
+            return row;
           });
-          return row;
-        });
 
-        onImport(data);
-        onClose();
-        setFile(null);
-        setPreview([]);
-      };
-      reader.readAsText(file);
+          onImport(data);
+          onClose();
+          setFile(null);
+          setPreview([]);
+        };
+        reader.readAsText(file);
+             } else {
+         const reader = new FileReader();
+         reader.onload = (e) => {
+           const fileData = new Uint8Array(e.target?.result as ArrayBuffer);
+           const workbook = XLSX.read(fileData, { type: 'array' });
+           
+           const sheetName = workbook.SheetNames[0];
+           const worksheet = workbook.Sheets[sheetName];
+           const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+           
+           const headers = jsonData[0] as string[];
+           const rows = jsonData.slice(1) as any[][];
+           
+           const parsedData = rows.map(row => {
+             const rowData: any = {};
+             headers.forEach((header, index) => {
+               rowData[header] = row[index] || '';
+             });
+             return rowData;
+           });
+
+           onImport(parsedData);
+           onClose();
+           setFile(null);
+           setPreview([]);
+         };
+         reader.readAsArrayBuffer(file);
+       }
     } catch (error) {
       setError('Erreur lors de l\'import du fichier.');
     } finally {
@@ -132,10 +215,10 @@ export default function ImportCSVModal({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Upload className="w-5 h-5" />
-            Importer des {type === 'propositions' ? 'propositions' : 'participants'} depuis CSV
+            Importer des {type === 'propositions' ? 'propositions' : 'participants'} depuis un fichier
           </DialogTitle>
           <DialogDescription>
-            Importez en masse des {type === 'propositions' ? 'propositions' : 'participants'} depuis un fichier CSV.
+            Importez en masse des {type === 'propositions' ? 'propositions' : 'participants'} depuis un fichier CSV, ODS, XLSX ou XLS.
             {campaignTitle && (
               <span className="block mt-1 font-medium">
                 Campagne : {campaignTitle}
@@ -171,11 +254,11 @@ export default function ImportCSVModal({
 
           {/* File upload */}
           <div className="space-y-2">
-            <Label htmlFor="csv-file">Sélectionner un fichier CSV</Label>
+            <Label htmlFor="file-upload">Sélectionner un fichier (CSV, ODS, XLSX, XLS)</Label>
             <Input
-              id="csv-file"
+              id="file-upload"
               type="file"
-              accept=".csv"
+              accept=".csv,.ods,.xlsx,.xls"
               onChange={handleFileChange}
               className="cursor-pointer"
             />

src/components/ImportFileModal.tsx

@@ -0,0 +1,331 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Upload, FileText, Download, AlertCircle } from 'lucide-react';
+import * as XLSX from 'xlsx';
+
+interface ImportFileModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onImport: (data: any[]) => void;
+  type: 'propositions' | 'participants';
+  campaignTitle?: string;
+}
+
+export default function ImportFileModal({ 
+  isOpen, 
+  onClose, 
+  onImport, 
+  type, 
+  campaignTitle 
+}: ImportFileModalProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [preview, setPreview] = useState<any[]>([]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      // Vérifier le type de fichier
+      const isCSV = selectedFile.type === 'text/csv' || selectedFile.name.toLowerCase().endsWith('.csv');
+      const isODS = selectedFile.type === 'application/vnd.oasis.opendocument.spreadsheet' || 
+                   selectedFile.name.toLowerCase().endsWith('.ods') ||
+                   selectedFile.name.toLowerCase().endsWith('.xlsx') ||
+                   selectedFile.name.toLowerCase().endsWith('.xls');
+      
+      if (!isCSV && !isODS) {
+        setError('Veuillez sélectionner un fichier valide (CSV, ODS, XLSX ou XLS).');
+        return;
+      }
+      
+      setFile(selectedFile);
+      setError('');
+      
+      if (isCSV) {
+        parseCSV(selectedFile);
+      } else {
+        parseODS(selectedFile);
+      }
+    }
+  };
+
+  const parseCSV = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const text = e.target?.result as string;
+      const lines = text.split('\n').filter(line => line.trim());
+      
+      if (lines.length < 2) {
+        setError('Le fichier doit contenir au moins un en-tête et une ligne de données.');
+        return;
+      }
+
+      const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
+      const data = lines.slice(1).map(line => {
+        const values = line.split(',').map(v => v.trim().replace(/"/g, ''));
+        const row: any = {};
+        headers.forEach((header, index) => {
+          row[header] = values[index] || '';
+        });
+        return row;
+      });
+
+      setPreview(data.slice(0, 5)); // Afficher les 5 premières lignes
+    };
+    reader.readAsText(file);
+  };
+
+  const parseODS = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const fileData = new Uint8Array(e.target?.result as ArrayBuffer);
+        const workbook = XLSX.read(fileData, { type: 'array' });
+        
+        // Prendre la première feuille
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        
+        // Convertir en JSON
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+        
+        if (jsonData.length < 2) {
+          setError('Le fichier doit contenir au moins un en-tête et une ligne de données.');
+          return;
+        }
+
+        const headers = jsonData[0] as string[];
+        const rows = jsonData.slice(1) as any[][];
+        
+        const parsedData = rows.map(row => {
+          const rowData: any = {};
+          headers.forEach((header, index) => {
+            rowData[header] = row[index] || '';
+          });
+          return rowData;
+        });
+
+        setPreview(parsedData.slice(0, 5)); // Afficher les 5 premières lignes
+      } catch (error) {
+        setError('Erreur lors de la lecture du fichier.');
+      }
+    };
+    reader.readAsArrayBuffer(file);
+  };
+
+  const handleImport = async () => {
+    if (!file) return;
+    
+    setLoading(true);
+    try {
+      const isCSV = file.type === 'text/csv' || file.name.toLowerCase().endsWith('.csv');
+      
+      if (isCSV) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const text = e.target?.result as string;
+          const lines = text.split('\n').filter(line => line.trim());
+          const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
+          const data = lines.slice(1).map(line => {
+            const values = line.split(',').map(v => v.trim().replace(/"/g, ''));
+            const row: any = {};
+            headers.forEach((header, index) => {
+              row[header] = values[index] || '';
+            });
+            return row;
+          });
+
+          onImport(data);
+          onClose();
+          setFile(null);
+          setPreview([]);
+        };
+        reader.readAsText(file);
+             } else {
+         const reader = new FileReader();
+         reader.onload = (e) => {
+           const fileData = new Uint8Array(e.target?.result as ArrayBuffer);
+           const workbook = XLSX.read(fileData, { type: 'array' });
+           
+           const sheetName = workbook.SheetNames[0];
+           const worksheet = workbook.Sheets[sheetName];
+           const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+           
+           const headers = jsonData[0] as string[];
+           const rows = jsonData.slice(1) as any[][];
+           
+           const parsedData = rows.map(row => {
+             const rowData: any = {};
+             headers.forEach((header, index) => {
+               rowData[header] = row[index] || '';
+             });
+             return rowData;
+           });
+
+           onImport(parsedData);
+           onClose();
+           setFile(null);
+           setPreview([]);
+         };
+         reader.readAsArrayBuffer(file);
+       }
+    } catch (error) {
+      setError('Erreur lors de l\'import du fichier.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getExpectedColumns = () => {
+    if (type === 'propositions') {
+      return ['title', 'description', 'author_first_name', 'author_last_name', 'author_email'];
+    } else {
+      return ['first_name', 'last_name', 'email'];
+    }
+  };
+
+  const downloadTemplate = () => {
+    const columns = getExpectedColumns();
+    const csvContent = columns.join(',') + '\n';
+    const blob = new Blob([csvContent], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `template_${type}.csv`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
+
+  const handleClose = () => {
+    setFile(null);
+    setPreview([]);
+    setError('');
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Upload className="w-5 h-5" />
+            Importer des {type === 'propositions' ? 'propositions' : 'participants'} depuis un fichier
+          </DialogTitle>
+          <DialogDescription>
+            Importez en masse des {type === 'propositions' ? 'propositions' : 'participants'} depuis un fichier CSV, ODS, XLSX ou XLS.
+            {campaignTitle && (
+              <span className="block mt-1 font-medium">
+                Campagne : {campaignTitle}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Template download */}
+          <div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
+            <div className="flex items-center gap-2">
+              <FileText className="w-4 h-4 text-slate-600" />
+              <span className="text-sm text-slate-600 dark:text-slate-300">
+                Téléchargez le modèle
+              </span>
+            </div>
+            <Button variant="outline" size="sm" onClick={downloadTemplate}>
+              <Download className="w-4 h-4 mr-1" />
+              Modèle
+            </Button>
+          </div>
+
+          {/* Expected columns */}
+          <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+            <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
+              Colonnes attendues :
+            </h4>
+            <div className="text-sm text-blue-800 dark:text-blue-200">
+              {getExpectedColumns().join(', ')}
+            </div>
+          </div>
+
+          {/* File upload */}
+          <div className="space-y-2">
+            <Label htmlFor="file-upload">Sélectionner un fichier (CSV, ODS, XLSX, XLS)</Label>
+            <Input
+              id="file-upload"
+              type="file"
+              accept=".csv,.ods,.xlsx,.xls"
+              onChange={handleFileChange}
+              className="cursor-pointer"
+            />
+          </div>
+
+          {/* Error message */}
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Preview */}
+          {preview.length > 0 && (
+            <div className="space-y-2">
+              <Label>Aperçu des données (5 premières lignes)</Label>
+              <div className="max-h-40 max-w-full overflow-auto border rounded-lg">
+                <div className="min-w-full">
+                  <table className="w-full text-sm table-fixed">
+                    <thead className="bg-slate-50 dark:bg-slate-800">
+                      <tr>
+                        {Object.keys(preview[0] || {}).map((header) => (
+                          <th key={header} className="px-2 py-1 text-left font-medium truncate">
+                            {header}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {preview.map((row, index) => (
+                        <tr key={index} className="border-t">
+                          {Object.values(row).map((value, cellIndex) => (
+                            <td key={cellIndex} className="px-2 py-1 text-xs truncate">
+                              {String(value)}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Annuler
+          </Button>
+          <Button 
+            onClick={handleImport} 
+            disabled={!file || loading}
+            className="min-w-[100px]"
+          >
+            {loading ? 'Import...' : 'Importer'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}