soufiane
0ade13d50d
Design Updates: - Apply consistent golden/beige color scheme to all pages - Update client dashboard, contact, FAQ, history, game, lots, profile, rules, terms, and privacy pages - Replace green/orange colors with golden palette (#d4a574, #c4956a) - Add golden gradient backgrounds and borders throughout Header Improvements: - Fix button layout to maintain proper form when page is zoomed - Remove hover:scale-105 effects that caused deformation - Add whitespace-nowrap to prevent text wrapping - Add flex-shrink-0 to prevent element shrinking - Add gap-4 to main header container for proper spacing - Fix user info card with text ellipsis for long names/emails - Improve spacing between "Participer" button and user card Profile Page Updates: - Remove "Dernière modification" field - Update all colors to golden theme API Endpoints: - Fix user profile endpoint from /user/profile to /users/profile Statistics Icons: - Update dashboard statistics icons with distinct colors - Total Participations: blue - Gains réclamés: green - En attente: yellow - Rejetés: red 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
289 lines
11 KiB
TypeScript
289 lines
11 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { profileUpdateSchema, ProfileUpdateFormData } from "@/lib/validations";
|
|
import { Input } from "@/components/ui/Input";
|
|
import Button from "@/components/Button";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import { userService } from "@/services/user.service";
|
|
import toast from "react-hot-toast";
|
|
import { useRouter } from "next/navigation";
|
|
import { ROUTES } from "@/utils/constants";
|
|
import { formatDate } from "@/utils/helpers";
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export default function ProfilePage() {
|
|
const { user, isAuthenticated, refreshUser } = useAuth();
|
|
const router = useRouter();
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isReady, setIsReady] = useState(false);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm<ProfileUpdateFormData>({
|
|
resolver: zodResolver(profileUpdateSchema),
|
|
defaultValues: {
|
|
firstName: user?.firstName || "",
|
|
lastName: user?.lastName || "",
|
|
phone: user?.phone || "",
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!isAuthenticated || !user) {
|
|
router.push(ROUTES.LOGIN);
|
|
} else {
|
|
setIsReady(true);
|
|
}
|
|
}, [isAuthenticated, user, router]);
|
|
|
|
if (!isReady || !user) {
|
|
return null;
|
|
}
|
|
|
|
const onSubmit = async (data: ProfileUpdateFormData) => {
|
|
setIsSubmitting(true);
|
|
try {
|
|
await userService.updateProfile(data);
|
|
await refreshUser();
|
|
toast.success("Profil mis à jour avec succès");
|
|
setIsEditing(false);
|
|
} catch (error: any) {
|
|
toast.error(error.message || "Erreur lors de la mise à jour du profil");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
reset({
|
|
firstName: user?.firstName || "",
|
|
lastName: user?.lastName || "",
|
|
phone: user?.phone || "",
|
|
});
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const getRoleBadgeVariant = (role: string) => {
|
|
switch (role) {
|
|
case "admin":
|
|
return "danger";
|
|
case "employee":
|
|
return "warning";
|
|
default:
|
|
return "info";
|
|
}
|
|
};
|
|
|
|
const getRoleLabel = (role: string) => {
|
|
switch (role) {
|
|
case "admin":
|
|
return "Administrateur";
|
|
case "employee":
|
|
return "Employé";
|
|
default:
|
|
return "Client";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
<h1 className="text-4xl font-bold text-[#5a5a4e] mb-8">Mon profil</h1>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{/* Profile Info Card */}
|
|
<div className="md:col-span-2">
|
|
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
|
|
<div className="px-6 py-4 border-b border-[#e5e4dc]">
|
|
<h2 className="text-xl font-bold text-[#5a5a4e]">Informations personnelles</h2>
|
|
</div>
|
|
<div className="p-6">
|
|
{!isEditing ? (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-[#8a8a7a]">
|
|
Prénom
|
|
</label>
|
|
<p className="text-lg text-[#5a5a4e]">{user.firstName}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-[#8a8a7a]">
|
|
Nom
|
|
</label>
|
|
<p className="text-lg text-[#5a5a4e]">{user.lastName}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-[#8a8a7a]">
|
|
Email
|
|
</label>
|
|
<p className="text-lg text-[#5a5a4e]">{user.email}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-[#8a8a7a]">
|
|
Téléphone
|
|
</label>
|
|
<p className="text-lg text-[#5a5a4e]">
|
|
{user.phone || "Non renseigné"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-[#8a8a7a]">
|
|
Rôle
|
|
</label>
|
|
<div className="mt-1">
|
|
<Badge variant={getRoleBadgeVariant(user.role)}>
|
|
{getRoleLabel(user.role)}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div className="pt-4">
|
|
<button
|
|
onClick={() => setIsEditing(true)}
|
|
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
|
|
>
|
|
Modifier mes informations
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<Input
|
|
id="firstName"
|
|
type="text"
|
|
label="Prénom"
|
|
error={errors.firstName?.message}
|
|
{...register("firstName")}
|
|
required
|
|
/>
|
|
<Input
|
|
id="lastName"
|
|
type="text"
|
|
label="Nom"
|
|
error={errors.lastName?.message}
|
|
{...register("lastName")}
|
|
required
|
|
/>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
label="Email"
|
|
value={user.email}
|
|
disabled
|
|
helperText="L'email ne peut pas être modifié"
|
|
/>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
label="Téléphone"
|
|
error={errors.phone?.message}
|
|
{...register("phone")}
|
|
/>
|
|
<div className="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
|
|
>
|
|
{isSubmitting ? "Enregistrement..." : "Enregistrer"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleCancel}
|
|
disabled={isSubmitting}
|
|
className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] font-bold px-6 py-3 rounded-lg transition-all"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Account Status Card */}
|
|
<div>
|
|
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
|
|
<div className="px-6 py-4 border-b border-[#e5e4dc]">
|
|
<h2 className="text-xl font-bold text-[#5a5a4e]">Statut du compte</h2>
|
|
</div>
|
|
<div className="p-6 space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-[#8a8a7a]">
|
|
Email vérifié
|
|
</label>
|
|
<div className="mt-1">
|
|
{user.isVerified ? (
|
|
<Badge variant="success">Vérifié ✓</Badge>
|
|
) : (
|
|
<Badge variant="warning">Non vérifié</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-[#8a8a7a]">
|
|
Membre depuis
|
|
</label>
|
|
<p className="text-sm text-[#5a5a4e] mt-1">
|
|
{formatDate(user.createdAt)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions Card */}
|
|
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc] mt-6">
|
|
<div className="px-6 py-4 border-b border-[#e5e4dc]">
|
|
<h2 className="text-xl font-bold text-[#5a5a4e]">Actions rapides</h2>
|
|
</div>
|
|
<div className="p-6 space-y-2">
|
|
{user.role === "CLIENT" && (
|
|
<>
|
|
<button
|
|
onClick={() => router.push(ROUTES.GAME)}
|
|
className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
|
|
>
|
|
Jouer
|
|
</button>
|
|
<button
|
|
onClick={() => router.push(ROUTES.HISTORY)}
|
|
className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
|
|
>
|
|
Historique
|
|
</button>
|
|
</>
|
|
)}
|
|
{user.role === "EMPLOYEE" && (
|
|
<button
|
|
onClick={() => router.push(ROUTES.EMPLOYEE_DASHBOARD)}
|
|
className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
|
|
>
|
|
Tableau de bord
|
|
</button>
|
|
)}
|
|
{user.role === "ADMIN" && (
|
|
<button
|
|
onClick={() => router.push(ROUTES.ADMIN_DASHBOARD)}
|
|
className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
|
|
>
|
|
Administration
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|