Merge branch 'master' into Sprint-4/MS-37-FE-Evaluation

FRONTEND/src/components/Navbar/Navbar.tsx

@@ -38,12 +38,13 @@ import {
   IconSun,
   IconTicket,
   IconUsersGroup,
-  IconZoomExclamation
+  IconZoomExclamation,
 } from '@tabler/icons-react'
 import { useCallback, useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import PasswordRequirementInput from '../PasswordRequirementInput/PasswordRequirementInput'
 import classes from './NavbarSimpleColored.module.css'
+import { checkPermissions } from '@/utils/checkRoles'
 
 const data = [
   // { link: '/dashboard', label: 'Dashboard', icon: IconHome },
@@ -51,67 +52,84 @@ const data = [
     link: '/timekeeping',
     label: 'Timekeeping',
     icon: IconCalendar,
-    group: 'normal',
+    permissions: 'admin,hr,staff,tester',
+    group: 'staff',
   },
   {
     link: '/tracking',
     label: 'Check in/out',
     icon: IconScan,
-    group: 'admin',
+    permissions: 'hr,admin',
+    group: 'other',
   },
   {
     link: '/worklogs',
     label: 'Worklogs',
     icon: IconReport,
-    group: 'normal',
+    permissions: 'admin,hr,staff,tester',
+    group: 'staff',
   },
   {
     link: '/leave-management',
     label: 'Leave Management',
     icon: IconCalendarClock,
-    group: 'normal',
+    permissions: 'admin,hr,staff,tester',
+    group: 'staff',
+  },
+  {
+    link: '/tickets',
+    label: 'Tickets',
+    icon: IconTicket,
+    permissions: 'admin,hr,staff,tester',
+    group: 'staff',
   },
-  { link: '/tickets', label: 'Tickets', icon: IconTicket, group: 'normal' },
   {
     link: '/tickets-management',
     label: 'Tickets Management',
     icon: IconDevices,
-    group: 'admin',
+    permissions: 'hr,admin',
+    group: 'other',
   },
   {
     link: '/users',
     label: 'Users Management',
     icon: IconUsersGroup,
+    permissions: 'admin',
     group: 'admin',
   },
   {
     link: '/sprint-review',
     label: 'Sprint Review',
     icon: IconListCheck,
+    permissions: 'admin',
     group: 'admin',
   },
   {
     link: '/test-report',
     label: 'Test Report',
     icon: IconZoomExclamation,
-    group: 'admin',
+    permissions: 'admin,tester',
+    group: 'test',
   },
   {
     link: '/allocation',
     label: 'Personnel allocation',
     icon: IconBinaryTree2,
-    group: 'normal',
+    permissions: 'admin,hr,staff,tester',
+    group: 'staff',
   },
   {
     link: '/profile',
     label: 'Profile',
     icon: IconZoomExclamation,
+    permissions: 'hidden',
     group: 'hidden',
   },
   {
     link: '/staff-avaluation',
     label: 'Staff evaluation',
     icon: IconChartDots2,
+    permissions: 'admin',
     group: 'admin',
   },
   // { link: '/jira', label: 'Jira', icon: IconSubtask },
@@ -205,22 +223,17 @@ const Navbar = ({
   // })
 
   const group = [
-    { name: 'normal', label: 'Normal' },
-    { name: 'admin', label: 'Admin' },
+    { name: 'staff', label: 'General', permissions: 'admin,hr,staff,tester' },
+    { name: 'admin', label: 'Admin', permissions: 'admin' },
+    { name: 'other', label: 'Other', permissions: 'admin,hr' },
+    { name: 'test', label: 'Test', permissions: 'admin,tester' },
   ]
 
   const links = group.map((g) => {
     return (
       <div key={g.name}>
         <Divider
-          display={
-            g.name === 'normal'
-              ? 'block'
-              : user?.user?.permission.includes(g.name) ||
-                user?.user?.permission.includes('hr')
-              ? 'block'
-              : 'none'
-          }
+          display={checkPermissions(g.permissions) ? 'block' : 'none'}
           my="xs"
           label={
             <span style={{ color: 'white', fontWeight: 700 }}>{g.label}</span>
@@ -229,12 +242,7 @@ const Navbar = ({
         />
         {data
           .filter((i) => {
-            return (
-              i.group === g.name &&
-              (user?.user?.permission.includes('admin') ||
-                user?.user?.permission.includes('hr') ||
-                g.name !== 'admin')
-            )
+            return i.group === g.name && checkPermissions(i.permissions)
           })
           .map((item) => (
             <a
@@ -242,7 +250,6 @@ const Navbar = ({
               data-active={item.label === active || undefined}
               key={item.link}
               onClick={() => {
-                // setHeader(item.label);
                 setActive(active)
                 if (active !== item.label) {
                   navigate(item.link)

FRONTEND/src/utils/checkRoles.ts

@@ -0,0 +1,19 @@
+import { useAppSelector } from "@/rtk/hooks"
+
+export const checkPermissions = (requirement:string) => {
+    try {
+        const requirePermissions = requirement.split(',')
+        const user = useAppSelector((state) => state.authentication.user)
+        const userPermissoions = user?.user?.permission.split(',')
+
+        for(let i=0; i <= userPermissoions.length; i++){
+            if(requirePermissions.includes(userPermissoions[i])){
+                return true
+            }
+        }
+        return false
+    } catch (error) {
+        console.log(error)
+        return false
+    }
+}