Bổ sung kiểm tra quyền chỉ admin mới vào được page ticket management

FRONTEND/src/components/Navbar/Navbar.tsx

@@ -47,7 +47,11 @@ const data = [
     icon: IconCalendarClock,
   },
   { link: '/tickets', label: 'Tickets', icon: IconTicket },
-  { link: '/tickets-management', label: 'Tickets Management', icon: IconDevices },
+  {
+    link: '/tickets-management',
+    label: 'Tickets Management',
+    icon: IconDevices,
+  },
   // { link: '/jira', label: 'Jira', icon: IconSubtask },
   // { link: '/custom-theme', label: 'Custom Theme', icon: IconBrush },
   // { link: '/general-setting', label: 'General Setting', icon: IconSettings },
@@ -102,29 +106,33 @@ const Navbar = ({
     getInitialValueInEffect: true,
   })
 
-  const links = data.map((item) => (
-    <a
-      className={classes.link}
-      data-active={item.label === active || undefined}
-      key={item.label}
-      onClick={() => {
-        // setHeader(item.label);
-        setActive(active)
-        if (active !== item.label) {
-          navigate(item.link)
-        }
-      }}
-    >
-      <item.icon className={classes.linkIcon} stroke={1.5} />
-      <span
-        className={`${classes.itemLabel} ${
-          isCompactMenu ? classes.labelCompactMenu : ''
-        } `}
+  const links = data.map((item) => {    
+    if (user?.user?.permission !== 'admin' && item.link === '/tickets-management')
+      return null
+    return (
+      <a
+        className={classes.link}
+        data-active={item.label === active || undefined}
+        key={item.label}
+        onClick={() => {
+          // setHeader(item.label);
+          setActive(active)
+          if (active !== item.label) {
+            navigate(item.link)
+          }
+        }}
       >
-        {item.label}
-      </span>
-    </a>
-  ))
+        <item.icon className={classes.linkIcon} stroke={1.5} />
+        <span
+          className={`${classes.itemLabel} ${
+            isCompactMenu ? classes.labelCompactMenu : ''
+          } `}
+        >
+          {item.label}
+        </span>
+      </a>
+    )
+  })
 
   const handleLogout = useCallback(() => {
     dispatch(logout(navigate))

FRONTEND/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -1,5 +1,9 @@
 import { useAppSelector } from '@/rtk/hooks'
-import { checkExpToken, removeTokens } from '@/rtk/localStorage'
+import {
+  checkExpToken,
+  checkPermissionAdmin,
+  removeTokens,
+} from '@/rtk/localStorage'
 import { selectAuthentication } from '@/rtk/slices/auth'
 import type { ReactNode } from 'react'
 import { Navigate } from 'react-router-dom'
@@ -7,16 +11,31 @@ import { Navigate } from 'react-router-dom'
 interface ProtectedRouteProps {
   children: ReactNode
   mode: string
+  permission: string
 }
 
-const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, mode }) => {
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
+  children,
+  mode,
+  permission = 'staff',
+}) => {
   const auth = useAppSelector(selectAuthentication)
   switch (mode) {
     case 'login':
       return checkExpToken() ? <Navigate to="/" /> : <>{children}</>
 
     case 'route':
-      return !auth.user ? <Navigate to="/login" /> : <>{children}</>
+      return !auth.user ? (
+        <Navigate to="/login" />
+      ) : permission == 'admin' ? (
+        checkPermissionAdmin() ? (
+          <>{children}</>
+        ) : (
+          <Navigate to="/" />
+        )
+      ) : (
+        <>{children}</>
+      )
 
     case 'home':
       if (checkExpToken()) {

FRONTEND/src/pages/TicketsManagement/TicketsManagement.tsx

@@ -2,16 +2,18 @@ import {
   addTicket,
   deleteTicket,
   getListMaster,
-  getTicketsOfUser
+  getTicketsOfUser,
 } from '@/api/Admin'
 import { DataTablePagination } from '@/components/DataTable/DataTable'
 import { Xdelete, create } from '@/rtk/helpers/CRUD'
 import { get } from '@/rtk/helpers/apiService'
 import {
+  Badge,
   Box,
   Button,
   Dialog,
   Group,
+  HoverCard,
   Modal,
   Select,
   Text,
@@ -153,18 +155,50 @@ const TicketsManagement = () => {
       name: 'reason',
       size: '20%',
       header: 'Notes',
+      render: (row: any) => {
+        return (
+          <HoverCard width={280} shadow="md">
+            <HoverCard.Target>
+              <Text fz={'sm'}>
+                {row.reason !== null &&
+                row.reason !== '' &&
+                row.reason.length > 25
+                  ? row.reason.slice(0, 25) + '...'
+                  : row.reason}
+              </Text>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <Textarea size="sm" autosize>
+                {row.reason}
+              </Textarea>
+            </HoverCard.Dropdown>
+          </HoverCard>
+        )
+      },
     },
     {
       name: 'status',
       size: '8%',
       header: 'Status',
+      render: (row: any) => {
+        switch (row.status) {
+          case 'WAITING':
+            return <Badge color="blue">Waiting</Badge>
+          case 'CONFIRMED':
+            return <Badge color="green">Confirmed</Badge>
+          case 'REFUSED':
+            return <Badge color="red">Refused</Badge>
+          default:
+            return null
+        }
+      },
     },
     {
       name: '#',
       size: '5%',
       header: 'Action',
       render: (row: any) => {
-        return (
+        return row.status === 'WAITING' ? (
           <Box className={classes.optionIcon}>
             <IconTrash
               className={classes.deleteIcon}
@@ -176,7 +210,7 @@ const TicketsManagement = () => {
               height={20}
             />
           </Box>
-        )
+        ) : null
       },
     },
   ]

FRONTEND/src/routes/main.tsx

@@ -21,7 +21,7 @@ const mainRoutes = [
     path: '/',
     // element: <ProtectedRoute mode="home"><PageHome /></ProtectedRoute>,
     element: (
-      <ProtectedRoute mode="home">
+      <ProtectedRoute mode="home" permission="staff">
         <Navigate to="/timekeeping"></Navigate>
       </ProtectedRoute>
     ),
@@ -29,7 +29,7 @@ const mainRoutes = [
   {
     path: '/welcome',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="route" permission="staff">
         <PageWelcome />
       </ProtectedRoute>
     ),
@@ -37,7 +37,7 @@ const mainRoutes = [
   {
     path: '/dashboard',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="route" permission="staff">
         <BasePage
           main={
             <>
@@ -51,7 +51,7 @@ const mainRoutes = [
   {
     path: '/general-setting',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="home" permission="staff">
         <BasePage
           main={
             <>
@@ -65,7 +65,7 @@ const mainRoutes = [
   {
     path: '/custom-theme',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="home" permission="staff">
         <BasePage
           main={
             <>
@@ -79,7 +79,7 @@ const mainRoutes = [
   {
     path: '/tracking',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="home" permission="staff">
         <BasePage
           main={
             <>
@@ -93,7 +93,7 @@ const mainRoutes = [
   // {
   //   path: '/jira',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -107,7 +107,7 @@ const mainRoutes = [
   {
     path: '/worklogs',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="home" permission="staff">
         <BasePage
           main={
             <>
@@ -121,7 +121,7 @@ const mainRoutes = [
   {
     path: '/timekeeping',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="home" permission="staff">
         <BasePage
           main={
             <>
@@ -135,7 +135,7 @@ const mainRoutes = [
   {
     path: '/leave-management',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="home" permission="staff">
         <BasePage
           main={
             <>
@@ -149,7 +149,7 @@ const mainRoutes = [
   {
     path: '/tickets',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="route" permission="staff">
         <BasePage
           main={
             <>
@@ -163,7 +163,7 @@ const mainRoutes = [
   {
     path: '/tickets-management',
     element: (
-      <ProtectedRoute mode="route">
+      <ProtectedRoute mode="route" permission="admin">
         <BasePage
           main={
             <>
@@ -177,7 +177,7 @@ const mainRoutes = [
   // {
   //   path: '/packages',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -191,7 +191,7 @@ const mainRoutes = [
   // {
   //   path: '/discounts',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -205,7 +205,7 @@ const mainRoutes = [
   // {
   //   path: '/client',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -219,7 +219,7 @@ const mainRoutes = [
   // {
   //   path: '/banner',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -233,7 +233,7 @@ const mainRoutes = [
   // {
   //   path: '/order',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -247,7 +247,7 @@ const mainRoutes = [
   // {
   //   path: '/sn-check-history',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -261,7 +261,7 @@ const mainRoutes = [
   // {
   //   path: '/contacts',
   //   element: (
-  //     <ProtectedRoute mode="route">
+  //     <ProtectedRoute mode="home" permission="staff">
   //       <BasePage
   //         main={
   //           <>
@@ -275,7 +275,7 @@ const mainRoutes = [
   {
     path: '/login',
     element: (
-      <ProtectedRoute mode="login">
+      <ProtectedRoute mode="login" permission="staff">
         <PageLogin />
       </ProtectedRoute>
     ),

FRONTEND/src/rtk/localStorage.ts

@@ -17,6 +17,21 @@ export const checkExpToken = () => {
     return false
   }
 }
+
+export const checkPermissionAdmin = () => {
+  const user = localStorage.getItem('user')
+  if (user) {
+    const parsedUser = JSON.parse(user)
+    if (parsedUser.user.permission == 'admin') {
+      return true
+    } else {
+      return false
+    }
+  } else {
+    return false
+  }
+}
+
 export const getUser = () => localStorage.getItem('user') as string
 export const getAccessToken = () =>
   localStorage.getItem('token')?.slice(1, -1) as string