feat: enhance user authentication and profile retrieval

- Updated GET handler in auth route to fetch user UUID from cookie using AuthService.
- Improved error handling for unauthenticated and non-existent users.
- Added team name retrieval for the user profile, with fallback handling.
- Refactored AuthClient to return detailed user information including team details.
- Enhanced navigation component to use a dropdown menu for user actions, improving UI/UX.
- Implemented loading state in UserContext to manage user info fetching.

components/account/account-form.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { useState, useMemo, useRef, useEffect } from "react";
+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 { UserProfile, Team } from "@/lib/types";
+import { Search, Building2, ChevronDown, Check, Save, X } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+interface AccountFormProps {
+  initialProfile: UserProfile;
+  teams: Team[];
+}
+
+export function AccountForm({ initialProfile, teams }: AccountFormProps) {
+  const [firstName, setFirstName] = useState(initialProfile.firstName);
+  const [lastName, setLastName] = useState(initialProfile.lastName);
+  const [teamId, setTeamId] = useState(initialProfile.teamId);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isTeamDropdownOpen, setIsTeamDropdownOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const teamDropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownPosition, setDropdownPosition] = useState<"below" | "above">(
+    "below"
+  );
+  const { toast } = useToast();
+
+  const hasChanges =
+    firstName !== initialProfile.firstName ||
+    lastName !== initialProfile.lastName ||
+    teamId !== initialProfile.teamId;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!hasChanges) return;
+
+    setLoading(true);
+    try {
+      const response = await fetch("/api/auth/profile", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          firstName,
+          lastName,
+          teamId,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Erreur lors de la mise à jour");
+      }
+
+      const result = await response.json();
+
+      toast({
+        title: "Profil mis à jour",
+        description:
+          result.message || "Vos informations ont été modifiées avec succès.",
+      });
+
+      setIsEditing(false);
+    } catch (error: any) {
+      console.error("Update failed:", error);
+      toast({
+        title: "Erreur de mise à jour",
+        description: error.message || "Erreur lors de la mise à jour du profil",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setFirstName(initialProfile.firstName);
+    setLastName(initialProfile.lastName);
+    setTeamId(initialProfile.teamId);
+    setIsEditing(false);
+  };
+
+  // Group teams by direction and filter by search term
+  const teamsByDirection = useMemo(() => {
+    const filteredTeams = teams.filter(
+      (team) =>
+        team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        team.direction.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return filteredTeams.reduce((acc, team) => {
+      if (!acc[team.direction]) {
+        acc[team.direction] = [];
+      }
+      acc[team.direction].push(team);
+      return acc;
+    }, {} as Record<string, Team[]>);
+  }, [teams, searchTerm]);
+
+  // Calculate dropdown position when opening
+  const handleDropdownToggle = () => {
+    if (!isTeamDropdownOpen && teamDropdownRef.current) {
+      const rect = teamDropdownRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const dropdownHeight = 300;
+
+      setDropdownPosition(
+        spaceBelow >= dropdownHeight || spaceBelow > spaceAbove
+          ? "below"
+          : "above"
+      );
+    }
+    setIsTeamDropdownOpen(!isTeamDropdownOpen);
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        teamDropdownRef.current &&
+        !teamDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsTeamDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedTeam = teams.find((team) => team.id === teamId);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Informations personnelles</CardTitle>
+        <CardDescription>
+          Modifiez vos informations personnelles. Vos identifiants de connexion
+          (email et mot de passe) ne peuvent pas être modifiés ici.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="firstName">Prénom</Label>
+              <Input
+                id="firstName"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                placeholder="Votre prénom"
+                disabled={!isEditing}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="lastName">Nom</Label>
+              <Input
+                id="lastName"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                placeholder="Votre nom"
+                disabled={!isEditing}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="team">Équipe</Label>
+            <div className="relative" ref={teamDropdownRef}>
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full justify-between"
+                onClick={handleDropdownToggle}
+                disabled={!isEditing}
+              >
+                <span
+                  className={
+                    selectedTeam ? "text-foreground" : "text-muted-foreground"
+                  }
+                >
+                  {selectedTeam
+                    ? selectedTeam.name
+                    : "Sélectionnez votre équipe"}
+                </span>
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+
+              {isTeamDropdownOpen && isEditing && (
+                <div
+                  className={`absolute left-0 right-0 bg-background border border-border rounded-md shadow-lg z-50 max-h-[300px] overflow-y-auto ${
+                    dropdownPosition === "below"
+                      ? "top-full mt-1"
+                      : "bottom-full mb-1"
+                  }`}
+                >
+                  <div className="sticky top-0 bg-background border-b p-2">
+                    <div className="relative">
+                      <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        placeholder="Rechercher une équipe..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="pl-8 h-8 text-sm"
+                        autoFocus
+                      />
+                    </div>
+                  </div>
+
+                  {Object.entries(teamsByDirection).map(
+                    ([direction, directionTeams]) => (
+                      <div key={direction}>
+                        <div className="px-3 py-2 text-sm font-semibold text-muted-foreground bg-muted/30 border-b border-border flex items-center gap-2">
+                          <Building2 className="h-3 w-3" />
+                          {direction}
+                        </div>
+                        {directionTeams.map((team) => (
+                          <button
+                            key={team.id}
+                            type="button"
+                            className={`w-full px-3 py-2 text-left hover:bg-muted/50 flex items-center justify-between ${
+                              team.id === teamId ? "bg-muted" : ""
+                            }`}
+                            onClick={() => {
+                              setTeamId(team.id);
+                              setIsTeamDropdownOpen(false);
+                              setSearchTerm("");
+                            }}
+                          >
+                            <span>{team.name}</span>
+                            {team.id === teamId && (
+                              <Check className="h-4 w-4 text-primary" />
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                    )
+                  )}
+
+                  {Object.keys(teamsByDirection).length === 0 && (
+                    <div className="px-3 py-4 text-center text-sm text-muted-foreground">
+                      Aucune équipe trouvée pour "{searchTerm}"
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex gap-4 justify-end">
+            {!isEditing ? (
+              <Button
+                type="button"
+                onClick={() => setIsEditing(true)}
+                className="bg-blue-500 hover:bg-blue-600"
+              >
+                Modifier
+              </Button>
+            ) : (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCancel}
+                  disabled={loading}
+                >
+                  <X className="w-4 h-4 mr-2" />
+                  Annuler
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={!hasChanges || loading}
+                  className="bg-blue-500 hover:bg-blue-600"
+                >
+                  <Save className="w-4 h-4 mr-2" />
+                  {loading ? "Sauvegarde..." : "Sauvegarder"}
+                </Button>
+              </>
+            )}
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

components/account/index.ts

@@ -0,0 +1 @@
+export { AccountForm } from "./account-form";

components/layout/navigation.tsx

@@ -4,7 +4,19 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { ThemeToggle } from "@/components/layout/theme-toggle";
-import { BarChart3, User, Settings, Building2 } from "lucide-react";
+import {
+  BarChart3,
+  User,
+  Settings,
+  Building2,
+  ChevronDown,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface NavigationProps {
   userInfo?: {
@@ -67,22 +79,41 @@ export function Navigation({ userInfo }: NavigationProps = {}) {
 
         <div className="flex items-center space-x-4">
           {userInfo && (
-            <Link
-              href="/login"
-              className="flex items-center gap-3 px-3 py-2 rounded-lg bg-muted/50 hover:bg-muted/70 transition-colors cursor-pointer"
-            >
-              <div className="w-8 h-8 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center">
-                <User className="h-4 w-4 text-primary" />
-              </div>
-              <div className="hidden sm:block">
-                <p className="text-sm font-medium">
-                  {userInfo.firstName} {userInfo.lastName}
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  {userInfo.teamName}
-                </p>
-              </div>
-            </Link>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="flex items-center gap-3 px-3 py-2 rounded-lg bg-muted/50 hover:bg-muted/70 transition-colors"
+                >
+                  <div className="w-8 h-8 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center">
+                    <User className="h-4 w-4 text-primary" />
+                  </div>
+                  <div className="hidden sm:block text-left">
+                    <p className="text-sm font-medium">
+                      {userInfo.firstName} {userInfo.lastName}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {userInfo.teamName}
+                    </p>
+                  </div>
+                  <ChevronDown className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuItem asChild>
+                  <Link href="/account" className="flex items-center gap-2">
+                    <Settings className="h-4 w-4" />
+                    Mon compte
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href="/login" className="flex items-center gap-2">
+                    <User className="h-4 w-4" />
+                    Se déconnecter
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           )}
           <ThemeToggle />
         </div>