From aa918de8d2c3c678a4ba01cd686c6a45bae58e23 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Wed, 11 Sep 2024 17:18:36 +0530 Subject: [PATCH] =?UTF-8?q?manage=20department=20working=F0=9F=91=B7?= =?UTF-8?q?=E2=80=8D=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Contexts/GlobalStateProvider.jsx | 87 ++++- .../ManageDepartmentAndRoles/AddRoleModal.jsx | 236 ++++++++++++++ .../AddRoleModalAdvance.jsx | 296 ++++++++++++++++++ .../EmployeePermissions.jsx | 166 ++++++++++ .../ManageDepartmentAndRoles.jsx | 5 +- .../ManageDepartmentAndRoles/Roles.jsx | 5 +- src/Routes/Nav.js | 48 ++- 7 files changed, 810 insertions(+), 33 deletions(-) create mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModal.jsx create mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx create mode 100644 src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index f0ebe02..fb99af6 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -628,7 +628,90 @@ const GlobalStateProvider = ({ children }) => { ] ) - + const [ employeePermissions, setEmployeePermissions ] = useState([ + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + { + "id": "12451", + "name":"Kartikey Gautam", + "emailID": "kg@wdimails.com", + "department": "Finance", + "role": "Sr. Accountant", + "permissions": "Subadmin", + }, + + ] + ) return ( { setDepartment, roles, setRoles, + employeePermissions, + setEmployeePermissions, }} > {children} diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModal.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModal.jsx new file mode 100644 index 0000000..2f1e0d7 --- /dev/null +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModal.jsx @@ -0,0 +1,236 @@ +import { + Box, + Button, + Checkbox, + CheckboxGroup, + FormControl, + FormErrorMessage, + FormLabel, + Input, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Select, + Stack, + Text, + useDisclosure, +} from "@chakra-ui/react"; +import * as yup from "yup"; +import React, { useContext } from "react"; +import { Controller, useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import GlobalStateContext from "../../../Contexts/GlobalStateContext"; +import { IoSettingsOutline } from "react-icons/io5"; +import PrimaryButton from "../../../Components/Buttons/PrimaryButton"; +import AddRoleModalAdvance from "./AddRoleModalAdvance"; + +// Validation schema using Yup +const cashDetails = yup.object().shape({ + role: yup.string().required("Role is required"), + department_xid: yup.number().required("Artifact name is required"), +}); + +const AddRoleModal = ({ isOpen, onClose }) => { + // ======================[ Cotext Api ] + const { roleDepartments } = useContext(GlobalStateContext); +// const { isOpenAdvance, onOpenAdvance, onCloseAdvance } = useDisclosure(); + const { + isOpen: isOpenAdvance, + onOpen: onOpenAdvance, + onClose: onCloseAdvance, + } = useDisclosure(); + + const { + control, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: yupResolver(cashDetails), + }); + + // Define the onSubmit function + const onSubmit = (data) => { + console.log(data); + // You can add any further logic you need after form submission + reset(); // Reset the form after submission + onClose(); // Close the modal after submission + }; + + return ( + + + + Add Role + + + + + {/* FormControl for role input */} + + + Role + + ( + + )} + /> + + {errors.role?.message} + + + + + + Department + + ( + + )} + /> + + {errors.department_xid?.message} + + + + + + Grade/level + + ( + + )} + /> + + {errors.department_xid?.message} + + + + + + Will this role be an Wallet Approver as well? If yes select + category. + + + + + Expense wallet approver + + +
+ + + Benefit wallet approver + + +
+ + + Withdraw funds approver + + + + + + + + + {" "} + Advance Setting + + + Enable this to provide Corporate dashboard access to this + role. + + + + + + + + {/* Cancel Button */} + + {/* Submit Button */} + + + + + + + ); +}; + +export default AddRoleModal; diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx new file mode 100644 index 0000000..3750a05 --- /dev/null +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx @@ -0,0 +1,296 @@ +import { + Box, + Button, + Checkbox, + CheckboxGroup, + FormControl, + FormErrorMessage, + FormLabel, + Input, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Select, + Stack, + Table, + Tbody, + Td, + Text, + Th, + Thead, + Tr, +} from "@chakra-ui/react"; +import * as yup from "yup"; +import React, { useContext } from "react"; +import { Controller, useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import GlobalStateContext from "../../../Contexts/GlobalStateContext"; +import { IoSettingsOutline } from "react-icons/io5"; +import PrimaryButton from "../../../Components/Buttons/PrimaryButton"; + +// Validation schema using Yup +const cashDetails = yup.object().shape({ + role: yup.string().required("Role is required"), + department_xid: yup.number().required("Artifact name is required"), +}); + +const AddRoleModalAdvance = ({ isOpen, onClose }) => { + // ======================[ Cotext Api ] + const { roleDepartments } = useContext(GlobalStateContext); + + const { + control, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: yupResolver(cashDetails), + }); + + // Define the onSubmit function + const onSubmit = (data) => { + console.log(data); + // You can add any further logic you need after form submission + reset(); // Reset the form after submission + onClose(); // Close the modal after submission + }; + + const data = [ + { + action: "Dashboard", + all: "John Doe", + view: 28, + add: "Text", + edit: "Text", + delete: "Text", + }, + { + action: "Dashboard", + all: "John Doe", + view: 28, + add: "Text", + edit: "Text", + delete: "Text", + }, + { + action: "Dashboard", + all: "John Doe", + view: 28, + add: "Text", + edit: "Text", + delete: "Text", + }, + { + action: "Dashboard", + all: "John Doe", + view: 28, + add: "Text", + edit: "Text", + delete: "Text", + }, + ]; + + return ( + + + + Add Role Advance + + + + + {/* FormControl for role input */} + + + Role + + ( + + )} + /> + + {errors.role?.message} + + + + + + Department + + ( + + )} + /> + + {errors.department_xid?.message} + + + + + + Grade/level + + ( + + )} + /> + + {errors.department_xid?.message} + + + + + + Will this role be an Wallet Approver as well? If yes select + category. + + + + + Expense wallet approver + + +
+ + + Benefit wallet approver + + +
+ + + Withdraw funds approver + + + + + + + + + {" "} + Advance Setting + + + Enable this to provide Corporate dashboard access to this + role. + + + + + + + {/* Employee Details */} + + + + + + + + + + + + {data.map((row) => ( + + + + + + + + + ))} + +
ActionsAllViewAddEditDelete
{row.action}{row.all}{row.view}{row.add}{row.edit}{row.delete}
+ + + + + + {/* Cancel Button */} + + {/* Submit Button */} + + + + + + ); +}; + +export default AddRoleModalAdvance; diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx new file mode 100644 index 0000000..732a986 --- /dev/null +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx @@ -0,0 +1,166 @@ +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 EmployeePermissions = () => { + const { employeePermissions } = 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 = [ + "Employee ID", + "Name", + "Email ID", + "Department", + "Role", + "Permissions", + "Action", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + + const extractedArray = employeePermissions.map((item, index) => ({ + "Employee ID": ( + + + {item?.id} + + + ), + "Name": item?.name, + "Email ID": item?.emailID, + "Department": item?.department, + "Role": item?.role, + "Permissions":( + + {item?.permissions} + + ), + "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 + + + + + + + + + + ); + }; + + export default EmployeePermissions; + \ No newline at end of file diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx index b4fbae6..8148f4c 100644 --- a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles.jsx @@ -3,6 +3,7 @@ import React from "react"; import MiniHeader from "../../../Components/MiniHeader"; import Department from "./Department"; import Roles from "./Roles"; +import EmployeePermissions from "./EmployeePermissions"; const ManageDepartmentAndRoles = () => { return ( @@ -21,8 +22,8 @@ const ManageDepartmentAndRoles = () => { - -

three!

+ + diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx index 84d7e45..871c7b8 100644 --- a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx +++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx @@ -25,6 +25,7 @@ import NormalTable from "../../../Components/DataTable/NormalTable"; import SwitchButton from "../../../Components/SwitchButton"; import AddDepartment from "./AddDepartmentModal"; import { PiReceipt } from "react-icons/pi"; +import AddRoleModal from "./AddRoleModal"; const Roles = () => { const { roles } = useContext(GlobalStateContext); @@ -135,7 +136,7 @@ const Roles = () => { alignItems={"center"} w={"100%"} > - + @@ -184,7 +185,7 @@ const Roles = () => { isLoading={isLoading} /> - + ); }; diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js index ab8d646..d41d977 100644 --- a/src/Routes/Nav.js +++ b/src/Routes/Nav.js @@ -1,19 +1,11 @@ -import { HiOutlineNewspaper } from "react-icons/hi"; -import { TbBrandMedium, TbSquareRoundedFilled } from "react-icons/tb"; -import { - RiMoneyDollarBoxLine, -} from "react-icons/ri"; -import { RiExchangeBoxLine } from "react-icons/ri"; -import { VscSymbolClass } from "react-icons/vsc"; -import { FiHome, FiUsers } from "react-icons/fi"; -import {MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md"; -import { GrNotification } from "react-icons/gr"; -import HomeIcon from "../assets/homeIcon.png" -import { PiReceiptBold } from "react-icons/pi"; -import { PiCopySimple } from "react-icons/pi"; -import { GoGift } from "react-icons/go"; -import { MdOutlineLiveHelp } from "react-icons/md"; +import { TbSquareRoundedFilled } from "react-icons/tb"; +import { FaRegAddressCard } from "react-icons/fa6"; +import { RiMoneyDollarBoxLine } from "react-icons/ri"; +import { LuMousePointerClick } from "react-icons/lu"; +import { TbAlignBoxBottomCenter } from "react-icons/tb"; +import { MdOutlineNotifications } from "react-icons/md"; import { AiOutlineHome } from "react-icons/ai"; +import { IoSettingsOutline } from "react-icons/io5"; export const nav = [ @@ -29,7 +21,7 @@ export const nav = [ }, { title: "Manage Human Resource", - Icon: FiHome, + Icon: FaRegAddressCard, path: "/home", submenu: [ { @@ -69,9 +61,15 @@ export const nav = [ }, { title: "OptiFii Expense", - Icon: FiHome, + Icon: RiMoneyDollarBoxLine, path: "/home", submenu: [ + { + title: "Dashboard", + path: "/dashboard", + icon: TbSquareRoundedFilled, + colorCode:"#70a1ff" + }, { title: "Wallet program", path: "/wallet-program", @@ -93,23 +91,17 @@ export const nav = [ ], type: "accordion", }, - { - title: "OptiFii Expense", - type: "single", - path: "/optiFii-expense", - Icon: PiReceiptBold, - }, { title: "OptiFii Tax Benefit", type: "single", path: "/optiFii-benefit", - Icon: PiReceiptBold, + Icon: LuMousePointerClick, }, { title: "OptiFii Gifs & Vouchers", type: "single", path: "/optiFii-vouchers", - Icon: PiReceiptBold, + Icon: LuMousePointerClick, }, { title: "Shop", @@ -119,13 +111,13 @@ export const nav = [ title: "Reports", type: "single", path: "/reports", - Icon: PiReceiptBold, + Icon: TbAlignBoxBottomCenter, }, { title: "Support & Ticket", type: "single", path: "/support-ticket", - Icon: PiReceiptBold, + Icon: MdOutlineNotifications, }, { title: "Settings", @@ -135,7 +127,7 @@ export const nav = [ title: "Settings", type: "single", path: "/settings", - Icon: PiReceiptBold, + Icon: IoSettingsOutline, }, ];