feat: add dashboard, projects, and persons pages with reusable components

Implemented the following:
- `DashboardPage`: displays an overview of stats, recent projects, and tabs for future analytics/reports.
- `ProjectsPage` and `PersonsPage`: include searchable tables, actions, and mobile-friendly card views.
- Integrated reusable components like `AuthLoading`, `DropdownMenu`, `Table`, and `Card`.

frontend/app/projects/[id]/edit/page.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { 
+  ArrowLeft,
+  Loader2,
+  Save
+} from "lucide-react";
+import { toast } from "sonner";
+
+// Type definitions
+interface ProjectFormData {
+  name: string;
+  description: string;
+}
+
+// Mock project data
+const getProjectData = (id: string) => {
+  return {
+    id: parseInt(id),
+    name: "Projet Formation Dev Web",
+    description: "Création de groupes pour la formation développement web",
+    date: "2025-05-15",
+  };
+};
+
+export default function EditProjectPage() {
+  const params = useParams();
+  const router = useRouter();
+  const projectId = params.id as string;
+  
+  const [project, setProject] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  
+  const { register, handleSubmit, formState: { errors }, reset } = useForm<ProjectFormData>();
+
+  useEffect(() => {
+    // Simulate API call to fetch project data
+    const fetchProject = async () => {
+      setLoading(true);
+      try {
+        // In a real app, this would be an API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const data = getProjectData(projectId);
+        setProject(data);
+        
+        // Reset form with project data
+        reset({
+          name: data.name,
+          description: data.description
+        });
+      } catch (error) {
+        console.error("Error fetching project:", error);
+        toast.error("Erreur lors du chargement du projet");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [projectId, reset]);
+
+  const onSubmit = async (data: ProjectFormData) => {
+    setIsSubmitting(true);
+    try {
+      // In a real app, this would be an API call to update the project
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      toast.success("Projet mis à jour avec succès");
+      router.push(`/projects/${projectId}`);
+    } catch (error) {
+      console.error("Error updating project:", error);
+      toast.error("Erreur lors de la mise à jour du projet");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (!project) {
+    return (
+      <div className="flex h-[50vh] flex-col items-center justify-center">
+        <p className="text-lg font-medium">Projet non trouvé</p>
+        <Button asChild className="mt-4">
+          <Link href="/projects">Retour aux projets</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon" asChild>
+          <Link href={`/projects/${projectId}`}>
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <h1 className="text-3xl font-bold">Modifier le projet</h1>
+      </div>
+
+      <Card>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <CardHeader>
+            <CardTitle>Informations du projet</CardTitle>
+            <CardDescription>
+              Modifiez les informations de votre projet
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Nom du projet</Label>
+              <Input
+                id="name"
+                placeholder="Ex: Formation Développement Web"
+                {...register("name", { 
+                  required: "Le nom du projet est requis",
+                  minLength: {
+                    value: 3,
+                    message: "Le nom doit contenir au moins 3 caractères"
+                  }
+                })}
+              />
+              {errors.name && (
+                <p className="text-sm text-destructive">{errors.name.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                placeholder="Décrivez votre projet..."
+                rows={4}
+                {...register("description", { 
+                  required: "La description du projet est requise",
+                  minLength: {
+                    value: 10,
+                    message: "La description doit contenir au moins 10 caractères"
+                  }
+                })}
+              />
+              {errors.description && (
+                <p className="text-sm text-destructive">{errors.description.message}</p>
+              )}
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-between">
+            <Button variant="outline" asChild>
+              <Link href={`/projects/${projectId}`}>Annuler</Link>
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Enregistrement...
+                </>
+              ) : (
+                <>
+                  <Save className="mr-2 h-4 w-4" />
+                  Enregistrer les modifications
+                </>
+              )}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}

frontend/app/projects/[id]/groups/auto-create/page.tsx

@@ -0,0 +1,432 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { 
+  ArrowLeft,
+  Loader2,
+  Wand2,
+  Save,
+  RefreshCw
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+
+// Mock project data (same as in the groups page)
+const getProjectData = (id: string) => {
+  return {
+    id: parseInt(id),
+    name: "Projet Formation Dev Web",
+    description: "Création de groupes pour la formation développement web",
+    date: "2025-05-15",
+    persons: [
+      { id: 1, name: "Jean Dupont", tags: ["Frontend", "React", "Junior"] },
+      { id: 2, name: "Marie Martin", tags: ["Backend", "Node.js", "Senior"] },
+      { id: 3, name: "Pierre Durand", tags: ["Fullstack", "JavaScript", "Medior"] },
+      { id: 4, name: "Sophie Lefebvre", tags: ["UX/UI", "Design", "Senior"] },
+      { id: 5, name: "Thomas Bernard", tags: ["Backend", "Java", "Senior"] },
+      { id: 6, name: "Julie Petit", tags: ["Frontend", "Vue", "Junior"] },
+      { id: 7, name: "Nicolas Moreau", tags: ["DevOps", "Docker", "Medior"] },
+      { id: 8, name: "Emma Dubois", tags: ["Frontend", "Angular", "Junior"] },
+      { id: 9, name: "Lucas Leroy", tags: ["Backend", "Python", "Medior"] },
+      { id: 10, name: "Camille Roux", tags: ["Fullstack", "TypeScript", "Senior"] },
+      { id: 11, name: "Hugo Fournier", tags: ["Frontend", "React", "Medior"] },
+      { id: 12, name: "Léa Girard", tags: ["UX/UI", "Figma", "Junior"] },
+      { id: 13, name: "Mathis Bonnet", tags: ["Backend", "PHP", "Junior"] },
+      { id: 14, name: "Chloé Lambert", tags: ["Frontend", "CSS", "Senior"] },
+      { id: 15, name: "Nathan Mercier", tags: ["DevOps", "Kubernetes", "Senior"] },
+      { id: 16, name: "Zoé Faure", tags: ["Fullstack", "MERN", "Medior"] },
+    ]
+  };
+};
+
+// Type definitions
+interface Person {
+  id: number;
+  name: string;
+  tags: string[];
+}
+
+interface Group {
+  id: number;
+  name: string;
+  persons: Person[];
+}
+
+export default function AutoCreateGroupsPage() {
+  const params = useParams();
+  const router = useRouter();
+  const projectId = params.id as string;
+
+  const [project, setProject] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [generating, setGenerating] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // State for auto-generation parameters
+  const [numberOfGroups, setNumberOfGroups] = useState(4);
+  const [balanceTags, setBalanceTags] = useState(true);
+  const [balanceLevels, setBalanceLevels] = useState(true);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [availableTags, setAvailableTags] = useState<string[]>([]);
+  const [availableLevels, setAvailableLevels] = useState<string[]>([]);
+
+  useEffect(() => {
+    // Simulate API call to fetch project data
+    const fetchProject = async () => {
+      setLoading(true);
+      try {
+        // In a real app, this would be an API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const data = getProjectData(projectId);
+        setProject(data);
+
+        // Extract unique tags and levels
+        const tags = new Set<string>();
+        const levels = new Set<string>();
+
+        data.persons.forEach(person => {
+          person.tags.forEach(tag => {
+            // Assuming the last tag is the level (Junior, Medior, Senior)
+            if (["Junior", "Medior", "Senior"].includes(tag)) {
+              levels.add(tag);
+            } else {
+              tags.add(tag);
+            }
+          });
+        });
+
+        setAvailableTags(Array.from(tags));
+        setAvailableLevels(Array.from(levels));
+
+      } catch (error) {
+        console.error("Error fetching project:", error);
+        toast.error("Erreur lors du chargement du projet");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [projectId]);
+
+  const generateGroups = async () => {
+    if (!project) return;
+
+    setGenerating(true);
+    try {
+      // In a real app, this would be an API call to the backend
+      // which would run the algorithm to create balanced groups
+      await new Promise(resolve => setTimeout(resolve, 1500));
+
+      // Simple algorithm to create balanced groups
+      const persons = [...project.persons];
+      const newGroups: Group[] = [];
+
+      // Create empty groups
+      for (let i = 0; i < numberOfGroups; i++) {
+        newGroups.push({
+          id: i + 1,
+          name: `Groupe ${String.fromCharCode(65 + i)}`, // A, B, C, ...
+          persons: []
+        });
+      }
+
+      // Sort persons by level if balancing levels
+      if (balanceLevels) {
+        persons.sort((a, b) => {
+          const aLevel = a.tags.find((tag: string) => ["Junior", "Medior", "Senior"].includes(tag)) || "";
+          const bLevel = b.tags.find((tag: string) => ["Junior", "Medior", "Senior"].includes(tag)) || "";
+
+          // Order: Senior, Medior, Junior
+          const levelOrder: Record<string, number> = { "Senior": 0, "Medior": 1, "Junior": 2 };
+          return levelOrder[aLevel] - levelOrder[bLevel];
+        });
+      }
+
+      // Sort persons by tags if balancing tags
+      if (balanceTags) {
+        // Group persons by their primary skill tag
+        const personsByTag: Record<string, Person[]> = {};
+
+        persons.forEach(person => {
+          // Get first tag that's not a level
+          const primaryTag = person.tags.find((tag: string) => !["Junior", "Medior", "Senior"].includes(tag));
+          if (primaryTag) {
+            if (!personsByTag[primaryTag]) {
+              personsByTag[primaryTag] = [];
+            }
+            personsByTag[primaryTag].push(person);
+          }
+        });
+
+        // Distribute persons from each tag group evenly
+        let currentGroupIndex = 0;
+
+        Object.values(personsByTag).forEach(tagPersons => {
+          tagPersons.forEach(person => {
+            newGroups[currentGroupIndex].persons.push(person);
+            currentGroupIndex = (currentGroupIndex + 1) % numberOfGroups;
+          });
+        });
+      } else {
+        // Simple distribution without balancing tags
+        persons.forEach((person, index) => {
+          const groupIndex = index % numberOfGroups;
+          newGroups[groupIndex].persons.push(person);
+        });
+      }
+
+      setGroups(newGroups);
+      toast.success("Groupes générés avec succès");
+    } catch (error) {
+      console.error("Error generating groups:", error);
+      toast.error("Erreur lors de la génération des groupes");
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleSaveGroups = async () => {
+    if (groups.length === 0) {
+      toast.error("Veuillez d'abord générer des groupes");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      // In a real app, this would be an API call to save the groups
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      toast.success("Groupes enregistrés avec succès");
+
+      // Navigate back to the groups page
+      router.push(`/projects/${projectId}/groups`);
+    } catch (error) {
+      console.error("Error saving groups:", error);
+      toast.error("Erreur lors de l'enregistrement des groupes");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (!project) {
+    return (
+      <div className="flex h-[50vh] flex-col items-center justify-center">
+        <p className="text-lg font-medium">Projet non trouvé</p>
+        <Button asChild className="mt-4">
+          <Link href="/projects">Retour aux projets</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="icon" asChild>
+            <Link href={`/projects/${projectId}/groups`}>
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <h1 className="text-3xl font-bold">Assistant de création de groupes</h1>
+        </div>
+        <Button onClick={handleSaveGroups} disabled={saving || groups.length === 0}>
+          {saving ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Enregistrement...
+            </>
+          ) : (
+            <>
+              <Save className="mr-2 h-4 w-4" />
+              Enregistrer les groupes
+            </>
+          )}
+        </Button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-[1fr_2fr]">
+        {/* Parameters */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Paramètres</CardTitle>
+            <CardDescription>
+              Configurez les paramètres pour la génération automatique de groupes
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="number-of-groups">Nombre de groupes: {numberOfGroups}</Label>
+              <Slider
+                id="number-of-groups"
+                min={2}
+                max={Math.min(8, Math.floor(project.persons.length / 2))}
+                step={1}
+                value={[numberOfGroups]}
+                onValueChange={(value) => setNumberOfGroups(value[0])}
+              />
+              <p className="text-xs text-muted-foreground">
+                {Math.ceil(project.persons.length / numberOfGroups)} personnes par groupe en moyenne
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="balance-tags">Équilibrer les compétences</Label>
+                  <p className="text-xs text-muted-foreground">
+                    Répartir équitablement les compétences dans chaque groupe
+                  </p>
+                </div>
+                <Switch
+                  id="balance-tags"
+                  checked={balanceTags}
+                  onCheckedChange={setBalanceTags}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="balance-levels">Équilibrer les niveaux</Label>
+                  <p className="text-xs text-muted-foreground">
+                    Répartir équitablement les niveaux (Junior, Medior, Senior) dans chaque groupe
+                  </p>
+                </div>
+                <Switch
+                  id="balance-levels"
+                  checked={balanceLevels}
+                  onCheckedChange={setBalanceLevels}
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Compétences disponibles</Label>
+              <div className="flex flex-wrap gap-1">
+                {availableTags.map((tag, index) => (
+                  <Badge key={index} variant="outline">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Niveaux disponibles</Label>
+              <div className="flex flex-wrap gap-1">
+                {availableLevels.map((level, index) => (
+                  <Badge key={index} variant="outline">
+                    {level}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button 
+              onClick={generateGroups} 
+              disabled={generating} 
+              className="w-full"
+            >
+              {generating ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Génération en cours...
+                </>
+              ) : (
+                <>
+                  <Wand2 className="mr-2 h-4 w-4" />
+                  Générer les groupes
+                </>
+              )}
+            </Button>
+          </CardFooter>
+        </Card>
+
+        {/* Generated Groups */}
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Groupes générés</CardTitle>
+              <CardDescription>
+                {groups.length > 0 
+                  ? `${groups.length} groupes avec ${project.persons.length} personnes au total` 
+                  : "Utilisez les paramètres à gauche pour générer des groupes"}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {groups.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-8">
+                  <Wand2 className="h-12 w-12 text-muted-foreground mb-4" />
+                  <p className="text-center text-muted-foreground">
+                    Aucun groupe généré. Cliquez sur "Générer les groupes" pour commencer.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {groups.map((group) => (
+                    <Card key={group.id}>
+                      <CardHeader className="pb-2">
+                        <CardTitle>{group.name}</CardTitle>
+                        <CardDescription>
+                          {group.persons.length} personnes
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="space-y-2">
+                          {group.persons.map((person) => (
+                            <div key={person.id} className="flex items-center justify-between border-b pb-2 last:border-0 last:pb-0">
+                              <div>
+                                <p className="font-medium">{person.name}</p>
+                                <div className="flex flex-wrap gap-1 mt-1">
+                                  {person.tags.map((tag, index) => (
+                                    <Badge key={index} variant="outline" className="text-xs">
+                                      {tag}
+                                    </Badge>
+                                  ))}
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+            {groups.length > 0 && (
+              <CardFooter>
+                <Button 
+                  variant="outline" 
+                  onClick={generateGroups} 
+                  disabled={generating} 
+                  className="w-full"
+                >
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                  Régénérer les groupes
+                </Button>
+              </CardFooter>
+            )}
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/projects/[id]/groups/create/page.tsx

@@ -0,0 +1,379 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { 
+  ArrowLeft,
+  Loader2,
+  Save,
+  Plus,
+  X
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+
+// Mock project data (same as in the groups page)
+const getProjectData = (id: string) => {
+  return {
+    id: parseInt(id),
+    name: "Projet Formation Dev Web",
+    description: "Création de groupes pour la formation développement web",
+    date: "2025-05-15",
+    persons: [
+      { id: 1, name: "Jean Dupont", tags: ["Frontend", "React", "Junior"] },
+      { id: 2, name: "Marie Martin", tags: ["Backend", "Node.js", "Senior"] },
+      { id: 3, name: "Pierre Durand", tags: ["Fullstack", "JavaScript", "Medior"] },
+      { id: 4, name: "Sophie Lefebvre", tags: ["UX/UI", "Design", "Senior"] },
+      { id: 5, name: "Thomas Bernard", tags: ["Backend", "Java", "Senior"] },
+      { id: 6, name: "Julie Petit", tags: ["Frontend", "Vue", "Junior"] },
+      { id: 7, name: "Nicolas Moreau", tags: ["DevOps", "Docker", "Medior"] },
+      { id: 8, name: "Emma Dubois", tags: ["Frontend", "Angular", "Junior"] },
+      { id: 9, name: "Lucas Leroy", tags: ["Backend", "Python", "Medior"] },
+      { id: 10, name: "Camille Roux", tags: ["Fullstack", "TypeScript", "Senior"] },
+      { id: 11, name: "Hugo Fournier", tags: ["Frontend", "React", "Medior"] },
+      { id: 12, name: "Léa Girard", tags: ["UX/UI", "Figma", "Junior"] },
+      { id: 13, name: "Mathis Bonnet", tags: ["Backend", "PHP", "Junior"] },
+      { id: 14, name: "Chloé Lambert", tags: ["Frontend", "CSS", "Senior"] },
+      { id: 15, name: "Nathan Mercier", tags: ["DevOps", "Kubernetes", "Senior"] },
+      { id: 16, name: "Zoé Faure", tags: ["Fullstack", "MERN", "Medior"] },
+    ]
+  };
+};
+
+// Type definitions
+interface Person {
+  id: number;
+  name: string;
+  tags: string[];
+}
+
+interface Group {
+  id: number;
+  name: string;
+  persons: Person[];
+}
+
+export default function CreateGroupsPage() {
+  const params = useParams();
+  const router = useRouter();
+  const projectId = params.id as string;
+  
+  const [project, setProject] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  
+  // State for groups and available persons
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [availablePersons, setAvailablePersons] = useState<Person[]>([]);
+  const [newGroupName, setNewGroupName] = useState("");
+  
+  // State for drag and drop
+  const [draggedPerson, setDraggedPerson] = useState<Person | null>(null);
+  const [draggedFromGroup, setDraggedFromGroup] = useState<number | null>(null);
+  const [dragOverGroup, setDragOverGroup] = useState<number | null>(null);
+
+  useEffect(() => {
+    // Simulate API call to fetch project data
+    const fetchProject = async () => {
+      setLoading(true);
+      try {
+        // In a real app, this would be an API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const data = getProjectData(projectId);
+        setProject(data);
+        setAvailablePersons(data.persons);
+      } catch (error) {
+        console.error("Error fetching project:", error);
+        toast.error("Erreur lors du chargement du projet");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [projectId]);
+
+  const handleAddGroup = () => {
+    if (!newGroupName.trim()) {
+      toast.error("Veuillez entrer un nom de groupe");
+      return;
+    }
+
+    const newGroup: Group = {
+      id: Date.now(), // Use timestamp as temporary ID
+      name: newGroupName,
+      persons: []
+    };
+
+    setGroups([...groups, newGroup]);
+    setNewGroupName("");
+  };
+
+  const handleRemoveGroup = (groupId: number) => {
+    const group = groups.find(g => g.id === groupId);
+    if (group) {
+      // Return persons from this group to available persons
+      setAvailablePersons([...availablePersons, ...group.persons]);
+    }
+    setGroups(groups.filter(g => g.id !== groupId));
+  };
+
+  const handleDragStart = (person: Person, fromGroup: number | null) => {
+    setDraggedPerson(person);
+    setDraggedFromGroup(fromGroup);
+  };
+
+  const handleDragOver = (e: React.DragEvent, toGroup: number | null) => {
+    e.preventDefault();
+    setDragOverGroup(toGroup);
+  };
+
+  const handleDrop = (e: React.DragEvent, toGroup: number | null) => {
+    e.preventDefault();
+    
+    if (!draggedPerson) return;
+    
+    // Remove person from source
+    if (draggedFromGroup === null) {
+      // From available persons
+      setAvailablePersons(availablePersons.filter(p => p.id !== draggedPerson.id));
+    } else {
+      // From another group
+      const sourceGroup = groups.find(g => g.id === draggedFromGroup);
+      if (sourceGroup) {
+        const updatedGroups = groups.map(g => {
+          if (g.id === draggedFromGroup) {
+            return {
+              ...g,
+              persons: g.persons.filter(p => p.id !== draggedPerson.id)
+            };
+          }
+          return g;
+        });
+        setGroups(updatedGroups);
+      }
+    }
+    
+    // Add person to destination
+    if (toGroup === null) {
+      // To available persons
+      setAvailablePersons([...availablePersons, draggedPerson]);
+    } else {
+      // To a group
+      const updatedGroups = groups.map(g => {
+        if (g.id === toGroup) {
+          return {
+            ...g,
+            persons: [...g.persons, draggedPerson]
+          };
+        }
+        return g;
+      });
+      setGroups(updatedGroups);
+    }
+    
+    // Reset drag state
+    setDraggedPerson(null);
+    setDraggedFromGroup(null);
+    setDragOverGroup(null);
+  };
+
+  const handleSaveGroups = async () => {
+    setSaving(true);
+    try {
+      // Validate that all groups have at least one person
+      const emptyGroups = groups.filter(g => g.persons.length === 0);
+      if (emptyGroups.length > 0) {
+        toast.error(`${emptyGroups.length} groupe(s) vide(s). Veuillez ajouter des personnes à tous les groupes.`);
+        setSaving(false);
+        return;
+      }
+
+      // In a real app, this would be an API call to save the groups
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      toast.success("Groupes enregistrés avec succès");
+      
+      // Navigate back to the groups page
+      router.push(`/projects/${projectId}/groups`);
+    } catch (error) {
+      console.error("Error saving groups:", error);
+      toast.error("Erreur lors de l'enregistrement des groupes");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (!project) {
+    return (
+      <div className="flex h-[50vh] flex-col items-center justify-center">
+        <p className="text-lg font-medium">Projet non trouvé</p>
+        <Button asChild className="mt-4">
+          <Link href="/projects">Retour aux projets</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="icon" asChild>
+            <Link href={`/projects/${projectId}/groups`}>
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <h1 className="text-3xl font-bold">Créer des groupes</h1>
+        </div>
+        <Button onClick={handleSaveGroups} disabled={saving || groups.length === 0}>
+          {saving ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Enregistrement...
+            </>
+          ) : (
+            <>
+              <Save className="mr-2 h-4 w-4" />
+              Enregistrer les groupes
+            </>
+          )}
+        </Button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-[1fr_2fr]">
+        {/* Available persons */}
+        <div 
+          className={`border rounded-lg p-4 ${dragOverGroup === null ? 'bg-muted/50' : ''}`}
+          onDragOver={(e) => handleDragOver(e, null)}
+          onDrop={(e) => handleDrop(e, null)}
+        >
+          <h2 className="text-xl font-bold mb-4">Personnes disponibles ({availablePersons.length})</h2>
+          <div className="space-y-2">
+            {availablePersons.map(person => (
+              <div 
+                key={person.id}
+                className="border rounded-md p-3 bg-card cursor-move"
+                draggable
+                onDragStart={() => handleDragStart(person, null)}
+              >
+                <p className="font-medium">{person.name}</p>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {person.tags.map((tag, index) => (
+                    <Badge key={index} variant="outline" className="text-xs">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            ))}
+            {availablePersons.length === 0 && (
+              <p className="text-muted-foreground text-center py-4">
+                Toutes les personnes ont été assignées à des groupes
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Groups */}
+        <div className="space-y-4">
+          {/* Add new group form */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Ajouter un nouveau groupe</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <Label htmlFor="group-name" className="sr-only">Nom du groupe</Label>
+                  <Input
+                    id="group-name"
+                    placeholder="Nom du groupe"
+                    value={newGroupName}
+                    onChange={(e) => setNewGroupName(e.target.value)}
+                  />
+                </div>
+                <Button onClick={handleAddGroup}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  Ajouter
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Groups list */}
+          {groups.length === 0 ? (
+            <Card>
+              <CardContent className="flex flex-col items-center justify-center py-8">
+                <p className="text-muted-foreground text-center mb-4">
+                  Aucun groupe créé. Commencez par ajouter un groupe.
+                </p>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="space-y-4">
+              {groups.map(group => (
+                <Card 
+                  key={group.id}
+                  className={dragOverGroup === group.id ? 'border-primary' : ''}
+                  onDragOver={(e) => handleDragOver(e, group.id)}
+                  onDrop={(e) => handleDrop(e, group.id)}
+                >
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle>{group.name}</CardTitle>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      onClick={() => handleRemoveGroup(group.id)}
+                      className="h-8 w-8 text-destructive"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      {group.persons.map(person => (
+                        <div 
+                          key={person.id}
+                          className="border rounded-md p-3 bg-card cursor-move"
+                          draggable
+                          onDragStart={() => handleDragStart(person, group.id)}
+                        >
+                          <p className="font-medium">{person.name}</p>
+                          <div className="flex flex-wrap gap-1 mt-1">
+                            {person.tags.map((tag, index) => (
+                              <Badge key={index} variant="outline" className="text-xs">
+                                {tag}
+                              </Badge>
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+                      {group.persons.length === 0 && (
+                        <div className="border border-dashed rounded-md p-4 text-center text-muted-foreground">
+                          Glissez-déposez des personnes ici
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/projects/[id]/groups/page.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { 
+  PlusCircle, 
+  Users, 
+  Wand2, 
+  ArrowLeft,
+  Loader2
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+
+// Mock project data
+const getProjectData = (id: string) => {
+  return {
+    id: parseInt(id),
+    name: "Projet Formation Dev Web",
+    description: "Création de groupes pour la formation développement web",
+    date: "2025-05-15",
+    groups: [
+      {
+        id: 1,
+        name: "Groupe A",
+        persons: [
+          { id: 1, name: "Jean Dupont", tags: ["Frontend", "React", "Junior"] },
+          { id: 2, name: "Marie Martin", tags: ["Backend", "Node.js", "Senior"] },
+          { id: 3, name: "Pierre Durand", tags: ["Fullstack", "JavaScript", "Medior"] },
+          { id: 4, name: "Sophie Lefebvre", tags: ["UX/UI", "Design", "Senior"] },
+        ]
+      },
+      {
+        id: 2,
+        name: "Groupe B",
+        persons: [
+          { id: 5, name: "Thomas Bernard", tags: ["Backend", "Java", "Senior"] },
+          { id: 6, name: "Julie Petit", tags: ["Frontend", "Vue", "Junior"] },
+          { id: 7, name: "Nicolas Moreau", tags: ["DevOps", "Docker", "Medior"] },
+          { id: 8, name: "Emma Dubois", tags: ["Frontend", "Angular", "Junior"] },
+        ]
+      },
+      {
+        id: 3,
+        name: "Groupe C",
+        persons: [
+          { id: 9, name: "Lucas Leroy", tags: ["Backend", "Python", "Medior"] },
+          { id: 10, name: "Camille Roux", tags: ["Fullstack", "TypeScript", "Senior"] },
+          { id: 11, name: "Hugo Fournier", tags: ["Frontend", "React", "Medior"] },
+          { id: 12, name: "Léa Girard", tags: ["UX/UI", "Figma", "Junior"] },
+        ]
+      },
+      {
+        id: 4,
+        name: "Groupe D",
+        persons: [
+          { id: 13, name: "Mathis Bonnet", tags: ["Backend", "PHP", "Junior"] },
+          { id: 14, name: "Chloé Lambert", tags: ["Frontend", "CSS", "Senior"] },
+          { id: 15, name: "Nathan Mercier", tags: ["DevOps", "Kubernetes", "Senior"] },
+          { id: 16, name: "Zoé Faure", tags: ["Fullstack", "MERN", "Medior"] },
+        ]
+      }
+    ],
+    persons: [
+      { id: 1, name: "Jean Dupont", tags: ["Frontend", "React", "Junior"] },
+      { id: 2, name: "Marie Martin", tags: ["Backend", "Node.js", "Senior"] },
+      { id: 3, name: "Pierre Durand", tags: ["Fullstack", "JavaScript", "Medior"] },
+      { id: 4, name: "Sophie Lefebvre", tags: ["UX/UI", "Design", "Senior"] },
+      { id: 5, name: "Thomas Bernard", tags: ["Backend", "Java", "Senior"] },
+      { id: 6, name: "Julie Petit", tags: ["Frontend", "Vue", "Junior"] },
+      { id: 7, name: "Nicolas Moreau", tags: ["DevOps", "Docker", "Medior"] },
+      { id: 8, name: "Emma Dubois", tags: ["Frontend", "Angular", "Junior"] },
+      { id: 9, name: "Lucas Leroy", tags: ["Backend", "Python", "Medior"] },
+      { id: 10, name: "Camille Roux", tags: ["Fullstack", "TypeScript", "Senior"] },
+      { id: 11, name: "Hugo Fournier", tags: ["Frontend", "React", "Medior"] },
+      { id: 12, name: "Léa Girard", tags: ["UX/UI", "Figma", "Junior"] },
+      { id: 13, name: "Mathis Bonnet", tags: ["Backend", "PHP", "Junior"] },
+      { id: 14, name: "Chloé Lambert", tags: ["Frontend", "CSS", "Senior"] },
+      { id: 15, name: "Nathan Mercier", tags: ["DevOps", "Kubernetes", "Senior"] },
+      { id: 16, name: "Zoé Faure", tags: ["Fullstack", "MERN", "Medior"] },
+    ]
+  };
+};
+
+export default function ProjectGroupsPage() {
+  const params = useParams();
+  const projectId = params.id as string;
+  const [project, setProject] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState("existing");
+
+  useEffect(() => {
+    // Simulate API call to fetch project data
+    const fetchProject = async () => {
+      setLoading(true);
+      try {
+        // In a real app, this would be an API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const data = getProjectData(projectId);
+        setProject(data);
+      } catch (error) {
+        console.error("Error fetching project:", error);
+        toast.error("Erreur lors du chargement du projet");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [projectId]);
+
+  const handleCreateGroups = async () => {
+    toast.success("Redirection vers la page de création de groupes");
+    // In a real app, this would redirect to the group creation page
+  };
+
+  const handleAutoCreateGroups = async () => {
+    toast.success("Redirection vers l'assistant de création automatique de groupes");
+    // In a real app, this would redirect to the automatic group creation page
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (!project) {
+    return (
+      <div className="flex h-[50vh] flex-col items-center justify-center">
+        <p className="text-lg font-medium">Projet non trouvé</p>
+        <Button asChild className="mt-4">
+          <Link href="/projects">Retour aux projets</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon" asChild>
+          <Link href={`/projects/${projectId}`}>
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <h1 className="text-3xl font-bold">{project.name} - Groupes</h1>
+      </div>
+
+      <Tabs defaultValue="existing" className="space-y-4" onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="existing">Groupes existants</TabsTrigger>
+          <TabsTrigger value="create">Créer des groupes</TabsTrigger>
+        </TabsList>
+        
+        <TabsContent value="existing" className="space-y-4">
+          {project.groups.length === 0 ? (
+            <Card>
+              <CardHeader>
+                <CardTitle>Aucun groupe</CardTitle>
+                <CardDescription>
+                  Ce projet ne contient pas encore de groupes. Créez-en un maintenant.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex justify-center py-6">
+                <Button onClick={handleCreateGroups}>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  Créer un groupe
+                </Button>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="grid gap-4 md:grid-cols-2">
+              {project.groups.map((group: any) => (
+                <Card key={group.id}>
+                  <CardHeader>
+                    <CardTitle>{group.name}</CardTitle>
+                    <CardDescription>
+                      {group.persons.length} personnes
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      {group.persons.map((person: any) => (
+                        <div key={person.id} className="flex items-center justify-between border-b pb-2 last:border-0 last:pb-0">
+                          <div>
+                            <p className="font-medium">{person.name}</p>
+                            <div className="flex flex-wrap gap-1 mt-1">
+                              {person.tags.map((tag: string, index: number) => (
+                                <Badge key={index} variant="outline" className="text-xs">
+                                  {tag}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </TabsContent>
+        
+        <TabsContent value="create" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>Création manuelle</CardTitle>
+                <CardDescription>
+                  Créez des groupes manuellement en glissant-déposant les personnes
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col items-center justify-center py-6">
+                <Users className="h-12 w-12 text-muted-foreground mb-4" />
+                <p className="text-center text-muted-foreground mb-4">
+                  Utilisez l'interface de glisser-déposer pour créer vos groupes selon vos critères
+                </p>
+                <Button onClick={handleCreateGroups}>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  Créer manuellement
+                </Button>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader>
+                <CardTitle>Création automatique</CardTitle>
+                <CardDescription>
+                  Laissez l'assistant créer des groupes équilibrés automatiquement
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col items-center justify-center py-6">
+                <Wand2 className="h-12 w-12 text-muted-foreground mb-4" />
+                <p className="text-center text-muted-foreground mb-4">
+                  L'assistant prendra en compte les tags et niveaux pour créer des groupes équilibrés
+                </p>
+                <Button onClick={handleAutoCreateGroups}>
+                  <Wand2 className="mr-2 h-4 w-4" />
+                  Utiliser l'assistant
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

frontend/app/projects/layout.tsx

@@ -0,0 +1,10 @@
+import { DashboardLayout } from "@/components/dashboard-layout";
+import { AuthLoading } from "@/components/auth-loading";
+
+export default function ProjectsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthLoading>
+      <DashboardLayout>{children}</DashboardLayout>
+    </AuthLoading>
+  );
+}

frontend/app/projects/new/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { 
+  ArrowLeft,
+  Loader2,
+  Save
+} from "lucide-react";
+import { toast } from "sonner";
+
+// Type definitions
+interface ProjectFormData {
+  name: string;
+  description: string;
+}
+
+export default function NewProjectPage() {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  
+  const { register, handleSubmit, formState: { errors } } = useForm<ProjectFormData>({
+    defaultValues: {
+      name: "",
+      description: ""
+    }
+  });
+
+  const onSubmit = async (data: ProjectFormData) => {
+    setIsSubmitting(true);
+    try {
+      // In a real app, this would be an API call to create a new project
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      // Simulate a successful response with a project ID
+      const projectId = Date.now();
+      
+      toast.success("Projet créé avec succès");
+      router.push(`/projects/${projectId}`);
+    } catch (error) {
+      console.error("Error creating project:", error);
+      toast.error("Erreur lors de la création du projet");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon" asChild>
+          <Link href="/projects">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <h1 className="text-3xl font-bold">Nouveau projet</h1>
+      </div>
+
+      <Card>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <CardHeader>
+            <CardTitle>Informations du projet</CardTitle>
+            <CardDescription>
+              Créez un nouveau projet pour organiser vos groupes
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Nom du projet</Label>
+              <Input
+                id="name"
+                placeholder="Ex: Formation Développement Web"
+                {...register("name", { 
+                  required: "Le nom du projet est requis",
+                  minLength: {
+                    value: 3,
+                    message: "Le nom doit contenir au moins 3 caractères"
+                  }
+                })}
+              />
+              {errors.name && (
+                <p className="text-sm text-destructive">{errors.name.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                placeholder="Décrivez votre projet..."
+                rows={4}
+                {...register("description", { 
+                  required: "La description du projet est requise",
+                  minLength: {
+                    value: 10,
+                    message: "La description doit contenir au moins 10 caractères"
+                  }
+                })}
+              />
+              {errors.description && (
+                <p className="text-sm text-destructive">{errors.description.message}</p>
+              )}
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-between">
+            <Button variant="outline" asChild>
+              <Link href="/projects">Annuler</Link>
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Création en cours...
+                </>
+              ) : (
+                <>
+                  <Save className="mr-2 h-4 w-4" />
+                  Créer le projet
+                </>
+              )}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}

frontend/app/projects/page.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from "@/components/ui/table";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter
+} from "@/components/ui/card";
+import { 
+  DropdownMenu, 
+  DropdownMenuContent, 
+  DropdownMenuItem, 
+  DropdownMenuLabel, 
+  DropdownMenuSeparator, 
+  DropdownMenuTrigger 
+} from "@/components/ui/dropdown-menu";
+import { 
+  PlusCircle, 
+  Search, 
+  MoreHorizontal, 
+  Pencil, 
+  Trash2, 
+  Users, 
+  Eye 
+} from "lucide-react";
+
+export default function ProjectsPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // Mock data for projects
+  const projects = [
+    {
+      id: 1,
+      name: "Projet Formation Dev Web",
+      description: "Création de groupes pour la formation développement web",
+      date: "2025-05-15",
+      groups: 4,
+      persons: 16,
+    },
+    {
+      id: 2,
+      name: "Projet Hackathon",
+      description: "Équipes pour le hackathon annuel",
+      date: "2025-05-10",
+      groups: 8,
+      persons: 32,
+    },
+    {
+      id: 3,
+      name: "Projet Workshop UX/UI",
+      description: "Groupes pour l'atelier UX/UI",
+      date: "2025-05-05",
+      groups: 5,
+      persons: 20,
+    },
+    {
+      id: 4,
+      name: "Projet Conférence Tech",
+      description: "Groupes pour la conférence technologique",
+      date: "2025-04-28",
+      groups: 6,
+      persons: 24,
+    },
+    {
+      id: 5,
+      name: "Projet Formation Data Science",
+      description: "Création de groupes pour la formation data science",
+      date: "2025-04-20",
+      groups: 3,
+      persons: 12,
+    },
+  ];
+
+  // Filter projects based on search query
+  const filteredProjects = projects.filter(
+    (project) =>
+      project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      project.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <h1 className="text-2xl sm:text-3xl font-bold">Projets</h1>
+        <Button asChild className="w-full sm:w-auto">
+          <Link href="/projects/new">
+            <PlusCircle className="mr-2 h-4 w-4" />
+            Nouveau projet
+          </Link>
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Rechercher des projets..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+
+      {/* Mobile card view */}
+      <div className="grid gap-4 sm:hidden">
+        {filteredProjects.length === 0 ? (
+          <div className="rounded-md border p-6 text-center text-muted-foreground">
+            Aucun projet trouvé.
+          </div>
+        ) : (
+          filteredProjects.map((project) => (
+            <Card key={project.id}>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-lg">{project.name}</CardTitle>
+                <CardDescription>{project.description}</CardDescription>
+              </CardHeader>
+              <CardContent className="pb-2">
+                <div className="grid grid-cols-2 gap-2 text-sm">
+                  <div className="flex flex-col">
+                    <span className="text-muted-foreground">Date</span>
+                    <span>{new Date(project.date).toLocaleDateString("fr-FR")}</span>
+                  </div>
+                  <div className="flex flex-col">
+                    <span className="text-muted-foreground">Groupes</span>
+                    <span>{project.groups}</span>
+                  </div>
+                  <div className="flex flex-col">
+                    <span className="text-muted-foreground">Personnes</span>
+                    <span>{project.persons}</span>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-between pt-0">
+                <Button variant="outline" size="sm" asChild>
+                  <Link href={`/projects/${project.id}`}>
+                    <Eye className="mr-2 h-4 w-4" />
+                    Voir
+                  </Link>
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm">
+                      <MoreHorizontal className="h-4 w-4" />
+                      <span className="sr-only">Actions</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem asChild>
+                      <Link href={`/projects/${project.id}/groups`} className="flex items-center">
+                        <Users className="mr-2 h-4 w-4" />
+                        <span>Gérer les groupes</span>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link href={`/projects/${project.id}/edit`} className="flex items-center">
+                        <Pencil className="mr-2 h-4 w-4" />
+                        <span>Modifier</span>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive focus:text-destructive">
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      <span>Supprimer</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </CardFooter>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {/* Desktop table view */}
+      <div className="rounded-md border hidden sm:block overflow-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Nom</TableHead>
+              <TableHead>Description</TableHead>
+              <TableHead>Date de création</TableHead>
+              <TableHead>Groupes</TableHead>
+              <TableHead>Personnes</TableHead>
+              <TableHead className="w-[100px]">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredProjects.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={6} className="h-24 text-center">
+                  Aucun projet trouvé.
+                </TableCell>
+              </TableRow>
+            ) : (
+              filteredProjects.map((project) => (
+                <TableRow key={project.id}>
+                  <TableCell className="font-medium">{project.name}</TableCell>
+                  <TableCell>{project.description}</TableCell>
+                  <TableCell>{new Date(project.date).toLocaleDateString("fr-FR")}</TableCell>
+                  <TableCell>{project.groups}</TableCell>
+                  <TableCell>{project.persons}</TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                          <span className="sr-only">Actions</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem asChild>
+                          <Link href={`/projects/${project.id}`} className="flex items-center">
+                            <Eye className="mr-2 h-4 w-4" />
+                            <span>Voir</span>
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem asChild>
+                          <Link href={`/projects/${project.id}/groups`} className="flex items-center">
+                            <Users className="mr-2 h-4 w-4" />
+                            <span>Gérer les groupes</span>
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem asChild>
+                          <Link href={`/projects/${project.id}/edit`} className="flex items-center">
+                            <Pencil className="mr-2 h-4 w-4" />
+                            <span>Modifier</span>
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="text-destructive focus:text-destructive">
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          <span>Supprimer</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}