Siddhesh.More/optifii-corporate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'corpstatic' of http://git.wdipl.com/Siddhesh.More/optifii-corporate into corpstatic

Browse Source
This commit is contained in:
npcdazai
2024-10-01 19:57:31 +05:30
parent 528f2da959 5fe7c80893
commit f277f150c4
21 changed files with 3053 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/Components/DataTable/AccordianTable.jsx Normal file
View File

@@ -0,0 +1,192 @@
import React, { useState } from "react";
import {
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
Skeleton,
TableCaption,
Checkbox,
CheckboxGroup,
Collapse,
HStack,
Text,
Box, // Import Collapse from Chakra UI
} from "@chakra-ui/react";
import EmptySearchList from "../EmptySearchList";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
const AccordionTable = ({
data,
isLoading,
tableHeadRow,
emptyMessage,
centered,
total,
showRadioButton,
selectedRadio,
setSelectedRadio,
}) => {
const [expandedRow, setExpandedRow] = useState(null); // Track the expanded row
console.log(data);
const columnWidth =
data && data[0]
? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
: "auto";
const handleRadioChange = (value) => {
setSelectedRadio(value);
};
const toggleRow = (index) => {
setExpandedRow(expandedRow === index ? null : index); // Toggle row expansion
};
return (
<TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
{data?.length === 0 ? (
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
<TableCaption p={total ? 0 : null}>
{total ? total : "OptiFii v1.0.0"}
</TableCaption>
<Thead bg="#6311cb37">
<Tr>
{tableHeadRow.map((heading, index) => (
<Th
color={"purple.900"}
textAlign={
tableHeadRow.length - 1 === index || centered
? "center"
: "left"
}
key={index}
p={4}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
textTransform={"none"}
>
{showRadioButton && heading === "Select" ? (
<CheckboxGroup value={selectedRadio}>
<Checkbox isDisabled />
</CheckboxGroup>
) : isLoading ? (
<Skeleton height="20px" />
) : (
heading
)}
</Th>
))}
</Tr>
</Thead>
<Tbody className="web-text-small">
{isLoading
? Array.from({ length: TABLE_PAGINATION?.size }).map(
(_, index) => (
<Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
{tableHeadRow.map((_, i) => (
<Td
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
<Skeleton height="20px" mb={1} mt={1} />
</Td>
))}
</Tr>
)
)
: data?.map((item, index) => (
<React.Fragment key={index}>
<Tr
cursor={"pointer"}
transition={"0.2s all"}
_hover={{ shadow: "lg" }}
h={12}
bg={index % 2 === 0 ? "" : "#6311cb14"}
onClick={() => toggleRow(index)} // Handle row click
>
{tableHeadRow.map((heading, i) => (
<Td
textAlign={
tableHeadRow?.length - 1 === i || centered
? "center"
: "left"
}
color={"gray.600"}
key={i}
fontWeight={500}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
{showRadioButton && heading === "Select" ? (
<CheckboxGroup
value={selectedRadio}
onChange={handleRadioChange}
>
<Checkbox bg={"#fff"} value={item.id} />
</CheckboxGroup>
) : (
item[heading]
)}
</Td>
))}
</Tr>
{/* Conditionally render the expanded content with transition */}
<Tr>
<Td colSpan={tableHeadRow.length} p={0}>
<Collapse in={expandedRow === index} animateOpacity>
{item?.subMenu?.map(({ wallet, walBal }, index) => <div
key={index}
style={{
padding: "4px 75px ",
margin: "5px 0",
}}
>
<Box display={"flex"} alignItems={"center"}>
<Box opacity={0} flex={1}>
<Text mb={0}>Hide contetnt</Text>
</Box>
<HStack justifyContent={"space-between"} w={"220px"}>
<Box>
<Checkbox >
<Text
as={"span"}
fontSize={"xs"}
>
{wallet}
</Text>
</Checkbox>
</Box>
<Text fontSize={"xs"} mb={0}>{walBal}</Text>
</HStack>
</Box>
</div>)}
</Collapse>
</Td>
</Tr>
</React.Fragment>
))}
</Tbody>
</Table>
)}
</TableContainer>
);
};
export default AccordionTable;

96
src/Components/PayCard.jsx Normal file
View File

@@ -0,0 +1,96 @@
import React, { useEffect, useRef } from 'react'
import logo_card from "../assets/logo_card.svg";
import TRANSCORP_LOGO from "../assets/TRANSCORP_LOGO.svg";
import RuPay from "../assets/rupayImg.png";
// import VanillaTilt from 'vanilla-tilt';
import { Box, Text, VStack } from '@chakra-ui/layout';
import { Image } from '@chakra-ui/image';
import { Button } from '@chakra-ui/button';
const PayCard = () => {
// const tiltRef = useRef(null); useEffect(() => {
// const node = tiltRef.current;
// if (node) {
// VanillaTilt.init(node, {
// max: 5,
// speed: 400,
// glare: true,
// "max-glare": 0.5,
// });
// }
// return () => {
// if (node && node.vanillaTilt) {
// node.vanillaTilt.destroy();
// }
// };
// }, []);
return (
<VStack
bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
alignItems={"start"}
justifyContent={"space-between"}
height={"100%"}
w={240}
h={"372px"}
rounded={"xl"}
p={4}
boxShadow={"md"}
position={"relative"}
>
<Box
width={"100%"}
cursor={"grab"}
display={"flex"}
justifyContent={"space-between"}
>
<Image w={20} src={logo_card} />
<Image w={24} src={TRANSCORP_LOGO} me={0.5} />
</Box>
<VStack
width={"100%"}
display={"flex"}
alignItems={"start"}
justifyContent={"space-between"}
>
<Text color={"#fff"} fontSize={"sm"}>
1234 5678 1234 5678
</Text>
<Button
size={"sm"}
rounded={"full"}
bg={"#ffffff30"}
fontSize={"sm"}
px={6}
border={"1px solid #fff"}
_hover={{ opacity: 0.8 }}
_active={{ opacity: 1 }}
color={"#fff"}
fontWeight={500}
>
Tap to view details
</Button>
</VStack>
<Box width={"100%"} display={"flex"} justifyContent={"end"}>
{/* <Image w={32} src={logo_card} /> */}
<Image w={24} src={RuPay} me={0.5} />
</Box>
<Text
position={"absolute"}
top={24}
right={-6}
transform="rotate(270deg)"
fontSize={"xs"}
color={"#9E9E9E"}
>
Valid in india
</Text>
</VStack>
)
}
export default PayCard

104
src/Components/SuccessModal/SuccessModal.jsx Normal file
View File

@@ -0,0 +1,104 @@
import React from 'react';
import {
Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, Button
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import SecondaryButton from '../Buttons/SecondaryButton';
import PrimaryButton from '../Buttons/PrimaryButton';
// Define motion components
const MotionBox = motion(Box);
const MotionSvg = motion("svg");
const MotionCircle = motion.circle;
const MotionPolyline = motion.polyline;
const SuccessModal = ({isOpen,onClose}) => {
return (
<>
<Modal isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader></ModalHeader>
<ModalCloseButton />
<ModalBody>
<MotionBox
textAlign="center"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
mb={8}
>
{/* svg with Framer Motion animation */}
<HStack justifyContent={"center"} mb={8}>
<MotionSvg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 130.2 130.2"
width="100px"
height="100px"
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
transition={{ duration: 0.6, type: "spring", bounce: 0.5 }}
>
<MotionCircle
cx="65.1"
cy="65.1"
r="62.1"
fill="#65F37C"
stroke="#159F2B"
strokeWidth="0"
strokeDasharray="1000"
strokeDashoffset="1000"
initial={{ strokeDashoffset: 1000 }}
animate={{ strokeDashoffset: 0 }}
transition={{ duration: 1 }}
/>
<MotionPolyline
points="100.2,40.2 51.5,88.8 29.8,67.5"
fill="none"
stroke="#159F2B"
strokeWidth="6"
strokeLinecap="round"
strokeMiterlimit="10"
strokeDasharray="1000"
strokeDashoffset="-100"
initial={{ strokeDashoffset: 1000 }}
animate={{ strokeDashoffset: 0 }}
transition={{ duration: 0.7, delay: 1 }}
/>
</MotionSvg>
</HStack>
<Text
color={"#100F14"}
fontSize={"md"}
fontWeight={"600"}
textAlign={"center"}
mb={2}
>
Your employee list has been submitted
</Text>
<Text
color={"#686677"}
fontSize={"xs"}
fontWeight={"500"}
textAlign={"center"}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Text>
<HStack justifyContent={"center"} py={4}>
<SecondaryButton title={"Submit new application"} />
<PrimaryButton title={"Check application status"} />
</HStack>
</MotionBox>
</ModalBody>
</ModalContent>
</Modal>
</>
);
}
export default SuccessModal;

343
src/Contexts/GlobalStateProvider.jsx
View File

@@ -63,6 +63,20 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
}, {
wallet: "Travel",
walBal: "₹ 7000",
}, {
wallet: "Toor",
walBal: "₹ 3000",
},]
},
{
id: 2,
@@ -74,6 +88,21 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
}, {
wallet: "Travel",
walBal: "₹ 7000",
}, {
wallet: "Toor",
walBal: "₹ 3000",
},]
},
{
id: 3,
@@ -85,6 +114,21 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
}, {
wallet: "Travel",
walBal: "₹ 7000",
}, {
wallet: "Toor",
walBal: "₹ 3000",
},]
},
{
id: 4,
@@ -96,6 +140,21 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
}, {
wallet: "Travel",
walBal: "₹ 7000",
}, {
wallet: "Toor",
walBal: "₹ 3000",
},]
},
{
id: 5,
@@ -107,6 +166,21 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Inactive",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
}, {
wallet: "Travel",
walBal: "₹ 7000",
}, {
wallet: "Toor",
walBal: "₹ 3000",
},]
},
{
id: 6,
@@ -118,6 +192,21 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Inactive",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
}, {
wallet: "Travel",
walBal: "₹ 7000",
}, {
wallet: "Toor",
walBal: "₹ 3000",
},]
},
{
id: 7,
@@ -129,6 +218,7 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 8,
@@ -140,6 +230,21 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Inactive",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
}, {
wallet: "Travel",
walBal: "₹ 7000",
}, {
wallet: "Toor",
walBal: "₹ 3000",
},]
},
{
id: 9,
@@ -151,61 +256,7 @@ const GlobalStateProvider = ({ children }) => {
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 10,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 11,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Inactive",
},
{
id: 7,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 8,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 9,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 10,
@@ -218,50 +269,6 @@ const GlobalStateProvider = ({ children }) => {
Role: "Sr. Manager",
status: "Inactive",
},
{
id: 11,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 7,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 8,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 9,
EmpID: "124589",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
},
{
id: 10,
EmpID: "124589",
@@ -286,6 +293,7 @@ const GlobalStateProvider = ({ children }) => {
},
]);
const [reportsHistory, setReportsHistory] = useState([
{
id: 1,
@@ -1267,15 +1275,6 @@ const GlobalStateProvider = ({ children }) => {
approver: "Sales",
disburser: "Sales",
},
{
reportName: "Jan 12, 2022",
reportBy: "in***@wdimails.com",
reportAmount: "+91 ***8451254",
dateTime: "Sales",
orderStatus: "Fully reimbursed",
approver: "Sales",
disburser: "Sales",
},
]);
// const [advanceStatus, setAdvanceStatus] = useState([
@@ -2025,6 +2024,131 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// Recent report
const [recentReports, setRecentReports] = useState([
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Approved",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Approved",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Approved",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
{
reportName: "Food for June 30",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
approver: "Reethik Thota",
disburser: "Reethik Thota L1",
},
]);
// Recent transaction
const [recentTransaction, setRecentTransaction] = useState([
{
walletName: "Food",
Card: "Visa card **** 4831",
dateTime: "Jun 10, 2024",
Amount: "₹ 5000",
Merchant: "Dine in",
},
{
walletName: "Food",
Card: "Visa card **** 4831",
dateTime: "Jun 10, 2024",
Amount: "₹ 5000",
Merchant: "Dine in",
},
{
walletName: "Food",
Card: "Visa card **** 4831",
dateTime: "Jun 10, 2024",
Amount: "₹ 5000",
Merchant: "Dine in",
},
{
walletName: "Food",
Card: "Visa card **** 4831",
dateTime: "Jun 10, 2024",
Amount: "₹ 5000",
Merchant: "Dine in",
},
{
walletName: "Food",
Card: "Visa card **** 4831",
dateTime: "Jun 10, 2024",
Amount: "₹ 5000",
Merchant: "Dine in",
},
{
walletName: "Food",
Card: "Visa card **** 4831",
dateTime: "Jun 10, 2024",
Amount: "₹ 5000",
Merchant: "Dine in",
},
{
walletName: "Food",
Card: "Visa card **** 4831",
dateTime: "Jun 10, 2024",
Amount: "₹ 5000",
Merchant: "Dine in",
},
]);
return (
<GlobalStateContext.Provider
value={{
@@ -2056,6 +2180,9 @@ const GlobalStateProvider = ({ children }) => {
walletProgram,
SupportAndTicket,
setSupportAndTicket,
recentReports, setRecentReports,
recentTransaction, setRecentTransaction
}}
>
{children}

207
src/Pages/ManageHumanResource/Employees.jsx
View File

@@ -1,9 +1,11 @@
import {
Box,
Button,
Checkbox,
Divider,
HStack,
Icon,
IconButton,
Image,
Input,
InputGroup,
@@ -16,6 +18,7 @@ import {
Tag,
TagLabel,
Text,
useDisclosure,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
@@ -24,32 +27,49 @@ import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
EmailIcon,
SearchIcon,
ViewIcon,
} from "@chakra-ui/icons";
import { MdFilterList, MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
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 { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
import { FaRegUser } from "react-icons/fa";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import backFund from "../../assets/backfund.svg";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
import { LuListFilter } from "react-icons/lu";
import { BsFilterRight } from "react-icons/bs";
import { LuEye, LuListFilter } from "react-icons/lu";
import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg"
import { HiOutlineUserGroup } from "react-icons/hi";
import EmployeesAddModal from "./EmployeesAddModal";
import EmployeesEditModal from "./EmployeesEditModal";
import EmployeesAddMultipleModal from "./EmployeesAddMultipleModal";
const Employees = () => {
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const navigate = useNavigate();
const {
isOpen: isAddOpen,
onOpen: onAddOpen,
onClose: onAddClose,
} = useDisclosure(); // For EmployeesAddModal
const {
isOpen: isEditOpen,
onOpen: onEditOpen,
onClose: onEditClose,
} = useDisclosure(); // For EmployeesEditModal
const {
isOpen: isMultipleOpen,
onOpen: onMultipleOpen,
onClose: onMultipleClose,
} = useDisclosure(); // For EmployeesAddMultipleModal
useEffect(() => {
// Set isLoading to true
@@ -81,26 +101,28 @@ const Employees = () => {
const extractedArray = employees.map((item, index) => ({
"Emp ID": (
<Radio colorScheme="purple" value="1">
<Checkbox colorScheme="purple" value="1">
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
<Icon
as={PiReceipt}
boxSize={8}
p={1.5}
bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
rounded={"full"}
/>
{item?.EmpID}
</Text>
</Radio>
</Checkbox>
),
"Name": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text mb={0}>
{item?.Name}
</Text>
</HStack>
),
Name: item?.Name,
"Email Address": item?.emailAddress,
"Mobile number": item?.mobileNumber,
Grade: item?.Grade,
@@ -115,16 +137,15 @@ const Employees = () => {
item?.status === "Active"
? "green"
: item?.status === "Inactive"
? "red"
: "gray"
? "red"
: "gray"
}
border={`1px solid ${
item?.status === "Active"
? "green"
: item?.status === "Inactive"
border={`1px solid ${item?.status === "Active"
? "green"
: item?.status === "Inactive"
? "red"
: "gray" // default border color if status doesn't match any condition
}`}
}`}
p={1}
px={3}
>
@@ -132,42 +153,42 @@ const Employees = () => {
</Tag>
),
Action: (
<Box
display={"flex"}
gap={1}
alignItems={"center"}
justifyContent={"center"}
>
<Button
_hover={{ color: "gray.800", bg: "gray.100" }}
transition={"0.5s"}
size={"sm"}
bg={"none"}
p={0}
color="gray.600"
>
<FaRegEye fontSize={"18px"} />
</Button>
<Button
_hover={{ color: "gray.800", bg: "gray.100" }}
transition={"0.5s"}
size={"sm"}
bg={"none"}
p={0}
color="gray.600"
>
<AiOutlineEdit fontSize={"19px"} />
</Button>
<Button
_hover={{ color: "gray.800", bg: "gray.100" }}
transition={"0.5s"}
size={"sm"}
bg={"none"}
p={0}
color="gray.600"
>
<RiDeleteBin5Line fontSize={"18px"} />
</Button>
<Box>
<Menu>
<MenuButton
as={IconButton}
aria-label='Options'
icon={<BsThreeDotsVertical />}
bg={"transparent"}
/>
<MenuList>
<MenuItem
icon={<MdOutlineModeEdit color="#6311CB" size={16} />}
fontSize={"sm"}
fontWeight={500}
color={"#4D4D4D"}
>
Edit
</MenuItem>
<MenuItem
icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
fontSize={"sm"}
fontWeight={500}
color={"#4D4D4D"}
>
Delete
</MenuItem>
<MenuItem
icon={<LuEye color="#6311CB" size={16} />}
fontSize={"sm"}
fontWeight={500}
color={"#4D4D4D"}
onClick={()=>navigate("/employees/view")}
>
View
</MenuItem>
</MenuList>
</Menu>
</Box>
),
}));
@@ -224,13 +245,35 @@ const Employees = () => {
<MenuItem fontSize={"sm"}><Image src={ExcelIcon} me={2} /> Export as Excel</MenuItem>
</MenuList>
</Menu>
<PrimaryButton leftIcon={<AddIcon />} title={"Add Employee"} />
<Menu>
<PrimaryButton as={MenuButton} leftIcon={<AddIcon />} title={"Add Employee"} />
<MenuList>
<MenuItem
icon={<FaRegUser size={14} />}
fontSize={"xs"}
fontWeight={500}
color={"#4D4D4D"}
onClick={onAddOpen}
>
Add single employee
</MenuItem>
<MenuItem
icon={<HiOutlineUserGroup size={14} />}
fontSize={"xs"}
fontWeight={500}
color={"#4D4D4D"}
onClick={onMultipleOpen}
>
Add multiple employee
</MenuItem>
</MenuList>
</Menu>
</Box>
</Box>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Box>
<Menu>
<Menu>
<MenuButton
as={Button}
leftIcon={<BsFilterRight fontSize={"16px"} />}
@@ -244,20 +287,19 @@ const Employees = () => {
Sort
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Descending</MenuItem>
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
</Box>
<Box>
<Link to={"#"} style={{marginRight:"8px"}}>
<SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/>
</Link>
<HStack>
<SecondaryButton
onClick={() => navigate("/employees/pull-back-funds")}
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/>
<Menu>
<MenuButton
as={Button}
@@ -278,7 +320,7 @@ const Employees = () => {
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
</Box>
</HStack>
</HStack>
</VStack>
<NormalTable
@@ -288,6 +330,15 @@ const Employees = () => {
isLoading={isLoading}
/>
</Box>
{/* Call EmployeesAddModal */}
<EmployeesAddModal isOpen={isAddOpen} onClose={onAddClose} />
{/* Call EmployeesEditModal */}
<EmployeesEditModal isOpen={isEditOpen} onClose={onEditClose} />
{/* Call EmployeesEditModal */}
<EmployeesAddMultipleModal isOpen={isMultipleOpen} onClose={onMultipleClose} />
</Box>
);
};

101
src/Pages/ManageHumanResource/EmployeesAddModal.jsx Normal file
View File

@@ -0,0 +1,101 @@
import { Box, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Select, Text } from '@chakra-ui/react'
import React, { useState } from 'react'
import SecondaryButton from '../../Components/Buttons/SecondaryButton'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
const EmployeesAddModal = ({ isOpen, onClose }) => {
const [phone, setPhone] = useState("");
return (
<Box>
{/* modal */}
<Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>Add employee</ModalHeader>
<ModalCloseButton />
<ModalBody>
<HStack mb={4}>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Employee name
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Email address
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
</HStack>
<HStack mb={4}>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Phone number
</Text>
{/* <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} /> */}
<PhoneInput
country={"in"} // Default country
value={phone}
onChange={setPhone}
inputStyle={{
width: "100%",
borderRadius: "md",
paddingLeft: "8",
border: "1px solid #e2e8f0",
height: "40px"
}}
buttonStyle={{
border: "none",
borderRadius: "8px 0 0 8px",
backgroundColor: "transparent",
}}
/>
</Box>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Employee code
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
</HStack>
<HStack mb={4}>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Department
</Text>
<Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
<option value='option1'>Option 1</option>
<option value='option2'>Option 2</option>
<option value='option3'>Option 3</option>
</Select>
</Box>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Designation
</Text>
<Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
<option value='option1'>Option 1</option>
<option value='option2'>Option 2</option>
<option value='option3'>Option 3</option>
</Select>
</Box>
</HStack>
<HStack py={4} justifyContent={"center"}>
<SecondaryButton title={"Cancel"} />
<PrimaryButton title={"Add"} />
</HStack>
</ModalBody>
</ModalContent>
</Modal>
</Box>
)
}
export default EmployeesAddModal

91
src/Pages/ManageHumanResource/EmployeesAddMultipleModal.jsx Normal file
View File

@@ -0,0 +1,91 @@
import { Box, HStack, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
import React, { useState } from 'react'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import FileUploader from '../../Components/FileUploader/FileUploader'
import SuccessModal from '../../Components/SuccessModal/SuccessModal'
import { useDisclosure } from '@chakra-ui/react'
const EmployeesAddMultipleModal = ({ isOpen, onClose }) => {
const { isOpen: isSuccessOpen, onOpen: onSuccessOpen, onClose: onSuccessClose } = useDisclosure();
const [isLoading, setIsLoading] = useState(false);
const handleFileUploadMultipleEmp = async (file, setPreview) => {
setIsLoading(true);
const formData = new FormData();
formData.append("document", file); // Append file
const code = sessionStorage?.getItem("codeCorporate");
try {
const res = await sendFile({ data: formData, code }); // Upload file to server
console.log(res);
if (res?.data?.data) {
setCorpData({ ...corpData, gst_file_path_name: res?.data?.data });
setValue("gst_file_path_name", res?.data?.data);
setPreview(res?.data?.data);
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
setIsLoading(false);
} else if (res?.error?.data?.message) {
toast({
render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
});
} else if (res?.error) {
toast({
render: () => <ToastBox status={'error'} message={"Something went wrong"} />,
});
}
setIsLoading(false);
} catch (error) {
console.error("File upload failed", error);
setIsLoading(false);
}
};
const handleNextClick = () => {
// Trigger success modal here
onSuccessOpen();
};
return (
<Box>
{/* modal */}
<Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader textAlign={"center"}>Get your sheet from excel</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box>
<Text fontSize={"sm"} fontWeight={500} mb={2} textAlign={"center"}>
Need help getting started?
</Text>
<Text fontSize={"sm"} fontWeight={500} mb={2} textAlign={"center"}>
<Text as={"span"} color={"#41A3FD"} me={1}> Read and learn</Text>
about importing to OptiFii
</Text>
<Text fontSize={"sm"} fontWeight={500} mb={2} textAlign={"center"}>
<Text as={"span"} color={"#41A3FD"} me={1}>Download</Text>
a sample Excel file
</Text>
<FileUploader
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUploadMultipleEmp}
/>
</Box>
<HStack py={4} justifyContent={"center"}>
<PrimaryButton onClick={handleNextClick} title={"Next"} w={"40%"} isLoading={isLoading} />
</HStack>
</ModalBody>
</ModalContent>
</Modal>
{/* success modal*/}
<SuccessModal isOpen={isSuccessOpen} onClose={onSuccessClose} />
</Box>
);
}
export default EmployeesAddMultipleModal;

101
src/Pages/ManageHumanResource/EmployeesEditModal.jsx Normal file
View File

@@ -0,0 +1,101 @@
import { Box, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Select, Text } from '@chakra-ui/react'
import React, { useState } from 'react'
import SecondaryButton from '../../Components/Buttons/SecondaryButton'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
const EmployeesEditModal = ({ isOpen, onClose }) => {
const [phone, setPhone] = useState("");
return (
<Box>
{/* modal */}
<Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>Edit employee</ModalHeader>
<ModalCloseButton />
<ModalBody>
<HStack mb={4}>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Employee name
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Email address
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
</HStack>
<HStack mb={4}>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Phone number
</Text>
{/* <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} /> */}
<PhoneInput
country={"in"} // Default country
value={phone}
onChange={setPhone}
inputStyle={{
width: "100%",
borderRadius: "md",
paddingLeft: "8",
border: "1px solid #e2e8f0",
height: "40px"
}}
buttonStyle={{
border: "none",
borderRadius: "8px 0 0 8px",
backgroundColor: "transparent",
}}
/>
</Box>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Employee code
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
</HStack>
<HStack mb={4}>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Department
</Text>
<Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
<option value='option1'>Option 1</option>
<option value='option2'>Option 2</option>
<option value='option3'>Option 3</option>
</Select>
</Box>
<Box flex={1}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Designation
</Text>
<Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
<option value='option1'>Option 1</option>
<option value='option2'>Option 2</option>
<option value='option3'>Option 3</option>
</Select>
</Box>
</HStack>
<HStack py={4} justifyContent={"center"}>
<SecondaryButton title={"Cancel"} />
<PrimaryButton title={"Add"} />
</HStack>
</ModalBody>
</ModalContent>
</Modal>
</Box>
)
}
export default EmployeesEditModal

52
src/Pages/ManageHumanResource/EmployeesPullBackFunds.jsx Normal file
View File

@@ -0,0 +1,52 @@
import { Box, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import React from "react";
import PullBackFundsExpense from "./PullBackFundsExpense";
import PullBackFundsBenefit from "./PullBackFundsBenefit";
import PullBackFundsGifts from "./PullBackFundsGifts";
const EmployeesPullBackFunds = () => {
return (
<Box p={4} overflowX={"scroll"}>
<Tabs position='relative' variant='unstyled'>
<TabList background={"#fff"} pt={2}>
<Tab
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>Expense</Tab>
<Tab
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>Benefit</Tab>
<Tab
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>Gifts</Tab>
</TabList>
<TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
<TabPanels>
<TabPanel px={0}>
<PullBackFundsExpense />
</TabPanel>
<TabPanel px={0}>
<PullBackFundsBenefit />
</TabPanel>
<TabPanel px={0}>
<PullBackFundsGifts />
</TabPanel>
</TabPanels>
</Tabs>
</Box>
);
};
export default EmployeesPullBackFunds;

518
src/Pages/ManageHumanResource/EmployeesView.jsx Normal file
View File

@@ -0,0 +1,518 @@
import {
Badge, Box, HStack, Image, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Text,
Heading, Menu, MenuButton, MenuItem, MenuList, VStack, Button,
Tag,
} from '@chakra-ui/react'
import React, { useContext, useEffect, useState } from 'react'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import MiniHeader from '../../Components/MiniHeader'
import { GoDotFill } from 'react-icons/go'
import PayCard from '../../Components/PayCard'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import { BsPrinter } from 'react-icons/bs'
import { LuListFilter, LuScrollText } from "react-icons/lu";
import NormalTable from "../../Components/DataTable/NormalTable";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
import { AiOutlineCalendar } from "react-icons/ai";
import { IoMdArrowDropdown } from "react-icons/io";
import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs";
import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
import GlobalStateContext from '../../Contexts/GlobalStateContext'
import { MdDeleteOutline, MdNoFood, MdOutlineModeEdit } from 'react-icons/md'
import SecondaryButton from '../../Components/Buttons/SecondaryButton'
import { useNavigate } from 'react-router-dom'
const EmployeesView = () => {
const { reimbursementStatus } = useContext(GlobalStateContext);
const { advanceStatus } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const navigate = useNavigate();
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 = [
"Report name",
"Report amount",
"Date & time",
"Order Status",
"Approver",
"Disburser",
"",
];
const tableHeadRowAdvance = [
"Wallet Name",
"Card",
"Date & time",
"Amount",
"Merchant",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = reimbursementStatus.map((item, index) => ({
"Report name": (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<LuScrollText color='#6311CB' />
</Box>
<Text mb={0} fontWeight={600} fontSize={"xs"}>
Food for June 30
</Text>
</HStack>
),
"Report amount": (
<Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
₹ 5000
</Text>
),
"Date & time": (
<Text mb={0} fontSize={"xs"}>
Jun 10, 2024,
</Text>
),
"Order Status": (
<Tag
my={1}
size={"sm"}
borderRadius="full"
color={
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
? "#3725EA"
: "red"
}
>
{item?.orderStatus}
</Tag>
),
Approver: (
<Text mb={0} fontSize={"xs"}>
Reethik Thota
</Text>
),
Disburser: (
<Text mb={0} fontSize={"xs"} >
Reethik Thota L1
</Text>
),
"": (
<Text mb={0} fontSize={"xs"} bg={"#6211CB"} color={"#fff"} py={2} rounded={"md"}>
View Reports
</Text>
),
}));
const extractedArrayAdvance = advanceStatus.map((item, index) => ({
"Wallet Name": (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<MdNoFood color='#6311CB' />
</Box>
<Text mb={0} fontSize={"xs"}>
Food
</Text>
</HStack>
),
"Card": (
<Text mb={0} fontWeight={600} fontSize={"xs"}>
Visa card **** 4831
</Text>
),
"Date & time": (
<Text mb={0} fontSize={"xs"}>
Jun 10, 2024,
</Text>
),
"Amount": (
<Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
₹ 5000
</Text>
),
"Merchant": (
<Text mb={0} fontSize={"xs"}>
Dine in
</Text>
),
}));
return (
<Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<MiniHeader backButton={true} title={""} />
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<HStack justifyContent={"space-between"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Employee Details
</Text>
<HStack>
<SecondaryButton
leftIcon={<MdOutlineModeEdit size={16} />}
title={"Edit"} />
<SecondaryButton
border={"1px solid #EE1B24"}
color={"#EE1B24"}
leftIcon={<MdDeleteOutline size={16} />}
title={"Delete"} />
</HStack>
</HStack>
<HStack spacing={6} alignItems={"start"}>
<HStack spacing={4} alignItems={"start"}>
<Image
borderRadius='full'
boxSize='80px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<VStack spacing={"1"} alignItems={"start"}>
<Text mb={0} fontSize={"md"} fontWeight={500}>
Pooja Shah
</Text>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Design - UI/UX Designer</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
Employee ID : WD-0067
</Text>
<Text fontSize={"xs"} color={"#999999"}>Member Since : 1st Jan 2022</Text>
</VStack>
<Badge
bg={"#ebf8ef"}
color={"#00A438"}
fontSize={"xs"}
borderRadius={"full"}
border={"1px solid #00A438"}
fontWeight={400}
py={1}
px={3}
>
<HStack>
<GoDotFill color={"#00A438"} />
<Text mb={0}>Active</Text>
</HStack>
</Badge>
</HStack>
<Box
borderLeft="1px dashed #BCBCBC"
pl={6}
>
<HStack mb={2}>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Phone :</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
+91 4578451245
</Text>
</HStack>
<HStack mb={2}>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Email :</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
poojashah@wdipl.com
</Text>
</HStack>
<HStack>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Grade :</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
A01
</Text>
</HStack>
</Box>
</HStack>
</Box>
<HStack spacing={4} alignItems={"start"} my={4}>
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Card Details
</Text>
<HStack spacing={6} alignItems={"start"}>
<HStack spacing={8} alignItems={"center"}>
<PayCard />
<VStack alignItems={"start"} spacing={10}>
<Box>
<Text fontSize={"sm"} color={"#999999"} mb={1}>Card ID</Text>
<Text mb={0} fontSize={"sm"} fontWeight={500}>
0067445
</Text>
</Box>
<Box>
<Text fontSize={"sm"} color={"#999999"} mb={1}>Card limit</Text>
<Text mb={0} fontSize={"sm"} fontWeight={500}>
₹ 10,000
</Text>
</Box>
<Box>
<Text fontSize={"sm"} color={"#999999"} mb={1}>Card type</Text>
<Text mb={0} fontSize={"sm"} fontWeight={500}>
Reloadable
</Text>
</Box>
</VStack>
</HStack>
</HStack>
</Box>
<Box w={"60%"} shadow={'md'} p={4} bg={'#fff'} rounded={"md"} flex={1}>
<HStack justifyContent={"space-between"} mb={4}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Wallets
</Text>
<PrimaryButton
leftIcon={<BsPrinter size={"16"} />}
title={"Pull back funds"}
/>
</HStack>
<Box>
<Tabs position='relative' variant='unstyled'>
<TabList>
<Tab
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>
Expense
</Tab>
<Tab
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>Benefit</Tab>
<Tab
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>Gifts</Tab>
</TabList>
<TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
<TabPanels>
<TabPanel px={0}>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</TabPanel>
<TabPanel px={0}>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRowAdvance}
data={extractedArrayAdvance}
isLoading={isLoading}
/>
</TabPanel>
<TabPanel px={0}>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Box>
</HStack>
{/* dhbfdbf */}
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
mb={5}
>
<VStack px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<Heading fontSize={"md"} fontWeight={500}>
Recent Reports
</Heading>
<HStack mb={3} spacing={4}>
<Box
fontSize={"sm"}
display={"flex"}
alignItems={"center"}
bg={"#F2EEF8"}
p={"6px 10px"}
rounded={"md"}
>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
gap={1}
>
<AiOutlineCalendar fontSize={"16px"} /> Time Period :
</Text>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
color={"#6311CB"}
fontWeight={500}
mx={2}
>
<Text as={"span"} me={5}>
Feb 20 - Jan 30, 2024{" "}
</Text>
<IoMdArrowDropdown />
</Text>
</Box>
<Menu>
<MenuButton
as={Button}
leftIcon={<FaArrowUpFromBracket />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
colorScheme="gray"
color={"gray.700"}
variant="outline"
size={"sm"}
>
Export
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>
<Image src={pdfIcon} me={2} /> Export as PDF
</MenuItem>
<MenuItem fontSize={"sm"}>
<Image src={ExcelIcon} me={2} /> Export as Excel
</MenuItem>
</MenuList>
</Menu>
<BsArrowsAngleExpand
onClick={() => navigate("/employees/view/recent-reports")}
as={Button}
color={"#6311CB"}
size={18}
cursor={"pointer"}
/>
</HStack>
</Box>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
>
<VStack px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<Heading fontSize={"md"} fontWeight={500}>
Recent Transaction
</Heading>
<HStack mb={3} spacing={4}>
<Box
fontSize={"sm"}
display={"flex"}
alignItems={"center"}
bg={"#F2EEF8"}
p={"6px 10px"}
rounded={"md"}
>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
gap={1}
>
<AiOutlineCalendar fontSize={"16px"} /> Time Period :
</Text>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
color={"#6311CB"}
fontWeight={500}
mx={2}
>
<Text as={"span"} me={5}>
Feb 20 - Jan 30, 2024{" "}
</Text>
<IoMdArrowDropdown />
</Text>
</Box>
<BsArrowsAngleExpand
onClick={() => navigate("/employees/view/recent-transaction")}
as={Button}
color={"#6311CB"}
size={18}
cursor={"pointer"}
/>
</HStack>
</Box>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRowAdvance}
data={extractedArrayAdvance}
isLoading={isLoading}
/>
</Box>
</Box>
)
}
export default EmployeesView

240
src/Pages/ManageHumanResource/EmployeesViewRecentReports.jsx Normal file
View File

@@ -0,0 +1,240 @@
import {
Box, HStack, Text, Tag,
Image,
VStack,
InputGroup,
InputLeftElement,
Input,
Menu,
MenuButton,
MenuList,
MenuItem,
Divider,
Button
} from '@chakra-ui/react'
import React, { useContext, useEffect, useState } from 'react'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import MiniHeader from '../../Components/MiniHeader'
import { LuListFilter, LuScrollText } from "react-icons/lu";
import NormalTable from "../../Components/DataTable/NormalTable";
import GlobalStateContext from '../../Contexts/GlobalStateContext'
import { ChevronDownIcon, SearchIcon } from '@chakra-ui/icons';
import { FaArrowUpFromBracket } from 'react-icons/fa6';
import { BsFilterRight } from 'react-icons/bs';
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg"
import { GoDotFill } from 'react-icons/go';
import { useNavigate } from 'react-router-dom';
const EmployeesViewRecentReports = () => {
const { recentReports } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const navigate = useNavigate();
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const tableHeadRow = [
"Report name",
"Report amount",
"Date & time",
"Order Status",
"Approver",
"Disburser",
"",
];
// Dynamically map the reports to the table
const extractedArray = recentReports.map((item, index) => ({
"Report name": (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<LuScrollText color='#6311CB' />
</Box>
<Text mb={0} fontWeight={600} fontSize={"xs"}>
{item?.reportName || "N/A"}
</Text>
</HStack>
),
"Report amount": (
<Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
{item?.reportAmount || "N/A"}
</Text>
),
"Date & time": (
<Text mb={0} fontSize={"xs"}>
{item?.dateTime || "N/A"}
</Text>
),
"Order Status": (
<Tag
size={"sm"}
py={2}
rounded="full"
color={
item?.status === "Approved"
? "#00A438"
: item?.status === "Fully Reimbursed"
? "#6311CB"
: "red"
}
bg={
item?.status === "Approved"
? "#ebf8ef"
: item?.status === "Fully Reimbursed"
? "#f1eafa"
: "red"
}
>
<HStack>
<GoDotFill size={10} />
<Text mb={0}>
{item?.status || "N/A"}
</Text>
</HStack>
</Tag>
),
Approver: (
<Text mb={0} fontSize={"xs"}>
{item?.approver || "N/A"}
</Text>
),
Disburser: (
<Text mb={0} fontSize={"xs"}>
{item?.disburser || "N/A"}
</Text>
),
"": (
<Text mb={0} fontSize={"xs"} bg={"#6211CB"} color={"#fff"} py={2} rounded={"md"}
onClick={()=>navigate("/employees/view/recent-reports/view")}
>
View Reports
</Text>
),
}));
return (
<Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<HStack justifyContent={"space-between"} mb={4}>
<Box>
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<VStack spacing={"1"} alignItems={"start"}>
<Text mb={0} fontSize={"md"} fontWeight={500}>
Pooja Shah
</Text>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Design - UI/UX Designer</Text>
</VStack>
</HStack>
</Box>
<Box>
<InputGroup width={300} size="sm">
<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>
</HStack>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Box>
<Menu>
<MenuButton
as={Button}
leftIcon={<BsFilterRight fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Sort
</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>
</Box>
<HStack>
<Menu>
<MenuButton
as={Button}
leftIcon={<FaArrowUpFromBracket />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
colorScheme="gray"
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Export
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}><Image src={pdfIcon} me={2} /> Export as PDF</MenuItem>
<MenuItem fontSize={"sm"}><Image src={ExcelIcon} me={2} /> Export as Excel</MenuItem>
</MenuList>
</Menu>
<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>
</HStack>
</HStack>
<NormalTable
emptyMessage={`We don't have any reports available`}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default EmployeesViewRecentReports;

219
src/Pages/ManageHumanResource/EmployeesViewRecentReportsView.jsx Normal file
View File

@@ -0,0 +1,219 @@
import {
Badge, Box, HStack, Image, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Text,
Heading, Menu, MenuButton, MenuItem, MenuList, VStack, Button,
Tag,
Divider,
} from '@chakra-ui/react'
import React, { useContext, useEffect, useState } from 'react'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import MiniHeader from '../../Components/MiniHeader'
import { GoDotFill } from 'react-icons/go'
import PayCard from '../../Components/PayCard'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import { BsPrinter } from 'react-icons/bs'
import { LuListFilter, LuScrollText } from "react-icons/lu";
import NormalTable from "../../Components/DataTable/NormalTable";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
import { AiOutlineCalendar } from "react-icons/ai";
import { IoMdArrowDropdown } from "react-icons/io";
import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs";
import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
import GlobalStateContext from '../../Contexts/GlobalStateContext'
import { MdDeleteOutline, MdNoFood, MdOutlineModeEdit } from 'react-icons/md'
import SecondaryButton from '../../Components/Buttons/SecondaryButton'
import { useNavigate } from 'react-router-dom'
const EmployeesViewRecentReportsView = () => {
const { reimbursementStatus } = useContext(GlobalStateContext);
const { advanceStatus } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const navigate = useNavigate();
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 = [
"Report name",
"Report amount",
"Date & time",
"Order Status",
"Approver",
"Disburser",
"",
];
const tableHeadRowAdvance = [
"Wallet Name",
"Card",
"Date & time",
"Amount",
"Merchant",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = reimbursementStatus.map((item, index) => ({
"Report name": (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<LuScrollText color='#6311CB' />
</Box>
<Text mb={0} fontWeight={600} fontSize={"xs"}>
Food for June 30
</Text>
</HStack>
),
"Report amount": (
<Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
₹ 5000
</Text>
),
"Date & time": (
<Text mb={0} fontSize={"xs"}>
Jun 10, 2024,
</Text>
),
"Order Status": (
<Tag
my={1}
size={"sm"}
borderRadius="full"
color={
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
? "#3725EA"
: "red"
}
>
{item?.orderStatus}
</Tag>
),
Approver: (
<Text mb={0} fontSize={"xs"}>
Reethik Thota
</Text>
),
Disburser: (
<Text mb={0} fontSize={"xs"} >
Reethik Thota L1
</Text>
),
"": (
<Text mb={0} fontSize={"xs"} bg={"#6211CB"} color={"#fff"} py={2} rounded={"md"}>
View Reports
</Text>
),
}));
const extractedArrayAdvance = advanceStatus.map((item, index) => ({
"Wallet Name": (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<MdNoFood color='#6311CB' />
</Box>
<Text mb={0} fontSize={"xs"}>
Food
</Text>
</HStack>
),
"Card": (
<Text mb={0} fontWeight={600} fontSize={"xs"}>
Visa card **** 4831
</Text>
),
"Date & time": (
<Text mb={0} fontSize={"xs"}>
Jun 10, 2024,
</Text>
),
"Amount": (
<Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
₹ 5000
</Text>
),
"Merchant": (
<Text mb={0} fontSize={"xs"}>
Dine in
</Text>
),
}));
return (
<Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<HStack justifyContent={"space-between"} mb={4}>
<Box>
<Text mb={0} fontSize={"sm"} fontWeight={600}>
Food expense June 2024
</Text>
</Box>
<Box>
<Tag
size={"sm"}
py={2}
rounded="full"
color={"#6311CB"}
bg={"#f1eafa"}
>
<HStack>
<GoDotFill size={10} />
<Text mb={0}>
Fully Reimbursed
</Text>
</HStack>
</Tag>
</Box>
</HStack>
<Divider />
<HStack>
<VStack>
<Text mb={0} fontSize={"sm"} fontWeight={500}>
Report by
</Text>
<Text mb={0} color={"#696969"}>
Kartikey Gautam
</Text>
</VStack>
</HStack>
{/* <NormalTable
emptyMessage={`We don't have any reports available`}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/> */}
</Box>
</Box>
)
}
export default EmployeesViewRecentReportsView

201
src/Pages/ManageHumanResource/EmployeesViewRecentTransaction.jsx Normal file
View File

@@ -0,0 +1,201 @@
import {
Box, HStack, Text, Tag,
Image,
VStack,
InputGroup,
InputLeftElement,
Input,
Menu,
MenuButton,
MenuList,
MenuItem,
Divider,
Button
} from '@chakra-ui/react'
import React, { useContext, useEffect, useState } from 'react'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import MiniHeader from '../../Components/MiniHeader'
import { LuListFilter, LuScrollText } from "react-icons/lu";
import NormalTable from "../../Components/DataTable/NormalTable";
import GlobalStateContext from '../../Contexts/GlobalStateContext'
import { ChevronDownIcon, SearchIcon } from '@chakra-ui/icons';
import { FaArrowUpFromBracket } from 'react-icons/fa6';
import { BsFilterRight } from 'react-icons/bs';
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg"
import { MdNoFood } from 'react-icons/md';
const EmployeesViewRecentTransaction = () => {
const { recentTransaction } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const tableHeadRow = [
"Wallet Name",
"Card",
"Date & time",
"Amount",
"Merchant",
];
// Dynamically map the reports to the table
const extractedArrayTransaction = recentTransaction.map((item, index) => ({
"Wallet Name": (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<MdNoFood color='#6311CB' />
</Box>
<Text mb={0} fontSize={"xs"}>
{item?.walletName || "N/A"}
</Text>
</HStack>
),
"Card": (
<Text mb={0} fontWeight={600} fontSize={"xs"}>
{item?.Card || "N/A"}
</Text>
),
"Date & time": (
<Text mb={0} fontSize={"xs"}>
{item?.dateTime || "N/A"}
</Text>
),
"Amount": (
<Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
{item?.Amount || "N/A"}
</Text>
),
"Merchant": (
<Text mb={0} fontSize={"xs"}>
{item?.Merchant || "N/A"}
</Text>
),
}));
return (
<Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<HStack justifyContent={"space-between"} mb={4}>
<Box>
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<VStack spacing={"1"} alignItems={"start"}>
<Text mb={0} fontSize={"md"} fontWeight={500}>
Pooja Shah
</Text>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Design - UI/UX Designer</Text>
</VStack>
</HStack>
</Box>
<Box>
<InputGroup width={300} size="sm">
<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>
</HStack>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Box>
<Menu>
<MenuButton
as={Button}
leftIcon={<BsFilterRight fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Sort
</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>
</Box>
<HStack>
<Menu>
<MenuButton
as={Button}
leftIcon={<FaArrowUpFromBracket />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
colorScheme="gray"
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Export
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}><Image src={pdfIcon} me={2} /> Export as PDF</MenuItem>
<MenuItem fontSize={"sm"}><Image src={ExcelIcon} me={2} /> Export as Excel</MenuItem>
</MenuList>
</Menu>
<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>
</HStack>
</HStack>
<NormalTable
emptyMessage={`We don't have any reports available`}
tableHeadRow={tableHeadRow}
data={extractedArrayTransaction}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default EmployeesViewRecentTransaction;

216
src/Pages/ManageHumanResource/PullBackFundsBenefit.jsx Normal file
View File

@@ -0,0 +1,216 @@
import {
Accordion,
AccordionButton,
AccordionItem,
AccordionPanel,
Box,
Button,
Checkbox,
HStack,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Text,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import {
ChevronDownIcon,
SearchIcon,
} from "@chakra-ui/icons";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { LuEye, LuListFilter } from "react-icons/lu";
import AccordianTable from "../../Components/DataTable/AccordianTable";
const PullBackFundsBenefit = () => {
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
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 = [
"Emp ID",
"Name",
"Email Address",
"Mobile number",
"Wallet",
"Wallet balance",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
"Emp ID": (
<Checkbox colorScheme="purple" value="1">
<HStack spacing={1}>
<Text
as={"span"}
fontSize={"xs"}
>
{item?.EmpID}
</Text>
</HStack>
</Checkbox >
),
"Name": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text mb={0}>
{item?.Name}
</Text>
</HStack>
),
"Email Address": item?.emailAddress,
"Mobile number": item?.mobileNumber,
"Wallet": (
<HStack>
<Text
fontSize={"xs"}
mb={0}
fontWeight={500}
bg={"#EFE3FF"}
px={2}
py={1}
color={"#6311CB"}
textAlign={"center"}
rounded={"md"}
>
Food
</Text>
<Text
fontSize={"xs"}
mb={0}
fontWeight={500}
bg={"#EFE3FF"}
px={2}
py={1}
color={"#6311CB"}
textAlign={"center"}
rounded={"md"}
>
Fuel
</Text>
<Text
fontSize={"xs"}
mb={0}
fontWeight={500}
bg={"#EFE3FF"}
px={2}
py={1}
color={"#6311CB"}
textAlign={"center"}
rounded={"md"}
>
Travel
</Text>
</HStack>
),
"Wallet balance": (
<Text
fontSize={"xs"}
>
₹ 5000
</Text>
),
"subMenu": item.subMenu
}));
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={0} p={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<InputGroup width={300} size="sm">
<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
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>
</Box>
</Box>
</VStack>
<AccordianTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default PullBackFundsBenefit;

182
src/Pages/ManageHumanResource/PullBackFundsExpense.jsx Normal file
View File

@@ -0,0 +1,182 @@
import {
Accordion,
AccordionButton,
AccordionItem,
AccordionPanel,
Box,
Button,
Checkbox,
HStack,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Text,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import {
ChevronDownIcon,
SearchIcon,
} from "@chakra-ui/icons";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { LuEye, LuListFilter } from "react-icons/lu";
import { RiArrowDropDownLine, RiArrowDropRightLine } from "react-icons/ri";
import AccordianTable from "../../Components/DataTable/AccordianTable";
const PullBackFundsExpense = () => {
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
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 = [
"Emp ID",
"Name",
"Email Address",
"Mobile number",
"Wallet",
"Wallet balance",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
"Emp ID": (
<Checkbox colorScheme="purple" value="1">
<HStack spacing={1}>
<Text
as={"span"}
fontSize={"xs"}
>
{item?.EmpID}
</Text>
</HStack>
</Checkbox >
),
"Name": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text mb={0}>
{item?.Name}
</Text>
</HStack>
),
"Email Address": item?.emailAddress,
"Mobile number": item?.mobileNumber,
"Wallet": (
<Text
fontSize={"xs"}
mb={0}
>
Food
</Text>
),
"Wallet balance": (
<Text
fontSize={"xs"}
>
₹ 5000
</Text>
),
"subMenu": item.subMenu
}));
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={0} p={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<InputGroup width={300} size="sm">
<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
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>
</Box>
</Box>
</VStack>
<AccordianTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default PullBackFundsExpense;

179
src/Pages/ManageHumanResource/PullBackFundsGifts.jsx Normal file
View File

@@ -0,0 +1,179 @@
import {
Accordion,
AccordionButton,
AccordionItem,
AccordionPanel,
Box,
Button,
Checkbox,
HStack,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Text,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import {
ChevronDownIcon,
SearchIcon,
} from "@chakra-ui/icons";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { LuEye, LuListFilter } from "react-icons/lu";
import AccordianTable from "../../Components/DataTable/AccordianTable";
const PullBackFundsGifts = () => {
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
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 = [
"Emp ID",
"Name",
"Email Address",
"Mobile number",
"Card number",
"Wallet balance",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
"Emp ID": (
<Checkbox colorScheme="purple" value="1">
<HStack spacing={1}>
<Text
as={"span"}
fontSize={"xs"}
>
{item?.EmpID}
</Text>
</HStack>
</Checkbox >
),
"Name": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text mb={0}>
{item?.Name}
</Text>
</HStack>
),
"Email Address": item?.emailAddress,
"Mobile number": item?.mobileNumber,
"Card number": (
<Text
fontSize={"xs"}
mb={0}
>
3446 **** **** ****
</Text>
),
"Wallet balance": (
<Text
fontSize={"xs"}
>
₹ 5000
</Text>
),
"subMenu": item.subMenu
}));
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={0} p={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<InputGroup width={300} size="sm">
<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
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>
</Box>
</Box>
</VStack>
<AccordianTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default PullBackFundsGifts;

312
src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx
View File

@@ -12,20 +12,20 @@ import ToastBox from '../../Components/ToastBox';
// Yup validation schema
const schema = yup.object().shape({
cin_number: yup
.string()
.required('CIN is required')
.matches(/^[A-Za-z0-9]{21}$/, 'CIN must be exactly 21 characters long'),
pancard_number: yup
.string()
.required('Company PAN is required')
.matches(/[A-Z]{5}[0-9]{4}[A-Z]{1}$/, 'Invalid PAN format'),
gst_number: yup
.string()
.required('GST number is required')
.matches(/\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/, 'Invalid GST number format'),
gst_file_path_name: yup.mixed().required('GST certificate is required'),
pancard_file_path_name: yup.mixed().required('PAN card is required'),
cin_number: yup
.string()
.required('CIN is required')
.matches(/^[A-Za-z0-9]{21}$/, 'CIN must be exactly 21 characters long'),
pancard_number: yup
.string()
.required('Company PAN is required')
.matches(/[A-Z]{5}[0-9]{4}[A-Z]{1}$/, 'Invalid PAN format'),
gst_number: yup
.string()
.required('GST number is required')
.matches(/\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/, 'Invalid GST number format'),
gst_file_path_name: yup.mixed().required('GST certificate is required'),
pancard_file_path_name: yup.mixed().required('PAN card is required'),
});
const OnboardingAddCompanyDetails = ({
@@ -36,21 +36,21 @@ const OnboardingAddCompanyDetails = ({
steps,
handleNext,
}) => {
const { register, handleSubmit, setValue, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
const { register, handleSubmit, setValue, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
const [fileName, setFileName] = useState("");
const [ sendFile ] = useSentFileMutation()
const [ isLoading, setIsLoading ] = useState()
const [sendFile] = useSentFileMutation()
const [isLoading, setIsLoading] = useState()
const toast = useToast()
const onSubmit = (data) => {
console.log('Form Data:', data);
const onSubmit = (data) => {
console.log('Form Data:', data);
setCorpData({ ...corpData, ...data });
handleNext();
};
};
@@ -64,25 +64,25 @@ const OnboardingAddCompanyDetails = ({
console.log(files);
const formData = new FormData();
formData.append("document", files[0]); // Append file
formData.append("document", files[0]); // Append file
const code = localStorage?.getItem("codeCorporate");
try {
const res = await sendFile({data:formData, code}); // Upload file to server
const res = await sendFile({ data: formData, code }); // Upload file to server
if (res?.data?.data) {
console.log(res?.data?.data);
console.log(res?.data?.data);
// Assuming res.data.data contains the file URL or some ID
setValue("gst_file_path_name", res?.data?.data); // Set value with server response
// setCorpData({ ...corpData, ...data });
// setCorpData({ ...corpData, ...data });
setIsLoading(false)
}
} catch (error) {
console.error("File upload failed", error);
}
// setValue("logo_path_file_name", files); // Update react-hook-form state
}
@@ -96,14 +96,14 @@ const OnboardingAddCompanyDetails = ({
// Assuming only one file is allowed
setFileName(files.name);
const formData = new FormData();
formData.append("document", files[0]); // Append file
formData.append("document", files[0]); // Append file
const code = localStorage?.getItem("codeCorporate");
try {
const res = await sendFile({data:formData, code}); // Upload file to server
const res = await sendFile({ data: formData, code }); // Upload file to server
if (res?.data?.data) {
// Assuming res.data.data contains the file URL or some ID
setValue("pancard_file_path_name", res?.data?.data); // Set value with server response
// setCorpData({ ...corpData, ...data });
// setCorpData({ ...corpData, ...data });
setIsLoading(false)
}
} catch (error) {
@@ -124,23 +124,23 @@ const OnboardingAddCompanyDetails = ({
const code = localStorage?.getItem("codeCorporate");
try {
const res = await sendFile({ data: formData, code }); // Upload file to server
console.log(res);
console.log(res);
if (res?.data?.data) {
// Assuming res.data.data contains the file URL or some ID
setCorpData({ ...corpData, gst_file_path_name:res?.data?.data });
setCorpData({ ...corpData, gst_file_path_name: res?.data?.data });
setValue("gst_file_path_name", res?.data?.data);
console.log(errors);
console.log(errors);
setPreview(res?.data?.data)
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
setIsLoading(false);
} else if (res?.error?.data?.message){
} else if (res?.error?.data?.message) {
toast({
render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
});
} else if(res?.error){
} else if (res?.error) {
toast({
render: () => <ToastBox status={'error'} message={"Somthing went wrong"} />,
});
@@ -163,23 +163,23 @@ const OnboardingAddCompanyDetails = ({
const code = localStorage?.getItem("codeCorporate");
try {
const res = await sendFile({ data: formData, code }); // Upload file to server
console.log(res);
console.log(res);
if (res?.data?.data) {
// Assuming res.data.data contains the file URL or some ID
setCorpData({ ...corpData, pancard_file_path_name:res?.data?.data });
setCorpData({ ...corpData, pancard_file_path_name: res?.data?.data });
setValue("pancard_file_path_name", res?.data?.data);
console.log(errors);
console.log(errors);
setPreview(res?.data?.data)
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
setIsLoading(false);
} else if (res?.error?.data?.message){
} else if (res?.error?.data?.message) {
toast({
render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
});
} else if(res?.error){
} else if (res?.error) {
toast({
render: () => <ToastBox status={'error'} message={"Image is too large"} />,
});
@@ -197,66 +197,66 @@ const OnboardingAddCompanyDetails = ({
return (
return (
<Box {...OPACITY_ON_LOAD}>
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
Add company details
</Text>
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
Lorem ipsum dolor sit amet, adipiscing elit.
</Text>
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
Add company details
</Text>
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
Lorem ipsum dolor sit amet, adipiscing elit.
</Text>
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
{/* CIN Field */}
<Box mb={3}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
CIN
</FormLabel>
<Input
type='text'
border="1px solid #e2e8f0"
borderRadius="md"
fontSize={"sm"}
fontWeight={500}
{...register('cin_number')}
/>
{errors.cin_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.cin_number.message}</Text>}
</Box>
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
{/* CIN Field */}
<Box mb={3}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
CIN
</FormLabel>
<Input
type='text'
border="1px solid #e2e8f0"
borderRadius="md"
fontSize={"sm"}
fontWeight={500}
{...register('cin_number')}
/>
{errors.cin_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.cin_number.message}</Text>}
</Box>
{/* Company PAN Field */}
<Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company PAN
</Text>
<Input
type='text'
border="1px solid #e2e8f0"
borderRadius="md"
fontSize={"sm"}
fontWeight={500}
{...register('pancard_number')}
/>
{errors.pancard_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.pancard_number.message}</Text>}
</Box>
{/* Company PAN Field */}
<Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company PAN
</Text>
<Input
type='text'
border="1px solid #e2e8f0"
borderRadius="md"
fontSize={"sm"}
fontWeight={500}
{...register('pancard_number')}
/>
{errors.pancard_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.pancard_number.message}</Text>}
</Box>
{/* Company GST Number */}
<Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company GST number
</Text>
<Input
type='text'
border="1px solid #e2e8f0"
borderRadius="md"
fontSize={"sm"}
fontWeight={500}
{...register('gst_number')}
/>
{errors.gst_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.gst_number.message}</Text>}
</Box>
{/* Company GST Number */}
<Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company GST number
</Text>
<Input
type='text'
border="1px solid #e2e8f0"
borderRadius="md"
fontSize={"sm"}
fontWeight={500}
{...register('gst_number')}
/>
{errors.gst_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.gst_number.message}</Text>}
</Box>
{/* Upload GST Certificate */}
{/* <Box mb={3}>
{/* Upload GST Certificate */}
{/* <Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Upload GST Certificate
</Text>
@@ -313,37 +313,37 @@ const OnboardingAddCompanyDetails = ({
<FileUploader
label="Upload GST Certificate"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUploadGst}
<FileUploader
label="Upload GST Certificate"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUploadGst}
> {errors.gst_file_path_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.gst_file_path_name?.message}
</Text>
)}
> {errors.gst_file_path_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.gst_file_path_name?.message}
</Text>
)}
</FileUploader>
</FileUploader>
<FileUploader
label="Upload PAN card"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUploadPan}
<FileUploader
label="Upload PAN card"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUploadPan}
> {errors.pancard_file_path_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.pancard_file_path_name?.message}
</Text>
)}
> {errors.pancard_file_path_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.pancard_file_path_name?.message}
</Text>
)}
</FileUploader>
</FileUploader>
{/* Upload PAN Card */}
{/* <Box mb={3}>
{/* Upload PAN Card */}
{/* <Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Upload PAN Card
</Text>
@@ -398,8 +398,8 @@ const OnboardingAddCompanyDetails = ({
</HStack>
</Box> */}
{/* Submit Button */}
{/* <Box mt={6}>
{/* Submit Button */}
{/* <Box mt={6}>
<Text
as="button"
bg={'#6311CB'}
@@ -416,44 +416,44 @@ const OnboardingAddCompanyDetails = ({
<HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
variant="outline"
size="sm"
px={8}
_hover={{ opacity: 0.8 }}
color={"#d0b8ef"}
border={"1px solid #d0b8ef"}
isDisabled={activeStep === 0}
onClick={() => setActiveStep(activeStep - 1)}
/>
<HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
variant="outline"
size="sm"
px={8}
_hover={{ opacity: 0.8 }}
color={"#d0b8ef"}
border={"1px solid #d0b8ef"}
isDisabled={activeStep === 0}
onClick={() => setActiveStep(activeStep - 1)}
/>
<Button
bg={"#6311CB"}
color={"#fff"}
fontSize={"xs"}
fontWeight={500}
size="sm"
_hover={{ opacity: 0.8 }}
rightIcon={<ArrowForwardIcon />}
w={"100%"}
type="submit"
>
{activeStep === steps.length - 1 ? "Next step" : "Next step"}
</Button>
</HStack>
</Box>
<Button
bg={"#6311CB"}
color={"#fff"}
fontSize={"xs"}
fontWeight={500}
size="sm"
_hover={{ opacity: 0.8 }}
rightIcon={<ArrowForwardIcon />}
w={"100%"}
type="submit"
>
{activeStep === steps.length - 1 ? "Next step" : "Next step"}
</Button>
</HStack>
</Box>
{/* Display the loading spinner */}
{isLoading && (
<Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'} position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
{/* Display the loading spinner */}
{isLoading && (
<Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'} position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
<Text as={'span'} fontWeight={600} fontSize={'sm'}>Uploading please wait...</Text>
</Box>
)}
</Box>
);
</Box>
);
};
export default OnboardingAddCompanyDetails;

15
src/Routes/Routes.js
View File

@@ -23,6 +23,11 @@ import CreateWallet from "../Pages/OptiFiiExpense/wallet/CreateWallet";
import GiftDashboard from "../Pages/OptiFiiGifsAndVouchers/GiftDashboard";
import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
import EmployeesPullBackFunds from "../Pages/ManageHumanResource/EmployeesPullBackFunds";
import EmployeesView from "../Pages/ManageHumanResource/EmployeesView";
import EmployeesViewRecentReports from "../Pages/ManageHumanResource/EmployeesViewRecentReports";
import EmployeesViewRecentTransaction from "../Pages/ManageHumanResource/EmployeesViewRecentTransaction";
import EmployeesViewRecentReportsView from "../Pages/ManageHumanResource/EmployeesViewRecentReportsView";
import BrandVoucher from "../Pages/OptiFiiGifsAndVouchers/BrandVoucher";
// import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
// import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
@@ -55,6 +60,16 @@ export const RouteLink = [
{ path: "/optiFii-expense-dashboard", Component: OptiFiiExpenseDashboard },
{ path: "/gift-card", Component: GiftCard },
{ path: "/gift-card/application-status", Component: ApplicationStatus },
{ path: "/gift-card/digital-application-status", Component: DigitalApplicationStatus },
{path:"/wallet-program/create-wallet" , Component : CreateWallet},
{ path: "/employees/pull-back-funds", Component: EmployeesPullBackFunds },
{ path: "/employees/view", Component: EmployeesView },
{ path: "/employees/view/recent-reports", Component: EmployeesViewRecentReports },
// { path: "/employees/view/recent-reports/view", Component: EmployeesViewRecentReportsView },
{ path: "/employees/view/recent-transaction", Component: EmployeesViewRecentTransaction },
{
path: "/gift-card/digital-application-status",
Component: DigitalApplicationStatus,

13
src/assets/TRANSCORP_LOGO.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

13
src/assets/logo_card.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="81" height="33" viewBox="0 0 81 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.9669 10.7619C31.5777 10.9704 30.5078 11.4171 29.5974 12.1617C28.628 12.954 27.9895 14.1036 27.7886 15.432C27.7472 15.694 27.7354 16.2004 27.7531 16.6531C27.8004 17.8861 28.0841 18.6962 28.7994 19.6493C29.7807 20.9598 31.3885 21.752 33.422 21.9307C35.6802 22.1213 37.7787 21.4303 39.0378 20.0841C40.0013 19.0596 40.3737 18.1065 40.4269 16.5637C40.4506 15.8906 40.4387 15.5868 40.356 15.1937C39.9895 13.3709 38.7245 11.9056 36.9156 11.2146C36.023 10.8691 35.4496 10.7738 34.2378 10.7559C33.6348 10.744 33.0674 10.75 32.9669 10.7619ZM35.6151 12.5668C37.1225 12.9659 38.1984 14.0679 38.4407 15.4558C38.5412 16.0455 38.4821 17.213 38.3225 17.6538C37.9796 18.6247 37.359 19.3336 36.4723 19.7684C35.7215 20.1318 35.2191 20.2271 34.0605 20.2211C33.1738 20.2152 33.0378 20.2033 32.5531 20.0544C31.093 19.6076 30.1708 18.6903 29.8339 17.3679C29.7275 16.9569 29.7156 15.9144 29.8102 15.3962C29.8398 15.2056 29.9876 14.8005 30.1294 14.5027C30.3422 14.0619 30.4664 13.8951 30.8329 13.5437C31.4654 12.9301 32.0861 12.6502 33.2329 12.4298C33.3156 12.4179 33.7826 12.4119 34.2674 12.4238C34.9294 12.4357 35.2723 12.4715 35.6151 12.5668Z" fill="white"/>
<path d="M61.3891 11.0891C61.058 11.2559 60.8984 11.518 60.8984 11.9112C60.8984 12.2686 60.9989 12.4949 61.2531 12.7094C61.7674 13.1501 62.7191 13.0489 63.0679 12.5187C63.2511 12.2507 63.2511 11.8099 63.0738 11.4942C62.8019 11.0117 61.9566 10.8032 61.3891 11.0891Z" fill="white"/>
<path d="M75.2916 11.3449C75.0434 11.4521 74.801 11.7559 74.7537 12.0061C74.6887 12.3695 74.7774 12.6375 75.0552 12.9115C75.6286 13.4596 76.6158 13.3762 76.9291 12.7447C77.1537 12.3159 76.9882 11.744 76.5567 11.4581C76.3498 11.3211 76.2315 11.2913 75.8887 11.2734C75.6227 11.2675 75.404 11.2913 75.2916 11.3449Z" fill="white"/>
<path d="M79.0327 11.3807C78.749 11.4641 78.5243 11.6726 78.4239 11.9466C78.1401 12.6912 78.8317 13.4238 79.7362 13.3285C80.6406 13.2332 80.9539 12.2444 80.2682 11.6368C79.949 11.3509 79.4583 11.2496 79.0327 11.3807Z" fill="white"/>
<path d="M65.0947 12.2561C65.0947 12.6433 65.1243 13.924 65.1538 15.1034C65.1834 16.2828 65.2248 18.2247 65.2425 19.422C65.2602 20.6193 65.2898 21.7094 65.3075 21.8464L65.3371 22.1025H66.2297H67.1223L67.0809 19.9462L67.0336 17.7958L70.2908 17.8375L73.5479 17.8852L73.5124 17.087C73.4888 16.6224 73.4415 16.2769 73.406 16.2531C73.3705 16.2292 72.7676 16.2054 72.0701 16.2054C71.3725 16.2054 69.942 16.1875 68.9016 16.1637L67.0041 16.128L66.9568 14.6984C66.9331 13.918 66.9391 13.2509 66.9686 13.2271C66.9923 13.2032 68.4819 13.2151 70.2671 13.2509C72.0582 13.2926 73.5361 13.3045 73.5597 13.2866C73.5834 13.2688 73.5893 12.9114 73.5656 12.5003L73.5302 11.7498L72.6375 11.7141C71.6385 11.6783 66.2652 11.5592 65.5558 11.5592H65.0947V12.2561Z" fill="white"/>
<path d="M54.6374 12.613C54.5015 13.036 54.33 13.5244 54.265 13.7091L54.1527 14.0367L53.2956 14.2392L52.4443 14.4358V14.8349V15.234L53.2778 15.2697C53.7389 15.2876 54.1231 15.3174 54.135 15.3293C54.1468 15.3412 54.1704 16.3002 54.1941 17.4618C54.2236 19.2428 54.2473 19.6419 54.3419 20.0351C54.5369 20.875 54.9685 21.4349 55.6896 21.8042C56.2039 22.0603 56.7241 22.1676 57.5221 22.1676C58.2433 22.1735 58.6571 22.114 59.3074 21.9293C59.9872 21.7327 59.9517 21.7863 59.9517 20.9762C59.9517 20.589 59.934 20.2614 59.9162 20.2376C59.8926 20.2197 59.8216 20.2376 59.7507 20.2853C59.4138 20.5056 58.9172 20.6248 58.1724 20.6546C57.2325 20.6963 56.8778 20.6069 56.4995 20.2376C56.0798 19.8325 56.0502 19.6658 56.0088 17.3188L55.9734 15.3055L57.8414 15.3471L59.7152 15.3888V14.7277C59.7152 14.3643 59.6916 14.0545 59.662 14.0367C59.6325 14.0128 58.7931 13.9831 57.8 13.9592L55.9911 13.9235L55.9793 13.0836C55.9734 12.619 55.9675 12.1603 55.9616 12.065L55.9556 11.8863L55.4295 11.8684L54.8975 11.8565L54.6374 12.613Z" fill="white"/>
<path d="M47.213 13.6203C47.148 13.6322 46.947 13.6739 46.7697 13.7097C45.8594 13.8943 44.8131 14.6389 44.2397 15.5026C44.1628 15.6277 44.0741 15.729 44.0564 15.729C44.0328 15.729 44.0209 15.2822 44.0209 14.7283V13.7335L43.0929 13.7156L42.1589 13.6978V15.175C42.1589 15.9911 42.1411 18.3619 42.1175 20.4467L42.082 24.2471H43.0338H43.9914V22.0133C43.9914 20.7862 44.0091 19.7795 44.0387 19.7795C44.0623 19.7855 44.1569 19.9106 44.2515 20.0595C44.6948 20.7624 45.617 21.5308 46.3382 21.8048C47.4554 22.2277 48.8091 22.1801 49.8081 21.6738C50.6948 21.227 51.3805 20.4169 51.7175 19.3924C51.8652 18.9516 51.8771 18.8384 51.883 17.933C51.883 17.1348 51.8593 16.8786 51.7707 16.5629C51.4514 15.455 50.7125 14.5317 49.7845 14.073C49.5066 13.936 49.1224 13.7812 48.9273 13.7275C48.5786 13.6382 47.4495 13.5608 47.213 13.6203ZM47.8337 15.0797C49.1106 15.2822 49.9322 16.2294 50.0505 17.647C50.1214 18.4631 49.8731 19.2375 49.3588 19.8093C48.549 20.7028 47.1658 20.8756 45.948 20.2263C45.2091 19.8332 44.6594 19.2315 44.1865 18.3082L43.9323 17.8079L44.2397 17.2063C44.8308 16.0387 45.7943 15.2584 46.8465 15.0797C47.2781 15.0082 47.3963 15.0082 47.8337 15.0797Z" fill="white"/>
<path d="M61.2103 15.7636C61.2339 16.7465 61.2694 18.5573 61.2871 19.7904L61.3285 22.042H62.2448H63.1551L63.1196 21.1008C63.1019 20.5886 63.0723 19.0934 63.0546 17.783C63.0369 16.4725 63.0073 15.0846 62.9896 14.7033L62.9541 14.0004L62.7058 14.0481C62.3807 14.1017 61.8191 14.1017 61.4645 14.0362L61.1748 13.9826L61.2103 15.7636Z" fill="white"/>
<path d="M75.1029 15.0558C75.1206 15.5085 75.1856 17.2895 75.2388 19.011L75.3452 22.1502L75.6408 22.1859C75.8063 22.2038 76.2024 22.2217 76.5216 22.2217H77.095V21.7749C77.095 21.3639 76.8762 15.0498 76.8408 14.5078C76.829 14.2457 76.8585 14.2516 76.2556 14.3529C76.0664 14.3886 75.8359 14.3886 75.7235 14.3588C75.6171 14.335 75.4221 14.2933 75.2979 14.2695L75.0674 14.2278L75.1029 15.0558Z" fill="white"/>
<path d="M78.7092 14.7584C78.7328 15.0146 78.8038 16.7777 78.8747 18.6779C78.9456 20.5781 79.0166 22.1507 79.0402 22.1745C79.058 22.1924 79.4599 22.2222 79.9269 22.2341L80.7722 22.252L80.7368 21.2691C80.6954 20.1612 80.6185 18.3741 80.5181 15.9974C80.4826 15.1099 80.4412 14.3772 80.4294 14.3653C80.4176 14.3474 80.2107 14.3653 79.9742 14.407C79.6373 14.4546 79.4718 14.4546 79.1644 14.3891C78.9516 14.3415 78.7565 14.3057 78.7269 14.2998C78.6974 14.2998 78.6915 14.5023 78.7092 14.7584Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4688 0.298735C8.91207 0.298735 3.28392 4.30495 0.863514 10.0207C3.07895 11.1596 4.61106 13.4552 4.67588 16.1175C4.76876 10.1917 9.5648 5.41677 15.4676 5.41677C21.4284 5.41677 26.2607 10.2861 26.2607 16.2927C26.2607 22.2994 21.4284 27.1687 15.4676 27.1687C9.56508 27.1687 4.76921 22.3942 4.67589 16.4688C4.61127 19.1312 3.0793 21.4269 0.863949 22.5659C3.2846 28.2811 8.91246 32.2869 15.4688 32.2869C22.0255 32.2869 27.6537 28.2806 30.0741 22.5648C27.8124 21.4001 26.2641 19.0295 26.2641 16.2944C26.2641 13.5589 27.813 11.1879 30.0752 10.0234C27.6554 4.30622 22.0265 0.298735 15.4688 0.298735Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/assets/rupayImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB