Update May 24 by Elvis

app/admin/commandes/page.tsx

@@ -131,7 +131,7 @@ export default function AdminCommandes() {
                         #{o.id.slice(0, 8).toUpperCase()}
                       </TableCell>
                       <TableCell>
-                        <div className="font-medium text-sm">{o.client_name ?? "—"}</div>
+                        <div className="font-medium text-sm">{o.client_name || "—"}</div>
                         <div className="text-xs text-muted-foreground">{o.client_email ?? ""}</div>
                       </TableCell>
                       <TableCell className="text-sm">

app/connexion/page.tsx

@@ -7,14 +7,17 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useAuth } from "@/contexts/AuthContext";
+import { forgotPassword } from "@/lib/api/auth";
 import { ApiError } from "@/lib/api";
 import { toast } from "sonner";
 
+type Mode = "login" | "register" | "forgot";
+
 export default function Auth() {
   const { t } = useLanguage();
   const { login, register, user } = useAuth();
   const router = useRouter();
-  const [isLogin, setIsLogin] = useState(true);
+  const [mode, setMode] = useState<Mode>("login");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [name, setName] = useState("");
@@ -30,11 +33,11 @@ export default function Auth() {
     e.preventDefault();
     setLoading(true);
     try {
-      if (isLogin) {
+      if (mode === "login") {
         const profile = await login(email, password);
         toast.success(t("auth.login_success"));
         router.push(profile.role === "admin" ? "/admin" : "/");
-      } else {
+      } else if (mode === "register") {
         const profile = await register(email, password, name);
         if (profile) {
           toast.success(t("auth.register_success"));
@@ -43,6 +46,11 @@ export default function Auth() {
           toast.success(t("auth.confirm_email"));
           router.push("/connexion");
         }
+      } else {
+        await forgotPassword(email);
+        toast.success(t("auth.forgot_sent"));
+        setMode("login");
+        setEmail("");
       }
     } catch (err) {
       const msg = err instanceof ApiError ? err.message : t("auth.error");
@@ -56,14 +64,18 @@ export default function Auth() {
     <div className="min-h-screen flex items-center justify-center py-12 px-4">
       <div className="w-full max-w-sm">
         <h1 className="font-serif text-3xl text-center mb-2">
-          {isLogin ? t("auth.login") : t("auth.register")}
+          {mode === "login" ? t("auth.login") : mode === "register" ? t("auth.register") : t("auth.forgot_title")}
         </h1>
         <p className="text-sm text-muted-foreground text-center mb-8">
-          {isLogin ? t("auth.login_subtitle") : t("auth.register_subtitle")}
+          {mode === "login"
+            ? t("auth.login_subtitle")
+            : mode === "register"
+            ? t("auth.register_subtitle")
+            : t("auth.forgot_subtitle")}
         </p>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          {!isLogin && (
+          {mode === "register" && (
             <div>
               <Label htmlFor="name">{t("auth.name")}</Label>
               <Input
@@ -87,34 +99,66 @@ export default function Auth() {
               required
             />
           </div>
+          {mode !== "forgot" && (
             <div>
+              <div className="flex items-center justify-between mb-1">
                 <Label htmlFor="password">{t("auth.password")}</Label>
+                {mode === "login" && (
+                  <Button
+                    type="button"
+                    variant="link"
+                    className="h-auto p-0 text-xs text-muted-foreground hover:text-primary"
+                    onClick={() => { setMode("forgot"); setPassword(""); }}
+                  >
+                    {t("auth.forgot_link")}
+                  </Button>
+                )}
+              </div>
               <Input
                 id="password"
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-              className="mt-1"
                 required
                 minLength={8}
               />
             </div>
+          )}
           <Button type="submit" className="w-full" size="lg" disabled={loading}>
-            {loading ? t("auth.loading") : isLogin ? t("auth.login") : t("auth.register")}
+            {loading
+              ? t("auth.loading")
+              : mode === "login"
+              ? t("auth.login")
+              : mode === "register"
+              ? t("auth.register")
+              : t("auth.forgot_send")}
           </Button>
         </form>
 
+        {mode === "forgot" ? (
           <p className="text-center text-sm text-muted-foreground mt-6">
-          {isLogin ? t("auth.no_account") : t("auth.has_account")}{" "}
             <Button
               type="button"
               variant="link"
-            onClick={() => setIsLogin(!isLogin)}
+              onClick={() => setMode("login")}
               className="text-primary hover:underline font-medium"
             >
-            {isLogin ? t("auth.register") : t("auth.login")}
+              {t("auth.back_to_login")}
             </Button>
           </p>
+        ) : (
+          <p className="text-center text-sm text-muted-foreground mt-6">
+            {mode === "login" ? t("auth.no_account") : t("auth.has_account")}{" "}
+            <Button
+              type="button"
+              variant="link"
+              onClick={() => setMode(mode === "login" ? "register" : "login")}
+              className="text-primary hover:underline font-medium"
+            >
+              {mode === "login" ? t("auth.register") : t("auth.login")}
+            </Button>
+          </p>
+        )}
       </div>
     </div>
   );

app/mon-compte/page.tsx

@@ -36,6 +36,7 @@ export default function MonCompte() {
 
   useEffect(() => {
     if (!isLoading && !user) router.replace("/connexion");
+    if (!isLoading && user?.role === "admin") router.replace("/admin");
   }, [user, isLoading, router]);
 
   useEffect(() => {

app/reservation/page.tsx

@@ -236,7 +236,9 @@ export default function Booking() {
             {!user && (
               <>
                 <div>
-                  <Label htmlFor="name">{t("auth.name")}</Label>
+                  <Label htmlFor="name">
+                    {t("auth.name")} <span className="text-destructive">*</span>
+                  </Label>
                   <Input
                     id="name"
                     value={name}
@@ -246,7 +248,9 @@ export default function Booking() {
                   />
                 </div>
                 <div>
-                  <Label htmlFor="email">{t("auth.email")}</Label>
+                  <Label htmlFor="email">
+                    {t("auth.email")} <span className="text-destructive">*</span>
+                  </Label>
                   <Input
                     id="email"
                     type="email"

components/Header.tsx

@@ -64,15 +64,15 @@ export default function Header() {
             {user ? (
               <div className="flex items-center gap-2">
                 <Link
-                  href="/mon-compte"
+                  href={user.role === "admin" ? "/admin" : "/mon-compte"}
                   className="hidden lg:flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
                   title={t("nav.account")}
                 >
                   <User className="h-4 w-4" />
-                  {user.full_name ?? user.email}
+                  {user.full_name || user.email}
                 </Link>
                 <Link
-                  href="/mon-compte"
+                  href={user.role === "admin" ? "/admin" : "/mon-compte"}
                   className="lg:hidden p-2 text-muted-foreground hover:text-foreground transition-colors"
                   title={t("nav.account")}
                 >

contexts/AdminContext.tsx

@@ -108,9 +108,12 @@ export const AdminProvider = ({ children }: { children: ReactNode }) => {
 
   const updateReservationStatus = async (id: string, status: "confirmed" | "cancelled") => {
     await bookingsApi.adminUpdateBookingStatus(id, status);
+    // Optimistic update for immediate feedback
     setReservations((prev) =>
       prev.map((r) => (r.id === id ? { ...r, status } : r))
     );
+    // Refresh from server to ensure consistency
+    refreshReservations();
   };
 
   const deleteReservation = async (id: string) => {

contexts/LanguageContext.tsx

@@ -83,6 +83,12 @@ const translations: Record<string, Record<Language, string>> = {
   "auth.no_account":        { fr: "Pas encore de compte ?", de: "Noch kein Konto?",      en: "No account yet?" },
   "auth.has_account":       { fr: "Déjà un compte ?",    de: "Bereits ein Konto?",       en: "Already have an account?" },
   "auth.logout":            { fr: "Se déconnecter",      de: "Abmelden",                 en: "Log out" },
+  "auth.forgot_link":       { fr: "Mot de passe oublié ?", de: "Passwort vergessen?",    en: "Forgot password?" },
+  "auth.forgot_title":      { fr: "Réinitialiser le mot de passe", de: "Passwort zurücksetzen", en: "Reset password" },
+  "auth.forgot_subtitle":   { fr: "Entrez votre email pour recevoir un lien de réinitialisation", de: "E-Mail eingeben, um einen Reset-Link zu erhalten", en: "Enter your email to receive a reset link" },
+  "auth.forgot_send":       { fr: "Envoyer le lien",      de: "Link senden",              en: "Send link" },
+  "auth.forgot_sent":       { fr: "Email envoyé ! Vérifiez votre boîte mail.", de: "E-Mail gesendet! Prüfen Sie Ihren Posteingang.", en: "Email sent! Check your inbox." },
+  "auth.back_to_login":     { fr: "Retour à la connexion", de: "Zurück zur Anmeldung",   en: "Back to login" },
 
   // ── Booking (public page) ────────────────────────────────────────────────────
   "booking.select_service":  { fr: "Choisir un service",         de: "Service wählen",          en: "Select service" },