ajout page envoi mails groupes

src/app/admin/campaigns/[id]/send-emails/page.tsx

@@ -0,0 +1,465 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Campaign, Participant } from '@/types';
+import { campaignService, participantService, settingsService } from '@/lib/services';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Progress } from '@/components/ui/progress';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, Mail, Send, CheckCircle, XCircle, Clock, Users } from 'lucide-react';
+import AuthGuard from '@/components/AuthGuard';
+import Footer from '@/components/Footer';
+
+export const dynamic = 'force-dynamic';
+
+interface EmailProgress {
+  participant: Participant;
+  status: 'pending' | 'sending' | 'sent' | 'error';
+  error?: string;
+}
+
+function SendEmailsPageContent() {
+  const params = useParams();
+  const router = useRouter();
+  const campaignId = params.id as string;
+  
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+  const [emailProgress, setEmailProgress] = useState<EmailProgress[]>([]);
+  const [defaultSubject, setDefaultSubject] = useState('');
+  const [defaultMessage, setDefaultMessage] = useState('');
+  const [smtpConfigured, setSmtpConfigured] = useState(false);
+
+  useEffect(() => {
+    loadData();
+  }, [campaignId]);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const [campaignData, participantsData, smtpSettings] = await Promise.all([
+        campaignService.getById(campaignId),
+        participantService.getByCampaign(campaignId),
+        settingsService.getSmtpSettings()
+      ]);
+      
+      setCampaign(campaignData);
+      setParticipants(participantsData);
+      setSmtpConfigured(!!(smtpSettings.host && smtpSettings.username && smtpSettings.password));
+      
+      // Initialiser le message par défaut
+      if (campaignData) {
+        setDefaultSubject(`Votez pour la campagne "${campaignData.title}"`);
+        setDefaultMessage(`Bonjour,
+
+Vous êtes invité(e) à participer au vote pour la campagne "${campaignData.title}".
+
+${campaignData.description}
+
+Pour voter, cliquez sur le lien suivant :
+[LIEN_DE_VOTE]
+
+Vous disposez d'un budget de ${campaignData.budget_per_user}€ à répartir entre les propositions selon vos préférences.
+
+Merci de votre participation !
+
+Cordialement,`);
+      }
+      
+      // Initialiser le progrès des emails
+      setEmailProgress(participantsData.map(participant => ({
+        participant,
+        status: 'pending' as const
+      })));
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSendAllEmails = async () => {
+    if (!campaign || !defaultSubject.trim() || !defaultMessage.trim()) {
+      return;
+    }
+
+    setSending(true);
+    
+    for (let i = 0; i < participants.length; i++) {
+      const participant = participants[i];
+      
+      // Mettre à jour le statut à "sending"
+      setEmailProgress(prev => prev.map(p => 
+        p.participant.id === participant.id 
+          ? { ...p, status: 'sending' as const }
+          : p
+      ));
+
+      try {
+        // Générer le lien de vote
+        const voteUrl = participant.short_id 
+          ? `${window.location.origin}/v/${participant.short_id}`
+          : `${window.location.origin}/v/EN_ATTENTE`;
+
+        // Remplacer le placeholder dans le message
+        const personalizedMessage = defaultMessage.replace('[LIEN_DE_VOTE]', voteUrl);
+
+        // Récupérer les paramètres SMTP
+        const smtpSettings = await settingsService.getSmtpSettings();
+        
+        if (!smtpSettings.host || !smtpSettings.username || !smtpSettings.password) {
+          throw new Error('Configuration SMTP manquante');
+        }
+
+        // Envoyer l'email via l'API
+        const response = await fetch('/api/send-participant-email', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            smtpSettings,
+            toEmail: participant.email,
+            toName: `${participant.first_name} ${participant.last_name}`,
+            subject: defaultSubject.trim(),
+            message: personalizedMessage.trim(),
+            campaignTitle: campaign.title,
+            voteUrl
+          }),
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+          // Mettre à jour le statut à "sent"
+          setEmailProgress(prev => prev.map(p => 
+            p.participant.id === participant.id 
+              ? { ...p, status: 'sent' as const }
+              : p
+          ));
+        } else {
+          throw new Error(result.error || 'Erreur lors de l\'envoi');
+        }
+      } catch (error) {
+        // Mettre à jour le statut à "error"
+        setEmailProgress(prev => prev.map(p => 
+          p.participant.id === participant.id 
+            ? { ...p, status: 'error' as const, error: error instanceof Error ? error.message : 'Erreur inconnue' }
+            : p
+        ));
+      }
+
+      // Attendre 1 seconde avant l'email suivant
+      if (i < participants.length - 1) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+    }
+    
+    setSending(false);
+  };
+
+  const getStatusIcon = (status: EmailProgress['status']) => {
+    switch (status) {
+      case 'pending':
+        return <Clock className="w-4 h-4 text-slate-400" />;
+      case 'sending':
+        return <Mail className="w-4 h-4 text-blue-500 animate-pulse" />;
+      case 'sent':
+        return <CheckCircle className="w-4 h-4 text-green-500" />;
+      case 'error':
+        return <XCircle className="w-4 h-4 text-red-500" />;
+    }
+  };
+
+  const getStatusBadge = (status: EmailProgress['status']) => {
+    switch (status) {
+      case 'pending':
+        return <Badge variant="secondary">En attente</Badge>;
+      case 'sending':
+        return <Badge variant="default" className="bg-blue-500">En cours</Badge>;
+      case 'sent':
+        return <Badge variant="default" className="bg-green-500">Envoyé</Badge>;
+      case 'error':
+        return <Badge variant="destructive">Erreur</Badge>;
+    }
+  };
+
+  const sentCount = emailProgress.filter(p => p.status === 'sent').length;
+  const errorCount = emailProgress.filter(p => p.status === 'error').length;
+  const progressPercentage = participants.length > 0 ? (sentCount / participants.length) * 100 : 0;
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center h-64">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
+              <p className="text-slate-600 dark:text-slate-400">Chargement...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!campaign) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">Campagne non trouvée</h1>
+            <Button onClick={() => router.back()}>
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Retour
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (campaign.status !== 'voting') {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+              Cette fonctionnalité n'est disponible que pour les campagnes en mode vote
+            </h1>
+            <p className="text-slate-600 dark:text-slate-400 mb-6">
+              La campagne "{campaign.title}" est actuellement en mode "{campaign.status}".
+            </p>
+            <Button onClick={() => router.back()}>
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Retour
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!smtpConfigured) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+        <div className="container mx-auto px-4 py-8">
+          <div className="max-w-2xl mx-auto">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+                Configuration SMTP requise
+              </h1>
+              <p className="text-slate-600 dark:text-slate-400">
+                Vous devez configurer les paramètres SMTP avant de pouvoir envoyer des emails.
+              </p>
+            </div>
+            
+            <Card>
+              <CardContent className="p-6">
+                <Alert>
+                  <Mail className="h-4 w-4" />
+                  <AlertDescription>
+                    Veuillez configurer les paramètres SMTP dans les paramètres de l'application avant de pouvoir envoyer des emails aux participants.
+                  </AlertDescription>
+                </Alert>
+                
+                <div className="flex gap-4 mt-6">
+                  <Button onClick={() => router.push('/admin/settings')}>
+                    Configurer SMTP
+                  </Button>
+                  <Button variant="outline" onClick={() => router.back()}>
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    Retour
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2">
+                Envoyer des emails aux participants
+              </h1>
+              <p className="text-slate-600 dark:text-slate-400">
+                Campagne : {campaign.title}
+              </p>
+            </div>
+            <Button variant="outline" onClick={() => router.back()}>
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Retour
+            </Button>
+          </div>
+
+          {/* Statistiques */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center">
+                  <Users className="h-8 w-8 text-slate-600 dark:text-slate-400 mr-3" />
+                  <div>
+                    <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Participants</p>
+                    <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participants.length}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center">
+                  <CheckCircle className="h-8 w-8 text-green-500 mr-3" />
+                  <div>
+                    <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Envoyés</p>
+                    <p className="text-2xl font-bold text-green-600">{sentCount}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center">
+                  <XCircle className="h-8 w-8 text-red-500 mr-3" />
+                  <div>
+                    <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Erreurs</p>
+                    <p className="text-2xl font-bold text-red-600">{errorCount}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Configuration de l'email */}
+          <Card className="mb-8">
+            <CardHeader>
+              <CardTitle>Configuration de l'email</CardTitle>
+              <CardDescription>
+                Personnalisez le message qui sera envoyé à tous les participants. Utilisez [LIEN_DE_VOTE] pour insérer automatiquement le lien de vote de chaque participant.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label htmlFor="subject">Sujet de l'email</Label>
+                <input
+                  id="subject"
+                  type="text"
+                  value={defaultSubject}
+                  onChange={(e) => setDefaultSubject(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100"
+                  placeholder="Sujet de l'email"
+                />
+              </div>
+              
+              <div>
+                <Label htmlFor="message">Message</Label>
+                <Textarea
+                  id="message"
+                  value={defaultMessage}
+                  onChange={(e) => setDefaultMessage(e.target.value)}
+                  rows={12}
+                  placeholder="Message de l'email..."
+                  className="w-full"
+                />
+              </div>
+              
+              <div className="flex gap-4">
+                <Button 
+                  onClick={handleSendAllEmails}
+                  disabled={sending || !defaultSubject.trim() || !defaultMessage.trim() || participants.length === 0}
+                  className="flex-1"
+                >
+                  <Send className="w-4 h-4 mr-2" />
+                  {sending ? 'Envoi en cours...' : 'Envoyer à tous'}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Progression */}
+          {sending && (
+            <Card className="mb-8">
+              <CardHeader>
+                <CardTitle>Progression de l'envoi</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-slate-600 dark:text-slate-400">
+                      {sentCount} / {participants.length} emails envoyés
+                    </span>
+                    <span className="text-sm text-slate-600 dark:text-slate-400">
+                      {Math.round(progressPercentage)}%
+                    </span>
+                  </div>
+                  <Progress value={progressPercentage} className="w-full" />
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Liste des participants */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Participants</CardTitle>
+              <CardDescription>
+                Suivi de l'envoi des emails pour chaque participant
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {emailProgress.map((progress) => (
+                  <div key={progress.participant.id} className="flex items-center justify-between p-3 border border-slate-200 dark:border-slate-700 rounded-lg">
+                    <div className="flex items-center space-x-3">
+                      {getStatusIcon(progress.status)}
+                      <div>
+                        <p className="font-medium text-slate-900 dark:text-slate-100">
+                          {progress.participant.first_name} {progress.participant.last_name}
+                        </p>
+                        <p className="text-sm text-slate-600 dark:text-slate-400">
+                          {progress.participant.email}
+                        </p>
+                        {progress.error && (
+                          <p className="text-sm text-red-600 dark:text-red-400">
+                            {progress.error}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    {getStatusBadge(progress.status)}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      
+      <Footer />
+    </div>
+  );
+}
+
+export default function SendEmailsPage() {
+  return (
+    <AuthGuard>
+      <SendEmailsPageContent />
+    </AuthGuard>
+  );
+}

src/app/admin/page.tsx

@@ -14,7 +14,7 @@ import { Badge } from '@/components/ui/badge';
 
 import AuthGuard from '@/components/AuthGuard';
 import Footer from '@/components/Footer';
-import { FolderOpen, Users, FileText, Plus, BarChart3, Settings, Check, Copy } from 'lucide-react';
+import { FolderOpen, Users, FileText, Plus, BarChart3, Settings, Check, Copy, Mail } from 'lucide-react';
 import StatusSwitch from '@/components/StatusSwitch';
 import { MarkdownContent } from '@/components/MarkdownContent';
 
@@ -437,8 +437,16 @@ function AdminPageContent() {
                           </div>
                         </div>
                       ) : (campaign.status === 'voting' || campaign.status === 'closed') ? (
-                        /* Bouton Statistiques pour les campagnes en vote/fermées */
-                        <div className="flex justify-center">
+                        /* Boutons pour les campagnes en vote/fermées */
+                        <div className="flex justify-center gap-3">
+                          {campaign.status === 'voting' && (
+                            <Button asChild variant="outline" className="border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300">
+                              <Link href={`/admin/campaigns/${campaign.id}/send-emails`}>
+                                <Mail className="w-4 h-4 mr-2" />
+                                Envoyer emails
+                              </Link>
+                            </Button>
+                          )}
                           <Button asChild variant="outline" className="border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300">
                             <Link href={`/admin/campaigns/${campaign.id}/stats`}>
                               <BarChart3 className="w-4 h-4 mr-2" />