fix: resolve React Hook dependency warnings in useEffect

Fixed all 5 ESLint warnings by wrapping functions with useCallback and adding proper dependencies:
- app/admin/tirages/page.tsx: checkExistingDraw, loadParticipants
- app/admin/utilisateurs/[id]/page.tsx: loadUserDetails
- app/historique/page.tsx: loadUserTickets, filterTickets
- app/mes-lots/page.tsx: loadTickets
- components/admin/UserManagement.tsx: loadUsers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/admin/tirages/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Card } from '@/components/ui/Card';
 import Button from '@/components/Button';
 import toast from 'react-hot-toast';
@@ -79,13 +79,7 @@ export default function TiragesPage() {
   const [prizeValue, setPrizeValue] = useState('360');
   const [allowRedraw, setAllowRedraw] = useState(false);
 
-  useEffect(() => {
+  const checkExistingDraw = useCallback(async () => {
-    checkExistingDraw();
-    // Charger automatiquement les participants au chargement de la page
-    loadParticipants();
-  }, []);
-
-  const checkExistingDraw = async () => {
     try {
       const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
       const response = await fetch(`${API_BASE_URL}/draw/check-existing`, {
@@ -102,9 +96,9 @@ export default function TiragesPage() {
     } catch (error) {
       console.error('Erreur:', error);
     }
-  };
+  }, []);
 
-  const loadParticipants = async () => {
+  const loadParticipants = useCallback(async () => {
     setLoading(true);
     try {
       const token = localStorage.getItem('auth_token') || localStorage.getItem('token');
@@ -128,7 +122,13 @@ export default function TiragesPage() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [minTickets, verifiedOnly]);
+
+  useEffect(() => {
+    checkExistingDraw();
+    // Charger automatiquement les participants au chargement de la page
+    loadParticipants();
+  }, [checkExistingDraw, loadParticipants]);
 
   const conductDraw = async () => {
     if (participants.length === 0) {

app/admin/utilisateurs/[id]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { adminService } from '@/services/admin.service';
 import { User } from '@/types';
@@ -16,11 +16,7 @@ export default function UserDetailsPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
+  const loadUserDetails = useCallback(async () => {
-    loadUserDetails();
-  }, [userId]);
-
-  const loadUserDetails = async () => {
     try {
       setLoading(true);
       setError(null);
@@ -32,7 +28,11 @@ export default function UserDetailsPage() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [userId]);
+
+  useEffect(() => {
+    loadUserDetails();
+  }, [loadUserDetails]);
 
   const getRoleBadgeColor = (role: string) => {
     switch (role) {

app/historique/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useAuth } from "@/contexts/AuthContext";
 import { useRouter } from "next/navigation";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
@@ -26,22 +26,7 @@ export default function HistoriquePage() {
     rejected: 0,
   });
 
-  useEffect(() => {
+  const loadUserTickets = useCallback(async () => {
-    if (!authLoading && !isAuthenticated) {
-      router.push(ROUTES.LOGIN);
-      return;
-    }
-
-    if (isAuthenticated) {
-      loadUserTickets();
-    }
-  }, [authLoading, isAuthenticated, router]);
-
-  useEffect(() => {
-    filterTickets();
-  }, [tickets, filter, searchQuery]);
-
-  const loadUserTickets = async () => {
     try {
       const response = await gameService.getMyTickets(1, 1000);
       const ticketsData = response?.data || [];
@@ -59,9 +44,9 @@ export default function HistoriquePage() {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, []);
 
-  const filterTickets = () => {
+  const filterTickets = useCallback(() => {
     let result = [...tickets];
 
     if (filter !== 'ALL') {
@@ -75,7 +60,22 @@ export default function HistoriquePage() {
     }
 
     setFilteredTickets(result);
-  };
+  }, [tickets, filter, searchQuery]);
+
+  useEffect(() => {
+    if (!authLoading && !isAuthenticated) {
+      router.push(ROUTES.LOGIN);
+      return;
+    }
+
+    if (isAuthenticated) {
+      loadUserTickets();
+    }
+  }, [authLoading, isAuthenticated, router, loadUserTickets]);
+
+  useEffect(() => {
+    filterTickets();
+  }, [filterTickets]);
 
   if (authLoading || isLoading) {
     return (

app/mes-lots/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useAuth } from "@/contexts/AuthContext";
 import { useGame } from "@/hooks/useGame";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
@@ -29,13 +29,7 @@ export default function HistoriquePage() {
   const [totalPages, setTotalPages] = useState(1);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
+  const loadTickets = useCallback(async () => {
-    if (isAuthenticated && user?.role?.toLowerCase() === "client") {
-      loadTickets();
-    }
-  }, [isAuthenticated, user, currentPage]);
-
-  const loadTickets = async () => {
     try {
       setError(null);
       console.log('🎫 Chargement des tickets, page:', currentPage);
@@ -55,7 +49,13 @@ export default function HistoriquePage() {
       setError('Erreur lors du chargement de vos tickets.');
       setTickets([]);
     }
-  };
+  }, [getMyTickets, currentPage]);
+
+  useEffect(() => {
+    if (isAuthenticated && user?.role?.toLowerCase() === "client") {
+      loadTickets();
+    }
+  }, [isAuthenticated, user, loadTickets]);
 
   if (!isAuthenticated || user?.role?.toLowerCase() !== "client") {
     return (

components/admin/UserManagement.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { adminService } from '@/services/admin.service';
 import { User, CreateEmployeeData, UpdateUserData, PaginatedResponse } from '@/types';
@@ -29,11 +29,7 @@ export default function UserManagement() {
 
   const [userFormData, setUserFormData] = useState<UpdateUserData>({});
 
-  useEffect(() => {
+  const loadUsers = useCallback(async () => {
-    loadUsers();
-  }, [page, filterRole]);
-
-  const loadUsers = async () => {
     try {
       setLoading(true);
       setError(null);
@@ -50,7 +46,11 @@ export default function UserManagement() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [page, filterRole]);
+
+  useEffect(() => {
+    loadUsers();
+  }, [loadUsers]);
 
   const handleCreateEmployee = async (e: React.FormEvent) => {
     e.preventDefault();