update roles pages✅
This commit is contained in:
YasinShaikh123
@@ -33,28 +33,28 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
|
||||
fontWeight="100"
|
||||
transition="background-color 0.2s"
|
||||
_before={{
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#FFF",
|
||||
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
||||
transform: isSwitchOn ? "translateX(65px)" : "translateX(0)",
|
||||
transition: "transform 0.2s",
|
||||
left:'2px'
|
||||
|
||||
// content: '""',
|
||||
// position: "absolute",
|
||||
// width: "20px",
|
||||
// height: "20px",
|
||||
// height: "25px",
|
||||
// width: "25px",
|
||||
// left: "0px",
|
||||
// background:
|
||||
// "conic-gradient(rgb(104, 104, 104), white, rgb(104, 104, 104), white, rgb(104, 104, 104))",
|
||||
// borderRadius: "50%",
|
||||
// backgroundColor: "#FFF",
|
||||
// boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
||||
// transitionDuration: ".3s",
|
||||
// boxShadow: " 5px 2px 7px rgba(8, 8, 8, 0.308)",
|
||||
// transform: isSwitchOn ? "translateX(65px)" : "translateX(0)",
|
||||
// transition: "transform 0.2s",
|
||||
// left:'2px'
|
||||
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
height: "25px",
|
||||
width: "25px",
|
||||
left: "0px",
|
||||
background:
|
||||
"conic-gradient(rgb(104, 104, 104), white, rgb(104, 104, 104), white, rgb(104, 104, 104))",
|
||||
borderRadius: "50%",
|
||||
transitionDuration: ".3s",
|
||||
boxShadow: " 5px 2px 7px rgba(8, 8, 8, 0.308)",
|
||||
transform: isSwitchOn ? "translateX(65px)" : "translateX(0)",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
@@ -62,7 +62,7 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
|
||||
fontWeight="400"
|
||||
zIndex={1}
|
||||
position="absolute"
|
||||
mb={0}
|
||||
mb={1}
|
||||
color={isSwitchOn ? "#fff" : "#fff"}
|
||||
left={isSwitchOn ? "10px" : "auto"}
|
||||
right={isSwitchOn ? "auto" : "10px"}
|
||||
|
||||
@@ -41,6 +41,7 @@ export const generateUniqueId = () => {
|
||||
|
||||
const GlobalStateProvider = ({ children }) => {
|
||||
const [isAuthenticate, setIsAuthenticate] = useState(false);
|
||||
|
||||
const [ employees, setEmployees ] = useState([
|
||||
{
|
||||
"id": 1,
|
||||
@@ -448,6 +449,187 @@ const GlobalStateProvider = ({ children }) => {
|
||||
]
|
||||
)
|
||||
|
||||
const [ department, setDepartment ] = useState([
|
||||
{
|
||||
"id": 1,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"department":"FInance",
|
||||
"role": "Sr. Manager",
|
||||
"createdBy": "Reethik Thota",
|
||||
"dateTime": "12 June 2024, 10.00 am",
|
||||
"approvedBy": "Pooja Patade",
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
const [ roles, setRoles ] = useState([
|
||||
{
|
||||
"id": 1,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Published",
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Published",
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Saved as draft",
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Published",
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Saved as draft",
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Saved as draft",
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Saved as draft",
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Saved as draft",
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Published",
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"role":"Sr Manager",
|
||||
"department": "Finance",
|
||||
"createdDuration": "11 June 2024, 10 am",
|
||||
"createdBy": "Pooja Patade",
|
||||
"permissions": "Subadmin",
|
||||
"status": "Saved as draft",
|
||||
},
|
||||
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<GlobalStateContext.Provider
|
||||
value={{
|
||||
@@ -456,7 +638,11 @@ const GlobalStateProvider = ({ children }) => {
|
||||
isAuthenticate,
|
||||
setIsAuthenticate,
|
||||
employees,
|
||||
setEmployees
|
||||
setEmployees,
|
||||
department,
|
||||
setDepartment,
|
||||
roles,
|
||||
setRoles,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -6,6 +6,8 @@ import {
|
||||
Icon,
|
||||
Image,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
@@ -25,6 +27,7 @@ import {
|
||||
CalendarIcon,
|
||||
ChevronDownIcon,
|
||||
EmailIcon,
|
||||
SearchIcon,
|
||||
ViewIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { MdFilterList, MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
|
||||
@@ -188,16 +191,19 @@ const Employees = () => {
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<InputGroup width={300} size="sm" ml={5}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Type to search..."
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
|
||||
const ManageDepartmentAndRoles = () => {
|
||||
return (
|
||||
<Box h={"100%"} p={6}>
|
||||
<MiniHeader
|
||||
title={"My Requests"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
backButton={true}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageDepartmentAndRoles;
|
||||
@@ -0,0 +1,82 @@
|
||||
import {
|
||||
background,
|
||||
Box,
|
||||
Button,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import { RxCross1 } from "react-icons/rx";
|
||||
import { GoArrowRight } from "react-icons/go";
|
||||
|
||||
const AddDepartment = ({ isOpen, onClose }) => {
|
||||
const [tasks, setTasks] = useState([]); // State for tasks
|
||||
const [inputValue, setInputValue] = useState(""); // State for input field
|
||||
|
||||
// Function to add a new task
|
||||
const addTask = () => {
|
||||
if (inputValue.trim() !== "") {
|
||||
setTasks([...tasks, { text: inputValue, completed: false }]);
|
||||
setInputValue(""); // Clear the input field after adding
|
||||
}
|
||||
};
|
||||
|
||||
// Function to toggle the completion status of a task
|
||||
const toggleTask = (index) => {
|
||||
const newTasks = [...tasks];
|
||||
newTasks[index].completed = !newTasks[index].completed;
|
||||
setTasks(newTasks);
|
||||
};
|
||||
|
||||
// Function to delete a task
|
||||
const deleteTask = (index) => {
|
||||
const newTasks = tasks.filter((_, i) => i !== index);
|
||||
setTasks(newTasks);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Modal isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader fontSize={"md"}>Add department</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box backgroundColor={"#f3f3f9"} p={4} rounded={4}>
|
||||
<Box position={"relative"} borderBottom={"1px solid #ccc"} pb={2}>
|
||||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
style={{width:'100%', backgroundColor:"transparent", fontSize:"14px",height:"32px",outline: 'none',fontWeight:"500"}}
|
||||
/>
|
||||
<Button fontSize={"xl"} fontWeight={600} onClick={addTask} colorScheme="customPurple" size={"sm"} position={"absolute"} top={"0"} right={"0"}><GoArrowRight /></Button>
|
||||
</Box>
|
||||
<Box pt={4} pb={4}>
|
||||
{tasks.map((task, index) => (
|
||||
<Button me={2} mb={3} size={"sm"} fontSize={"sm"} fontWeight={500} key={index} border={"1px solid #6311CB"} rounded={"50px"} bg={"#6311CB0D"}>
|
||||
<Text as={"span"} onClick={() => toggleTask(index)} color={"#000"} fontWeight={500}>{task.text}</Text>
|
||||
<Button colorScheme='transprent' color="customPurple" variant='ghost' fontSize={"md"} pr={0} onClick={() => deleteTask(index)}><RxCross1 /></Button>
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter pb={8}>
|
||||
<Button colorScheme='gray' mr={3} onClick={onClose} fontSize={"sm"} size={"sm"} w={"50%"}>Cancel</Button>
|
||||
<Button colorScheme="customPurple" size={"sm"} fontSize={"sm"} fontWeight={500} w={"50%"}>Add</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddDepartment;
|
||||
@@ -0,0 +1,163 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
HStack,
|
||||
Icon,
|
||||
Image,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Radio,
|
||||
Tag,
|
||||
TagLabel,
|
||||
Text,
|
||||
useDisclosure,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import {
|
||||
AddIcon,
|
||||
CalendarIcon,
|
||||
ChevronDownIcon,
|
||||
SearchIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { PiReceipt } from "react-icons/pi";
|
||||
import { Link } from "react-router-dom";
|
||||
import { FaArrowUpFromBracket } from "react-icons/fa6";
|
||||
import { LuListFilter } from "react-icons/lu";
|
||||
import { BsFilterRight } from "react-icons/bs";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
|
||||
import NormalTable from "../../../Components/DataTable/NormalTable";
|
||||
import SwitchButton from "../../../Components/SwitchButton";
|
||||
import AddDepartment from "./AddDepartmentModal";
|
||||
|
||||
const Department = () => {
|
||||
const { department } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isSwitchOn, setIsSwitchOn] = useState(true);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
useEffect(() => {
|
||||
// Set isLoading to true
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate a 3-second delay
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false); // Set isLoading to false after 3 seconds
|
||||
}, 500);
|
||||
|
||||
// Cleanup the timer when the component unmounts or when the useEffect re-runs
|
||||
return () => clearTimeout(timer);
|
||||
}, []); // Empty dependency array means this effect runs once after the component mounts
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = [
|
||||
"department",
|
||||
"Role",
|
||||
"Created by",
|
||||
"Date & time",
|
||||
"Approved by",
|
||||
"Action",
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
const extractedArray = department.map((item, index) => ({
|
||||
department: item?.department,
|
||||
Role: item?.role,
|
||||
"Created by": item?.createdBy,
|
||||
"Date & time": item?.dateTime,
|
||||
"Approved by": item?.approvedBy,
|
||||
Action: (
|
||||
<Box
|
||||
display={"flex"}
|
||||
gap={1}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"}>
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
// pb={0}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<InputGroup width={300} size="sm" ml={5}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<LuListFilter fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Filter
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<PrimaryButton onClick={onOpen} leftIcon={<AddIcon />} title={"Add Department"} />
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
<AddDepartment isOpen={isOpen} onClose={onClose} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Department;
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import MiniHeader from "../../../Components/MiniHeader";
|
||||
import Department from "./Department";
|
||||
import Roles from "./Roles";
|
||||
|
||||
const ManageDepartmentAndRoles = () => {
|
||||
return (
|
||||
<Box p={4} overflowX={"scroll"}>
|
||||
<Tabs>
|
||||
<TabList background={"#fff"} pt={2}>
|
||||
<Tab fontSize={"sm"} fontWeight={500}>Department</Tab>
|
||||
<Tab fontSize={"sm"}>Roles</Tab>
|
||||
<Tab fontSize={"sm"}>Employee permissions</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanels>
|
||||
<TabPanel px={0}>
|
||||
<Department />
|
||||
</TabPanel>
|
||||
<TabPanel px={0}>
|
||||
<Roles />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<p>three!</p>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageDepartmentAndRoles;
|
||||
192
src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx
Normal file
192
src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Icon,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Radio,
|
||||
Text,
|
||||
useDisclosure,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
|
||||
import { LuListFilter } from "react-icons/lu";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
|
||||
import NormalTable from "../../../Components/DataTable/NormalTable";
|
||||
import SwitchButton from "../../../Components/SwitchButton";
|
||||
import AddDepartment from "./AddDepartmentModal";
|
||||
import { PiReceipt } from "react-icons/pi";
|
||||
|
||||
const Roles = () => {
|
||||
const { roles } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isSwitchOn, setIsSwitchOn] = useState(true);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
useEffect(() => {
|
||||
// Set isLoading to true
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate a 3-second delay
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false); // Set isLoading to false after 3 seconds
|
||||
}, 500);
|
||||
|
||||
// Cleanup the timer when the component unmounts or when the useEffect re-runs
|
||||
return () => clearTimeout(timer);
|
||||
}, []); // Empty dependency array means this effect runs once after the component mounts
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = [
|
||||
"ID",
|
||||
"Role",
|
||||
"Department",
|
||||
"Created duration",
|
||||
"Created By",
|
||||
"Permissions",
|
||||
"Status",
|
||||
"Action",
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
const extractedArray = roles.map((item, index) => ({
|
||||
ID: (
|
||||
<Checkbox colorScheme="purple" value="1">
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item?.ID} {index + 1}
|
||||
</Text>
|
||||
</Checkbox>
|
||||
),
|
||||
Role: item?.role,
|
||||
Department: item?.department,
|
||||
"Created duration": item?.createdDuration,
|
||||
"Created By": item?.createdBy,
|
||||
Permissions:(
|
||||
<Box bg='#dfdfdf' display={"inline-block"} p={1} rounded={4}>
|
||||
{item?.permissions}
|
||||
</Box>
|
||||
),
|
||||
Status: (
|
||||
<Box
|
||||
p={1} display={"flex"} justifyContent={"center"} rounded={"50px"}
|
||||
bg={
|
||||
item?.status === "Published"
|
||||
? "#00A43814"
|
||||
: item?.status === "Saved as draft"
|
||||
? "#E0BC0114"
|
||||
: null
|
||||
}
|
||||
color={
|
||||
item?.status === "Published"
|
||||
? "#00A438"
|
||||
: item?.status === "Saved as draft"
|
||||
? "#E0BC01"
|
||||
: null
|
||||
}
|
||||
>
|
||||
{item?.status}
|
||||
</Box>
|
||||
),
|
||||
Action: (
|
||||
<Box
|
||||
display={"flex"}
|
||||
gap={1}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"}>
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
// pb={0}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<InputGroup width={300} size="sm" ml={5}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<LuListFilter fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Filter
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<PrimaryButton
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
title={"Add Role"}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
<AddDepartment isOpen={isOpen} onClose={onClose} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Roles;
|
||||
@@ -42,7 +42,21 @@ export const nav = [
|
||||
title: "Approvers",
|
||||
path: "/approvers",
|
||||
icon: TbSquareRoundedFilled,
|
||||
colorCode:"#7bed9f"
|
||||
colorCode:"#7bed9f",
|
||||
submenu: [
|
||||
{
|
||||
title: "Dashboard",
|
||||
path: "/employees",
|
||||
icon: TbSquareRoundedFilled,
|
||||
colorCode:"#70a1ff"
|
||||
},
|
||||
{
|
||||
title: "Approver list",
|
||||
path: "/approvers",
|
||||
icon: TbSquareRoundedFilled,
|
||||
colorCode:"#7bed9f"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Manage department & roles",
|
||||
|
||||
@@ -9,10 +9,12 @@ import SupportAndTicket from "../Pages/SupportAndTicket/SupportAndTicket";
|
||||
import Settings from "../Pages/Settings/Settings";
|
||||
import Employees from "../Pages/ManageHumanResource/Employees";
|
||||
import Approvers from "../Pages/ManageHumanResource/Approvers";
|
||||
import ManageDepartmentAndRoles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles";
|
||||
import WalletProgram from "../Pages/OptiFiiExpense/WalletProgram";
|
||||
import ReimbursementRequest from "../Pages/OptiFiiExpense/ReimbursementRequest";
|
||||
import AdvanceExpenseRequest from "../Pages/OptiFiiExpense/AdvanceExpenseRequest";
|
||||
import ManageDepartmentAndRoles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles";
|
||||
import Department from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/Department";
|
||||
import Roles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles";
|
||||
|
||||
export const RouteLink = [
|
||||
|
||||
@@ -30,6 +32,8 @@ export const RouteLink = [
|
||||
{ path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
|
||||
{ path: "/reports", Component: Report },
|
||||
{ path: "/support-ticket", Component: SupportAndTicket },
|
||||
{ path: "/settings", Component: Settings },
|
||||
{ path: "/settings", Component: Settings },
|
||||
{ path: "/department", Component: Department },
|
||||
{ path: "/roles", Component: Roles },
|
||||
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user