modification concernant l'affichage de type de congés dans la pagedemande+Affichage du service du collabrateur et son rôle+ version mobile de la page demande
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { LogOut, Calendar, Home, FileText, Building2, Menu, X, Users } from 'lucide-react';
|
||||
import { LogOut, Calendar, Home, FileText, Building2, X, Users } from 'lucide-react';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
const Sidebar = ({ isOpen, onToggle }) => {
|
||||
@@ -9,9 +9,19 @@ const Sidebar = ({ isOpen, onToggle }) => {
|
||||
|
||||
const isActive = (path) => location.pathname === path;
|
||||
|
||||
const getRoleBadgeClass = (role) => {
|
||||
switch (role) {
|
||||
case 'Admin':
|
||||
return 'bg-red-100 text-red-800';
|
||||
case 'Manager':
|
||||
return 'bg-green-100 text-green-800';
|
||||
default:
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
|
||||
@@ -19,22 +29,18 @@ const Sidebar = ({ isOpen, onToggle }) => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className={`
|
||||
fixed inset-y-0 left-0 z-50 w-60 bg-white border-r border-gray-200 min-h-screen flex flex-col transform transition-transform duration-300 ease-in-out
|
||||
${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
|
||||
`}>
|
||||
{/* Mobile close button */}
|
||||
fixed inset-y-0 left-0 z-50 w-60 bg-white border-r border-gray-200 min-h-screen flex flex-col transform transition-transform duration-300 ease-in-out
|
||||
${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
|
||||
`}>
|
||||
{/* Bouton fermer (mobile) */}
|
||||
<div className="lg:hidden flex justify-end p-4">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="p-2 rounded-lg hover:bg-gray-100"
|
||||
>
|
||||
<button onClick={onToggle} className="p-2 rounded-lg hover:bg-gray-100">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Logo Section */}
|
||||
{/* Logo */}
|
||||
<div className="p-6 border-b border-gray-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
@@ -47,7 +53,7 @@ const Sidebar = ({ isOpen, onToggle }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
{/* Infos utilisateur */}
|
||||
<div className="p-4 lg:p-6 border-b border-gray-100">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<img
|
||||
@@ -56,73 +62,69 @@ const Sidebar = ({ isOpen, onToggle }) => {
|
||||
className="w-12 h-12 lg:w-16 lg:h-16 rounded-full object-cover mb-3"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900 text-sm lg:text-base">{user?.name || "Utilisateur"}</p>
|
||||
<p className="text-xs lg:text-sm text-gray-500">{user?.department || "Service"}</p>
|
||||
<span className="inline-block mt-2 px-3 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
|
||||
Employé
|
||||
</span>
|
||||
<p className="font-semibold text-gray-900 text-sm lg:text-base">
|
||||
{user?.name || "Utilisateur"}
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm text-gray-500">
|
||||
{user?.service || "Service non défini"}
|
||||
</p>
|
||||
{user?.role && (
|
||||
<span className={`inline-block mt-2 px-3 py-1 text-xs font-medium rounded-full ${getRoleBadgeClass(user.role)}`}>
|
||||
{user.role}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4">
|
||||
<div className="space-y-2">
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
<Link
|
||||
to="/dashboard"
|
||||
onClick={() => window.innerWidth < 1024 && onToggle()}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/dashboard") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Home className="w-5 h-5" />
|
||||
<span className="font-medium">Dashboard</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/demandes"
|
||||
onClick={() => window.innerWidth < 1024 && onToggle()}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/demandes") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-5 h-5" />
|
||||
<span className="font-medium">Demandes</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/calendrier"
|
||||
onClick={() => window.innerWidth < 1024 && onToggle()}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/calendrier") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Calendar className="w-5 h-5" />
|
||||
<span className="font-medium">Calendrier</span>
|
||||
</Link>
|
||||
|
||||
{(user?.role === 'Manager' || user?.role === 'Admin' || user?.role === 'Employe') && (
|
||||
<Link
|
||||
to="/dashboard"
|
||||
to="/manager"
|
||||
onClick={() => window.innerWidth < 1024 && onToggle()}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/dashboard")
|
||||
? "bg-blue-50 text-blue-700 border-r-2 border-blue-700"
|
||||
: "text-gray-700 hover:bg-gray-50"
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/manager") ? "bg-blue-50 text-blue-700 border-r-2 border-blue-700" : "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Home className="w-5 h-5" />
|
||||
<span className="font-medium">Dashboard</span>
|
||||
<Users className="w-5 h-5" />
|
||||
<span className="font-medium">
|
||||
{user?.role === 'Employe' ? 'Mon équipe' : 'Équipe'}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/demandes"
|
||||
onClick={() => window.innerWidth < 1024 && onToggle()}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/demandes")
|
||||
? "bg-blue-50 text-blue-700 border-r-2 border-blue-700"
|
||||
: "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-5 h-5" />
|
||||
<span className="font-medium">Demandes</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/calendrier"
|
||||
onClick={() => window.innerWidth < 1024 && onToggle()}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/calendrier")
|
||||
? "bg-blue-50 text-blue-700 border-r-2 border-blue-700"
|
||||
: "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Calendar className="w-5 h-5" />
|
||||
<span className="font-medium">Calendrier</span>
|
||||
</Link>
|
||||
|
||||
{(user?.role === 'Manager' || user?.role === 'Admin' || user?.role === 'Employe') && (
|
||||
<Link
|
||||
to="/manager"
|
||||
onClick={() => window.innerWidth < 1024 && onToggle()}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/manager")
|
||||
? "bg-blue-50 text-blue-700 border-r-2 border-blue-700"
|
||||
: "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Users className="w-5 h-5" />
|
||||
<span className="font-medium">
|
||||
{user?.role === 'Employe' ? 'Mon équipe' : 'Équipe'}
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Logout Button */}
|
||||
{/* Bouton déconnexion */}
|
||||
<div className="p-4 border-t border-gray-100">
|
||||
<button
|
||||
onClick={logout}
|
||||
@@ -137,4 +139,4 @@ const Sidebar = ({ isOpen, onToggle }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
export default Sidebar;
|
||||
|
||||
Reference in New Issue
Block a user