diff --git a/src/Pages/Dashboard/Dashbaord.jsx b/src/Pages/Dashboard/Dashbaord.jsx index eb04751..3f0fe9d 100644 --- a/src/Pages/Dashboard/Dashbaord.jsx +++ b/src/Pages/Dashboard/Dashbaord.jsx @@ -1,37 +1,96 @@ -import { Badge, Box, Button, Checkbox, CircularProgress, CircularProgressLabel, color, Divider, Flex, Grid, GridItem, Heading, Image, Menu, MenuButton, MenuItem, MenuList, Progress, Stack, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Tag, TagLabel } from '@chakra-ui/react' -import React, { useContext, useState } from 'react' -import BlueCard from '../../Components/Cards/BlueCard' -import { OPACITY_ON_LOAD } from '../../Layout/animations' -import { HStack, Text, VStack, Icon } from '@chakra-ui/react'; -import { BsArrowsAngleExpand, BsBarChartFill, BsFillBarChartFill } from 'react-icons/bs'; -import { FiBarChart2 } from 'react-icons/fi'; -import { WiTime4 } from 'react-icons/wi'; -import { MdArrowForward, MdNoFood } from 'react-icons/md'; -import PlatiniumGift from '../../Components/PlatiniumGift'; +import { + Badge, + Box, + Button, + Checkbox, + CircularProgress, + CircularProgressLabel, + color, + Divider, + Flex, + Grid, + GridItem, + Heading, + Image, + Menu, + MenuButton, + MenuItem, + MenuList, + Progress, + Stack, + Tab, + TabIndicator, + TabList, + TabPanel, + TabPanels, + Tabs, + Tag, + TagLabel, +} from "@chakra-ui/react"; +import React, { useContext, useState } from "react"; +import BlueCard from "../../Components/Cards/BlueCard"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { HStack, Text, VStack, Icon } from "@chakra-ui/react"; +import { + BsArrowsAngleExpand, + BsBarChartFill, + BsFillBarChartFill, +} from "react-icons/bs"; +import { FiBarChart2 } from "react-icons/fi"; +import { WiTime4 } from "react-icons/wi"; +import { MdArrowForward, MdNoFood } from "react-icons/md"; +import PlatiniumGift from "../../Components/PlatiniumGift"; import { PiUsersThreeFill } from "react-icons/pi"; -import GlobalStateContext from '../../Contexts/GlobalStateContext'; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; import blackmen from "../../assets/blackmen.png"; import koreanpfp from "../../assets/koreanboi.png"; import asian from "../../assets/asain.png"; import goth from "../../assets/goth.png"; import womenpfp from "../../assets/womenpfp1.png"; -import NormalTable from '../../Components/DataTable/NormalTable'; -import { AiOutlineCalendar } from 'react-icons/ai'; -import { IoMdAddCircleOutline, IoMdArrowDropdown } from 'react-icons/io'; -import { LuListFilter } from 'react-icons/lu'; -import { ChevronDownIcon } from '@chakra-ui/icons'; -import PrimaryButton from '../../Components/Buttons/PrimaryButton'; -import SecondaryButton from '../../Components/Buttons/SecondaryButton'; -import { GoDotFill } from 'react-icons/go'; - +import NormalTable from "../../Components/DataTable/NormalTable"; +import { AiOutlineCalendar } from "react-icons/ai"; +import { IoMdAddCircleOutline, IoMdArrowDropdown } from "react-icons/io"; +import { LuListFilter } from "react-icons/lu"; +import { ChevronDownIcon } from "@chakra-ui/icons"; +import PrimaryButton from "../../Components/Buttons/PrimaryButton"; +import SecondaryButton from "../../Components/Buttons/SecondaryButton"; +import { GoDotFill } from "react-icons/go"; +import { FaUser } from 'react-icons/fa'; +import { Doughnut } from 'react-chartjs-2'; const Dashbaord = () => { - const { dash } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [users, setusers] = useState(50); + const data = { + labels: ['Full KYC', 'Min KYC'], + datasets: [{ + label: 'KYC Status', + data: [72, 28], // Sample percentages + backgroundColor: [ + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 159, 64, 0.2)', + ], + borderColor: [ + 'rgba(54, 162, 235, 1)', + 'rgba(255, 159, 64, 1)', + ], + borderWidth: 1 + }] + }; + const options = { + title: { + display: true, + text: 'Employee KYC Status' + }, + scales: { + y: { + beginAtZero: true + } + } + }; const blueCardData = [ { @@ -46,6 +105,30 @@ const Dashbaord = () => { badgeColor: "#3725EA", viewTextColor: "#6311CB", }, + // { + // backgroundColor: "#C33FAD", + // iconColor: "#00A438", + // title: "WALLET REQUEST", + // count: 100, + // buttonBg: "#FCA1001A", + // buttonBorder: "#FCA100", + // buttonText: "View Requests", + // badgeText: "20 New", + // badgeColor: "#3725EA", + // viewTextColor: "#6311CB", + // }, + // { + // backgroundColor: "#6311CB", + // iconColor: "#00A438", + // title: "WALLET REQUEST", + // count: 100, + // buttonBg: "#FCA1001A", + // buttonBorder: "#FCA100", + // buttonText: "View Requests", + // badgeText: "20 New", + // badgeColor: "#3725EA", + // viewTextColor: "#6311CB", + // }, { backgroundColor: "#C33FAD", iconColor: "#00A438", @@ -58,32 +141,7 @@ const Dashbaord = () => { badgeColor: "#3725EA", viewTextColor: "#6311CB", }, - { - backgroundColor: "#6311CB", - iconColor: "#00A438", - title: "WALLET REQUEST", - count: 100, - buttonBg: "#FCA1001A", - buttonBorder: "#FCA100", - buttonText: "View Requests", - badgeText: "20 New", - badgeColor: "#3725EA", - viewTextColor: "#6311CB", - }, - { - backgroundColor: "#C33FAD", - iconColor: "#00A438", - title: "WALLET REQUEST", - count: 100, - buttonBg: "#FCA1001A", - buttonBorder: "#FCA100", - buttonText: "View Requests", - badgeText: "20 New", - badgeColor: "#3725EA", - viewTextColor: "#6311CB", - }, - ] - + ]; const gridItemsData = [ { @@ -114,32 +172,29 @@ const Dashbaord = () => { // ===============================[ Table Header ] const dashHeadRow = [ - 'Wallet Name', + "Wallet Name", "Total employees", - 'Amount in card', - 'Pending request', - 'Pending amount', - + "Amount in card", + "Pending request", + "Pending amount", ]; const dashHeadSecRow = [ - 'Wallet Name', + "Wallet Name", "Total employees", - 'Benefit limit', - 'Remaining amount', - 'Status', - + "Benefit limit", + "Remaining amount", + "Status", ]; const dashHeadThirdRow = [ - 'Employee Name', + "Employee Name", "Email", - 'Wallet', - 'Amount', - 'Date & time', - + "Wallet", + "Amount", + "Date & time", ]; - // first + // first const dashArr = dash.map((item, index) => ({ "Wallet Name": ( @@ -148,7 +203,7 @@ const Dashbaord = () => { - {item.wallet || 'Food'} + {item.wallet || "Food"} ), @@ -183,29 +238,38 @@ const Dashbaord = () => { ), - 'Amount in card': ( + "Amount in card": ( {item.walletAmount || 5000} ), - 'Pending request': ( + "Pending request": ( +4 new - + View ), - 'Pending amount': ( + "Pending amount": ( - {item.balanceRemaining || '₹ 2000'} + {item.balanceRemaining || "₹ 2000"} ), })); - // Second + // Second const dashSecArr = dash.map((item, index) => ({ "Wallet Name": ( @@ -214,7 +278,7 @@ const Dashbaord = () => { - {item.wallet || 'Food'} + {item.wallet || "Food"} ), @@ -249,17 +313,17 @@ const Dashbaord = () => { ), - 'Benefit limit': ( + "Benefit limit": ( {item.walletAmount || 5000} ), - 'Remaining amount': ( + "Remaining amount": ( - {item.balanceRemaining || '₹ 2000'} + {item.balanceRemaining || "₹ 2000"} ), - 'Status': ( + Status: ( { item?.status === "Approved" ? "#00A438" : item?.status === "Pending" - ? "#EAB600" - : "red" - } - border={`1px solid ${item?.status === "Approved" - ? "#00A438" - : item?.status === "Pending" ? "#EAB600" : "red" - }`} + } + border={`1px solid ${ + item?.status === "Approved" + ? "#00A438" + : item?.status === "Pending" + ? "#EAB600" + : "red" + }`} bg={ item?.status === "Approved" ? "#ebf8ef" : item?.status === "Pending" - ? "#fdf9eb" - : "#ffe5e5" + ? "#fdf9eb" + : "#ffe5e5" } > - - {item?.status || "N/A"} - + {item?.status || "N/A"} - ), })); - // Third + // Third const dashThirdArr = dash.map((item, index) => ({ "Employee Name": ( Dan Abramov @@ -318,22 +380,22 @@ const Dashbaord = () => { ), - 'Email': ( + Email: ( olivia@gmail.com ), - 'Wallet': ( + Wallet: ( Food ), - 'Amount': ( + Amount: ( - {item.balanceRemaining || '₹ 2000'} + {item.balanceRemaining || "₹ 2000"} ), - 'Date & time': ( + "Date & time": ( 2 June 2024, 10 am @@ -342,11 +404,19 @@ const Dashbaord = () => { return ( - + {blueCardData.map((item, index) => ( ))} {/* */} +
+

Employee KYC Status

+ +
+

Full KYC: 72%

+

Min KYC: 28%

+
+
{/* EXP card */} @@ -355,19 +425,20 @@ const Dashbaord = () => { {gridItemsData.map((item, index) => ( - - + + Expense card - + Manage expense wallets - + @@ -388,7 +459,9 @@ const Dashbaord = () => { {item.title} - {item.count} + + {item.count} + @@ -403,7 +476,12 @@ const Dashbaord = () => { border={`1px solid ${item.buttonBorder}`} > {!item.hideBadge && ( - + {item.buttonText} @@ -444,7 +522,12 @@ const Dashbaord = () => { - + OptiFii Gift cards @@ -455,24 +538,25 @@ const Dashbaord = () => { px={4} leftIcon={} /> - - {/* EXP overview */} - - {/* table 1 */} - + Expense Overview { /> - - - + + { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Reimbursement request { fontWeight={500} _selected={{ color: "#5E0FCD", - }}>Advance Expense request + }} + > + Advance Expense request + - + { - Total report amount - ₹ 50,000 + + Total report amount + + + ₹ 50,000 + { - { {/* table 2 */} - + - + Benefit Overview @@ -641,8 +750,12 @@ const Dashbaord = () => { - Total report amount - ₹ 50,000 + + Total report amount + + + ₹ 50,000 + { isLoading={isLoading} /> - - - - - {/* box 1 */} - Your Balance + + Your Balance + - ₹ 120,435.00 - ( INR ) + + ₹ 120,435.00 + + + ( INR ) + - Last uploaded on Jan 31, 2024 + + Last uploaded on Jan 31, 2024 + } - title={"Load Money"} /> - + leftIcon={} + title={"Load Money"} + /> + {/* box 2 */} - - - Monthly Expense + + + Monthly Expense + { p={2} rounded={"md"} > - { {/* Individual items */} - Fuel + + Fuel + - ₹ 20,000 - 40% + + ₹ 20,000 + + + 40% + - Food + + Food + - ₹ 15,000 - 35% + + ₹ 15,000 + + + 35% + - Travel + + Travel + - ₹ 10,000 - 20% + + ₹ 10,000 + + + 20% + - Travel + + Travel + - ₹ 10,000 - 10% + + ₹ 10,000 + + + 10% + - Voucher + + Voucher + - ₹ 5,000 - 10% + + ₹ 5,000 + + + 10% + - Voucher + + Voucher + - ₹ 5,000 - 10% + + ₹ 5,000 + + + 10% + - {/* Total spending's */} - {/* box */} - - + - Total spending's + + Total spending's + { px={2} rounded={"md"} > - { - + Expense @@ -884,12 +1031,19 @@ const Dashbaord = () => { - - 40% + + + 40% + - + Benefit @@ -899,12 +1053,19 @@ const Dashbaord = () => { - - 60% + + + 60% + - + Gifts & voucher @@ -914,12 +1075,13 @@ const Dashbaord = () => { - - 80% + + + 80% + - {/* table */} @@ -990,8 +1152,12 @@ const Dashbaord = () => { - Total report amount - ₹ 50,000 + + Total report amount + + + ₹ 50,000 + { isLoading={isLoading} /> - - - - - - - - ) -} + ); +}; -export default Dashbaord \ No newline at end of file +export default Dashbaord; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx index d366c2f..1f9cb6f 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx @@ -1,78 +1,100 @@ -import { Box, Button, Flex, Radio, RadioGroup, Text, useBreakpointValue, VStack } from "@chakra-ui/react"; -import React, { useState } from "react"; - -const ApplyForDigitalCard = () => { - const [step, setStep] = useState(1); - const steps = [ - { label: "Select card type", description: "Pending" }, - { label: "Select employee", description: "Pending" }, - ]; - - const handleNext = () => { - if (step < steps.length) { - setStep(step + 1); - } - }; - - const handlePrev = () => { - if (step > 1) { - setStep(step - 1); - } - }; - const currentStep = step - 1; - const isLastStep = step === steps.length; - const isFirstStep = step === 1; - const circleSize = useBreakpointValue({ base: "30px", md: "40px" }); - return ( - - - setStep(Number(val))} - > - - {steps.map((item, index) => ( - - - {/* {index + 1} */} - - - STEP {index + 1} - - - {item.label} - - - {index + 1 === step ? "In Progress" : "Pending"} - - - ))} +import { + Box, + Button, + Flex, + Radio, + RadioGroup, + Text, + useBreakpointValue, + VStack, + } from "@chakra-ui/react"; + import React, { useState } from "react"; + import DigitalTable from "./DigitalTable"; + + const ApplyForDigitalCard = () => { + const [step, setStep] = useState(1); + + // Steps array consistency and label correction + const steps = [ + { + component: , // Component must be rendered properly + label: "Step 1: Digital Table", // Label for clarity + description: "Pending", + }, + { + component: Select employee component here, // Placeholder for the second component + label: "Step 2: Select Employee", + description: "Pending", + }, + ]; + + const handleNext = () => { + if (step < steps.length) { + setStep(step + 1); + } + }; + + const handlePrev = () => { + if (step > 1) { + setStep(step - 1); + } + }; + + const currentStep = step - 1; + const isLastStep = step === steps.length; + const isFirstStep = step === 1; + const circleSize = useBreakpointValue({ base: "30px", md: "40px" }); + + return ( + + + setStep(Number(val))} + > + + {steps.map((item, index) => ( + + + + STEP {index + 1} + + + {item.label} + + + {index + 1 === step ? "In Progress" : "Pending"} + + + ))} + + + {/* Render the appropriate component */} + {steps[currentStep].component} + + + - - {steps[currentStep].label} - - - - + - - ); -}; - -export default ApplyForDigitalCard; + ); + }; + + export default ApplyForDigitalCard; + \ No newline at end of file diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx index 6eb8c2e..7a9f95d 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx @@ -12,13 +12,24 @@ import { } from "@chakra-ui/react"; import { OPACITY_ON_LOAD } from "../../../Layout/animations"; import SelectCard from "./SelectCard"; +import DigiTable from "../DigiTable"; +import WhereToShare from "./WhereToShare"; const Stepper = () => { const [step, setStep] = useState(1); const steps = [ { component: , description: "In Progress" }, - { label: "Where to share?", description: "Pending" }, - { label: "Select employee", description: "Pending" }, + { + component: , + + label: "Where to share?", + description: "Pending", + }, + { + component: , + label: "Select employee", + description: "Pending", + }, ]; const handleNext = () => { @@ -39,7 +50,7 @@ const Stepper = () => { const circleSize = useBreakpointValue({ base: "30px", md: "40px" }); return ( - + { {/* Stepper Content */} - - {steps[currentStep].component} - + {steps[currentStep].component} {/* Navigation Buttons */} diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx new file mode 100644 index 0000000..84c2385 --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx @@ -0,0 +1,87 @@ +import { + Box, + Button, + Image, + Radio, + RadioGroup, + Stack, + Text, + Drawer, + DrawerBody, + DrawerFooter, + DrawerOverlay, + DrawerContent, + DrawerCloseButton, + useDisclosure, +} from "@chakra-ui/react"; +import React, { useState } from "react"; +import FileUploader from "../../../Components/FileUploader/FileUploader"; +import blackmen from "../../../assets/blackmen.png"; +import koreanpfp from "../../../assets/koreanboi.png"; +import asian from "../../../assets/asain.png"; +import goth from "../../../assets/goth.png"; +import womenpfp from "../../../assets/womenpfp1.png"; +import { useRef } from "react"; +import { OPACITY_ON_LOAD } from "../../../Layout/animations"; +import DigiTable from "../DigiTable"; + +const BrandVoucherTable = () => { + const [selectedValue, setSelectedValue] = useState("1"); + const { isOpen, onOpen, onClose } = useDisclosure(); + const btnRef = useRef(); + + const renderContent = () => { + switch (selectedValue) { + case "1": + return Hii; + case "2": + return Heelo; + default: + return null; + } + }; + + return ( + + + + Select employee + + + + + + Download a{" "} + + sample spreadsheet + {" "} + to quickly start your import + + + + + + ); +}; + +export default BrandVoucherTable; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx index 57782f7..27ada94 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx @@ -1,11 +1,10 @@ import { Box, Button, Image, Text, VStack } from "@chakra-ui/react"; -import React from "react"; -import { OPACITY_ON_LOAD } from "../../../Layout/animations"; +import React, { useEffect, useRef } from "react"; +import VanillaTilt from "vanilla-tilt"; // Ensure this is imported import mobilepng from "../../../assets/mobileCard.png"; import cardfooter from "../../../assets/cardFooter.png"; import cardfooter2 from "../../../assets/cardFooter2.png"; import cardfooter3 from "../../../assets/cardFooter3.png"; -import { NavLink } from "react-router-dom"; const cards = [ { @@ -34,6 +33,37 @@ const cards = [ ]; const SelectCard = () => { + const tiltRefs = useRef([]); + + useEffect(() => { + tiltRefs.current.forEach((node) => { + if (node) { + VanillaTilt.init(node, { + max: 13, + speed: 700, + glare: true, + scale: 1.05, + "max-glare": 0.5, + onEnter: () => { + node.style.zIndex = 10; // Bring to top on hover + }, + onLeave: () => { + node.style.zIndex = 1; // Reset zIndex after hover + }, + }); + } + }); + + // Cleanup VanillaTilt instances on unmount + return () => { + tiltRefs.current.forEach((node) => { + if (node?.vanillaTilt) { + node.vanillaTilt.destroy(); + } + }); + }; + }, [tiltRefs]); + return ( @@ -44,14 +74,16 @@ const SelectCard = () => { {cards.map((card, index) => ( (tiltRefs.current[index] = el)} bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)" color="white" borderRadius="lg" overflow="hidden" - width="300px" + width={{ base: "100%", md: "300px" }} padding={6} textAlign="center" boxShadow="lg" + position="relative" > { spacing={4} position="relative" > - - - + + {card.title} + {card.subtitle} + {card.description} @@ -89,6 +122,7 @@ const SelectCard = () => { position="absolute" bottom="-1.5rem" right="-1.5rem" + borderRadius="md" /> )} @@ -100,6 +134,7 @@ const SelectCard = () => { position="absolute" bottom="-1.5rem" left="-1.5rem" + borderRadius="md" /> )} diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx new file mode 100644 index 0000000..a08ea4c --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx @@ -0,0 +1,46 @@ +import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react"; +import { Grid, GridItem } from "@chakra-ui/react"; +import React from "react"; + +const formsInfos = [ + { + label: "Address line 1", + }, + { + label: "Address line 2", + }, + { + label: "Pincode", + }, + { + label: "City", + }, + { + label: "Single Point Activation Number", + }, +]; + +const SingleAddress = () => { + return ( + + + Fill address details + + + + + {formsInfos.map((val) => ( + + {val.label} + + + ))} + + + + ); +}; + +export default SingleAddress; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx new file mode 100644 index 0000000..af2c71c --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx @@ -0,0 +1,52 @@ +import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react"; +import React, { useState } from "react"; +import SingleAddress from "./SingleAddress"; + +const WhereToShare = ({ register }) => { + const [selectedValue, setSelectedValue] = useState("1"); + + const renderContent = () => { + switch (selectedValue) { + case "1": + return ; + case "2": + return Add department content; + default: + return null; + } + }; + + return ( + <> + + + + + Single address + + + + + Multiple address + + + + + {renderContent()} + + ); +}; + +export default WhereToShare; diff --git a/src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx b/src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx new file mode 100644 index 0000000..34ba2ed --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx @@ -0,0 +1,273 @@ +import { + Box, + Button, + Checkbox, + Divider, + HStack, + IconButton, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Tag, + TagLabel, + Text, + useDisclosure, + VStack, + Drawer, + DrawerBody, + DrawerFooter, + DrawerOverlay, + DrawerContent, + DrawerCloseButton, +} from "@chakra-ui/react"; +import { + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useRef, useState } from "react"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import NormalTable from "../../Components/DataTable/NormalTable"; +import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons"; +import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md"; +import { FaRegUser } from "react-icons/fa"; +import { useNavigate } from "react-router-dom"; +import { LuEye, LuListFilter } from "react-icons/lu"; +import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs"; +import { useToast } from "@chakra-ui/react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import FileUploader from "../../Components/FileUploader/FileUploader"; + +const Employees = () => { + const { employees } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const { isOpen, onOpen, onClose } = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = useState("inside"); + const [selectedRadio, setSelectedRadio] = useState([]); + const toast = useToast(); + const btnRef = useRef(); + + const { + isOpen: isModalOpen, + onOpen: onModalOpen, + onClose: onModalClose, + } = useDisclosure(); + + const { + isOpen: isPaymentOpen, + onOpen: onPaymentOpen, + onClose: onPaymentClose, + } = useDisclosure(); + + const navigate = useNavigate(); + + useEffect(() => { + setIsLoading(true); + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + return () => clearTimeout(timer); + }, []); + + useEffect(() => { + if (selectedRadio.length > 0) { + onOpen(); + } else { + onClose(); + } + }, [selectedRadio, onOpen, onClose]); + + const tableHeadRow = [ + "Emp ID", + "Name", + "Email Address", + "Department", + "Designation", + ]; + + const extractedArray = employees.map((item) => ({ + "Emp ID": ( + // + + {item?.EmpID} + + // + ), + Name: ( + + Dan Abramov + {item?.Name} + + ), + "Email Address": item?.emailAddress, + Department: item?.Department, + Designation: item?.Role, + Status: ( + + {item?.status} + + ), + Action: ( + + + } + bg={"transparent"} + /> + + }> + Edit + + } + > + Delete + + } + onClick={() => navigate("/employees/view")} + > + View + + + + + ), + })); + + return ( + + + + + Import employee + + + + + + + + } + rightIcon={} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + } + rightIcon={} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + + ); +}; + +export default Employees;