84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { User, Mail, Calendar, Clock, Award,AlertTriangle } from 'lucide-react';
|
|
|
|
interface UserProfileProps {
|
|
user: {
|
|
id?: number;
|
|
nom: string;
|
|
prenom: string;
|
|
email: string;
|
|
department?: string;
|
|
role?: string;
|
|
joinDate?: string;
|
|
};
|
|
totalHours: number;
|
|
totalEntries: number;
|
|
}
|
|
|
|
const UserProfile: React.FC<UserProfileProps> = ({ user, totalHours, totalEntries }) => {
|
|
// Valeurs par défaut si les données manquent
|
|
|
|
const role ='Formateur';
|
|
const joinDate = user.joinDate || new Date().getFullYear().toString();
|
|
|
|
return (
|
|
<div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
|
|
<div className="bg-[#198ab4] p-4 sm:p-6">
|
|
<div className="flex flex-col sm:flex-row items-center gap-4">
|
|
<div className="w-16 h-16 sm:w-20 sm:h-20 bg-white/20 rounded-full flex items-center justify-center">
|
|
<User className="h-8 w-8 sm:h-10 sm:w-10 text-white" />
|
|
</div>
|
|
<div className="text-center sm:text-left">
|
|
<h2 className="text-xl sm:text-2xl font-bold text-white">
|
|
{user.prenom} {user.nom}
|
|
</h2>
|
|
<p className="text-blue-100 text-sm sm:text-base">{role}</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Informations du profil */}
|
|
<div className="p-4 sm:p-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
|
|
<div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
|
|
<Mail className="h-5 w-5 text-gray-600 flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-gray-500">Email</p>
|
|
<p className="text-sm font-medium text-gray-800 truncate">{user.email}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
|
|
<Calendar className="h-5 w-5 text-gray-600 flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-gray-500">Depuis</p>
|
|
<p className="text-sm font-medium text-gray-800">{joinDate}</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{/* Statistiques */}
|
|
<div className="border-t border-gray-100 pt-4">
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-4">Statistiques du mois</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="text-center p-4 bg-blue-50 rounded-lg">
|
|
<div className="text-2xl sm:text-3xl font-bold text-cyan-600">{totalHours}</div>
|
|
<div className="text-xs sm:text-sm text-cyan-600">Heures déclarées</div>
|
|
</div>
|
|
<div className="text-center p-4 bg-[#7e5aa2cc] rounded-lg">
|
|
<div className="text-2xl sm:text-3xl font-bold text-[#fff]">{totalEntries}</div>
|
|
<p className="text-xs sm:text-sm text-[#fff]">Déclarations</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserProfile; |