Added Function to config Profil

app/api/auth/me/route.ts

@@ -17,6 +17,7 @@ export async function GET() {
         id: true,
         email: true,
         name: true,
+        photoUrl: true,
         roleId: true,
         role: {
           select: {

app/api/user/profile/route.ts

@@ -0,0 +1,131 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getCurrentUser } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+import { hashPassword, verifyPassword } from '@/lib/auth';
+
+// GET - Récupérer le profil de l'utilisateur
+export async function GET() {
+  try {
+    const user = await getCurrentUser();
+    if (!user) {
+      return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
+    }
+
+    const userProfile = await prisma.user.findUnique({
+      where: { id: user.id },
+      select: {
+        id: true,
+        email: true,
+        name: true,
+        photoUrl: true,
+        role: {
+          select: {
+            id: true,
+            name: true,
+            description: true,
+          },
+        },
+      },
+    });
+
+    return NextResponse.json(userProfile);
+  } catch (error) {
+    console.error('Erreur lors de la récupération du profil:', error);
+    return NextResponse.json(
+      { error: 'Erreur serveur' },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Mettre à jour le profil de l'utilisateur
+export async function PUT(request: NextRequest) {
+  try {
+    const user = await getCurrentUser();
+    if (!user) {
+      return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { name, email, photoUrl, currentPassword, newPassword } = body;
+
+    // Récupérer l'utilisateur complet pour vérifier le mot de passe si nécessaire
+    const currentUser = await prisma.user.findUnique({
+      where: { id: user.id },
+    });
+
+    if (!currentUser) {
+      return NextResponse.json({ error: 'Utilisateur non trouvé' }, { status: 404 });
+    }
+
+    // Vérifier si l'email est déjà utilisé par un autre utilisateur
+    if (email && email !== currentUser.email) {
+      const existingUser = await prisma.user.findUnique({
+        where: { email },
+      });
+      if (existingUser) {
+        return NextResponse.json(
+          { error: 'Cet email est déjà utilisé' },
+          { status: 400 }
+        );
+      }
+    }
+
+    // Vérifier le mot de passe actuel si un nouveau mot de passe est fourni
+    if (newPassword) {
+      if (!currentPassword) {
+        return NextResponse.json(
+          { error: 'Le mot de passe actuel est requis pour changer le mot de passe' },
+          { status: 400 }
+        );
+      }
+
+      const isValidPassword = await verifyPassword(currentPassword, currentUser.password);
+      if (!isValidPassword) {
+        return NextResponse.json(
+          { error: 'Mot de passe actuel incorrect' },
+          { status: 400 }
+        );
+      }
+    }
+
+    // Préparer les données à mettre à jour
+    const updateData: any = {};
+    if (name !== undefined) updateData.name = name;
+    if (email !== undefined) updateData.email = email;
+    if (photoUrl !== undefined) updateData.photoUrl = photoUrl;
+    if (newPassword) {
+      updateData.password = await hashPassword(newPassword);
+    }
+
+    // Mettre à jour l'utilisateur
+    const updatedUser = await prisma.user.update({
+      where: { id: user.id },
+      data: updateData,
+      select: {
+        id: true,
+        email: true,
+        name: true,
+        photoUrl: true,
+        role: {
+          select: {
+            id: true,
+            name: true,
+            description: true,
+          },
+        },
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      user: updatedUser,
+    });
+  } catch (error) {
+    console.error('Erreur lors de la mise à jour du profil:', error);
+    return NextResponse.json(
+      { error: 'Erreur serveur' },
+      { status: 500 }
+    );
+  }
+}

app/api/users/route.ts

@@ -15,6 +15,7 @@ export async function GET(request: NextRequest) {
         id: true,
         email: true,
         name: true,
+        photoUrl: true,
         roleId: true,
         role: {
           select: {

app/dashboard/parametres/compte/page.tsx

@@ -0,0 +1,24 @@
+import { redirect } from 'next/navigation';
+import { getCurrentUser } from '@/lib/auth';
+import { hasPageAccess } from '@/lib/permissions';
+import DashboardLayout from '@/components/DashboardLayout';
+import ModifierCompteContent from '@/components/ModifierCompteContent';
+
+export default async function ModifierComptePage() {
+  const user = await getCurrentUser();
+
+  if (!user) {
+    redirect('/login');
+  }
+
+  const hasAccess = await hasPageAccess(user.id, '/dashboard/parametres');
+  if (!hasAccess) {
+    redirect('/login');
+  }
+
+  return (
+    <DashboardLayout user={user}>
+      <ModifierCompteContent />
+    </DashboardLayout>
+  );
+}

components/ConfigurationContent.tsx

@@ -345,6 +345,7 @@ export default function ConfigurationContent() {
       id: string;
       email: string;
       name: string | null;
+      photoUrl?: string | null;
       roleId: string | null;
       role: {
         id: string;
@@ -495,9 +496,17 @@ export default function ConfigurationContent() {
                   >
                     <div className="flex items-center gap-4">
                       {/* Avatar */}
+                      {user.photoUrl ? (
+                        <img
+                          src={user.photoUrl}
+                          alt={user.name || user.email}
+                          className="w-12 h-12 rounded-full object-cover flex-shrink-0 border-2 border-gray-200"
+                        />
+                      ) : (
                         <div className="w-12 h-12 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center text-white font-semibold flex-shrink-0">
                           {getUserInitials(user.name, user.email)}
                         </div>
+                      )}
 
                       {/* Informations */}
                       <div className="flex-1 min-w-0">

components/DashboardLayout.tsx

@@ -10,6 +10,7 @@ interface User {
   id: string;
   email: string;
   name: string | null;
+  photoUrl?: string | null;
   roleId?: string | null;
 }
 
@@ -71,7 +72,14 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
     fetcher
   );
 
+  // Récupérer le profil complet de l'utilisateur pour la photo
+  const { data: userProfile } = useSWR<{ photoUrl?: string | null }>(
+    '/api/user/profile',
+    fetcher
+  );
+
   const accessiblePages = userPagesData?.pages || [];
+  const userPhotoUrl = userProfile?.photoUrl;
 
   // Calculer le nombre total de messages non lus
   const totalUnreadCount = Array.isArray(conversations) 
@@ -377,9 +385,17 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
                   onClick={() => setShowProfileMenu(!showProfileMenu)}
                   className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 border border-gray-200 transition-all duration-200 hover:shadow-sm group"
                 >
+                  {userPhotoUrl ? (
+                    <img
+                      src={userPhotoUrl}
+                      alt={user.name || 'Utilisateur'}
+                      className="w-9 h-9 rounded-lg object-cover shadow-sm border border-gray-200"
+                    />
+                  ) : (
                     <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-lblue to-dblue flex items-center justify-center shadow-sm">
                       <span className="text-white text-sm font-semibold">{getUserInitials()}</span>
                     </div>
+                  )}
                   <div className="hidden md:block text-left">
                     <div className="text-sm font-medium text-gray-900">{user.name || 'Utilisateur'}</div>
                     <div className="text-xs text-gray-500">{user.email}</div>

components/ModifierCompteContent.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useNotification } from './NotificationProvider';
+import useSWR from 'swr';
+
+interface UserProfile {
+  id: string;
+  email: string;
+  name: string | null;
+  photoUrl: string | null;
+  role: {
+    id: string;
+    name: string;
+    description: string | null;
+  } | null;
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export default function ModifierCompteContent() {
+  const router = useRouter();
+  const { showNotification } = useNotification();
+  const { data: userProfile, mutate } = useSWR<UserProfile>('/api/user/profile', fetcher);
+
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    photoUrl: '',
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+  });
+
+  useEffect(() => {
+    if (userProfile) {
+      setFormData({
+        name: userProfile.name || '',
+        email: userProfile.email || '',
+        photoUrl: userProfile.photoUrl || '',
+        currentPassword: '',
+        newPassword: '',
+        confirmPassword: '',
+      });
+    }
+  }, [userProfile]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Vérifier la taille du fichier (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        showNotification('L\'image est trop grande (max 5MB)', 'error');
+        return;
+      }
+
+      // Vérifier le type de fichier
+      if (!file.type.startsWith('image/')) {
+        showNotification('Veuillez sélectionner une image', 'error');
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setFormData((prev) => ({ ...prev, photoUrl: reader.result as string }));
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      // Vérifier que les mots de passe correspondent si un nouveau mot de passe est fourni
+      if (formData.newPassword) {
+        if (formData.newPassword !== formData.confirmPassword) {
+          showNotification('Les mots de passe ne correspondent pas', 'error');
+          setLoading(false);
+          return;
+        }
+
+        if (formData.newPassword.length < 6) {
+          showNotification('Le mot de passe doit contenir au moins 6 caractères', 'error');
+          setLoading(false);
+          return;
+        }
+      }
+
+      const updateData: any = {
+        name: formData.name.trim() || null,
+        email: formData.email.trim(),
+        photoUrl: formData.photoUrl || null,
+      };
+
+      if (formData.newPassword) {
+        updateData.currentPassword = formData.currentPassword;
+        updateData.newPassword = formData.newPassword;
+      }
+
+      const response = await fetch('/api/user/profile', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(updateData),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        showNotification('Profil mis à jour avec succès', 'success');
+        mutate();
+        // Réinitialiser les champs de mot de passe
+        setFormData((prev) => ({
+          ...prev,
+          currentPassword: '',
+          newPassword: '',
+          confirmPassword: '',
+        }));
+      } else {
+        showNotification(data.error || 'Erreur lors de la mise à jour', 'error');
+      }
+    } catch (error) {
+      console.error('Erreur:', error);
+      showNotification('Erreur lors de la mise à jour', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getUserInitials = () => {
+    if (userProfile?.name) {
+      const names = userProfile.name.split(' ');
+      if (names.length >= 2) {
+        return `${names[0].charAt(0)}${names[1].charAt(0)}`.toUpperCase();
+      }
+      return userProfile.name.charAt(0).toUpperCase();
+    }
+    return userProfile?.email?.charAt(0).toUpperCase() || 'U';
+  };
+
+  if (!userProfile) {
+    return (
+      <div className="p-6">
+        <div className="text-center py-12 text-gray-500">Chargement...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-8">
+        <button
+          onClick={() => router.back()}
+          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Retour aux paramètres
+        </button>
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Modifier mon compte</h1>
+        <p className="text-sm text-gray-600">
+          Mettez à jour vos informations personnelles et votre mot de passe
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="max-w-3xl">
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-8">
+          {/* Photo de profil */}
+          <div>
+            <label className="block text-sm font-semibold text-gray-900 mb-4">
+              Photo de profil
+            </label>
+            <div className="flex items-center gap-6">
+              <div className="relative">
+                {formData.photoUrl ? (
+                  <img
+                    src={formData.photoUrl}
+                    alt="Photo de profil"
+                    className="w-24 h-24 rounded-full object-cover border-4 border-gray-200"
+                  />
+                ) : (
+                  <div className="w-24 h-24 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center border-4 border-gray-200">
+                    <span className="text-white text-2xl font-bold">{getUserInitials()}</span>
+                  </div>
+                )}
+              </div>
+              <div className="flex-1">
+                <label className="block">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleImageUpload}
+                    className="hidden"
+                  />
+                  <span className="inline-flex items-center gap-2 px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer transition-colors">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    Choisir une image
+                  </span>
+                </label>
+                {formData.photoUrl && (
+                  <button
+                    type="button"
+                    onClick={() => setFormData((prev) => ({ ...prev, photoUrl: '' }))}
+                    className="mt-2 text-sm text-red-600 hover:text-red-700"
+                  >
+                    Supprimer la photo
+                  </button>
+                )}
+                <p className="text-xs text-gray-500 mt-2">JPG, PNG ou GIF (max 5MB)</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Nom et prénom */}
+          <div>
+            <label htmlFor="name" className="block text-sm font-semibold text-gray-900 mb-2">
+              Nom et prénom
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleInputChange}
+              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
+              placeholder="Votre nom complet"
+            />
+          </div>
+
+          {/* Email */}
+          <div>
+            <label htmlFor="email" className="block text-sm font-semibold text-gray-900 mb-2">
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleInputChange}
+              required
+              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
+              placeholder="votre@email.com"
+            />
+          </div>
+
+          {/* Section changement de mot de passe */}
+          <div className="pt-6 border-t border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Changer le mot de passe</h3>
+            <p className="text-sm text-gray-600 mb-6">
+              Laissez ces champs vides si vous ne souhaitez pas changer votre mot de passe
+            </p>
+
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="currentPassword" className="block text-sm font-semibold text-gray-900 mb-2">
+                  Mot de passe actuel
+                </label>
+                <input
+                  type="password"
+                  id="currentPassword"
+                  name="currentPassword"
+                  value={formData.currentPassword}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
+                  placeholder="Entrez votre mot de passe actuel"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="newPassword" className="block text-sm font-semibold text-gray-900 mb-2">
+                  Nouveau mot de passe
+                </label>
+                <input
+                  type="password"
+                  id="newPassword"
+                  name="newPassword"
+                  value={formData.newPassword}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
+                  placeholder="Au moins 6 caractères"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-900 mb-2">
+                  Confirmer le nouveau mot de passe
+                </label>
+                <input
+                  type="password"
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
+                  placeholder="Confirmez votre nouveau mot de passe"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Boutons d'action */}
+          <div className="flex items-center justify-end gap-4 pt-6 border-t border-gray-200">
+            <button
+              type="button"
+              onClick={() => router.back()}
+              className="px-6 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              {loading ? (
+                <>
+                  <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Enregistrement...
+                </>
+              ) : (
+                <>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                  Enregistrer les modifications
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

components/ParametresContent.tsx

@@ -10,6 +10,7 @@ interface User {
   id: string;
   email: string;
   name: string | null;
+  photoUrl?: string | null;
   roleId: string | null;
   role: {
     id: string;
@@ -328,16 +329,27 @@ export default function ParametresContent() {
         <div>
           <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
             <div className="text-center mb-6">
+              {user?.photoUrl ? (
+                <img
+                  src={user.photoUrl}
+                  alt={user.name || 'Utilisateur'}
+                  className="w-20 h-20 rounded-full object-cover mx-auto mb-4 shadow-lg border-4 border-white"
+                />
+              ) : (
                 <div className="w-20 h-20 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center mx-auto mb-4 shadow-lg">
                   <span className="text-white text-2xl font-bold">{getUserInitials()}</span>
                 </div>
+              )}
               <h2 className="text-xl font-bold text-gray-900 mb-1">
                 {user?.name || 'Utilisateur'}
               </h2>
               <p className="text-sm text-gray-500">{user?.email}</p>
             </div>
 
-            <button className="w-full px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-lg text-left transition-colors border border-gray-200">
+            <button
+              onClick={() => router.push('/dashboard/parametres/compte')}
+              className="w-full px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-lg text-left transition-colors border border-gray-200"
+            >
               <div className="flex items-center gap-3">
                 <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />

lib/auth.ts

@@ -55,6 +55,7 @@ export async function getCurrentUser() {
       id: true,
       email: true,
       name: true,
+      photoUrl: true,
     },
   });
 }

prisma/schema.prisma

@@ -15,6 +15,7 @@ model User {
   email     String   @unique
   password  String
   name      String?
+  photoUrl  String?
   roleId    String?
   role      Role?    @relation(fields: [roleId], references: [id], onDelete: SetNull)
   createdAt DateTime @default(now())