oimer/GTA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vue global collaborateur pour manager

Browse Source
This commit is contained in:
Ouijdane IMER
2025-08-28 11:59:58 +02:00
parent ed4a7c02ca
commit ac0ae03904
14 changed files with 733 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
project/src/components/Sidebar.jsx
View File

@@ -15,8 +15,10 @@ const Sidebar = ({ isOpen, onToggle }) => {
return 'bg-red-100 text-red-800';
case 'Validateur':
return 'bg-green-100 text-green-800';
case 'Collaborateur':
return 'bg-cyan-600 text-white';
default:
return 'bg-blue-100 text-blue-800';
return 'bg-gray-100 text-gray-800';
}
};
@@ -29,10 +31,12 @@ const Sidebar = ({ isOpen, onToggle }) => {
/>
)}
<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'}
`}>
<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'}
`}
>
{/* Bouton fermer (mobile) */}
<div className="lg:hidden flex justify-end p-4">
<button onClick={onToggle} className="p-2 rounded-lg hover:bg-gray-100">
@@ -43,7 +47,7 @@ const Sidebar = ({ isOpen, onToggle }) => {
{/* 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">
<div className="w-10 h-10 bg-cyan-600 rounded-lg flex items-center justify-center">
<Building2 className="w-6 h-6 text-white" />
</div>
<div>
@@ -69,7 +73,11 @@ const Sidebar = ({ isOpen, onToggle }) => {
{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)}`}>
<span
className={`inline-block mt-2 px-3 py-1 text-xs font-medium rounded-full ${getRoleBadgeClass(
user.role
)}`}
>
{user.role}
</span>
)}
@@ -82,7 +90,9 @@ const Sidebar = ({ isOpen, onToggle }) => {
<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"
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/dashboard")
? "bg-blue-50 text-cyan-700 border-r-2 border-cyan-700"
: "text-gray-700 hover:bg-gray-50"
}`}
>
<Home className="w-5 h-5" />
@@ -92,7 +102,9 @@ const Sidebar = ({ isOpen, onToggle }) => {
<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"
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/demandes")
? "bg-blue-50 text-cyan-700 border-r-2 border-cyan-700"
: "text-gray-700 hover:bg-gray-50"
}`}
>
<FileText className="w-5 h-5" />
@@ -102,26 +114,37 @@ const Sidebar = ({ isOpen, onToggle }) => {
<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"
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive("/calendrier")
? "bg-blue-50 text-cyan-700 border-r-2 border-cyan-700"
: "text-gray-700 hover:bg-gray-50"
}`}
>
<Calendar className="w-5 h-5" />
<span className="font-medium">Calendrier</span>
</Link>
{(user?.role === 'Validateur' || user?.role === 'Admin' || user?.role === 'Collaborateur') && (
<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 === 'Collaborateur' ? 'Mon équipe' : 'Équipe'}
</span>
</Link>
)}
{/* Rubrique dynamique Collaborateur / Validateur */}
{(user?.role === "Collaborateur" ||
user?.role === "Validateur" ||
user?.role === "Manager" ||
user?.role === "RH" ||
user?.role === "Admin") && (
<Link
to={user?.role === "Collaborateur" ? "/collaborateur" : "/manager"}
onClick={() => window.innerWidth < 1024 && onToggle()}
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive(user?.role === "Collaborateur" ? "/collaborateur" : "/manager")
? "bg-blue-50 text-cyan-700 border-r-2 border-cyan-700"
: "text-gray-700 hover:bg-gray-50"
}`}
>
<Users className="w-5 h-5" />
<span className="font-medium">
{user?.role === "Collaborateur"
? "Mon équipe"
: "Mon équipe"}
</span>
</Link>
)}
</nav>
{/* Bouton déconnexion */}