update Ui

FRONTEND/src/components/Navbar/Navbar.tsx

@@ -57,7 +57,7 @@ const data = [
     link: '/tracking',
     label: 'Check in/out',
     icon: IconScan,
-    group: 'normal',
+    group: 'admin',
   },
   {
     link: '/worklogs',

FRONTEND/src/pages/Allocation/Allocation.tsx

@@ -3311,11 +3311,20 @@ const Allocation = () => {
         <Box
           style={{
             display: !loading ? 'flex' : 'none',
-            // display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'space-evenly',
+            flexFlow: 'column',
           }}
         >
+          <Box>
+          <Text fw={600} fz={'md'}>Admin/</Text>
+          <Text fw={700} fz={'lg'}>Personnel Allocation</Text>
+          <Text fw={600} fz={'sm'} c={'gray'} fs={'italic'} ml={'md'}>"P:" is the timspent/timeestimate number within the project itself</Text>
+          <Text fw={600} fz={'sm'} c={'gray'} fs={'italic'} ml={'md'}>"A:" is the timspent/timeestimate of all projects</Text>
+          </Box>
+          <Box style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-evenly',
+          }}>
           {!loading &&
             Object.keys(data?.projects).map((pro) => {
               return (
@@ -3511,7 +3520,7 @@ const Allocation = () => {
                   }
                 />
                 <Text ml={'md'} fw={700} size="lg">
-                  WARNING
+                  WARNING - NO ASSIGNMENT
                 </Text>
               </Card.Section>
 
@@ -3538,6 +3547,7 @@ const Allocation = () => {
             </Card>
           </Box>
           </Box>
+        </Box>
       </div>
     </div>
   )

FRONTEND/src/pages/LeaveManagement/LeaveManagement.tsx

@@ -247,7 +247,7 @@ const LeaveManagement = () => {
     <div>
       <div className={classes.title}>
         <h3>
-          <Text>Admin/</Text> Leave Management
+          Leave Management
         </h3>
       </div>
       <Drawer

FRONTEND/src/pages/Tickets/Tickets.tsx

@@ -323,7 +323,6 @@ const Tickets = () => {
     <div>
       <div className={classes.title}>
         <h3>
-          <Text>Admin/</Text>
           Tickets
         </h3>
         <Button

FRONTEND/src/pages/Timekeeping/Timekeeping.tsx

@@ -437,7 +437,6 @@ const Timekeeping = () => {
     <div>
       <div className={classes.title}>
         <h3>
-          <Text>Admin/</Text>
           Timekeeping
         </h3>
       </div>

FRONTEND/src/pages/Worklogs/Worklogs.tsx

@@ -214,7 +214,7 @@ const Worklogs = () => {
     <div style={{ display: 'flex', flexFlow: 'column' }}>
       <div className={classes.title}>
         <h3>
-          <Text>Admin/</Text>Worklogs
+          Worklogs
           {!updating ? (
             <Text fs={'italic'} fz={'xs'} c={'gray'}>
               Updating data in the background ...

FRONTEND/src/routes/main.tsx

@@ -39,7 +39,7 @@ const mainRoutes = [
   {
     path: '/tracking',
     element: (
-      <ProtectedRoute mode="home" permission="staff">
+      <ProtectedRoute mode="home" permission="admin,hr">
         <BasePage
           main={
             <>
@@ -188,8 +188,10 @@ const mainRoutes = [
           }
         ></BasePage>
       </ProtectedRoute>
-      )},
-    {path: '/profile',
+    ),
+  },
+  {
+    path: '/profile',
     element: (
       <ProtectedRoute mode="route" permission="admin,hr">
         <BasePage