From f3549fa5b673107bde88d41d7afa3a71d095e4f4 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Tue, 10 Sep 2024 13:16:25 +0530 Subject: [PATCH] =?UTF-8?q?update=20roles=20pages=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/SwitchButton.jsx | 38 ++-- src/Contexts/GlobalStateProvider.jsx | 188 ++++++++++++++++- src/Pages/ManageHumanResource/Employees.jsx | 26 ++- .../ManageDepartmentAndRoles.jsx | 17 -- .../AddDepartmentModal.jsx | 82 ++++++++ .../ManageDepartmentAndRoles/Department.jsx | 163 +++++++++++++++ .../ManageDepartmentAndRoles.jsx | 33 +++ .../ManageDepartmentAndRoles/Roles.jsx | 192 ++++++++++++++++++ src/Routes/Nav.js | 16 +- src/Routes/Routes.js | 8 +- 10 files changed, 713 insertions(+), 50 deletions(-) delete mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles.jsx create mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddDepartmentModal.jsx create mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Department.jsx create mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx create mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx diff --git a/src/Components/SwitchButton.jsx b/src/Components/SwitchButton.jsx index 28b46b9..2c912f9 100644 --- a/src/Components/SwitchButton.jsx +++ b/src/Components/SwitchButton.jsx @@ -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)", }} > { fontWeight="400" zIndex={1} position="absolute" - mb={0} + mb={1} color={isSwitchOn ? "#fff" : "#fff"} left={isSwitchOn ? "10px" : "auto"} right={isSwitchOn ? "auto" : "10px"} diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 0c2c631..f0ebe02 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -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 ( { isAuthenticate, setIsAuthenticate, employees, - setEmployees + setEmployees, + department, + setDepartment, + roles, + setRoles, }} > {children} diff --git a/src/Pages/ManageHumanResource/Employees.jsx b/src/Pages/ManageHumanResource/Employees.jsx index 3bdb3e6..4026414 100644 --- a/src/Pages/ManageHumanResource/Employees.jsx +++ b/src/Pages/ManageHumanResource/Employees.jsx @@ -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%"} > - setSearchTerm(e.target.value)} - /> + + + + + setSearchTerm(e.target.value)} + /> + { - return ( - - - - ); -}; - -export default ManageDepartmentAndRoles; diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddDepartmentModal.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddDepartmentModal.jsx new file mode 100644 index 0000000..decd6ea --- /dev/null +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddDepartmentModal.jsx @@ -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 ( + + + + + Add department + + + + + setInputValue(e.target.value)} + style={{width:'100%', backgroundColor:"transparent", fontSize:"14px",height:"32px",outline: 'none',fontWeight:"500"}} + /> + + + + {tasks.map((task, index) => ( + + + ))} + + + + + + + + + + + + ); +}; + +export default AddDepartment; diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Department.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Department.jsx new file mode 100644 index 0000000..2bfc328 --- /dev/null +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Department.jsx @@ -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: ( + + + + ), + })); + + return ( + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + } title={"Add Department"} /> + + + + + + + + ); +}; + +export default Department; diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx new file mode 100644 index 0000000..b4fbae6 --- /dev/null +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx @@ -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 ( + + + + Department + Roles + Employee permissions + + + + + + + + + + +

three!

+ + + + + ); +}; + +export default ManageDepartmentAndRoles; diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx new file mode 100644 index 0000000..84d7e45 --- /dev/null +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx @@ -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: ( + + + {item?.ID} {index + 1} + + + ), + Role: item?.role, + Department: item?.department, + "Created duration": item?.createdDuration, + "Created By": item?.createdBy, + Permissions:( + + {item?.permissions} + + ), + Status: ( + + {item?.status} + + ), + Action: ( + + + + ), + })); + + return ( + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + } + title={"Add Role"} + /> + + + + + + + + ); +}; + +export default Roles; diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js index 95bdfc5..ab8d646 100644 --- a/src/Routes/Nav.js +++ b/src/Routes/Nav.js @@ -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", diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index b177eaf..144a470 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -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 }, ];