- améliore l'export/import (format de fichiers en paramètres, amélioration de la robustesse, )

- ajout bouton tout effacer des propositions et participants

src/components/ClearAllParticipantsModal.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertTriangle, Trash2 } from 'lucide-react';
+import { BaseModal } from './base/BaseModal';
+import { ErrorDisplay } from './base/ErrorDisplay';
+
+interface ClearAllParticipantsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  campaignTitle?: string;
+  participantCount: number;
+}
+
+export default function ClearAllParticipantsModal({ 
+  isOpen, 
+  onClose, 
+  onConfirm,
+  campaignTitle,
+  participantCount 
+}: ClearAllParticipantsModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleConfirm = async () => {
+    setLoading(true);
+    setError('');
+    
+    try {
+      await onConfirm();
+      onClose();
+    } catch (error) {
+      console.error('Erreur lors de la suppression des participants:', error);
+      setError('Erreur lors de la suppression des participants.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!loading) {
+      setError('');
+      onClose();
+    }
+  };
+
+  const footer = (
+    <>
+      <Button variant="outline" onClick={handleClose} disabled={loading}>
+        Annuler
+      </Button>
+      <Button 
+        variant="destructive" 
+        onClick={handleConfirm} 
+        disabled={loading}
+        className="bg-red-600 hover:bg-red-700"
+      >
+        {loading ? (
+          <>
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+            Suppression...
+          </>
+        ) : (
+          <>
+            <Trash2 className="w-4 h-4 mr-2" />
+            Tout effacer
+          </>
+        )}
+      </Button>
+    </>
+  );
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Effacer tous les participants"
+      description={`Cette action supprimera définitivement tous les participants de la campagne.${campaignTitle ? ` Campagne : ${campaignTitle}` : ''}`}
+      footer={footer}
+      maxWidth="sm:max-w-md"
+    >
+      <ErrorDisplay error={error} />
+
+      <Alert className="border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
+        <AlertTriangle className="h-4 w-4 text-red-600 dark:text-red-400" />
+        <AlertDescription className="text-red-800 dark:text-red-200">
+          <strong>Attention :</strong> Cette action est irréversible. 
+          {participantCount > 0 && (
+            <>
+              {' '}Vous êtes sur le point de supprimer <strong>{participantCount} participant{participantCount > 1 ? 's' : ''}</strong>.
+            </>
+          )}
+        </AlertDescription>
+      </Alert>
+
+      <div className="mt-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
+        <h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
+          Que sera supprimé :
+        </h4>
+        <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-1">
+          <li>• Tous les participants de la campagne</li>
+          <li>• Les noms et prénoms des participants</li>
+          <li>• Les adresses email des participants</li>
+          <li>• Tous les votes associés aux participants</li>
+          <li>• Les liens de vote personnalisés</li>
+        </ul>
+      </div>
+
+      <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+        <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
+          Ce qui sera conservé :
+        </h4>
+        <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
+          <li>• La campagne elle-même</li>
+          <li>• Les propositions</li>
+          <li>• Les paramètres de la campagne</li>
+          <li>• L'historique des modifications</li>
+        </ul>
+      </div>
+    </BaseModal>
+  );
+}

src/components/ClearAllPropositionsModal.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertTriangle, Trash2 } from 'lucide-react';
+import { BaseModal } from './base/BaseModal';
+import { ErrorDisplay } from './base/ErrorDisplay';
+
+interface ClearAllPropositionsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  campaignTitle?: string;
+  propositionCount: number;
+}
+
+export default function ClearAllPropositionsModal({ 
+  isOpen, 
+  onClose, 
+  onConfirm,
+  campaignTitle,
+  propositionCount 
+}: ClearAllPropositionsModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleConfirm = async () => {
+    setLoading(true);
+    setError('');
+    
+    try {
+      await onConfirm();
+      onClose();
+    } catch (error) {
+      console.error('Erreur lors de la suppression des propositions:', error);
+      setError('Erreur lors de la suppression des propositions.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!loading) {
+      setError('');
+      onClose();
+    }
+  };
+
+  const footer = (
+    <>
+      <Button variant="outline" onClick={handleClose} disabled={loading}>
+        Annuler
+      </Button>
+      <Button 
+        variant="destructive" 
+        onClick={handleConfirm} 
+        disabled={loading}
+        className="bg-red-600 hover:bg-red-700"
+      >
+        {loading ? (
+          <>
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+            Suppression...
+          </>
+        ) : (
+          <>
+            <Trash2 className="w-4 h-4 mr-2" />
+            Tout effacer
+          </>
+        )}
+      </Button>
+    </>
+  );
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Effacer toutes les propositions"
+      description={`Cette action supprimera définitivement toutes les propositions de la campagne.${campaignTitle ? ` Campagne : ${campaignTitle}` : ''}`}
+      footer={footer}
+      maxWidth="sm:max-w-md"
+    >
+      <ErrorDisplay error={error} />
+
+      <Alert className="border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
+        <AlertTriangle className="h-4 w-4 text-red-600 dark:text-red-400" />
+        <AlertDescription className="text-red-800 dark:text-red-200">
+          <strong>Attention :</strong> Cette action est irréversible. 
+          {propositionCount > 0 && (
+            <>
+              {' '}Vous êtes sur le point de supprimer <strong>{propositionCount} proposition{propositionCount > 1 ? 's' : ''}</strong>.
+            </>
+          )}
+        </AlertDescription>
+      </Alert>
+
+      <div className="mt-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
+        <h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
+          Que sera supprimé :
+        </h4>
+        <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-1">
+          <li>• Toutes les propositions de la campagne</li>
+          <li>• Les titres et descriptions des propositions</li>
+          <li>• Les informations des auteurs (noms, emails)</li>
+          <li>• Toutes les données associées</li>
+        </ul>
+      </div>
+
+      <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+        <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
+          Ce qui sera conservé :
+        </h4>
+        <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
+          <li>• La campagne elle-même</li>
+          <li>• Les participants</li>
+          <li>• Les votes déjà effectués</li>
+          <li>• Les paramètres de la campagne</li>
+        </ul>
+      </div>
+    </BaseModal>
+  );
+}

src/components/ExportFileFormatSelect.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+
+export type ExportFileFormat = 'ods' | 'csv' | 'xls';
+
+interface ExportFileFormatSelectProps {
+  value: ExportFileFormat;
+  onValueChange: (value: ExportFileFormat) => void;
+  disabled?: boolean;
+}
+
+export function ExportFileFormatSelect({ 
+  value, 
+  onValueChange, 
+  disabled = false 
+}: ExportFileFormatSelectProps) {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor="export-file-format">Format de fichier d'export</Label>
+      <Select value={value} onValueChange={onValueChange} disabled={disabled}>
+        <SelectTrigger id="export-file-format" className="w-full">
+          <SelectValue placeholder="Sélectionner un format" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="ods" className="flex flex-col items-start py-3">
+            <span className="font-medium">ODS (OpenDocument)</span>
+            <span className="text-sm text-slate-500">Recommandé - Libre et compatible</span>
+          </SelectItem>
+          <SelectItem value="csv" className="flex flex-col items-start py-3">
+            <span className="font-medium">CSV (Valeurs séparées par des virgules)</span>
+            <span className="text-sm text-slate-500">Universel - Compatible avec tous les tableurs</span>
+          </SelectItem>
+          <SelectItem value="xls" className="flex flex-col items-start py-3">
+            <span className="font-medium">XLS (Microsoft Office)</span>
+            <span className="text-sm text-slate-500">Propriétaire - Compatible Excel</span>
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <p className="text-sm text-slate-600 dark:text-slate-400">
+        Le format ODS est recommandé car il est libre, ouvert et compatible avec la plupart des tableurs.
+      </p>
+    </div>
+  );
+}

src/components/ExportPropositionsButton.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Download } from 'lucide-react';
+import { Proposition } from '@/types';
+import { generatePropositionsExport, downloadExportFile, formatPropositionsFilename } from '@/lib/export-utils';
+
+interface ExportPropositionsButtonProps {
+  propositions: Proposition[];
+  campaignTitle: string;
+  disabled?: boolean;
+}
+
+export default function ExportPropositionsButton({ 
+  propositions, 
+  campaignTitle, 
+  disabled = false 
+}: ExportPropositionsButtonProps) {
+  const [isExporting, setIsExporting] = useState(false);
+
+  const handleExport = async () => {
+    if (propositions.length === 0) {
+      alert('Aucune proposition à exporter.');
+      return;
+    }
+
+    setIsExporting(true);
+    
+    try {
+      // Générer le fichier dans le format configuré
+      const { data, format } = await generatePropositionsExport(propositions, campaignTitle);
+      
+      // Créer le nom de fichier avec l'extension appropriée
+      const filename = formatPropositionsFilename(campaignTitle, format);
+      
+      // Télécharger le fichier
+      downloadExportFile(data, filename, format);
+      
+    } catch (error) {
+      console.error('Erreur lors de l\'export des propositions:', error);
+      alert('Erreur lors de l\'export des propositions. Veuillez réessayer.');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <Button 
+      variant="outline" 
+      onClick={handleExport}
+      disabled={disabled || isExporting || propositions.length === 0}
+      className="flex items-center gap-2"
+    >
+      <Download className="w-4 h-4" />
+      {isExporting ? 'Export en cours...' : 'Exporter'}
+    </Button>
+  );
+}

src/components/ExportStatsButton.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Download, FileSpreadsheet } from 'lucide-react';
-import { generateVoteExportODS, downloadODS, formatFilename, ExportData, AnonymizationLevel } from '@/lib/export-utils';
+import { generateVoteExport, downloadExportFile, formatFilename, ExportData, AnonymizationLevel } from '@/lib/export-utils';
 import { settingsService } from '@/lib/services';
 
 interface ExportStatsButtonProps {
@@ -46,10 +46,10 @@ export function ExportStatsButton({
         anonymizationLevel
       };
 
-      const odsData = generateVoteExportODS(exportData);
-      const filename = formatFilename(campaignTitle);
+      const { data, format } = await generateVoteExport(exportData);
+      const filename = formatFilename(campaignTitle, format);
       
-      downloadODS(odsData, filename);
+      downloadExportFile(data, filename, format);
     } catch (error) {
       console.error('Erreur lors de l\'export:', error);
       // Ici on pourrait ajouter une notification d'erreur
@@ -75,7 +75,7 @@ export function ExportStatsButton({
       ) : (
         <>
           <FileSpreadsheet className="h-4 w-4" />
-          Exporter les votes (ODS)
+          Exporter les votes
         </>
       )}
     </Button>

src/components/ImportFileModal.tsx

@@ -121,7 +121,7 @@ export default function ImportFileModal({
             Téléchargez le modèle
           </span>
         </div>
-        <Button variant="outline" size="sm" onClick={() => downloadTemplate(type)}>
+        <Button variant="outline" size="sm" onClick={async () => await downloadTemplate(type)}>
           <Download className="w-4 h-4 mr-1" />
           Modèle
         </Button>
@@ -158,7 +158,7 @@ export default function ImportFileModal({
               <table className="w-full text-sm table-fixed">
                 <thead className="bg-slate-50 dark:bg-slate-800">
                   <tr>
-                    {Object.keys(preview[0] || {}).map((header) => (
+                    {getExpectedColumns(type).map((header) => (
                       <th key={header} className="px-2 py-1 text-left font-medium truncate">
                         {header}
                       </th>
@@ -168,9 +168,9 @@ export default function ImportFileModal({
                 <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)}
+                      {getExpectedColumns(type).map((header) => (
+                        <td key={header} className="px-2 py-1 text-xs truncate">
+                          {String(row[header] || '')}
                         </td>
                       ))}
                     </tr>

src/components/ShareModal.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useRef, useState } from 'react';
+import QRCode from 'qrcode';
+import { BaseModal } from './base/BaseModal';
+import { Button } from './ui/button';
+import { Copy, Check, Share2 } from 'lucide-react';
+
+interface ShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  campaignTitle: string;
+  depositUrl: string;
+}
+
+export default function ShareModal({ 
+  isOpen, 
+  onClose, 
+  campaignTitle, 
+  depositUrl 
+}: ShareModalProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [copied, setCopied] = useState(false);
+  const [qrCodeError, setQrCodeError] = useState<string | null>(null);
+  const [qrCodeLoading, setQrCodeLoading] = useState(false);
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen && depositUrl) {
+      setQrCodeLoading(true);
+      setQrCodeError(null);
+      setQrCodeDataUrl(null);
+
+      // Essayer d'abord de générer en tant que Data URL
+      QRCode.toDataURL(depositUrl, {
+        width: 300,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#FFFFFF'
+        },
+        errorCorrectionLevel: 'M'
+      }).then((dataUrl) => {
+        console.log('QR code généré avec succès (DataURL) pour:', depositUrl);
+        setQrCodeDataUrl(dataUrl);
+        setQrCodeLoading(false);
+      }).catch((err) => {
+        console.error('Erreur lors de la génération du QR code (DataURL):', err);
+        
+        // Fallback: essayer avec le canvas
+        if (canvasRef.current) {
+          const canvas = canvasRef.current;
+          const ctx = canvas.getContext('2d');
+          if (ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+          }
+
+          QRCode.toCanvas(canvas, depositUrl, {
+            width: 300,
+            margin: 2,
+            color: {
+              dark: '#000000',
+              light: '#FFFFFF'
+            },
+            errorCorrectionLevel: 'M'
+          }).then(() => {
+            console.log('QR code généré avec succès (Canvas) pour:', depositUrl);
+            setQrCodeLoading(false);
+          }).catch((canvasErr) => {
+            console.error('Erreur lors de la génération du QR code (Canvas):', canvasErr);
+            setQrCodeError('Erreur lors de la génération du QR code');
+            setQrCodeLoading(false);
+          });
+        } else {
+          setQrCodeError('Erreur lors de la génération du QR code');
+          setQrCodeLoading(false);
+        }
+      });
+    }
+  }, [isOpen, depositUrl]);
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(depositUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Erreur lors de la copie:', err);
+    }
+  };
+
+  const retryQrCode = () => {
+    if (depositUrl) {
+      setQrCodeLoading(true);
+      setQrCodeError(null);
+      setQrCodeDataUrl(null);
+
+      QRCode.toDataURL(depositUrl, {
+        width: 300,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#FFFFFF'
+        },
+        errorCorrectionLevel: 'M'
+      }).then((dataUrl) => {
+        setQrCodeDataUrl(dataUrl);
+        setQrCodeLoading(false);
+      }).catch((err) => {
+        console.error('Erreur lors de la génération du QR code:', err);
+        setQrCodeError('Erreur lors de la génération du QR code');
+        setQrCodeLoading(false);
+      });
+    }
+  };
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={
+        <div className="flex items-center gap-2">
+          <Share2 className="w-5 h-5 text-blue-600" />
+          Partager le lien de dépôt
+        </div>
+      }
+      description={`Pour partager le lien de dépôt public de propositions pour la campagne "${campaignTitle}"`}
+      maxWidth="sm:max-w-[600px]"
+      maxHeight="max-h-[90vh]"
+    >
+      <div className="space-y-6">
+        {/* Lien de dépôt */}
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+            Lien de dépôt public
+          </h3>
+          <div className="flex items-center gap-2 p-3 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+            <div className="flex-1 text-sm font-mono text-slate-700 dark:text-slate-300 break-all">
+              {depositUrl}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleCopyLink}
+              className="shrink-0"
+            >
+              {copied ? (
+                <>
+                  <Check className="w-4 h-4 mr-2" />
+                  Copié !
+                </>
+              ) : (
+                <>
+                  <Copy className="w-4 h-4 mr-2" />
+                  Copier
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* QR Code */}
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+            QR Code
+          </h3>
+          <div className="flex justify-center p-6 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-700">
+            {qrCodeLoading && (
+              <div className="flex items-center justify-center w-[300px] h-[300px]">
+                <div className="text-slate-500">Génération du QR code...</div>
+              </div>
+            )}
+            {qrCodeError && (
+              <div className="flex items-center justify-center w-[300px] h-[300px]">
+                <div className="text-red-500 text-center">
+                  <div className="text-sm">{qrCodeError}</div>
+                  <Button 
+                    variant="outline" 
+                    size="sm" 
+                    className="mt-2"
+                    onClick={retryQrCode}
+                  >
+                    Réessayer
+                  </Button>
+                </div>
+              </div>
+            )}
+            {qrCodeDataUrl && !qrCodeLoading && !qrCodeError && (
+              <img 
+                src={qrCodeDataUrl}
+                alt="QR Code pour le lien de dépôt"
+                className="border border-slate-200 dark:border-slate-600 rounded-lg"
+                width={300}
+                height={300}
+              />
+            )}
+            <canvas 
+              ref={canvasRef}
+              width={300}
+              height={300}
+              className={`border border-slate-200 dark:border-slate-600 rounded-lg ${qrCodeDataUrl || qrCodeLoading || qrCodeError ? 'hidden' : 'block'}`}
+            />
+          </div>
+          <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
+            Scannez ce QR code pour accéder directement au formulaire de dépôt
+          </p>
+        </div>
+
+        {/* Instructions */}
+        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
+            Comment partager ?
+          </h4>
+          <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
+            <li>• Copiez le lien ci-dessus pour le partager par email, SMS ou message</li>
+            <li>• Imprimez ou affichez le QR code pour un accès rapide</li>
+            <li>• Partagez l'image du QR code sur les réseaux sociaux</li>
+          </ul>
+        </div>
+      </div>
+    </BaseModal>
+  );
+}