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

Compare commits

base: Siddhesh.More:corpstatic
Branches Tags
Siddhesh.More:main Siddhesh.More:corpstatic Siddhesh.More:Uncommit Siddhesh.More:dev
..
compare: Siddhesh.More:Uncommit
Branches Tags
Siddhesh.More:corpstatic Siddhesh.More:Uncommit Siddhesh.More:dev Siddhesh.More:main

1 Commits
corpstatic ... Uncommit

Author SHA1 Message Date
npcdazai
5805c171e4 [update] - commit 2024-10-09 16:15:44 +05:30
75 changed files with 2522 additions and 9502 deletions
Expand all files Collapse all files

9
package-lock.json generated
View File

@@ -28,7 +28,6 @@
"react-apexcharts": "^1.4.1",
"react-beautiful-dnd": "^13.1.1",
"react-chartjs-2": "^5.2.0",
"react-circular-progressbar": "^2.1.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.3",
"react-icons": "^5.1.0",
@@ -5322,14 +5321,6 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-circular-progressbar": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
"integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-clientside-effect": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",

1
package.json
View File

@@ -30,7 +30,6 @@
"react-apexcharts": "^1.4.1",
"react-beautiful-dnd": "^13.1.1",
"react-chartjs-2": "^5.2.0",
"react-circular-progressbar": "^2.1.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.3",
"react-icons": "^5.1.0",

29
src/App.css
View File

@@ -46,7 +46,6 @@ a.active {
rgba(55, 37, 234, 0.6) 0%,
rgba(94, 15, 205, 0.6) 100%
);
/* background-color: #FFFFFF21; */
}
/* .chakra-accordion__item.css-1t7rcca:has(.active) {
background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
@@ -536,32 +535,4 @@ a.active {
}
@font-face {
font-family: 'Gilroy';
src: url('./assets/fonts/Gilroy-Medium.ttf') format('woff2');
/* url('./assets/fonts/MyCustomFont.woff') format('woff'),
url('./assets/fonts/MyCustomFont.ttf') format('truetype'); */
font-weight: normal;
font-style: normal;
}
.gilroy{
font-family: 'Gilroy';
}
/* Styling the scrollbar */
/* for stepper */
.css-1mdamwy[data-status=complete] {
background: #3725EA !important;
}
.css-1mdamwy[data-status=active] {
border-width: 1px !important;
border-color: #3725EA !important;
}
.css-ylpnre {
gap: 0 !important;
}
.css-90e3v4[data-status=complete] {
background: #3725EA !important;
}

100
src/Components/Cards/BlueCard.jsx
View File

@@ -1,69 +1,41 @@
import { Box, Stack, Text, Link } from "@chakra-ui/react";
import React, { useState } from "react"; // Import useState
import { MdGroups } from "react-icons/md";
import EmployeesAddModal from "../../Pages/ManageHumanResource/EmployeesAddModal";
import { NavLink } from "react-router-dom";
import { Box, Stack, Text, Link, Badge } from '@chakra-ui/react';
import React from 'react';
import { MdGroups } from 'react-icons/md';
function BlueCard({ blueCardData }) {
const [isOpen, setIsOpen] = useState(false); // State to manage modal visibility
const openModal = () => setIsOpen(true); // Function to open the modal
const closeModal = () => setIsOpen(false); // Function to close the modal
return (
<Box backgroundColor={blueCardData.backgroundColor} borderRadius="xl">
<Box bg="#fff" borderRadius="xl" p={4} h="115px">
<Stack
direction={["column", "row"]}
color={blueCardData.backgroundColor}
function BlueCard({blueCardData}) {
return (
<Box
backgroundColor={blueCardData.backgroundColor}
borderRadius="xl"
>
<Text as="span">
<MdGroups />
</Text>
<Text
textTransform={"capitalize"}
display={"flex"}
alignItems={"center"}
as={"span"}
fontSize="xs"
mb={0}
fontWeight={500}
>
{blueCardData.title.toUpperCase()}
</Text>
</Stack>
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
{blueCardData.count}
</Text>
</Box>
<Stack
direction={["column", "row"]}
color="#fff"
justifyContent="center"
alignItems="center"
>
<Text as="span">
<MdGroups />
</Text>
<Text fontSize="sm" m={0} py={2}>
{blueCardData.title === "Total EMPLOYEES" ? (
<Link mb={0} onClick={openModal}>
{blueCardData.buttonText}
</Link>
) : (
<NavLink to="dashboard/wallet-request">
<Link mb={0}>
{blueCardData.buttonText}
</Link>
</NavLink>
)}
</Text>
</Stack>
{blueCardData.title === "Total EMPLOYEES" && (
<EmployeesAddModal isOpen={isOpen} onClose={closeModal} />
)}
</Box>
);
<Box bg="#fff" borderRadius="xl" p={4} h="115px">
<Stack direction={["column", "row"]} color={blueCardData.backgroundColor}>
<Text as="span">
<MdGroups />
</Text>
<Text textTransform={'capitalize'} display={'flex'} alignItems={'center'} as={'span'} fontSize="xs" mb={0} fontWeight={500}>
{blueCardData.title.toUpperCase()}
</Text>
</Stack>
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
{blueCardData.count}
</Text>
</Box>
<Stack
direction={["column", "row"]}
color="#fff"
justifyContent="center"
alignItems="center"
>
<Text as="span">
<MdGroups />
</Text>
<Text fontSize="sm" m={0} py={2}>
<Link mb={0}>{blueCardData.buttonText}</Link>
</Text>
</Stack>
</Box>
);
}
export default BlueCard;

232
src/Components/DataTable/AccordianTable.jsx
View File

@@ -14,7 +14,7 @@ import {
Collapse,
HStack,
Text,
Box,
Box, // Import Collapse from Chakra UI
} from "@chakra-ui/react";
import EmptySearchList from "../EmptySearchList";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
@@ -30,38 +30,24 @@ const AccordionTable = ({
selectedRadio,
setSelectedRadio,
}) => {
const [expandedRow, setExpandedRow] = useState(null);
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
};
// Toggle checkbox selection for individual rows
const handleCheckboxChange = (value) => {
setSelectedRadio((prev) => {
if (prev.includes(value)) {
return prev.filter((id) => id !== value); // Deselect if already selected
} else {
return [...prev, value]; // Add if not selected
}
});
};
// Handle "Select All" checkbox functionality
const handleCheckAllChange = () => {
if (selectedRadio.length === data.length) {
setSelectedRadio([]); // Deselect all if already selected
} else {
const allIds = data.map((item) => item.id);
setSelectedRadio(allIds); // Select all
}
};
return (
<TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
{data?.length === 0 ? (
@@ -73,15 +59,6 @@ const AccordionTable = ({
</TableCaption>
<Thead bg="#6311cb37">
<Tr>
{showRadioButton && (
<Th textAlign="center" p={4}>
<Checkbox
isChecked={selectedRadio?.length === data?.length}
onChange={handleCheckAllChange}
colorScheme="purple"
/>
</Th>
)}
{tableHeadRow.map((heading, index) => (
<Th
color={"purple.900"}
@@ -97,7 +74,15 @@ const AccordionTable = ({
overflowWrap="normal"
textTransform={"none"}
>
{isLoading ? <Skeleton height="20px" /> : heading}
{showRadioButton && heading === "Select" ? (
<CheckboxGroup value={selectedRadio}>
<Checkbox isDisabled />
</CheckboxGroup>
) : isLoading ? (
<Skeleton height="20px" />
) : (
heading
)}
</Th>
))}
</Tr>
@@ -105,97 +90,98 @@ const AccordionTable = ({
<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} 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)}
>
{showRadioButton && (
<Td textAlign="center">
<Checkbox
bg={"#fff"}
colorScheme="purple"
value={item.id}
isChecked={selectedRadio?.includes(item.id)}
onChange={() => handleCheckboxChange(item.id)}
/>
</Td>
)}
{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"
>
{item[heading]}
</Td>
))}
</Tr>
{/* Expanded Row Content */}
<Tr>
<Td colSpan={tableHeadRow.length} p={0}>
<Collapse in={expandedRow === index} animateOpacity>
{item?.subMenu?.map(({ wallet, walBal }, idx) => (
<div
key={idx}
style={{
padding: "4px 75px ",
margin: "5px 0",
}}
>
<Box display={"flex"} alignItems={"center"}>
<Box opacity={0} flex={1}>
<Text mb={0}>Hidden content</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>
(_, 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>
</React.Fragment>
))}
))}
</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>
)}

14
src/Components/DataTable/NormalTable.jsx
View File

@@ -32,10 +32,9 @@ const NormalTable = ({
// Toggle checkbox selection for individual rows
const handleCheckboxChange = (value) => {
console.log(value , "Noggas values");
console.log(value);
setSelectedRadio((prev) =>
{
setSelectedRadio((prev) => {
if (prev.includes(value)) {
// Remove if already selected
return prev.filter((id) => id !== value);
@@ -43,8 +42,7 @@ const NormalTable = ({
// Add to selected
return [...prev, value];
}
}
);
});
};
// Handle "Check All" checkbox
@@ -65,9 +63,9 @@ const NormalTable = ({
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
{/* <TableCaption p={total ? 0 : null}>
{total ? total : "Optifii v1.0.0"}
</TableCaption> */}
<TableCaption p={total ? 0 : null}>
{total ? total : "Tanami v1.0.0"}
</TableCaption>
<Thead bg="purple.100">
<Tr>
{showRadioButton && (

12
src/Components/Doughnut/ApexLine.jsx
View File

@@ -5,19 +5,19 @@ function ApexLine() {
const [chartOptions, setChartOptions] = useState({
series: [{
name: 'Rate',
data: ["0","20k", "60k", "50k", "110k","90k", "100k"],
data: [45, 23, 70, 65, 5, 34, 32],
gradientToColors: ['#004017'],
}],
options: {
chart: {
height: 500,
height: 350,
type: 'line',
toolbar: {
show: false // Hide the action icons
}
},
stroke: {
width: 2,
width: 5,
curve: 'smooth',
colors: ['#598369'], // Customize the line color here
},
@@ -29,11 +29,11 @@ function ApexLine() {
},
xaxis: {
type: 'category', // Change from 'datetime' to 'category'
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'],
tickAmount: 7
},
title: {
text: 'Spend summary', // Adjust the title if needed
text: 'Exchange Rate Currency', // Adjust the title if needed
align: 'left',
style: {
fontSize: '15px',
@@ -58,7 +58,7 @@ function ApexLine() {
return (
<div>
<ReactApexChart options={chartOptions.options} series={chartOptions.series} type="line" height={"288px"} width={"100%"} />
<ReactApexChart options={chartOptions.options} series={chartOptions.series} type="line" height={"100%"} width={"600"} />
</div>
);
}

66
src/Components/Doughnut/PieCharts.jsx
View File

@@ -1,66 +0,0 @@
import React, { useEffect, useRef } from 'react';
import { Chart, ArcElement, Tooltip, Legend } from 'chart.js'; // Import necessary components
import { Box, Text } from '@chakra-ui/react';
function PieCharts() {
const chartRef = useRef(null);
useEffect(() => {
// Register required components
Chart.register(ArcElement, Tooltip, Legend);
const ctx = chartRef.current.getContext('2d');
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Food', 'Fuel', 'Travel', 'Sales call'],
datasets: [
{
data: [25, 15, 30, 30], // Adjust the values as needed
backgroundColor: ['#ff6384', '#ffce56', '#36a2eb', '#4bc0c0'],
borderColor: ['#fff', '#fff', '#fff', '#fff'],
borderWidth: 1,
borderRadius:0,
},
],
},
options: {
cutout: '75%',
responsive: true,
plugins: {
legend: {
position: 'bottom',
borderRadius:"0px",
labels: {
usePointStyle: true,
usePointStyle: false, // Disables the point style
boxWidth: 25, // Adjust this to make square boxes
padding: 15,
paddingTop:70,
},
},
},
},
});
return () => {
myChart.destroy();
};
}, []);
return (
<div>
<Text fontSize={"sm"} fontWeight={500} mb={5}>Total spent by category</Text>
<Box position={"relative"}>
<canvas ref={chartRef} style={{width:"260px"}} />
<Box position={"absolute"} top={"36%"} left={"36%"}>
<Text fontSize={"sm"} mb={0}>Total Value</Text>
<Text fontSize={"md"} mb={0} fontWeight={500}>₹9,999.99</Text>
</Box>
</Box>
</div>
);
}
export default PieCharts;

2
src/Components/FormFieldMainReference.jsx
View File

@@ -18,7 +18,7 @@ import * as yup from "yup";
import { WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useApp } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import FormField from "../../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
import FormInputMain from "../../../Components/AddEditComponentMain";

286
src/Components/HeaderMain.jsx
View File

@@ -10,14 +10,10 @@ import {
Box,
Button,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuList,
Popover,
PopoverArrow,
PopoverBody,
@@ -37,9 +33,6 @@ import mainLogo from "../assets/optifii_logo.svg";
import { MdNotificationsNone } from "react-icons/md";
import womenpfp from "../assets/womenpfp1.png";
import { MdLogout } from "react-icons/md";
import { IoFilterSharp } from "react-icons/io5";
import { MdDeleteOutline, MdOutlineDelete } from "react-icons/md";
import { IoIosCheckmark } from "react-icons/io";
const users = [
{ id: 1, user: "Jenny Wilson", role: "Admin" },
@@ -56,34 +49,6 @@ const HeaderMain = ({
const navigate = useNavigate();
const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const [notifications, setNotifications] = useState([
{
id: 1,
avatar: "https://bit.ly/dan-abramov",
sender: "Admin",
time: "1 Min ago",
message: "Lorem ipsum dolor sit amet, consectetur",
},
{
id: 2,
avatar: "https://bit.ly/code-beast",
sender: "Support",
time: "5 Min ago",
message: "Your ticket has been updated.",
},
]);
// Handler to delete a notification
const handleDelete = (id) => {
setNotifications(
notifications.filter((notification) => notification.id !== id)
);
};
// Handler to delete all notifications
const handleDeleteAll = () => {
setNotifications([]);
};
const openDrawerOnClick = () => {};
@@ -161,192 +126,11 @@ const HeaderMain = ({
justifyContent={"space-between"}
>
<Box display={"flex"} gap={2}>
{/* <Box display={"flex"} gap={2} alignItems={"center"} me={2}>
<Button
onClick={()=>navigate("/notification")}
size={"sm"} bg={"none"} p={0}
>
<Box display={"flex"} gap={2} alignItems={"center"} me={2}>
<Button size={"sm"} bg={"none"} p={0}>
<MdNotificationsNone fontSize={"20px"} />
</Button>
</Box> */}
<Menu>
<MenuButton
as={Button}
border={"0px"}
_hover={{ bgColor: "#FFF" }}
// _active={{bgColor:"#FFF"}}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
<MdNotificationsNone fontSize={"20px"} />
</MenuButton>
<MenuList w="342px" h="442px" overflowY="scroll">
<HStack
borderBottom="1px dashed #CFCFCF"
justifyContent="space-between"
w="100%"
p={2}
position="fixed"
top={1}
bgColor="#FFF"
>
<Text
as="span"
fontWeight={600}
fontSize="small"
color="#000000"
>
Notification
</Text>
<Text
textDecoration="underline"
fontSize="small"
color="#696498"
onClick={handleDeleteAll}
>
Clear all
</Text>
</HStack>
<VStack mt={12} mb={12}>
<Box bg="#fff" p={1} rounded="md" boxShadow="md">
<Text fontSize="small" fontWeight={400} color="#A0A0A0">
Today
</Text>
<VStack spacing={4} align="stretch">
{notifications.map((notification) => (
<HStack
key={notification.id}
justifyContent="space-between"
bg="#F3F7F9"
p={2}
rounded="sm"
boxShadow="md"
>
<HStack spacing={2}>
<Box bg="#d7d3fb" p={1} rounded="full">
<Image
borderRadius="full"
boxSize="30px"
src={notification.avatar}
alt={notification.sender}
/>
</Box>
<Box>
<Box mb={0}>
<Text
as="span"
fontSize="sm"
fontWeight={600}
mb={0}
>
{notification.sender}
</Text>
<Text
as="span"
color="#A0A0A0"
fontSize="xs"
ms={2}
fontWeight={500}
mb={0}
>
{notification.time}
</Text>
</Box>
<Text color="#A0A0A0" fontSize="xs" mb={0}>
{notification.message}
</Text>
</Box>
</HStack>
<Box
onClick={() => handleDelete(notification.id)}
cursor="pointer"
>
<MdOutlineDelete color="#686868" size={16} />
</Box>
</HStack>
))}
</VStack>
</Box>
<Box bg="#fff" p={1} rounded="md" boxShadow="md">
<Text fontSize="small" fontWeight={400} color="#A0A0A0">
Yesterday
</Text>
<VStack spacing={4} align="stretch">
{notifications.map((notification) => (
<HStack
key={notification.id}
justifyContent="space-between"
bg="#F3F7F9"
p={2}
rounded="sm"
boxShadow="md"
>
<HStack spacing={2}>
<Box bg="#d7d3fb" p={1} rounded="full">
<Image
borderRadius="full"
boxSize="30px"
src={notification.avatar}
alt={notification.sender}
/>
</Box>
<Box>
<Box mb={0}>
<Text
as="span"
fontSize="sm"
fontWeight={600}
mb={0}
>
{notification.sender}
</Text>
<Text
as="span"
color="#A0A0A0"
fontSize="xs"
ms={2}
fontWeight={500}
mb={0}
>
{notification.time}
</Text>
</Box>
<Text color="#A0A0A0" fontSize="xs" mb={0}>
{notification.message}
</Text>
</Box>
</HStack>
<Box
onClick={() => handleDelete(notification.id)}
cursor="pointer"
>
<MdOutlineDelete color="#686868" size={16} />
</Box>
</HStack>
))}
</VStack>
</Box>
</VStack>
<HStack
position="fixed"
bottom={0}
borderTop="0.5px solid #CFCFCF"
p={1}
justifyContent="center"
bgColor="#fff"
w="100%"
>
<Text onClick={()=>navigate("/notification")} cursor="pointer" fontSize="small" color="#6311CB" fontWeight={600}>
View All
</Text>
</HStack>
</MenuList>
</Menu>
</Box>
<Box me={4} gap={2} className="d-flex justify-content-center ">
<Popover placement="bottom">
<Portal>
@@ -368,53 +152,47 @@ const HeaderMain = ({
</PopoverBody>
</Link> */}
<PopoverBody className="web-text-medium pointer ">
<VStack alignItems="flex-start">
<Text
color="#A0ABBB"
textAlign="left"
fontSize={"x-small"}
fontWeight={600}
>
<VStack>
<Text color="#A0ABBB" fontSize={"small"} fontWeight={600}>
Switch Accounts
</Text>
{users.map((val) => {
return (
// <VStack
// className="web-text-medium pointer link"
// h="50px"
// pt={1}
// key={val.id}
// w="100%"
// >
<HStack
alignItems="flex-start"
gap={4}
<VStack
className="web-text-medium pointer link"
h="50px"
pt={2}
key={val.id}
w="100%"
className="pointer link"
>
<Image
src={womenpfp}
h="31.79px"
alt="Profile Picture"
/>
<Text
as={"span"}
fontSize="x-small"
fontWeight={600}
color="#191D23"
<HStack
alignItems="flex-start"
justifyContent="space-evenly"
w="100%"
>
{val.user}
<Image
src={womenpfp}
h="31.79px"
alt="Profile Picture"
/>
<Text
// as={"span"}
as={"span"}
fontSize="x-small"
fontWeight={600}
color="#A0ABBB"
color="#191D23"
>
{val.role}
{val.user}
<Text
// as={"span"}
fontSize="x-small"
fontWeight={600}
color="#A0ABBB"
>
{val.role}
</Text>
</Text>
</Text>
</HStack>
// </VStack>
</HStack>
</VStack>
);
})}
</VStack>

71
src/Components/RupeeSlider/RupeeSlider.jsx
View File

@@ -1,71 +0,0 @@
import {
Box,
Slider,
SliderTrack,
SliderFilledTrack,
SliderThumb,
SliderMark,
HStack,
Text,
} from '@chakra-ui/react'
import React, { useState } from 'react'
const RupeeSlider = () => {
const [sliderValue, setSliderValue] = useState(100000); // Default value in rupees
const formatRupee = (val) => `₹ ${val.toLocaleString('en-IN')}`;
return (
<Box w="100%">
<HStack mt={12}>
<Text fontSize="xs" fontWeight="500" color={"#9A9A9A"} mb={0} w={12}>₹ 100</Text>
<Slider
aria-label='slider-ex-6'
onChange={(val) => setSliderValue(val)}
colorScheme='purple'
min={100}
max={500000}
defaultValue={100000}
>
<SliderMark
value={sliderValue}
textAlign='center'
bg='#efeefe'
color='#3725EA'
mt='-12'
ml='-45px'
p={2}
w={90}
fontSize={"xs"}
fontWeight={600}
rounded={"md"}
position="relative"
sx={{
'::after': {
content: '""',
position: 'absolute',
bottom: '-3', // Adjust the distance of the arrow from the mark
left: '50%',
transform: 'translateX(-50%)',
borderWidth: '6px',
borderStyle: 'solid',
borderColor: '#efeefe transparent transparent transparent', // Arrow color matching the bg
},
}}
>
{formatRupee(sliderValue)}
</SliderMark>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
<Text fontSize="xs" fontWeight="500" color={"#9A9A9A"} mb={0} w={24}>₹ 5,00,000</Text>
</HStack>
</Box>
)
}
export default RupeeSlider

391
src/Contexts/GlobalStateProvider.jsx
View File

@@ -1,7 +1,7 @@
// GlobalStateContext.js
import React, { useState } from "react";
import GlobalStateContext from "./GlobalStateContext";
import { effect, useColorMode, useDisclosure } from "@chakra-ui/react";
import { effect, useColorMode } from "@chakra-ui/react";
import { v4 as uuidv4 } from "uuid";
import { TbClock2 } from "react-icons/tb";
import { CiWallet } from "react-icons/ci";
@@ -20,8 +20,6 @@ import Gift from "../assets/icons/gift.png";
import books from "../assets/icons/bookStack.png";
import telecom from "../assets/icons/telecom.png";
import gadget from "../assets/icons/gadget.png";
import foods from "../assets/icons/foods.png";
import { useForm } from "react-hook-form";
const getRandomDate = (start, end) => {
const date = new Date(
start.getTime() + Math.random() * (end.getTime() - start.getTime())
@@ -60,70 +58,58 @@ const GlobalStateProvider = ({ children }) => {
EmpID: "124589",
Name: "Jackson",
emailAddress: "in***@wdimails.com",
reportname: "Reimbursement report 2024",
mobileNumber: "+91 ***8451254",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
datetime: "10 June, 2924 10 am",
disburser: "Manav sain",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
},
{
}, {
wallet: "Travel",
walBal: "₹ 7000",
},
{
}, {
wallet: "Toor",
walBal: "₹ 3000",
},
],
reportamount: "₹ 50000",
approver: "Reethik thota",
},]
},
{
id: 2,
EmpID: "124556",
EmpID: "124589",
Name: "Status",
reportname: "Reimbursement report 2024",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
Grade: "L1",
disburser: "Manav sain",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
datetime: "10 June, 2924 10 am",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
},
{
}, {
wallet: "Travel",
walBal: "₹ 7000",
},
{
}, {
wallet: "Toor",
walBal: "₹ 3000",
},
],
reportamount: "₹ 50000",
approver: "Reethik thota",
},]
},
{
id: 3,
EmpID: "124589",
Name: "Status",
disburser: "Manav sain",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
datetime: "10 June, 2924 10 am",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
@@ -132,28 +118,24 @@ const GlobalStateProvider = ({ children }) => {
{
wallet: "Food",
walBal: "₹ 5000",
},
{
}, {
wallet: "Travel",
walBal: "₹ 7000",
},
{
}, {
wallet: "Toor",
walBal: "₹ 3000",
},
],
reportamount: "₹ 50000",
approver: "Reethik thota",
},]
},
{
id: 4,
EmpID: "124589",
disburser: "Manav sain",
Name: "Status",
emailAddress: "in***@wdimails.com",
datetime: "10 June, 2924 10 am",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
@@ -162,18 +144,17 @@ const GlobalStateProvider = ({ children }) => {
{
wallet: "Food",
walBal: "₹ 5000",
},
{
}, {
wallet: "Travel",
walBal: "₹ 7000",
},
{
}, {
wallet: "Toor",
walBal: "₹ 3000",
},
],
reportamount: "₹ 50000",
approver: "Reethik thota",
},]
},
{
id: 5,
@@ -181,39 +162,32 @@ const GlobalStateProvider = ({ children }) => {
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
datetime: "10 June, 2924 10 am",
Grade: "L1",
Department: "Sales",
disburser: "Manav sain",
Role: "Sr. Manager",
status: "Inactive",
subMenu: [
{
wallet: "Food",
walBal: "₹ 5000",
},
{
}, {
wallet: "Travel",
walBal: "₹ 7000",
},
{
}, {
wallet: "Toor",
walBal: "₹ 3000",
},
],
reportamount: "₹ 50000",
approver: "Reethik thota",
},]
},
{
id: 6,
EmpID: "124589",
disburser: "Manav sain",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
datetime: "10 June, 2924 10 am",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
@@ -222,18 +196,17 @@ const GlobalStateProvider = ({ children }) => {
{
wallet: "Food",
walBal: "₹ 5000",
},
{
}, {
wallet: "Travel",
walBal: "₹ 7000",
},
{
}, {
wallet: "Toor",
walBal: "₹ 3000",
},
],
reportamount: "₹ 50000",
approver: "Reethik thota",
},]
},
{
id: 7,
@@ -241,24 +214,18 @@ const GlobalStateProvider = ({ children }) => {
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
datetime: "10 June, 2924 10 am",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
reportamount: "₹ 50000",
approver: "Reethik thota",
},
{
id: 8,
EmpID: "124589",
Name: "Status",
disburser: "Manav sain",
emailAddress: "in***@wdimails.com",
reportname: "Reimbursement report 2024",
mobileNumber: "+91 ***8451254",
datetime: "10 June, 2924 10 am",
reportamount: "₹ 50000",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
@@ -267,33 +234,29 @@ const GlobalStateProvider = ({ children }) => {
{
wallet: "Food",
walBal: "₹ 5000",
},
{
}, {
wallet: "Travel",
walBal: "₹ 7000",
},
{
}, {
wallet: "Toor",
walBal: "₹ 3000",
},
],
approver: "Reethik thota",
},]
},
{
id: 9,
EmpID: "124589",
Name: "Status",
disburser: "Manav sain",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
datetime: "10 June, 2924 10 am",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
reportamount: "₹ 50000",
approver: "Reethik thota",
},
{
id: 10,
@@ -301,49 +264,36 @@ const GlobalStateProvider = ({ children }) => {
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
datetime: "10 June, 2924 10 am",
Grade: "L1",
disburser: "Manav sain",
Department: "Sales",
Role: "Sr. Manager",
status: "Inactive",
reportamount: "₹ 50000",
approver: "Reethik thota",
},
{
id: 10,
EmpID: "124589",
Name: "Status",
disburser: "Manav sain",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
reportamount: "₹ 50000",
approver: "Reethik thota",
},
{
id: 11,
EmpID: "124589",
disburser: "Manav sain",
Name: "Status",
emailAddress: "in***@wdimails.com",
mobileNumber: "+91 ***8451254",
reportname: "Reimbursement report 2024",
datetime: "10 June, 2924 10 am",
Grade: "L1",
Department: "Sales",
Role: "Sr. Manager",
status: "Active",
reportamount: "₹ 50000",
approver: "Reethik thota",
},
]);
const [reportsHistory, setReportsHistory] = useState([
{
id: 1,
@@ -1295,7 +1245,7 @@ const GlobalStateProvider = ({ children }) => {
reportBy: "in***@wdimails.com",
reportAmount: "+91 ***8451254",
dateTime: "Sales",
orderStatus: "Fully reimbursed",
orderStatus: "Approved",
approver: "Sales",
disburser: "Sales",
},
@@ -1305,7 +1255,7 @@ const GlobalStateProvider = ({ children }) => {
reportBy: "in***@wdimails.com",
reportAmount: "+91 ***8451254",
dateTime: "Sales",
orderStatus: "Fully reimbursed",
orderStatus: "Approved",
approver: "Sales",
disburser: "Sales",
},
@@ -1325,7 +1275,7 @@ const GlobalStateProvider = ({ children }) => {
reportBy: "in***@wdimails.com",
reportAmount: "+91 ***8451254",
dateTime: "Sales",
orderStatus: "Approved",
orderStatus: "Fully reimbursed",
approver: "Sales",
disburser: "Sales",
},
@@ -2065,6 +2015,9 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// Recent report
const [recentReports, setRecentReports] = useState([
{
@@ -2133,7 +2086,7 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// Recent transaction
// Recent transaction
const [recentTransaction, setRecentTransaction] = useState([
{
@@ -2187,7 +2140,7 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// Wallets EB&G
// Wallets EB&G
const [walletExpense, setWalletExpense] = useState([
{
wallet: "Food",
@@ -2215,232 +2168,44 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// main dash
// main dash
const [dash, setDash] = useState([
{
id: 1,
wallet: "Food",
wallet: "Employee Wallet",
walletAmount: "₹ 70,000",
balanceRemaining: "₹ 20,000",
status: "Approved",
totalEmployees: 500,
users: 5,
icon: foods,
},
{
id: 2,
wallet: "Fuel",
wallet: "Travel Wallet",
walletAmount: "₹ 50,000",
balanceRemaining: "₹ 15,000",
status: "Approved",
totalEmployees: 200,
users: 3,
icon: Fuel,
},
{
id: 3,
wallet: "Books & Periodicals",
wallet: "Food Wallet",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: books,
},
{
id: 4,
wallet: "Telecom",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: telecom,
},
]);
const [transactionHistory, setTransactionHistory] = useState([
{
id: 1,
employeeName: "Reethik thota",
employeeID: "#356567",
department: "Sales",
wallet: "FOOD",
merchant: "Dine In",
natureExpense: "Reimbursed",
dateTime: "12 July 24, 10am",
amount: "₹ 5000",
},
{
id: 2,
employeeName: "Reethik thota",
employeeID: "#356567",
department: "Sales",
wallet: "FOOD",
merchant: "Dine In",
natureExpense: "Reimbursed",
dateTime: "12 July 24, 10am",
amount: "₹ 5000",
},
{
id: 3,
employeeName: "Reethik thota",
employeeID: "#356567",
department: "Sales",
wallet: "FOOD",
merchant: "Dine In",
natureExpense: "Reimbursed",
dateTime: "12 July 24, 10am",
amount: "₹ 5000",
},
{
id: 4,
employeeName: "Reethik thota",
employeeID: "#356567",
department: "Sales",
wallet: "FOOD",
merchant: "Dine In",
natureExpense: "Reimbursed",
dateTime: "12 July 24, 10am",
amount: "₹ 5000",
},
{
id: 5,
employeeName: "Reethik thota",
employeeID: "#356567",
department: "Sales",
wallet: "FOOD",
merchant: "Dine In",
natureExpense: "Reimbursed",
dateTime: "12 July 24, 10am",
amount: "₹ 5000",
},
{
id: 6,
employeeName: "Reethik thota",
employeeID: "#356567",
department: "Sales",
wallet: "FOOD",
merchant: "Dine In",
natureExpense: "Reimbursed",
dateTime: "12 July 24, 10am",
amount: "₹ 5000",
},
]);
const [reportStatus, setReportStatus] = useState([
{
id: 1,
reportName: "Food",
// reportBy: "#356567",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
approver: "Reimbursed",
disburser: "12 July 24, 10am",
action: "₹ 5000",
},
{
id: 2,
reportName: "Food",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Partially Reimbursed",
},
{
id: 3,
reportName: "Food",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
},
{
id: 4,
reportName: "Food",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Fully Reimbursed",
},
{
id: 5,
reportName: "Food",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Approved",
},
{
id: 6,
reportName: "Food",
reportAmount: "₹ 5000",
dateTime: "Jun 10, 2024",
status: "Approved",
},
]);
const [viewReports, setViewReports] = useState([
{
id: 1,
inVoice: "Invoice #01 - Dec 2023",
amount: "₹ 5000",
paidWallet: "Food",
status: "Approved",
},
{
id: 2,
inVoice: "Invoice #01 - Dec 2023",
amount: "₹ 5000",
paidWallet: "Food",
status: "Approved",
},
{
id: 3,
inVoice: "Invoice #01 - Dec 2023",
amount: "₹ 5000",
paidWallet: "Food",
status: "Approved",
},
{
id: 4,
inVoice: "Invoice #01 - Dec 2023",
amount: "₹ 5000",
paidWallet: "Food",
status: "Approved",
},
{
id: 5,
inVoice: "Invoice #01 - Dec 2023",
amount: "₹ 5000",
paidWallet: "Food",
status: "Approved",
},
]);
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const [selectedCardIndex, setSelectedCardIndex] = useState(null);
const [selectionCount, setSelectionCount] = useState(0);
const [showAnotherComponent, setShowAnotherComponent] = useState(false);
const [hasProceeded, setHasProceeded] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<GlobalStateContext.Provider
value={{
selectedCardIndex,
setSelectedCardIndex,
selectionCount,
setSelectionCount,
showAnotherComponent,
setShowAnotherComponent,
hasProceeded,
setHasProceeded,
onOpen,
isOpen,
onClose,
reportsHistory,
setReportsHistory,
isAuthenticate,
@@ -2461,7 +2226,7 @@ const GlobalStateProvider = ({ children }) => {
digital,
setDigital,
ApplicationStatus,
// setAdvanceStatus,
setAdvanceStatus,
AdvanceExpenseRequest,
setAdvanceExpenseRequest,
AdvanceExpenseRequestView,
@@ -2469,25 +2234,13 @@ const GlobalStateProvider = ({ children }) => {
walletProgram,
SupportAndTicket,
setSupportAndTicket,
recentReports,
setRecentReports,
recentTransaction,
setRecentTransaction,
useForm,
// recentReports,
// setRecentReports,
// recentTransaction,
// setRecentTransaction,
recentReports, setRecentReports,
recentTransaction, setRecentTransaction,
walletExpense,
setWalletExpense,
dash,
setDash,
transactionHistory,
setTransactionHistory,
reportStatus,
setReportStatus,
viewReports,
setViewReports,
setDash
}}
>
{children}

121
src/Layout/DefaultLayout.jsx
View File

@@ -5,10 +5,7 @@ import logoMini from "../assets/logo-min.png";
import logoMiniDark from "../assets/favicon.png";
import { useDispatch } from "react-redux";
import { loginUser } from "../Redux/Slice/auth";
import { RiNotification3Line } from "react-icons/ri";
// import Button02 from "../Components/Buttons/Button02";
import goth from "../assets/goth.png";
import { SlOptions } from "react-icons/sl";
import {
TbArrowBadgeLeftFilled,
TbListDetails,
@@ -46,10 +43,6 @@ import {
Breadcrumb,
Divider,
Button,
Flex,
HStack,
VStack,
Circle,
} from "@chakra-ui/react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Cookies from "js-cookie"; // Import the Cookies library
@@ -132,12 +125,13 @@ const DashboardLayout = ({ isOnline }) => {
navigate("/login");
};
if (isSplashVisible) {
return <SplashScreen />;
}
return (
<Box height={"100vh"} overflow="hidden" className="gilroy">
<Box height={"100vh"}>
<HeaderMain
isDrawerOpen={isDrawerOpen}
logOutHandler={logOutHandler}
@@ -227,7 +221,7 @@ const DashboardLayout = ({ isOnline }) => {
_hover={{ bg: "#ced8e6a2" }}
className={`${
true
? "p-2 web-text-medium ps-2 justify-content-between"
? "p-2 web-text-medium ps-2 justify-content-between"
: "p-2 ps-1 web-text-xlarge justify-content-center"
} link d-flex align-items-center gap-2 w-100 mb-1`}
>
@@ -263,7 +257,7 @@ const DashboardLayout = ({ isOnline }) => {
flexDirection={"column"}
gap={1}
>
{/* {submenu?.map(
{submenu?.map(
(
{
title: subMenuTitle,
@@ -298,6 +292,7 @@ const DashboardLayout = ({ isOnline }) => {
<SubIcon
fontSize={"8px"}
className="ms-2"
// style={{ zIndex: 111, color:colorCode?colorCode:"" }}
/>
)}
<Text
@@ -311,71 +306,6 @@ const DashboardLayout = ({ isOnline }) => {
</NavLink>
</Box>
)
)} */}
{submenu?.map(
(
{
title: subMenuTitle,
path: link,
icon: SubIcon,
colorCode,
},
i
) => (
<Box
key={i}
style={{
height: "auto",
position: "relative",
}}
className={`${
true
? " web-text-medium ps-4 "
: " web-text-xlarge justify-content-center"
} d-flex align-items-center p-0`}
>
<NavLink
style={{ borderRadius: "2px" }}
className={`${
true
? "p-2 ps-1 ms-2 web-text-medium "
: "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
} link d-flex align-items-center gap-2 w-100 mx-2`}
to={link}
end
>
{({ isActive }) => (
<>
{/* {SubIcon && (
<SubIcon
fontSize={"18px"}
className="ms-2"
/>
)} */}
{isActive && (
<Box
as="span"
w="7px"
h="7px"
bg="#3725EA"
borderRadius="50%"
ml={"-1rem"}
/>
)}
<Text
as={"span"}
display={true ? "flex" : "none"}
alignItems="center"
overflow="hidden"
>
{subMenuTitle}
</Text>
</>
)}
</NavLink>
</Box>
)
)}
</AccordionPanel>
</AccordionItem>
@@ -385,8 +315,7 @@ const DashboardLayout = ({ isOnline }) => {
<Text
as={"span"}
key={index}
fontSize="small"
className=" fw-600 text-secondary fw-bold"
className="web-text-xxsmall fw-600 text-secondary fw-bold"
>
{title}
</Text>
@@ -424,44 +353,6 @@ const DashboardLayout = ({ isOnline }) => {
}
)}
</Accordion>
<Flex
flexDirection="row"
justifyContent="flex-start"
w="100%"
gap={1}
p={0}
mt={"2rem"}
>
<Box position="relative">
<RiNotification3Line color="#A0ABBB" fontSize="large" />
<Box
w="10px"
h="10px"
borderRadius="50%"
bgColor="#3725EA"
position="absolute"
top={0}
right={0}
></Box>
</Box>
<HStack alignItems="flex-start" p={0}>
<Image src={goth} h="35px" w="35px" />
<VStack alignItems="flex-start">
<Text
as="span"
color="#A0ABBB"
fontWeight={500}
fontSize="small"
>
Jenny Wilson
</Text>
<Text color="#A0ABBB" fontWeight={500} fontSize="small">
jen.wilson@wdipl.com
</Text>
</VStack>
<SlOptions fontSize="large" style={{ marginRight: "3px" }} />
</HStack>
</Flex>
</Box>
</Box>

472
src/Pages/Dashboard/Dashbaord.jsx
View File

@@ -31,7 +31,6 @@ 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,
@@ -56,24 +55,42 @@ 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 { NavLink, useNavigate } from "react-router-dom";
import LoadMoneyModal from "./LoadMoneyModal";
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 [scale, setScale] = useState(1);
const navigate = useNavigate();
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 zoomIn = () => setScale((prev) => (prev < 2 ? prev + 0.1 : prev));
const zoomOut = () => setScale((prev) => (prev > 0.5 ? prev - 0.1 : prev));
const [isOpen, setIsOpen] = useState(false); // State to manage modal visibility
const openModal = () => setIsOpen(true); // Function to open the modal
const closeModal = () => setIsOpen(false); // Function to close the modal
const options = {
title: {
display: true,
text: 'Employee KYC Status'
},
scales: {
y: {
beginAtZero: true
}
}
};
const blueCardData = [
{
@@ -88,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",
@@ -104,10 +145,9 @@ const Dashbaord = () => {
const gridItemsData = [
{
cardType: "Expense card",
backgroundColor: "#218F001A",
iconColor: "#00A438",
title: "Active expense wallets",
title: "Bills for approval",
count: 50,
buttonBg: "#FCA1001A",
buttonBorder: "#FCA100",
@@ -115,13 +155,11 @@ const Dashbaord = () => {
badgeText: "20 New",
badgeColor: "#3725EA",
viewTextColor: "#6311CB",
manageWallet: "Manage expense wallets",
},
{
cardType: "Benefit card",
backgroundColor: "#218F001A",
iconColor: "#00A438",
title: "Active benefit wallets",
title: "Bills for pending",
count: 50,
buttonBg: "#FCA1001A",
buttonBorder: "#FCA100",
@@ -129,7 +167,6 @@ const Dashbaord = () => {
badgeText: "20 New",
badgeColor: "#3725EA",
viewTextColor: "#6311CB",
manageWallet: "Manage benefit wallets",
},
];
@@ -162,10 +199,9 @@ const Dashbaord = () => {
const dashArr = dash.map((item, index) => ({
"Wallet Name": (
<HStack key={`wallet-${index}`}>
{/* <Box p={2} bg="#ebe0f8" rounded="full">
<Box p={2} bg="#ebe0f8" rounded="full">
<MdNoFood color="#6311CB" />
</Box> */}
<Image src={item.icon} h="20px" />
</Box>
<Text mb={0} fontSize="xs">
{item.wallet || "Food"}
</Text>
@@ -238,10 +274,9 @@ const Dashbaord = () => {
const dashSecArr = dash.map((item, index) => ({
"Wallet Name": (
<HStack key={`wallet-${index}`}>
{/* <Box p={2} bg="#ebe0f8" rounded="full">
<Box p={2} bg="#ebe0f8" rounded="full">
<MdNoFood color="#6311CB" />
</Box> */}
<Image src={item.icon} h="20px" />
</Box>
<Text mb={0} fontSize="xs">
{item.wallet || "Food"}
</Text>
@@ -374,125 +409,107 @@ const Dashbaord = () => {
<BlueCard key={index} blueCardData={item} />
))}
{/* <EmployeeKYCStatus/> */}
<Box bgColor="#FFFFFF" borderRadius="8.22px">
<Text color="#474279" fontSize="small" p={2} fontWeight={600}>
Employee KYC Status
</Text>
<HStack alignItems="center">
<Box h="100px" w="100px"></Box>
</HStack>
</Box>
<Box bgColor="#FFFFFF" borderRadius="8.22px">
<Text color="#474279" fontSize="small" p={2} fontWeight={600}>
Payment Status
</Text>
<HStack alignItems="center">
<Box h="100px" w="100px"></Box>
</HStack>
</Box>
<div>
<h2>Employee KYC Status</h2>
<Doughnut data={data} options={options} />
<div>
<p>Full KYC: 72%</p>
<p>Min KYC: 28%</p>
</div>
</div>
</Grid>
{/* EXP card */}
<Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4} mt={6}>
{gridItemsData.map((item, index) => (
<GridItem
key={index}
backgroundColor="#fff"
h="100%"
borderRadius="10px"
p={4}
>
<HStack w={"100%"} justifyContent={"space-between"} mb={0}>
<Text fontSize={"sm"} as={"span"} fontWeight={500}>
{/* Expense card */}
{item.cardType}
</Text>
<HStack spacing={1}>
<Text
fontSize={"sm"}
as={"span"}
fontWeight={500}
color={"#6311CB"}
>
{/* Manage expense wallets */}
{item.manageWallet}
<GridItem key={index} backgroundColor="#fff" borderRadius="xl">
<Box bg="#fff" borderRadius="xl" p={4}>
<HStack w={"100%"} justifyContent={"space-between"} mb={3}>
<Text fontSize={"sm"} as={"span"} fontWeight={500}>
Expense card
</Text>
<MdArrowForward size={14} color="#6311CB" />
</HStack>
</HStack>
<Divider borderStyle="dashed" />
<HStack spacing={4} alignItems={"start"} mt={6}>
<Box
backgroundColor={item.backgroundColor}
h="56px"
w="56px"
rounded="full"
display="flex"
justifyContent="center"
alignItems="center"
>
<FiBarChart2
color={item.iconColor}
fontSize="22px"
fontWeight={900}
/>
</Box>
<Box fontSize="md" fontWeight={500}>
<Text mb={0} color="#A3AED0">
{item.title}
</Text>
<Text fontSize="2xl" fontWeight={600} color={"#2B3674"}>
{item.count}
</Text>
</Box>
</HStack>
<Box mt={16}>
<Button
fontSize="xl"
fontWeight={500}
mt={2}
w="100%"
display="flex"
justifyContent="space-between"
backgroundColor={item.buttonBg}
border={`1px solid ${item.buttonBorder}`}
>
{!item.hideBadge && (
<HStack spacing={1}>
<Text
fontSize={"sm"}
as={"span"}
fontWeight={500}
color={"#6311CB"}
>
Manage expense wallets
</Text>
<MdArrowForward size={14} color="#6311CB" />
</HStack>
</HStack>
<Divider borderStyle="dashed" />
<HStack spacing={4} alignItems={"start"} mt={6}>
<Box
backgroundColor={item.backgroundColor}
h="80px"
w="80px"
rounded="full"
display="flex"
justifyContent="center"
alignItems="center"
>
<FiBarChart2 color={item.iconColor} fontSize="25px" />
</Box>
<Box fontSize="md" fontWeight={500}>
<Text mb={0} color="#A3AED0">
{item.title}
</Text>
<Text fontSize="2xl" fontWeight={600} color={"#2B3674"}>
{item.count}
</Text>
</Box>
</HStack>
<Box mt={16}>
<Button
fontSize="xl"
fontWeight={500}
mt={2}
w="100%"
display="flex"
justifyContent="space-between"
backgroundColor={item.buttonBg}
border={`1px solid ${item.buttonBorder}`}
>
{!item.hideBadge && (
<Text
display="flex"
alignItems="center"
color="#FCA100"
mb={0}
>
<WiTime4 />
<Text fontSize="xs" as="span" mx={2}>
{item.buttonText}
</Text>
<Badge
bg={item.badgeColor}
fontSize="8px"
color="white"
fontWeight={400}
p={1}
rounded="5px"
>
{item.badgeText}
</Badge>
</Text>
)}
<Text
as="span"
display="flex"
alignItems="center"
color="#FCA100"
mb={0}
color={item.viewTextColor}
fontSize="sm"
gap={1}
>
<WiTime4 />
<Text fontSize="xs" as="span" mx={2}>
{item.buttonText}
</Text>
<Badge
bg={item.badgeColor}
fontSize="8px"
color="white"
fontWeight={400}
p={1}
rounded="5px"
>
{item.badgeText}
</Badge>
View <MdArrowForward />
</Text>
)}
<Text
as="span"
display="flex"
alignItems="center"
color={item.viewTextColor}
fontSize="sm"
gap={1}
>
View <MdArrowForward />
</Text>
</Button>
</Button>
</Box>
</Box>
</GridItem>
))}
@@ -516,19 +533,19 @@ const Dashbaord = () => {
<Text color={"#A3AED0"} fontWeight={500} fontSize={"xs"} mb={6}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
</Text>
<NavLink to="/optifii-gifts-dashboard/apply-for-giftcards">
<PrimaryButton
title={" Issue gift cards"}
px={4}
leftIcon={<PiUsersThreeFill color={"#fff"} />}
/>
</NavLink>
<PrimaryButton
title={" Issue gift cards"}
px={4}
leftIcon={<PiUsersThreeFill color={"#fff"} />}
/>
</Box>
</HStack>
</Box>
</GridItem>
</Grid>
{/* EXP overview */}
<HStack alignItems={"start"} spacing={6}>
<Box flex={1}>
{/* table 1 */}
@@ -542,6 +559,13 @@ const Dashbaord = () => {
>
Expense Overview
</Heading>
<BsArrowsAngleExpand
// onClick={() => navigate("")}
as={Button}
color={"#6311CB"}
size={18}
cursor={"pointer"}
/>
</HStack>
<Tabs position="relative" variant="unstyled">
@@ -613,61 +637,44 @@ const Dashbaord = () => {
</Box>
</HStack>
<HStack justifyContent={"space-between"} mt={2}>
<HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
<Text fontSize={"xs"} color={"#888888"} mb={0}>
Total report amount
</Text>
<Text
fontSize={"sm"}
color={"#6311CB"}
mb={0}
fontWeight={500}
>
₹ 50,000
</Text>
</HStack>
<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>
<TabPanels>
<TabPanel px={0}>
<HStack justifyContent={"space-between"} mb={4}>
<HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
<Text fontSize={"xs"} color={"#888888"} mb={0}>
Total report amount
</Text>
<Text
fontSize={"sm"}
color={"#6311CB"}
mb={0}
fontWeight={500}
>
₹ 50,000
</Text>
</HStack>
<HStack alignItems="center">
<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>
<NavLink
style={{
float: "right",
marginRight: "4px",
}}
to="/reimbursement-request"
>
<BsArrowsAngleExpand
as={Button}
color={"#6311CB"}
size={18}
cursor={"pointer"}
// onClick={zoomIn}
/>
</NavLink>
</HStack>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={dashHeadRow}
@@ -676,59 +683,6 @@ const Dashbaord = () => {
/>
</TabPanel>
<TabPanel px={0}>
<HStack justifyContent={"space-between"} mb={4}>
<HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
<Text fontSize={"xs"} color={"#888888"} mb={0}>
Total report amount
</Text>
<Text
fontSize={"sm"}
color={"#6311CB"}
mb={0}
fontWeight={500}
>
₹ 50,000
</Text>
</HStack>
<HStack alignItems="center">
<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>
<NavLink
style={{
float: "right",
marginRight: "4px",
}}
to="/advance-expense-request"
>
<BsArrowsAngleExpand
as={Button}
color={"#6311CB"}
size={18}
cursor={"pointer"}
// onClick={zoomIn}
/>
</NavLink>
</HStack>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={dashHeadRow}
@@ -752,6 +706,7 @@ const Dashbaord = () => {
>
Benefit Overview
</Heading>
<HStack>
<Box
fontSize={"xs"}
@@ -783,17 +738,14 @@ const Dashbaord = () => {
<IoMdArrowDropdown />
</Text>
</Box>
<NavLink to="/dashboard/beinefit-overview">
<BsArrowsAngleExpand
// onClick={() => navigate("")}
as={Button}
color={"#6311CB"}
size={18}
cursor={"pointer"}
/>
</NavLink>
<BsArrowsAngleExpand
// onClick={() => navigate("")}
as={Button}
color={"#6311CB"}
size={18}
cursor={"pointer"}
/>
</HStack>
vis
</HStack>
<HStack justifyContent={"space-between"} mt={2}>
@@ -863,7 +815,6 @@ const Dashbaord = () => {
</Box>
<HStack mt={10} mb={6}>
<PrimaryButton
onClick={openModal}
px={"4"}
leftIcon={<IoMdAddCircleOutline size={14} color="#fff" />}
title={"Load Money"}
@@ -912,8 +863,10 @@ const Dashbaord = () => {
Expense
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Expense</MenuItem>
<MenuItem fontSize={"sm"}>Benefit</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>
</HStack>
@@ -924,7 +877,7 @@ const Dashbaord = () => {
rounded="md"
hasStripe={false} // No stripes for a clean look
colorScheme="gray" // Neutral base color
mb={8}
mb={12}
sx={{
"& > div": {
background: `linear-gradient(to right,
@@ -1188,7 +1141,7 @@ const Dashbaord = () => {
</Text>
</Box>
<BsArrowsAngleExpand
onClick={() => navigate("/dashboard/employees-transaction")}
// onClick={() => navigate("")}
as={Button}
color={"#6311CB"}
size={18}
@@ -1238,7 +1191,6 @@ const Dashbaord = () => {
</Box>
</Box>
</HStack>
<LoadMoneyModal isOpen={isOpen} onClose={closeModal} />
</Box>
);
};

70
src/Pages/Dashboard/LoadMoneyModal.jsx
View File

@@ -1,70 +0,0 @@
import { Box, Divider, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
import React from 'react'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
const LoadMoneyModal = ({ isOpen, onClose }) => {
return (
<Box>
{/* modal */}
<Modal size={"sm"} isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>Bank account details</ModalHeader>
<ModalCloseButton />
<ModalBody>
<HStack mb={2}>
<Text fontSize={"xs"} fontWeight={500} color={"#757E8C"} mb={0} w={40}>
Name at bank
</Text>
<Text fontSize={"xs"} fontWeight={600} mb={0} color={"#262626"}>
Kartikey Gautam
</Text>
</HStack>
<HStack mb={2}>
<Text fontSize={"xs"} fontWeight={500} color={"#757E8C"} mb={0} w={40}>
Account number
</Text>
<Text fontSize={"xs"} fontWeight={600} mb={0} color={"#262626"}>
12345578910
</Text>
</HStack>
<HStack mb={2}>
<Text fontSize={"xs"} fontWeight={500} color={"#757E8C"} mb={0} w={40}>
IFSC
</Text>
<Text fontSize={"xs"} fontWeight={600} mb={0} color={"#262626"}>
ICICI121452
</Text>
</HStack>
<Divider />
<Box mb={4}>
<Text fontSize={"md"} fontWeight={600} mb={4}>
Load Money
</Text>
<Box mb={2}>
<Text fontSize={"xs"} fontWeight={600} mb={1} color={"#344054"}>
Enter UTR number
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
<Box >
<Text fontSize={"xs"} fontWeight={600} mb={1} color={"#344054"}>
Enter amount
</Text>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
</Box>
<HStack py={4} justifyContent={"center"}>
<PrimaryButton title={"Submit"} />
</HStack>
</ModalBody>
</ModalContent>
</Modal>
</Box>
)
}
export default LoadMoneyModal

394
src/Pages/Expenses/ExpenseOverView.jsx
View File

@@ -1,394 +0,0 @@
import {
Avatar,
Box,
Button,
Checkbox,
Divider,
Flex,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Radio,
Select,
Tag,
TagLabel,
Text,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import womenpfp from "../../assets/womenpfp1.png";
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 MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import Food from "../../assets/icons/Food.png";
import Fuel from "../../assets/icons/Fuel.png";
import Gift from "../../assets/icons/gift.png";
import books from "../../assets/icons/bookStack.png";
import telecom from "../../assets/icons/telecom.png";
import gadget from "../../assets/icons/gadget.png";
import foods from "../../assets/icons/foods.png";
import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
EmailIcon,
SearchIcon,
ViewIcon,
} from "@chakra-ui/icons";
import {
MdFilterList,
MdNotificationsNone,
MdOutlineHeadsetMic,
} from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import { LuListFilter } from "react-icons/lu";
import { BsFilterRight } from "react-icons/bs";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
const BenifitOverView = () => {
const [dash, setDash] = useState([
{
id: 1,
wallet: "Food",
walletAmount: "₹ 70,000",
balanceRemaining: "₹ 20,000",
status: "Approved",
totalEmployees: 500,
users: 5,
icon: foods,
},
{
id: 2,
wallet: "Fuel",
walletAmount: "₹ 50,000",
balanceRemaining: "₹ 15,000",
status: "Approved",
totalEmployees: 200,
users: 3,
icon: Fuel,
},
{
id: 3,
wallet: "Books & Periodicals",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: books,
},
{
id: 4,
wallet: "Telecom",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: telecom,
},
{
id: 5,
wallet: "Books & periodicals",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: books,
},
{
id: 6,
wallet: "Learning & development",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: books,
},
{
id: 7,
wallet: "Gadget & equipment",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: gadget,
},
{
id: 8,
wallet: "Telecom",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: telecom,
},
{
id: 1,
wallet: "Food",
walletAmount: "₹ 70,000",
balanceRemaining: "₹ 20,000",
status: "Approved",
totalEmployees: 500,
users: 5,
icon: foods,
},
]);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [users, setusers] = useState(50);
const [selectedRadio, setSelectedRadio] = useState([]);
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const dashHeadSecRow = [
"Sr No",
"Wallet Name",
"Total employees",
"Amount in card",
"Pending amount ",
"Pending request",
];
const dashSecArr = dash.map((item, index) => ({
"Sr No": item.id,
"Wallet Name": (
<HStack key={`wallet-${index}`}>
{/* <Box p={2} bg="#ebe0f8" rounded="full">
<MdNoFood color="#6311CB" />
</Box> */}
<Image src={item.icon} h="20px" />
<Text mb={0} fontSize="xs">
{item.wallet || "Food"}
</Text>
</HStack>
),
"Total employees": (
<Box
position="relative"
display="flex"
flexDirection="row"
alignItems="center"
>
<Image src={womenpfp} h={"30px"} position="absolute" />
<Image src={blackmen} h={"30px"} position="absolute" left="1.4rem" />
<Image src={koreanpfp} h={"30px"} position="absolute" left="2.7rem" />
<Image src={asian} h={"30px"} position="absolute" left="3.9rem" />
<Image src={goth} h={"30px"} position="absolute" left="4.9rem" />
<Box
display="flex"
position="absolute"
alignItems="center"
flexDirection="column"
borderRadius="50%"
h={"30px"}
w="30px"
bgColor="#F9F5FF"
left="5.9rem"
boxShadow="md"
justifyContent={"center"}
>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
</Box>
</Box>
),
"Amount in card": (
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
{item.walletAmount || 5000}
</Text>
),
"Pending amount ": (
<Text key={`balance-${index}`} mb={0} fontSize="xs">
{item.balanceRemaining || "₹ 2000"}
</Text>
),
"Pending request": (
<>
<NavLink to="/dashboard/beinefit-overview/benefit-request">
<Button
bgColor="#6311CB"
color="#fff"
fontSize="x-small"
w={"87px"}
h={"27px"}
_hover={{ bgColor: "#6311CB", borderRadius: "5px" }}
>
View
</Button>
</NavLink>
</>
),
}));
return (
<Box {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<Box
rounded={"md"}
py={4}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={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>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Flex align={"center"} gap={5}>
<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>
<Flex align={"center"} gap={2}>
<Text as={"span"} fontSize={"xs"}>
Show
</Text>
<Select borderRadius={5} size={"sm"}>
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
</Select>
<Text as={"span"} fontSize={"xs"}>
entries
</Text>
</Flex>
</Flex>
<Box>
<Link to={"#"} style={{ marginRight: "8px" }}>
{/* <SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/> */}
</Link>
<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>
</Box>
</HStack>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={dashHeadSecRow}
data={dashSecArr}
isLoading={isLoading}
showRadioButton={true}
setSelectedRadio={setSelectedRadio}
selectedRadio={selectedRadio}
/>
</Box>
</Box>
);
};
export default BenifitOverView;

157
src/Pages/Expenses/ExpenseView.jsx
View File

@@ -1,157 +0,0 @@
import {
Box,
Button,
HStack,
Icon,
Checkbox,
Tag,
TagLabel,
Text,
Image,
} 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 { MdOutlineNoFood } from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { NavLink, useNavigate } from "react-router-dom";
const ReimbursementRequest = () => {
const navigate = useNavigate();
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
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 = [
"Sr. No",
"Report name",
"Report by",
"Report amount",
"Date & time",
"Approver",
"Disburser",
"Action"
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) =>
({
"Sr. No": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{index + 1}
</Text>
),
"Report name": (
<Text color="#3725EA" fontSize="small" fontWeight={400}>{item?.reportname}</Text>
),
// "Report by": item?.emailAddress,
"Report amount": item?.reportamount,
"Date & time": item?.datetime,
"Approver": item?.approver,
"Disburser": item?.disburser,
"Report by": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Pooja Shah
</Text>
</HStack>
),
Action: (
<NavLink to="/dashboard/beinefit-overview/benefit-request/beinefit-overview-view">
<Button
_hover={{ color: "gray.900", bg: "gray.300" }}
transition={"0.3s"}
onClick={() => navigate("/reimbursement-request-view")}
size={"xs"}
bg={"#6311CB"}
py={1}
fontWeight={400}
px={3}
color="#fff"
>
View
</Button>
</NavLink>
),
}));
return (
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
{/* <MiniHeader
title={"My Requests"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/> */}
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={4}>
<HStack justifyContent={"space-between"}>
<HStack alignItems={"start"} spacing={4}>
<Box bg={"#d7d3fb"} p={2} rounded={"full"}>
<MdOutlineNoFood color="#3725EA" />
</Box>
<Box>
<Text color={"#667085"} fontWeight={600} fontSize={"sm"} mb={1}>
Food
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0}>
Created by - Reethik Thota
</Text>
</Box>
</HStack>
<Box>
<Text color={"#667085"} fontSize={"xs"} fontWeight={600} mb={1}>
Wallet Amount
</Text>
<Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
₹ 50,000
</Text>
</Box>
</HStack>
</Box>
<Box>
</Box>
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
/>
</Box>
</Box>
);
};
export default ReimbursementRequest;

105
src/Pages/ManageHumanResource/Approvers.jsx
View File

@@ -1,12 +1,5 @@
import {
Box,
Grid,
Heading,
Menu,
MenuButton,
MenuItem,
MenuList,
VStack,
Box, Grid, Heading, Menu, MenuButton, MenuItem, MenuList, VStack,
Button,
Image,
Input,
@@ -14,12 +7,6 @@ import {
InputLeftElement,
Text,
Tag,
AccordionPanel,
Checkbox,
AccordionButton,
AccordionItem,
HStack,
Accordion,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
@@ -33,13 +20,13 @@ 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, ChevronRightIcon, SearchIcon } from "@chakra-ui/icons";
import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useNavigate } from "react-router-dom";
import { IoFilterSharp } from "react-icons/io5";
const Approvers = () => {
const { reimbursementStatus } = useContext(GlobalStateContext);
const { advanceStatus } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
@@ -95,8 +82,8 @@ const Approvers = () => {
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
? "#3725EA"
: "red"
? "#3725EA"
: "red"
}
>
{item?.orderStatus}
@@ -120,8 +107,8 @@ const Approvers = () => {
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
? "#3725EA"
: "red"
? "#3725EA"
: "red"
}
>
{item?.orderStatus}
@@ -214,10 +201,16 @@ const Approvers = () => {
badgeColor: "#3725EA",
viewTextColor: "#6311CB",
},
];
]
return (
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
<MiniHeader
title={"Approvers"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/>
<Box>
<Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
{blueCardData.map((item, index) => (
@@ -361,71 +354,11 @@ const Approvers = () => {
>
Filter
</MenuButton>
<MenuList w="350px" h="300px" overflowY="scroll">
<VStack p={2} alignItems="flex-start">
<HStack alignItems="center">
<IoFilterSharp fontSize="small" />{" "}
<Text as="span" fontSize="small" fontWeight={600}>
Filter
</Text>
</HStack>
<Box w="100%" borderBottom="1px solid #D8D8D8" />
<Box w="100%">
<Accordion allowMultiple border="0px solid white">
{/* Department Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<AccordionButton>
{isExpanded ? (
<ChevronDownIcon fontSize="24px" />
) : (
<ChevronRightIcon fontSize="24px" />
)}
<Box flex="1" textAlign="left" ml={2}>
Department
</Box>
</AccordionButton>
<AccordionPanel pb={2}>
<VStack align="start">
<Checkbox defaultChecked>Design</Checkbox>
<Checkbox>Finance</Checkbox>
<Checkbox defaultChecked>IT</Checkbox>
<Checkbox>Development</Checkbox>
<Checkbox>Sales</Checkbox>
<Checkbox>QA</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
{/* Status Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<AccordionButton>
{isExpanded ? (
<ChevronDownIcon fontSize="24px" />
) : (
<ChevronRightIcon fontSize="24px" />
)}
<Box flex="1" textAlign="left" ml={4}>
Status
</Box>
</AccordionButton>
<AccordionPanel pb={4}>
<VStack align="start">
<Checkbox>Active</Checkbox>
<Checkbox>Inactive</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
</Accordion>
</Box>
</VStack>
<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>

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

@@ -25,7 +25,11 @@ import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
import {
AddIcon,
ChevronDownIcon,
SearchIcon,
} from "@chakra-ui/icons";
import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
import { FaRegUser } from "react-icons/fa";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
@@ -37,25 +41,16 @@ import SecondaryButton from "../../Components/Buttons/SecondaryButton";
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 ExcelIcon from "../../assets/ExcelIcon.svg"
import { HiOutlineUserGroup } from "react-icons/hi";
import EmployeesAddModal from "./EmployeesAddModal";
import EmployeesEditModal from "./EmployeesEditModal";
import EmployeesAddMultipleModal from "./EmployeesAddMultipleModal";
import { IoFilterSharp } from "react-icons/io5";
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
} from "@chakra-ui/react";
import { ChevronRightIcon } from "@chakra-ui/icons";
const Employees = () => {
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [selectedRadio, setSelectedRadio] = useState([]);
const navigate = useNavigate();
const {
@@ -105,21 +100,27 @@ const Employees = () => {
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
id: item.id,
"Emp ID": (
<Text as={"span"} fontSize={"xs"}>
{item?.EmpID}
</Text>
<Checkbox colorScheme="purple" value="1">
<Text
as={"span"}
fontSize={"xs"}
>
{item?.EmpID}
</Text>
</Checkbox>
),
Name: (
"Name": (
<HStack>
<Image
borderRadius="full"
boxSize="40px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text mb={0}>{item?.Name}</Text>
<Text mb={0}>
{item?.Name}
</Text>
</HStack>
),
"Email Address": item?.emailAddress,
@@ -136,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}
>
@@ -157,7 +157,7 @@ const Employees = () => {
<Menu>
<MenuButton
as={IconButton}
aria-label="Options"
aria-label='Options'
icon={<BsThreeDotsVertical />}
bg={"transparent"}
/>
@@ -183,7 +183,7 @@ const Employees = () => {
fontSize={"sm"}
fontWeight={500}
color={"#4D4D4D"}
onClick={() => navigate("/employees/view")}
onClick={()=>navigate("/employees/view")}
>
View
</MenuItem>
@@ -241,35 +241,12 @@ const Employees = () => {
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>
<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>
{selectedRadio.length > 1 ? (
<Button
border={"1px solid #EE1B24"}
bgColor="#ffff"
fontSize="x-small"
py={0}
color="#EE1B24"
h="30px"
_hover={{ bgColor: "#ffff" }}
>
Delete
</Button>
) : (
<PrimaryButton
as={MenuButton}
leftIcon={<AddIcon />}
title={"Add Employee"}
/>
)}
<PrimaryButton as={MenuButton} leftIcon={<AddIcon />} title={"Add Employee"} />
<MenuList>
<MenuItem
icon={<FaRegUser size={14} />}
@@ -336,71 +313,11 @@ const Employees = () => {
>
Filter
</MenuButton>
<MenuList w="350px" h="300px" overflowY="scroll">
<VStack p={2} alignItems="flex-start">
<HStack alignItems="center">
<IoFilterSharp fontSize="small" />{" "}
<Text as="span" fontSize="small" fontWeight={600}>
Filter
</Text>
</HStack>
<Box w="100%" borderBottom="1px solid #D8D8D8" />
<Box w="100%">
<Accordion allowMultiple border="0px solid white">
{/* Department Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<AccordionButton>
{isExpanded ? (
<ChevronDownIcon fontSize="24px" />
) : (
<ChevronRightIcon fontSize="24px" />
)}
<Box flex="1" textAlign="left" ml={2}>
Department
</Box>
</AccordionButton>
<AccordionPanel pb={2}>
<VStack align="start">
<Checkbox defaultChecked>Design</Checkbox>
<Checkbox>Finance</Checkbox>
<Checkbox defaultChecked>IT</Checkbox>
<Checkbox>Development</Checkbox>
<Checkbox>Sales</Checkbox>
<Checkbox>QA</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
{/* Status Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<AccordionButton>
{isExpanded ? (
<ChevronDownIcon fontSize="24px" />
) : (
<ChevronRightIcon fontSize="24px" />
)}
<Box flex="1" textAlign="left" ml={4}>
Status
</Box>
</AccordionButton>
<AccordionPanel pb={4}>
<VStack align="start">
<Checkbox>Active</Checkbox>
<Checkbox>Inactive</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
</Accordion>
</Box>
</VStack>
<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>
@@ -411,9 +328,6 @@ const Employees = () => {
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
selectedRadio={selectedRadio}
setSelectedRadio={setSelectedRadio}
showRadioButton={true}
/>
</Box>
{/* Call EmployeesAddModal */}
@@ -423,10 +337,8 @@ const Employees = () => {
<EmployeesEditModal isOpen={isEditOpen} onClose={onEditClose} />
{/* Call EmployeesEditModal */}
<EmployeesAddMultipleModal
isOpen={isMultipleOpen}
onClose={onMultipleClose}
/>
<EmployeesAddMultipleModal isOpen={isMultipleOpen} onClose={onMultipleClose} />
</Box>
);
};

274
src/Pages/ManageHumanResource/EmployeesTransactions.jsx
View File

@@ -1,274 +0,0 @@
import {
Box, HStack, Text, Tag,
Image,
VStack,
InputGroup,
InputLeftElement,
Input,
Menu,
MenuButton,
MenuList,
MenuItem,
Divider,
Button,
Flex,
Select,
Checkbox
} 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';
import { AiOutlineCalendar } from 'react-icons/ai';
import { IoMdArrowDropdown } from 'react-icons/io';
const EmployeesTransactions = () => {
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 = [
"Sr. No",
"Wallet Name",
"Email Address",
"Wallet",
"Amount",
"Date & time",
];
// Dynamically map the reports to the table
const extractedArrayTransaction = recentTransaction.map((item, index) => ({
"Sr. No": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{index + 1}
</Text>
),
"Wallet Name": (
<HStack>
<Image
borderRadius='full'
boxSize='30px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<VStack spacing={0} alignItems={"start"}>
<Text mb={0} fontSize={"xs"}>
Olivia Rhye
</Text>
<Text mb={0} fontSize={"10px"}>
WD-887
</Text>
</VStack>
</HStack>
),
"Email Address": (
<Text mb={0} fontWeight={500} fontSize={"xs"}>
in***@wdimails.com
</Text>
),
"Date & time": (
<Text mb={0} fontSize={"xs"}>
2 June 2024, 10 am
</Text>
),
"Amount": (
<Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
{item?.Amount || "N/A"}
</Text>
),
"Wallet": (
<Text mb={0} fontSize={"xs"}>
Food
</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}>
<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>
<HStack>
<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={<LuListFilter fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Expense
</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>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<HStack>
<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>
<Flex align={'center'} gap={2}>
<Text as={'span'} fontSize={'xs'}>Show</Text>
<Select borderRadius={5} size={"sm"}>
<option value='10'>10</option>
<option value='30'>30</option>
<option value='50'>50</option>
<option value='80'>80</option>
</Select>
<Text as={'span'} fontSize={'xs'}>entries</Text>
</Flex>
</HStack>
<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}
showRadioButton={true}
/>
</Box>
</Box>
);
};
export default EmployeesTransactions;

11
src/Pages/ManageHumanResource/EmployeesView.jsx
View File

@@ -94,7 +94,7 @@ const EmployeesView = () => {
{item.date || 'Jun 10, 2024'}
</Text>
),
'Status': (
'Order Status': (
<Tag
my={1}
size="sm"
@@ -325,13 +325,12 @@ const EmployeesView = () => {
/>
</HStack>
<Box>
<Tabs position='relative' variant='unstyled'>
<Tabs position='relative' variant='unstyled'>
<TabList>
<Tab
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
mr={6}
_selected={{
color: "#5E0FCD",
}}>
@@ -341,7 +340,6 @@ const EmployeesView = () => {
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
mr={6}
_selected={{
color: "#5E0FCD",
}}>Benefit</Tab>
@@ -349,10 +347,9 @@ const EmployeesView = () => {
color={"#313039"}
fontSize={"sm"}
fontWeight={500}
mr={6}
_selected={{
color: "#5E0FCD",
}}>Gift & reward</Tab>
}}>Gifts</Tab>
</TabList>
<TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
<TabPanels>
@@ -474,7 +471,7 @@ const EmployeesView = () => {
</VStack>
<NormalTable
emptyMessage={`We don't have any reports `}
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}

370
src/Pages/ManageHumanResource/PullBackFundsBenefit.jsx
View File

@@ -1,202 +1,216 @@
import {
Accordion,
AccordionButton,
AccordionItem,
AccordionPanel,
Box,
Button,
Checkbox,
HStack,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Text,
VStack,
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 {
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("");
const [selectedRadio, setSelectedRadio] = useState([]);
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
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);
// 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
// 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",
];
// ===============================[ Table Header ]
const tableHeadRow = [
"Emp ID",
"Name",
"Email Address",
"Mobile number",
"Wallet",
"Wallet balance",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
id: item.id,
"Emp ID": (
// <Checkbox colorScheme="purple" value="1">
<HStack spacing={1}>
<Text as={"span"} fontSize={"xs"}>
{item?.EmpID}
</Text>
</HStack>
),
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,
}));
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": (
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}
<HStack>
<Text
fontSize={"xs"}
mb={0}
fontWeight={500}
bg={"#EFE3FF"}
px={2}
py={1}
color={"#6311CB"}
textAlign={"center"}
rounded={"md"}
>
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>
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>
</VStack>
<AccordianTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
selectedRadio={selectedRadio}
setSelectedRadio={setSelectedRadio}
showRadioButton={true}
/>
</Box>
</Box>
);
</Box>
);
};
export default PullBackFundsBenefit;

10
src/Pages/ManageHumanResource/PullBackFundsExpense.jsx
View File

@@ -38,7 +38,6 @@ const PullBackFundsExpense = () => {
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [selectedRadio ,setSelectedRadio]=useState([]);
useEffect(() => {
// Set isLoading to true
@@ -58,7 +57,7 @@ const PullBackFundsExpense = () => {
"Emp ID",
"Name",
"Email Address",
// "Mobile number",
"Mobile number",
"Wallet",
"Wallet balance",
];
@@ -66,9 +65,8 @@ const PullBackFundsExpense = () => {
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
id: item.id,
"Emp ID": (
// <Checkbox colorScheme="purple" value="1">
<Checkbox colorScheme="purple" value="1">
<HStack spacing={1}>
<Text
as={"span"}
@@ -77,6 +75,7 @@ const PullBackFundsExpense = () => {
{item?.EmpID}
</Text>
</HStack>
</Checkbox >
),
"Name": (
<HStack>
@@ -174,9 +173,6 @@ const PullBackFundsExpense = () => {
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
selectedRadio={selectedRadio}
setSelectedRadio={setSelectedRadio}
showRadioButton={true}
/>
</Box>
</Box>

11
src/Pages/ManageHumanResource/PullBackFundsGifts.jsx
View File

@@ -37,7 +37,7 @@ const PullBackFundsGifts = () => {
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [selectedRadio , setSelectedRadio]=useState([])
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
@@ -56,7 +56,7 @@ const PullBackFundsGifts = () => {
"Emp ID",
"Name",
"Email Address",
// "Mobile number",
"Mobile number",
"Card number",
"Wallet balance",
];
@@ -64,9 +64,8 @@ const PullBackFundsGifts = () => {
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
id: item.id,
"Emp ID": (
// <Checkbox colorScheme="purple" value="1">
<Checkbox colorScheme="purple" value="1">
<HStack spacing={1}>
<Text
as={"span"}
@@ -75,6 +74,7 @@ const PullBackFundsGifts = () => {
{item?.EmpID}
</Text>
</HStack>
</Checkbox >
),
"Name": (
<HStack>
@@ -170,9 +170,6 @@ const PullBackFundsGifts = () => {
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
selectedRadio={selectedRadio}
setSelectedRadio={setSelectedRadio}
showRadioButton={true}
/>
</Box>
</Box>

4
src/Pages/NoInternetScreen.jsx
View File

@@ -12,10 +12,10 @@ const NoInternetScreen = () => {
position={"relative"}
gap={5}
>
{/* <Image src={noInternet} w={300} /> */}
<Image src={noInternet} w={300} />
{/* <Text color={'blue.800'} as={'span'} className='fw-bold'>No Internet !</Text> */}
<Text color={'gray.500'} fontSize={'sm'} fontWeight={'500'} position={'absolute'} bottom={0} left={'47%'}>Optifii v1.0</Text>
<Text color={'gray.500'} fontSize={'sm'} fontWeight={'500'} position={'absolute'} bottom={0} left={'47%'}>Tanami v1.0</Text>
</Box>
)

157
src/Pages/Notification/Notification.jsx
View File

@@ -1,157 +0,0 @@
import {
Box,
HStack,
Text,
Image,
VStack,
Icon,
} from "@chakra-ui/react";
import React, { useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { MdDeleteOutline, MdOutlineDelete } from "react-icons/md";
import { IoIosCheckmark } from "react-icons/io";
const Notification = () => {
// Define an array of notification objects with unique data
const [notifications, setNotifications] = useState([
{
id: 1,
avatar: 'https://bit.ly/dan-abramov',
sender: 'Admin',
time: '1 Min ago',
message: 'Lorem ipsum dolor sit amet, consectetur',
},
{
id: 2,
avatar: 'https://bit.ly/code-beast',
sender: 'Support',
time: '5 Min ago',
message: 'Your ticket has been updated.',
},
{
id: 3,
avatar: 'https://bit.ly/ryan-florence',
sender: 'System',
time: '10 Min ago',
message: 'System maintenance scheduled for tonight.',
},
{
id: 4,
avatar: 'https://bit.ly/kent-c-dodds',
sender: 'John Doe',
time: '20 Min ago',
message: 'Your profile has been viewed 10 times.',
},
{
id: 5,
avatar: 'https://bit.ly/sage-adebayo',
sender: 'Jane Smith',
time: '30 Min ago',
message: 'New comment on your post.',
},
]);
// Handler to delete a notification
const handleDelete = (id) => {
setNotifications(notifications.filter(notification => notification.id !== id));
};
// Handler to delete all notifications
const handleDeleteAll = () => {
setNotifications([]);
};
return (
<Box h="100%" p={4} {...OPACITY_ON_LOAD} overflowY="auto">
<HStack alignItems={"start"} justifyContent={"space-between"}>
<MiniHeader
title="Notification"
/>
<HStack>
<HStack
as={"button"}
spacing={0}
border={"1px solid #D2D2D2"}
bg={"#fff"}
px={2}
py={1}
rounded={"md"}
color={"#1C1C1C"}
>
<Icon as={IoIosCheckmark} />
<Text mb={0} fontSize={"xs"} fontWeight={500}>Mark as read</Text>
</HStack>
<HStack
as={"button"}
spacing={0}
border={"1px solid #EE1B24"}
bg={"#fff"}
px={2}
py={1}
rounded={"md"}
color={"#EE1B24"}
onClick={handleDeleteAll}
>
<Icon as={MdDeleteOutline} boxSize={3} />
<Text mb={0} ms={1} fontSize={"xs"} fontWeight={500}>Delete All</Text>
</HStack>
</HStack>
</HStack>
<Box
bg="#fff"
p={4}
rounded="md"
boxShadow="md"
minH={"76vh"}
>
{/* Wrap all notifications inside a single VStack */}
<VStack spacing={4} align="stretch">
{notifications.map((notification) => (
<HStack
key={notification.id}
justifyContent="space-between"
bg="#F3F7F9"
p={2}
rounded="sm"
boxShadow="md"
>
<HStack spacing={2}>
<Box bg="#d7d3fb" p={1} rounded="full">
<Image
borderRadius="full"
boxSize="30px"
src={notification.avatar}
alt={notification.sender}
/>
</Box>
<Box>
<Box mb={0}>
<Text as="span" fontSize="sm" fontWeight={600} mb={0}>
{notification.sender}
</Text>
<Text as="span" color="#A0A0A0" fontSize="xs" ms={2} fontWeight={500} mb={0}>
{notification.time}
</Text>
</Box>
<Text color="#A0A0A0" fontSize="xs" mb={0}>
{notification.message}
</Text>
</Box>
</HStack>
<Box
onClick={() => handleDelete(notification.id)}
cursor="pointer"
>
<MdOutlineDelete color="#686868" size={16} />
</Box>
</HStack>
))}
</VStack>
</Box>
</Box>
);
};
export default Notification;

210
src/Pages/Onboarding/OnboardingAboutCompany.jsx
View File

@@ -38,7 +38,7 @@ const validationSchema = Yup.object().shape({
mobileNumber_corporate: Yup.string()
.matches(/^\d{10}$/, "Phone number must be 10 digits")
.required("Phone number is required"),
logo_path_file_name: Yup.mixed().required('Company logo is required'),
logo_path_file_name:Yup.mixed().required('Company logo is required'),
});
const OnboardingAboutCompany = ({
@@ -85,12 +85,15 @@ const OnboardingAboutCompany = ({
};
const onSubmit = async (data) => {
setCorpData({ ...corpData, ...data });
setCorpData({ ...corpData, ...data });
handleNext();
// Handle your submit logic here
};
const handleFileUpload = async (file, setPreview) => {
setIsLoading(true)
console.log('File uploaded:', file);
@@ -100,23 +103,23 @@ const OnboardingAboutCompany = ({
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, logo_path_file_name: res?.data?.data });
setCorpData({ ...corpData, logo_path_file_name:res?.data?.data });
setValue("logo_path_file_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"} />,
});
@@ -172,9 +175,9 @@ const OnboardingAboutCompany = ({
{/* Industry Select Field */}
<FormControl isRequired mb={3}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Industry
</FormLabel>
</Text>
<InputGroup>
<Select
placeholder="Select industry"
@@ -225,55 +228,156 @@ const OnboardingAboutCompany = ({
</FormErrorMessage>
</FormControl>
<FileUploader
label="Upload Company Logo"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUpload}
> {errors.logo_path_file_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.logo_path_file_name?.message}
{/* Upload Company Logo Field */}
{/* <Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Upload Company Logo
</Text>
)}
</FileUploader>
<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"
// isLoading={isLoading}
<Box
my={2}
position="relative"
onClick={() =>
document.getElementById("company-logo-file-input").click()
}
>
{activeStep === steps.length - 1 ? "Next step" : "Next step"}
</Button>
</HStack>
<VStack
border={"1px dashed #D0D5DD"}
boxShadow={"md"}
borderRadius={"md"}
bg={"#faf8fd"}
p={4}
h={"28"}
justifyContent={"center"}
cursor="pointer"
>
<SlCloudUpload color={"#191D23"} size={30} />
<Text
color={"#191D23"}
fontWeight={"500"}
fontSize={"sm"}
mt={"2"}
mb={0}
>
Drag and drop files here or{" "}
<Text as="span" textDecoration="underline">
Choose file
</Text>
</Text>
</VStack>
<input
type="file"
id="company-logo-file-input"
style={{ display: "none" }} // Hide the file input
onChange={(e) => {
handleFileChange(e); // Handle file input
}}
/>
{fileName && (
<Text fontSize="sm" mt={2}>
Uploaded file: {fileName}
</Text>
)}
</Box>
{errors.logo_path_file_name && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.logo_path_file_name.message}
</Text>
)}
<HStack justifyContent={"space-between"}>
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
Supported formats- jpg, png, svg
</Text>
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
Maximum size - 20MB
</Text>
</HStack>
<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"
isLoading={isLoading}
>
{activeStep === steps.length - 1 ? "Next step" : "Next step"}
</Button>
</HStack>
</Box> */}
<FileUploader
label="Upload Company Logo"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUpload}
> {errors.logo_path_file_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.logo_path_file_name?.message}
</Text>
)}
</FileUploader>
<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"
// isLoading={isLoading}
>
{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>
)}

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

@@ -225,9 +225,9 @@ const OnboardingAddCompanyDetails = ({
{/* Company PAN Field */}
<Box mb={3}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company PAN
</FormLabel>
</Text>
<Input
type='text'
border="1px solid #e2e8f0"
@@ -241,9 +241,9 @@ const OnboardingAddCompanyDetails = ({
{/* Company GST Number */}
<Box mb={3}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company GST number
</FormLabel>
</Text>
<Input
type='text'
border="1px solid #e2e8f0"

2
src/Pages/Onboarding/OnboardingDirectorDetails.jsx
View File

@@ -147,7 +147,7 @@ const OnboardingDirectorDetails = ({
};
return (
<Box maxH="calc(82vh - 0px)">
<Box>
<Text color={"#49475A"} fontWeight={500} fontSize={"sm"} mb={1}>
Add director details
</Text>

503
src/Pages/Onboarding/OnboardingFrame.jsx
View File

@@ -1,115 +1,69 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState } from 'react';
import {
Box,
Text,
Stepper,
Step,
StepIndicator,
StepStatus,
StepSeparator,
useSteps,
StepTitle,
Divider,
Button,
HStack,
IconButton,
Flex,
useDisclosure,
Image,
} from "@chakra-ui/react";
import Header from "./Header";
Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
StepTitle, Divider, Button, HStack, IconButton, Flex,
useDisclosure
} from '@chakra-ui/react';
import Header from './Header';
import onboarding_bg from "../../assets/onboarding_bg.webp";
import {
ArrowBackIcon,
ArrowForwardIcon,
CheckIcon,
Icon,
} from "@chakra-ui/icons";
import {
FaUser,
FaBuilding,
FaClipboard,
FaUserTie,
FaBoxOpen,
} from "react-icons/fa";
import OnboardingYourDetails from "./OnboardingYourDetails";
import OnboardingAboutCompany from "./OnboardingAboutCompany";
import OnboardingAddCompanyDetails from "./OnboardingAddCompanyDetails";
import OnboardingDirectorDetails from "./OnboardingDirectorDetails";
import OnboardingSelectPackage from "./OnboardingSelectPackage";
import OnboardingSelectPackageModal from "./OnboardingSelectPackageModal"; // Import your modal component
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useSearchParams } from "react-router-dom";
import company from "../../assets/company.png";
import pfp from "../../assets/pfp.png";
import { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons';
import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa';
import OnboardingYourDetails from './OnboardingYourDetails';
import OnboardingAboutCompany from './OnboardingAboutCompany';
import OnboardingAddCompanyDetails from './OnboardingAddCompanyDetails';
import OnboardingDirectorDetails from './OnboardingDirectorDetails';
import OnboardingSelectPackage from './OnboardingSelectPackage';
import OnboardingSelectPackageModal from './OnboardingSelectPackageModal'; // Import your modal component
import { OPACITY_ON_LOAD } from '../../Layout/animations';
import { useSearchParams } from 'react-router-dom';
// Retrieve the active step from localStorage or set it to 0 if it doesn't exist
// const initialStep = parseInt(localStorage.getItem("activeStep")) || 0;
const OnboardingFrame = () => {
// Create a searchParams instance
const [searchParams] = useSearchParams();
const [corpData, setCorpData] = useState({});
const [ corpData, setCorpData ] = useState({})
useEffect(() => {
// Extract specific parameters
if (searchParams) {
const codeCorporate = searchParams.get("code_corporate");
const codeCorporateId = searchParams.get("code_corporateId");
localStorage?.setItem("codeCorporate", codeCorporate);
localStorage?.setItem("codeCorporateId", codeCorporateId);
const codeCorporate = searchParams.get("code_corporate");
const codeCorporateId = searchParams.get("code_corporateId");
localStorage?.setItem('codeCorporate', codeCorporate)
localStorage?.setItem('codeCorporateId', codeCorporateId)
}
}, [searchParams]);
}, [searchParams])
useEffect(() => {
localStorage.setItem("corpData", JSON.stringify(corpData));
console.log(corpData);
}, [corpData]);
}, [corpData])
// Modal state and disclosure hook
const { isOpen, onOpen, onClose } = useDisclosure();
// Modal state and disclosure hook
const { isOpen, onOpen, onClose } = useDisclosure();
const steps = [
{
title: "Your details",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaUser,
img: company,
},
{
title: "About Company",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaBuilding,
img: company,
},
{
title: "Company details",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaClipboard,
img: company,
},
{
title: "Director details",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaUserTie,
img: pfp,
},
{
title: "Select package",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaBoxOpen,
img: company,
},
];
// Stepper configuration
const { activeStep, setActiveStep } = useSteps({
const steps = [
{ title: 'Your details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUser },
{ title: 'About Company', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBuilding },
{ title: 'Company details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaClipboard },
{ title: 'Director details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUserTie },
{ title: 'Select package', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBoxOpen },
];
// Stepper configuration
const { activeStep, setActiveStep } = useSteps({
index: 0, // Initialize the active step from localStorage or 0
count: steps.length,
});
// Function to handle the "Next" button click
const handleNext = () => {
// Function to handle the "Next" button click
const handleNext = () => {
if (activeStep === steps.length - 1) {
// If it's the last step, open the modal
onOpen();
@@ -117,216 +71,175 @@ const OnboardingFrame = () => {
// Otherwise, go to the next step
const nextStep = activeStep + 1;
setActiveStep(nextStep);
// Store the new active step in localStorage
localStorage.setItem("activeStep", nextStep);
}
};
// Array of components for each step
const stepComponents = [
<OnboardingYourDetails
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingAboutCompany
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingAddCompanyDetails
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingDirectorDetails
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingSelectPackage
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
];
return (
<Box>
{/* Onboarding content */}
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
<Header />
<Box
w={"100%"}
minH="calc(100vh - 62px)"
bgImage={`url(${onboarding_bg})`}
bgSize={"cover"}
bgPosition={"center"}
position={"relative"}
px={6}
display={"flex"}
gap={"6"}
alignItems={"start"}
_before={{
content: '""',
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
bg: "rgba(0, 0, 0, 0.3)",
zIndex: 1,
}}
>
{/* Stepper Box */}
<Box
w={"100%"}
my={5}
boxShadow={"md"}
maxW={"350px"}
zIndex={2}
bg={"#fff"}
py={6}
px={4}
borderRadius={"md"}
maxH={"82.9vh"}
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
"&::-webkit-scrollbar": {
width: "6px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#6311CB",
borderRadius: "6px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "#F6F0FF",
},
}}
>
<Box>
<Text color={"#49475A"} fontWeight={500} fontSize={"sm"}>
Lorem ipsum dolor sit amet, adipiscing elit.
</Text>
<Divider />
<Box>
<Stepper
index={activeStep}
orientation="vertical"
h="400"
gap="0"
my={"5"}
sx={{ "--stepper-accent-color": "#6311CB" }}
// Array of components for each step
const stepComponents = [
<OnboardingYourDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingAboutCompany corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingAddCompanyDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingDirectorDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingSelectPackage corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />
];
return (
<Box>
{/* Onboarding content */}
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
<Header />
<Box
w={'100%'}
minH="calc(100vh - 62px)"
bgImage={`url(${onboarding_bg})`}
bgSize={'cover'}
bgPosition={'center'}
position={'relative'}
px={6}
display={"flex"}
gap={"6"}
alignItems={"start"}
_before={{
content: '""',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
bg: 'rgba(0, 0, 0, 0.3)',
zIndex: 1,
}}
>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator>
<StepStatus
complete={<CheckIcon boxSize="16px" />}
incomplete={
<Image
src={step.img}
color={"purple.400"}
boxSize="16px"
/>
}
active={
<Icon
as={step.icon}
color={"purple.500"}
boxSize="16px"
/>
}
/>
</StepIndicator>
<Box flexShrink="0" ml={4}>
<StepTitle
fontWeight={activeStep === index ? "600" : "500"}
fontSize={activeStep === index ? "md" : "sm"}
mb={1}
>
{step.title}
</StepTitle>
<Text fontSize="xs" color="gray.500">
{step.description}
</Text>
</Box>
<StepSeparator
borderColor={
activeStep > index ? "purple.500" : "purple.300"
}
borderWidth={1}
/>
</Step>
))}
</Stepper>
</Box>
</Box>
</Box>
{/* Stepper Box */}
<Box
w={'100%'}
my={5}
boxShadow={'md'}
maxW={"350px"}
zIndex={2}
bg={'#fff'}
py={6}
px={4}
borderRadius={'md'}
maxH={"82.9vh"}
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
'&::-webkit-scrollbar': {
width: '6px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#6311CB',
borderRadius: '6px',
},
'&::-webkit-scrollbar-track': {
backgroundColor: '#F6F0FF',
},
}}
>
<Box>
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
Lorem ipsum dolor sit amet, adipiscing elit.
</Text>
<Divider />
<Box>
<Stepper
index={activeStep}
orientation="vertical"
h="400"
gap="0"
my={"5"}
sx={{ '--stepper-accent-color': '#6311CB' }}
>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator>
<StepStatus
complete={<CheckIcon boxSize="16px" />}
incomplete={<Icon as={step.icon} color={"purple.400"} boxSize="16px" />}
active={<Icon as={step.icon} color={"purple.500"} boxSize="16px" />}
/>
</StepIndicator>
<Box flexShrink="0" ml={4}>
<StepTitle
fontWeight={activeStep === index ? "600" : "500"}
fontSize={activeStep === index ? "md" : "sm"}
mb={1}
>
{step.title}
</StepTitle>
<Text fontSize="xs" color="gray.500">
{step.description}
</Text>
</Box>
<StepSeparator
borderColor={activeStep > index ? "purple.500" : "purple.300"}
borderWidth={1}
/>
</Step>
))}
</Stepper>
</Box>
</Box>
</Box>
{/* Content Box */}
<Box
w={"100%"}
bg={"#fff"}
p={6}
borderRadius={"md"}
my={5}
boxShadow={"md"}
zIndex={2}
maxH="calc(82vh - 0px)"
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
"&::-webkit-scrollbar": {
width: "6px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#6311CB",
borderRadius: "6px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "#F6F0FF",
},
}}
>
<HStack justifyContent={"end"}>
{/* Step Indicator (Horizontal) */}
<Flex justify="center" align="center" gap={2} mt={4}>
{steps.map((_, index) => (
<Box
key={index}
h="4px"
w="20px"
bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
borderRadius="full"
/>
))}
</Flex>
</HStack>
{/* Content Box */}
<Box
w={'100%'}
bg={'#fff'}
p={6}
borderRadius={'md'}
my={5}
boxShadow={'md'}
zIndex={2}
maxH="calc(82vh - 0px)"
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
'&::-webkit-scrollbar': {
width: '6px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#6311CB',
borderRadius: '6px',
},
'&::-webkit-scrollbar-track': {
backgroundColor: '#F6F0FF',
},
}}
>
<HStack justifyContent={"end"}>
<Box>
<Box w={{ base: "70%", lg: "92%" }} mx={"auto"}>
{/* Render the current step component */}
{stepComponents[activeStep]}
{/* Step Indicator (Horizontal) */}
<Flex justify="center" align="center" gap={2} mt={4}>
{steps.map((_, index) => (
<Box
key={index}
h="4px"
w="20px"
bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
borderRadius="full"
/>
))}
</Flex>
</HStack>
{/* <HStack mt={6}>
<Box>
<Box
w={{ base: "70%", lg: "92%" }}
mx={"auto"}
>
{/* Render the current step component */}
{stepComponents[activeStep]}
{/* <HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
@@ -354,16 +267,16 @@ const OnboardingFrame = () => {
{activeStep === steps.length - 1 ? 'Next step' : 'Next step'}
</Button>
</HStack> */}
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
{/* Modal for final step */}
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
</Box>
);
{/* Modal for final step */}
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
</Box>
);
};
export default OnboardingFrame;

452
src/Pages/OptiFiiExpense/AdvExpPending.jsx
View File

@@ -1,452 +0,0 @@
import {
Avatar,
Box,
Button,
Checkbox,
Divider,
Flex,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Radio,
Select,
Tag,
TagLabel,
Text,
VStack,
} from "@chakra-ui/react";
import {
Tabs,
TabList,
Tab,
TabIndicator,
TabPanels,
TabPanel,
} 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 womenpfp from "../../assets/womenpfp1.png";
import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
EmailIcon,
SearchIcon,
ViewIcon,
} from "@chakra-ui/icons";
import {
MdFilterList,
MdNotificationsNone,
MdOutlineHeadsetMic,
} from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import { LuListFilter } from "react-icons/lu";
import { BsFilterRight } from "react-icons/bs";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
const AdvanceExpensePending = () => {
const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [users, setusers] = useState(50);
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const tableHeadRow = [
"Sr. no",
"Report name",
"Report by",
"Report amount",
"Date & time",
"Approver",
"Disburser",
"Action",
];
const pendingTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
onClick={() => navigate("/advance-expense-request-view")}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const completedTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const tabsData = [
{
label: "Pending",
num: 50,
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
),
},
{
label: "Completed",
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={completedTable}
isLoading={isLoading}
/>
),
},
{
label: "Rejected",
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={rejectedTable}
isLoading={isLoading}
/>
),
},
];
return (
<Box {...OPACITY_ON_LOAD} p={1} overflowX={"scroll"}>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={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>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Flex align={"center"} gap={5}>
<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>
<Flex align={"center"} gap={2}>
<Text as={"span"} fontSize={"xs"}>
Show
</Text>
<Select borderRadius={5} size={"sm"}>
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
</Select>
<Text as={"span"} fontSize={"xs"}>
entries
</Text>
</Flex>
</Flex>
<Box>
<Link to={"#"} style={{ marginRight: "8px" }}>
{/* <SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/> */}
</Link>
<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>
</Box>
</HStack>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default AdvanceExpensePending;

452
src/Pages/OptiFiiExpense/AdvExpRejecte.jsx
View File

@@ -1,452 +0,0 @@
import {
Avatar,
Box,
Button,
Checkbox,
Divider,
Flex,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Radio,
Select,
Tag,
TagLabel,
Text,
VStack,
} from "@chakra-ui/react";
import {
Tabs,
TabList,
Tab,
TabIndicator,
TabPanels,
TabPanel,
} 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 womenpfp from "../../assets/womenpfp1.png";
import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
EmailIcon,
SearchIcon,
ViewIcon,
} from "@chakra-ui/icons";
import {
MdFilterList,
MdNotificationsNone,
MdOutlineHeadsetMic,
} from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import { LuListFilter } from "react-icons/lu";
import { BsFilterRight } from "react-icons/bs";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
const AdvanceExpenseReject = () => {
const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [users, setusers] = useState(50);
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const tableHeadRow = [
"Sr. no",
"Report name",
"Report by",
"Report amount",
"Date & time",
"Approver",
"Disburser",
"Action",
];
const pendingTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
onClick={() => navigate("/advance-expense-request-view")}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const completedTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const tabsData = [
{
label: "Pending",
num: 50,
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
),
},
{
label: "Completed",
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={completedTable}
isLoading={isLoading}
/>
),
},
{
label: "Rejected",
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={rejectedTable}
isLoading={isLoading}
/>
),
},
];
return (
<Box {...OPACITY_ON_LOAD} p={1} overflowX={"scroll"}>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={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>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Flex align={"center"} gap={5}>
<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>
<Flex align={"center"} gap={2}>
<Text as={"span"} fontSize={"xs"}>
Show
</Text>
<Select borderRadius={5} size={"sm"}>
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
</Select>
<Text as={"span"} fontSize={"xs"}>
entries
</Text>
</Flex>
</Flex>
<Box>
<Link to={"#"} style={{ marginRight: "8px" }}>
{/* <SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/> */}
</Link>
<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>
</Box>
</HStack>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default AdvanceExpenseReject;

252
src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx
View File

@@ -55,9 +55,8 @@ import { LuListFilter } from "react-icons/lu";
import { BsFilterRight } from "react-icons/bs";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
import AdvanceExpensePending from "./AdvExpPending";
import AdvanceExpenseCompleted from "./AvdExpComplted";
import AdvanceExpenseReject from "./AdvExpRejecte";
const AdvanceExpenseRequest = () => {
const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
@@ -66,6 +65,8 @@ const AdvanceExpenseRequest = () => {
const [users, setusers] = useState(50);
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
@@ -126,32 +127,25 @@ const AdvanceExpenseRequest = () => {
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
<Flex align={'center'} gap={2}>
<Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
<Text as={'span'}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
"Approver": item?.Approver,
"Disburser": item?.Disburser,
"Action": (
<Text
as={"button"}
onClick={() => navigate("/advance-expense-request-view")}
onClick={() => navigate('/advance-expense-request-view')}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
bg={'#6311CB'}
py={1.5} px={5}
borderRadius={5}
>
{item?.Action}
</Text>
>{item?.Action}</Text>
),
}));
const completedTable = AdvanceExpenseRequest.map((item, index) => ({
@@ -187,33 +181,26 @@ const AdvanceExpenseRequest = () => {
>
{item?.ReportName}
</Text>
),
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
<Flex align={'center'} gap={2}>
<Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
<Text as={'span'}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
"Approver": item?.Approver,
"Disburser": item?.Disburser,
"Action": (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
bg={'#6311CB'}
py={1.5} px={5}
borderRadius={5}
>
{item?.Action}
</Text>
>{item?.Action}</Text>
),
}));
const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
@@ -251,50 +238,58 @@ const AdvanceExpenseRequest = () => {
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
<Flex align={'center'} gap={2}>
<Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
<Text as={'span'}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
"Approver": item?.Approver,
"Disburser": item?.Disburser,
"Action": (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
bg={'#6311CB'}
py={1.5} px={5}
borderRadius={5}
>
{item?.Action}
</Text>
>{item?.Action}</Text>
),
}));
const tabsData = [
{
label: "Pending",
label: 'Pending',
num: 50,
content: <AdvanceExpensePending />,
content: <NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
},
{
label: "Completed",
content: <AdvanceExpenseCompleted />,
label: 'Completed',
content: <NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={completedTable}
isLoading={isLoading}
/>
},
{
label: "Rejected",
content: (
<AdvanceExpenseReject/>
),
},
label: 'Rejected',
content: <NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={rejectedTable}
isLoading={isLoading}
/>
}
];
return (
@@ -302,12 +297,123 @@ const AdvanceExpenseRequest = () => {
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={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>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Flex align={'center'} gap={5}>
<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>
<Flex align={'center'} gap={2}>
<Text as={'span'} fontSize={'xs'}>Show</Text>
<Select borderRadius={5} size={"sm"}>
<option value='10'>10</option>
<option value='30'>30</option>
<option value='50'>50</option>
<option value='80'>80</option>
</Select>
<Text as={'span'} fontSize={'xs'}>entries</Text>
</Flex>
</Flex>
<Box>
<Link to={"#"} style={{ marginRight: "8px" }}>
{/* <SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/> */}
</Link>
<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>
</Box>
</HStack>
</VStack>
<Tabs position="relative" variant="unstyled">
<TabList color="#B0B0B0">
{tabsData?.map((tab, index) => (
@@ -318,26 +424,23 @@ const AdvanceExpenseRequest = () => {
color: "#6311CB",
fontWeight: "medium",
}}
display={"flex"}
alignItems={"center"}
display={'flex'}
alignItems={'center'}
gap={2}
>
{tab?.label}
{tab?.label == "Pending" && (
{tab?.label == "Pending" &&
<Text
as={"span"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1}
px={2}
bg={'#6311CB'}
py={1} px={2}
borderRadius={5}
>
{tab?.num}
</Text>
)}
>{tab?.num}</Text>}
</Tab>
))}
</TabList>
<TabIndicator
mt="-1.5px"
@@ -348,8 +451,11 @@ const AdvanceExpenseRequest = () => {
/>
<TabPanels>
{tabsData?.map((tabCont, index) => (
<TabPanel key={index}>{tabCont?.content}</TabPanel>
<TabPanel key={index}>
{tabCont?.content}
</TabPanel>
))}
</TabPanels>
</Tabs>
</Box>

452
src/Pages/OptiFiiExpense/AvdExpComplted.jsx
View File

@@ -1,452 +0,0 @@
import {
Avatar,
Box,
Button,
Checkbox,
Divider,
Flex,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Radio,
Select,
Tag,
TagLabel,
Text,
VStack,
} from "@chakra-ui/react";
import {
Tabs,
TabList,
Tab,
TabIndicator,
TabPanels,
TabPanel,
} 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 womenpfp from "../../assets/womenpfp1.png";
import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
EmailIcon,
SearchIcon,
ViewIcon,
} from "@chakra-ui/icons";
import {
MdFilterList,
MdNotificationsNone,
MdOutlineHeadsetMic,
} from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import { LuListFilter } from "react-icons/lu";
import { BsFilterRight } from "react-icons/bs";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
const AdvanceExpenseCompleted = () => {
const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [users, setusers] = useState(50);
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const tableHeadRow = [
"Sr. no",
"Report name",
"Report by",
"Report amount",
"Date & time",
"Approver",
"Disburser",
"Action",
];
const pendingTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
onClick={() => navigate("/advance-expense-request-view")}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const completedTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
"Sr. no": (
<Checkbox colorScheme="purple">
<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?.id}
</Text>
</Checkbox>
),
"Report name": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{item?.ReportName}
</Text>
),
"Report by": (
<Flex align={"center"} gap={2}>
<Avatar
size={"sm"}
name={item?.ReportBy?.profName}
src={item?.ReportBy?.profImage}
/>
<Text as={"span"}>{item?.ReportBy?.profName}</Text>
</Flex>
),
"Report amount": item?.ReportAmount,
"Date & time": item?.DateTime,
Approver: item?.Approver,
Disburser: item?.Disburser,
Action: (
<Text
as={"button"}
fontSize={"xs"}
color="#fff"
bg={"#6311CB"}
py={1.5}
px={5}
borderRadius={5}
>
{item?.Action}
</Text>
),
}));
const tabsData = [
{
label: "Pending",
num: 50,
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
),
},
{
label: "Completed",
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={completedTable}
isLoading={isLoading}
/>
),
},
{
label: "Rejected",
content: (
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={rejectedTable}
isLoading={isLoading}
/>
),
},
];
return (
<Box {...OPACITY_ON_LOAD} p={1} overflowX={"scroll"}>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={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>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Flex align={"center"} gap={5}>
<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>
<Flex align={"center"} gap={2}>
<Text as={"span"} fontSize={"xs"}>
Show
</Text>
<Select borderRadius={5} size={"sm"}>
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
</Select>
<Text as={"span"} fontSize={"xs"}>
entries
</Text>
</Flex>
</Flex>
<Box>
<Link to={"#"} style={{ marginRight: "8px" }}>
{/* <SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/> */}
</Link>
<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>
</Box>
</HStack>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default AdvanceExpenseCompleted;

45
src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
View File

@@ -13,6 +13,10 @@ import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { RiDeleteBin5Line } from "react-icons/ri";
import { AiOutlineEdit } from "react-icons/ai";
import { FaRegEye } from "react-icons/fa";
import { PiReceipt } from "react-icons/pi";
import { MdOutlineNoFood } from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useNavigate } from "react-router-dom";
@@ -40,20 +44,21 @@ const ReimbursementRequest = () => {
// ===============================[ Table Header ]
const tableHeadRow = [
"Select",
"Sr. No",
"Report name",
"Report by",
"Report amount",
"Date & time",
"Approver",
"Disburser",
"Action"
"Name",
"Status",
"Email Address",
"Mobile number",
"Grade",
"Department",
"Role",
"Action",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) =>
({
const extractedArray = employees.map((item, index) => ({
"Sr. No": (
<Text
as={"span"}
@@ -65,15 +70,13 @@ const ReimbursementRequest = () => {
{index + 1}
</Text>
),
"Report name": (
<Text color="#3725EA" fontSize="small" fontWeight={400}>{item?.reportname}</Text>
),
// "Report by": item?.emailAddress,
"Report amount": item?.reportamount,
"Date & time": item?.datetime,
"Approver": item?.approver,
"Disburser": item?.disburser,
"Report by": (
"Name": item?.Name,
"Email Address": item?.emailAddress,
"Mobile number": item?.mobileNumber,
Grade: item?.Grade,
Department: item?.Department,
Role: item?.Role,
Status: (
<HStack>
<Image
borderRadius='full'
@@ -119,7 +122,7 @@ const ReimbursementRequest = () => {
<MdOutlineNoFood color="#3725EA" />
</Box>
<Box>
<Text color={"#667085"} fontWeight={600} fontSize={"sm"} mb={1}>
<Text color={"#667085"} fontSize={"sm"} mb={1}>
Food
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0}>
@@ -128,8 +131,8 @@ const ReimbursementRequest = () => {
</Box>
</HStack>
<Box>
<Text color={"#667085"} fontSize={"xs"} fontWeight={600} mb={1}>
Wallet Amount
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Created by - Reethik Thota
</Text>
<Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
₹ 50,000

592
src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx
View File

@@ -1,18 +1,18 @@
import {
Box,
Button,
HStack,
VStack,
Icon,
Checkbox,
Tag,
TagLabel,
Text,
Image,
useDisclosure,
Alert,
CloseButton,
AlertDescription,
Box,
Button,
HStack,
VStack,
Icon,
Checkbox,
Tag,
TagLabel,
Text,
Image,
useDisclosure,
Alert,
CloseButton,
AlertDescription,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
@@ -26,360 +26,250 @@ import { MdOutlineNoFood } from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { IoMdCheckmark } from "react-icons/io";
import { RxCross2 } from "react-icons/rx";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
import { TiTick } from "react-icons/ti";
import { ImCancelCircle } from "react-icons/im";
const tableData = [
{
id:1,
datetime:"Jan 12, 2022, 10 am",
merchant:"Dine in",
category :"Food",
paymentmethod :"Expense card",
reimburseAmount :"₹ 5000",
},
{
id:2,
datetime:"Jan 12, 2022, 10 am",
merchant:"Airtel postpaid",
category :"telecom",
paymentmethod :"Expense card",
reimburseAmount :"₹ 5000",
},
{
id:3,
datetime:"Jan 12, 2022, 10 am",
merchant:"Lorem ipsum dolor adipiscing elit.",
category :"Fuel",
paymentmethod :"Expense card",
reimburseAmount :"₹ 5000",
},
{
id:4,
datetime:"Jan 12, 2022, 10 am",
merchant:"Airtel postpaid",
category :"Telecom",
paymentmethod :"Cash",
reimburseAmount :"₹ 5000",
},
{
id:3,
datetime:"Jan 12, 2022, 10 am",
merchant:"Lorem ipsum dolor adipiscing elit.",
category :"Fuel",
paymentmethod :"Cash",
reimburseAmount :"₹ 5000",
},
]
import PrimaryButton from "../../Components/Buttons/PrimaryButton"
import SecondaryButton from "../../Components/Buttons/SecondaryButton"
const ReimbursementRequestView = () => {
const [alertStatus, setAlertStatus] = useState(null);
const [alertStatus, setAlertStatus] = useState(null);
const handleApprove = () => {
setAlertStatus('success');
};
const handleReject = () => {
setAlertStatus('error');
};
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
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 = [
"Select",
"Sr. No",
"Name",
"Email Address",
"Mobile number",
"Grade",
"Department",
"Role",
"Action",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
"Sr. No": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{index + 1}
</Text>
),
Name: item?.Name,
"Email Address": item?.emailAddress,
"Mobile number": item?.mobileNumber,
Grade: item?.Grade,
Department: item?.Department,
Role: item?.Role,
Action: (
<HStack
>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
</Box>
<Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
Invoice243
</Text>
</HStack>
),
}));
return (
const handleApprove = () => {
setAlertStatus("success");
};
const handleReject = () => {
setAlertStatus("error");
};
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
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 = [
"Sr. No",
"Date & time",
"Merchant",
"Category",
"Payment mode",
"Reimburse Amount",
"Bills",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = tableData.map((item, index) => ({
"Sr. No": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{index + 1}
</Text>
),
"Date & time": item?.datetime,
"Merchant": item?.merchant,
"Category": item?.category,
"Payment mode": item?.paymentmethod,
"Reimburse Amount": item?.reimburseAmount,
Bills: (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
</Box>
<Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
Invoice243
</Text>
</HStack>
),
Action: (
<HStack>
<Button
display="flex"
flexDirection="row"
fontSize="small"
fontWeight={400}
p={2}
bg={"#00A43824"}
rounded={"medium"}
borderRadius="7.25px"
border="1px solid #00A438"
color="#00A438"
>
<TiTick color="#00A438" />
Approve
</Button>
<Button
display="flex"
flexDirection="row"
fontSize="small"
fontWeight={400}
p={2}
bg={"#EE1B241A"}
border="1px solid #EE1B24"
borderRadius="7.25px"
color="#EE1B24"
gap={1}
>
<ImCancelCircle color="red" />
Reject
</Button>
</HStack>
),
}));
return (
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
{/* <MiniHeader
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
{/* <MiniHeader
title={"My Requests"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/> */}
{alertStatus === "success" && (
<Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
<Box>
<HStack>
<IoMdCheckmark size={16} />
<Text fontSize="xs" mb={0} fontWeight={500}>
Approved by giftryt
</Text>
</HStack>
</Box>
</Alert>
)}
{alertStatus === 'success' && (
<Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
<Box>
<HStack>
<IoMdCheckmark size={16} />
<Text fontSize="xs" mb={0} fontWeight={500}>
Approved by giftryt
</Text>
</HStack>
</Box>
</Alert>
)}
{alertStatus === "error" && (
<Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
<Box>
<HStack>
<RxCross2 size={16} />
<Text fontSize="xs" mb={0} fontWeight={500}>
Rejected by giftryt
</Text>
</HStack>
</Box>
</Alert>
)}
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
<HStack width={"100%"} mb={8}>
<Box
bg={"#e5f6eb"}
border={"1px solid #00A438"}
px={4}
py={1}
rounded={"md"}
h={14}
flex={1}
>
<HStack>
<IoMdCheckmark color="#00A438" />
<Text color={"#00A438"} fontSize={"sm"} mb={1} fontWeight={500}>
Approved
</Text>
</HStack>
<Text color={"#667085"} fontSize={"xs"} fontWeight={400} mb={0}>
By Sr. Manager
</Text>
</Box>
<HStack
bg={"#00A438"}
px={4}
py={1}
rounded={"md"}
h={14}
justifyContent={"start"}
flex={1}
>
<Text color={"#fff"} fontSize={"sm"} mb={0} fontWeight={400}>
In progress
</Text>
</HStack>
<VStack
bg={"#f9f9f9"}
px={4}
py={1}
rounded={"md"}
h={14}
spacing={1}
alignItems={"start"}
flex={1}
>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
<VStack
bg={"#f9f9f9"}
px={4}
py={1}
rounded={"md"}
h={14}
spacing={1}
alignItems={"start"}
flex={1}
>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
<VStack
bg={"#f9f9f9"}
px={4}
py={1}
rounded={"md"}
h={14}
spacing={1}
alignItems={"start"}
flex={1}
>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
</HStack>
{alertStatus === 'error' && (
<Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
<Box>
<HStack>
<RxCross2 size={16} />
<Text fontSize="xs" mb={0} fontWeight={500}>
Rejected by giftryt
</Text>
</HStack>
</Box>
</Alert>
)}
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
<HStack width={"100%"} mb={8}>
<Box bg={"#e5f6eb"} border={"1px solid #00A438"} px={4} py={1} rounded={"md"} h={14} flex={1}>
<HStack>
<IoMdCheckmark color="#00A438" />
<Text color={"#00A438"} fontSize={"sm"} mb={1} fontWeight={500}>
Approved
</Text>
</HStack>
<Text color={"#667085"} fontSize={"xs"} fontWeight={400} mb={0}>
By Sr. Manager
</Text>
</Box>
<HStack bg={"#00A438"} px={4} py={1} rounded={"md"} h={14} justifyContent={"start"} flex={1}>
<Text color={"#fff"} fontSize={"sm"} mb={0} fontWeight={400}>
In progress
</Text>
</HStack>
<VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
<VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
<VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
<HStack justifyContent={"space-between"} mb={6}>
<Box>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Report number : 1254587841
</Text>
<Text color={"#252C32"} fontSize={"sm"} mb={0} fontWeight={500}>
Reimbursement report 2024
</Text>
</Box>
<Box>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Amount to be reimbursed
</Text>
<Text color={"#252C32"} fontSize={"sm"} fontWeight={500} mb={0}>
₹ 50,000
</Text>
</Box>
</HStack>
</HStack>
<HStack justifyContent={"space-between"} mb={6}>
<Box>
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
Submitted by
</Text>
<HStack mb={4} alignItems={"start"}>
<Image
borderRadius="full"
boxSize="40px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
<Box>
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
Pooja Shah
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
poojashah @wdipl.com
</Text>
</Box>
</HStack>
<HStack justifyContent={"space-between"} mb={6}>
<Box>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Report number : 1254587841
</Text>
<Text color={"#252C32"} fontSize={"sm"} mb={0} fontWeight={500}>
Reimbursement report 2024
</Text>
</Box>
<Box >
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Amount to be reimbursed
</Text>
<Text color={"#252C32"} fontSize={"sm"} fontWeight={500} mb={0}>
₹ 50,000
</Text>
</Box>
</HStack>
<Text color={"#252C32"} fontSize={"xs"} mb={0} fontWeight={400}>
Duration - 10 June - 28 June
</Text>
</Box>
<Box textAlign={"end"}>
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
Pending approval
</Text>
<HStack mb={4} alignItems={"start"}>
<Box>
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
Manav sain
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
manavsain@wdipl.com
</Text>
</Box>
<Image
borderRadius="full"
boxSize="40px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
</HStack>
</Box>
</HStack>
<HStack justifyContent={"space-between"} mb={6}>
<Box>
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
Submitted by
</Text>
<HStack mb={4} alignItems={"start"}>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Box>
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
Pooja Shah
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
poojashah @wdipl.com
</Text>
</Box>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
/>
<Text color={"#252C32"} fontSize={"xs"} mb={0} fontWeight={400}>
Duration - 10 June - 28 June
</Text>
</Box>
<Box textAlign={"end"}>
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
Pending approval
</Text>
<HStack mb={4} alignItems={"start"} >
<Box>
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
Manav sain
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
manavsain@wdipl.com
</Text>
</Box>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
</HStack>
</Box>
</HStack>
<HStack justifyContent={"end"} my={4} spacing={4}>
<SecondaryButton title="Reject" onClick={handleReject} />
<PrimaryButton title="Approve" onClick={handleApprove} />
</HStack>
</Box>
</Box>
);
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
/>
<HStack justifyContent={"end"} my={4} spacing={4}>
<SecondaryButton title="Reject" onClick={handleReject} />
<PrimaryButton title="Approve" onClick={handleApprove} />
</HStack>
</Box>
</Box>
);
};
export default ReimbursementRequestView;

88
src/Pages/OptiFiiExpense/WalletProgram.jsx
View File

@@ -1,11 +1,6 @@
import {
Accordion,
AccordionButton,
AccordionItem,
AccordionPanel,
Box,
Button,
Checkbox,
Divider,
HStack,
Icon,
@@ -21,7 +16,6 @@ import {
Tag,
TagLabel,
Text,
useDisclosure,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useMemo, useState } from "react";
@@ -34,7 +28,6 @@ import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
ChevronRightIcon,
EmailIcon,
SearchIcon,
ViewIcon,
@@ -71,15 +64,12 @@ import {
TabPanels,
TabPanel,
} from "@chakra-ui/react";
import CreateBenefitWalletModal from "./wallet/CreateBenefitWalletModal";
import { IoFilterSharp } from "react-icons/io5";
const WalletProgram = () => {
const { walletProgram } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [showGrid, setShowGrid] = useState(true);
const { isOpen, onOpen, onClose } = useDisclosure();
const handleViewToggle = (viewType) => {
setShowGrid(viewType === "grid");
@@ -117,11 +107,7 @@ const WalletProgram = () => {
ID: <Text fontSize="xs">{item?.id}</Text>,
"Wallet Name": (
<Box display="flex" flexDirection="row" alignItems="center" gap={1}>
<Image
h="23px"
src={item.walletName[0]?.icon}
alt={item.walletName[0]?.icon}
/>
<Image h="23px" src={item.walletName[0]?.icon} alt={item.walletName[0]?.icon} />
{item?.walletName[0]?.name}
</Box>
),
@@ -131,20 +117,8 @@ const WalletProgram = () => {
<Tag
size="sm"
borderRadius="full"
bgColor={
item?.status === "Active"
? "#00A43814"
: item?.status === "Inactive"
? "#C33FAD21"
: "#E0BC0114"
}
color={
item?.status === "Active"
? "#00A438"
: item?.status === "Inactive"
? "#C33FAD"
: "#E0BC01"
}
bgColor={item?.status === "Active" ? "#00A43814" : item?.status === "Inactive" ? "#C33FAD21" : "#E0BC0114"}
color={item?.status === "Active" ? "#00A438" : item?.status === "Inactive" ? "#C33FAD" : "#E0BC01"}
p={1}
px={3}
>
@@ -156,6 +130,7 @@ const WalletProgram = () => {
"Created by": item?.CreatedBy,
}));
}, [walletProgram]);
return (
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
@@ -226,14 +201,9 @@ const WalletProgram = () => {
</MenuItem>
</MenuList>
</Menu>
<PrimaryButton
onClick={onOpen}
leftIcon={<AddIcon />}
title={"Create wallet"}
/>
{/* <NavLink to="/wallet-program/create-wallet">
</NavLink> */}
<NavLink to="/wallet-program/create-wallet">
<PrimaryButton leftIcon={<AddIcon />} title={"Create wallet"} />
</NavLink>
</Box>
</Box>
<Divider />
@@ -280,45 +250,13 @@ const WalletProgram = () => {
>
Filter
</MenuButton>
<MenuList w="160px" h="300px" overflowY="scroll">
<VStack p={2} alignItems="flex-start">
<HStack alignItems="center">
<IoFilterSharp fontSize="small" />{" "}
<Text as="span" fontSize="small" fontWeight={600}>
Filter
</Text>
</HStack>
<Box w="100%" borderBottom="1px solid #D8D8D8" />
<VStack gap={4} alignItems="flex-start" p={3} w="100%">
{/* Wallet Type Section */}
<VStack align="start" spacing={2}>
<Text as="span" fontSize="sm" fontWeight={600}>
Wallet Type
</Text>
<Checkbox defaultChecked>Prefilled </Checkbox>
<Checkbox>Reimburse</Checkbox>
</VStack>
<VStack align="start" spacing={2}>
<Text as="span" fontSize="sm" fontWeight={600}>
Status
</Text>
<Checkbox defaultChecked>Active </Checkbox>
<Checkbox>Pending</Checkbox>
</VStack>
{/* Status Section */}
<VStack align="start" spacing={2}>
<Text as="span" fontSize="sm" fontWeight={600}>
Department
</Text>
<Checkbox>Finance</Checkbox>
<Checkbox>design</Checkbox>
</VStack>
</VStack>
</VStack>
<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>
<Button
leftIcon={<CiBoxList />}
fontSize="xs"
@@ -405,8 +343,6 @@ const WalletProgram = () => {
</Box>
)}
</Box>
{/* Modal */}
<CreateBenefitWalletModal isOpen={isOpen} onClose={onClose} />
</Box>
);
};

447
src/Pages/OptiFiiExpense/WalletRequest.jsx
View File

@@ -1,447 +0,0 @@
import {
Box,
Button,
Divider,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Radio,
Tag,
TagLabel,
Text,
Textarea,
useDisclosure,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { CiBoxList } from "react-icons/ci";
import { BsFillGridFill } from "react-icons/bs";
import Sales from "./wallet/Sales";
import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
EmailIcon,
SearchIcon,
ViewIcon,
} from "@chakra-ui/icons";
import {
MdFilterList,
MdNotificationsNone,
MdOutlineHeadsetMic,
} from "react-icons/md";
import { MdOutlineUnarchive } 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 { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link, NavLink } 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 pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
import ActiveCards from "./Grid/ActiveCards";
import PendingApproval from "./Grid/PendingApproval";
import Decline from "./Grid/Decline";
import {
Tabs,
TabList,
Tab,
TabIndicator,
TabPanels,
TabPanel,
} from "@chakra-ui/react";
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
} from "@chakra-ui/react";
import RequestModal from "./wallet/RequestModal";
const WalletProgram = () => {
const { walletProgram } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [showGrid, setShowGrid] = useState(true);
const { isOpen, onOpen, onClose } = useDisclosure();
const [scrollBehavior, setScrollBehavior] = useState("inside");
const btnRef = useRef(null);
const handleCloseBothModals = () => {
onClose();
onApproveClose();
};
const {
isOpen: isApproveOpen,
onOpen: onApproveOpen,
onClose: onApproveClose,
} = useDisclosure();
const transactionLimits = [
{ period: "Daily", amount: "₹ 5000" },
{ period: "Weekly", amount: "₹ 25000" },
{ period: "Monthly", amount: "₹ 50000" },
];
const Submission = [
{ receipt: "Required for all transaction", natureofreceipt: "Printed" },
];
const departmentBudget = [
{ name: "Reethik thota", amt: "₹ 25000" },
{ name: "Pooja patade", amt: "₹ 25000 " },
];
const approvers1 = [
{ name: "Reethik thota", role: "Bill approver" },
{ name: "Reethik thota", role: "Bill approver" },
];
const approvers2 = [
{ name: "Reethik thota", role: "Bill approver" },
{ name: "Reethik thota", role: "Bill approver" },
];
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 = [
"Sr. No",
"Wallet Name",
"Created by",
"Wallet amount",
"Date & time",
"Action",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
walletProgram.map((item) => console.log(item));
const extractedArray = useMemo(() => {
return walletProgram.map((item) => ({
"Sr. No": <Text fontSize="xs">{item?.id}</Text>,
"Wallet Name": (
<Box display="flex" flexDirection="row" alignItems="center" gap={1}>
<Image
h="23px"
src={item.walletName[0]?.icon}
alt={item.walletName[0]?.icon}
/>
{item?.walletName[0]?.name}
</Box>
),
"Wallet type": item?.WalletType,
Department: item?.department,
Status: (
<Tag
size="sm"
borderRadius="full"
bgColor={
item?.status === "Active"
? "#00A43814"
: item?.status === "Inactive"
? "#C33FAD21"
: "#E0BC0114"
}
color={
item?.status === "Active"
? "#00A438"
: item?.status === "Inactive"
? "#C33FAD"
: "#E0BC01"
}
p={1}
px={3}
>
<TagLabel>{item?.status}</TagLabel>
</Tag>
),
"Wallet amount": item?.WalletAmount,
"Date & time": item?.CreatedOn,
"Created by": (
<HStack>
<Image
borderRadius="full"
boxSize="40px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Pooja Shah
</Text>
</HStack>
),
Action: (
<Button
_hover={{ color: "gray.900", bg: "gray.300" }}
transition={"0.3s"}
size={"xs"}
bg={"#6311CB"}
py={1}
fontWeight={400}
px={3}
color="#fff"
onClick={onOpen}
>
View
</Button>
),
}));
}, [walletProgram]);
return (
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<InputGroup width={300} size="sm" ml={5}>
<InputLeftElement pointerEvents="none">
<SearchIcon color="gray.300" />
</InputLeftElement>
<Input
type="search"
placeholder="Type to search..."
rounded="md"
focusBorderColor="#3725EA"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</InputGroup>
<Box>
<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>
</Box>
</Box>
<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>
<Box>
{/* <Link to={"#"} style={{ marginRight: "8px" }}>
<SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/>
</Link> */}
<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>
</HStack>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
<Modal
onClose={onClose}
finalFocusRef={btnRef}
isOpen={isOpen}
scrollBehavior={scrollBehavior}
>
<ModalOverlay />
<ModalContent>
<ModalHeader px={4} pt={4}>
<Text fontSize="small" fontWeight={600}>
Wallet approval request
</Text>
</ModalHeader>
<ModalCloseButton />
<ModalBody
p={0}
bgColor="#F3F3F9"
gap={2}
display="flex"
flexDirection="column"
>
<RequestModal />
</ModalBody>
<ModalFooter>
<HStack alignItems="center">
<Button
bgColor="#F0F0F0"
color="#202020"
w="200px"
fontSize="small"
onClick={onApproveOpen}
h="44px"
>
Close
</Button>
<Button
bgColor="#6311CB"
color="#FFFFFF"
w="200px"
ontSize="small"
h="44px"
_hover={{
bgColor: "#6311CB",
color: "#FFFFFF",
}}
>
Approve
</Button>
</HStack>
</ModalFooter>
</ModalContent>
</Modal>
<Modal
isCentered
onClose={onApproveClose}
isOpen={isApproveOpen}
motionPreset="slideInBottom"
>
<ModalOverlay />
<ModalContent>
{/* <ModalHeader>Modal Title</ModalHeader> */}
{/* <ModalCloseButton /> */}
<ModalBody>
{/* <Lorem count={2} /> */}
<VStack alignItems="flex-start">
<Text
as="span"
fontSize="medium"
fontWeight={600}
color="#101828"
>
Reason for wallet rejection
</Text>
<Text as="p" fontWeight={500} fontSize="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
consectetur adipiscing elit.
</Text>
<Textarea />
</VStack>
</ModalBody>
<ModalFooter>
<Button
bgColor="#F0F0F0"
color="#344054"
fontSize="small"
fontWeight={600}
mr={3}
onClick={handleCloseBothModals}
>
Cancel
</Button>
<Button
bgColor="#6311CB"
color="#ffff"
_hover={{ bgColor: "#6311CB", color: "#ffff" }}
variant="ghost"
>
submit
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Box>
);
};
export default WalletProgram;

156
src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx
View File

@@ -1,156 +0,0 @@
import React, { useState } from 'react';
import {
Box, Text, Input, Select, Stack,
InputGroup,
InputLeftElement,
HStack,
Divider,
Tag,
} from "@chakra-ui/react";
import { MdCurrencyRupee } from "react-icons/md";
import { HiOutlineExclamationCircle } from "react-icons/hi2";
import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
const BenifitStepOne = () => {
const transactionRules = [
{
ruleText: "Either of them",
tags: ["Food", "Fuel"]
},
{
ruleText: "None of them",
tags: ["Electronics", "Clothing"]
}
];
return (
<Box >
{/* Your form fields */}
<Stack spacing={4}>
<Box>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Create wallet policy</Text>
</Box>
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Wallet name</Text>
<Box bg={"#f7f3fc"} p={2} rounded={"md"}>
<Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>Food</Text>
</Box>
</Box>
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Description</Text>
<Box bg={"#f7f3fc"} p={2} rounded={"md"}>
<Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
</Text>
</Box>
</Box>
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={2}>Transaction limit</Text>
<Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Total amount</Text>
<InputGroup>
<InputLeftElement pointerEvents='none'>
<MdCurrencyRupee color='#636F83' size={12} />
</InputLeftElement>
<Input type='tel' />
</InputGroup>
</Box>
<Divider color={"#f6f1fc"} />
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={2}>Grades & transaction limit</Text>
<Stack direction="row" spacing={4}>
<Box>
<Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Grade/level</Text>
<Input />
</Box>
<Box>
<Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Amount</Text>
<InputGroup>
<InputLeftElement pointerEvents='none'>
<MdCurrencyRupee color='#636F83' size={12} />
</InputLeftElement>
<Input />
</InputGroup>
</Box>
</Stack>
</Box>
<Divider color={"#f6f1fc"} />
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select wallet type</Text>
<Select placeholder="Select wallet type" fontSize={"sm"} fontWeight={500}>
<option value="prepaid">Prepaid</option>
</Select>
</Box>
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select transaction type</Text>
<Select placeholder="Select transaction type" fontSize={"sm"} fontWeight={500}>
<option value="ecommerce">Ecommerce</option>
</Select>
</Box>
<Divider color={"#f6f1fc"} />
<Box>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={3}>Merchant transaction rule</Text>
{transactionRules.map((rule, index) => (
<Stack key={index} direction="row" spacing={4} mb={4}>
{/* Transaction rule: Dynamic content */}
<Box w={40}>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Transaction rule</Text>
<HStack spacing={2} border={"1px solid #D0D5DD"} rounded={"md"} p={2}>
<Text fontSize="12px" fontWeight="500" color={"#6B6B6B"} mb={0}>
{rule.ruleText} {/* Dynamic text from the rule */}
</Text>
<HiOutlineExclamationCircle color='#3725EA' />
</HStack>
</Box>
{/* Dynamic Tags */}
<Box flex={1}>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Merchant category</Text>
<HStack spacing={2} border={"1px solid #D0D5DD"} p={2} rounded={"md"}>
{rule.tags.map((tag, tagIndex) => (
<Tag key={tagIndex} size='sm' variant='solid' bg={"#efeefe"} color={"#3725EA"} fontWeight={500}>
{tag}
</Tag>
))}
</HStack>
</Box>
</Stack>
))}
</Box>
<Divider color={"#f6f1fc"} />
<Box>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={3}>Set transaction limit</Text>
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Set maximum limit</Text>
<RupeeSlider />
</Box>
<HStack bg={"#efeefe"} p={2} rounded={"md"} border={"1px solid #b4adf7"} mt={6}>
<Text color={"#676D76"} fontSize={"xs"} mb={0} fontWeight={500}>Maximum limit -</Text>
<Text color={"#3725EA"} fontSize={"sm"} mb={0} fontWeight={500}>₹ 50,000</Text>
</HStack>
<Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
<Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set daily limit</Text>
<RupeeSlider />
</Box>
<Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
<Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set weekly limit</Text>
<RupeeSlider />
</Box>
<Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
<Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set monthly limit</Text>
<RupeeSlider />
</Box>
</Box>
</Stack>
</Box>
)
}
export default BenifitStepOne

88
src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx
View File

@@ -1,88 +0,0 @@
import React, { useState } from 'react';
import {
Box, Text, Input, Select, Stack,
InputGroup,
InputLeftElement,
HStack,
Divider,
Radio,
RadioGroup,
} from "@chakra-ui/react";
import { MdCurrencyRupee } from "react-icons/md";
import { HiOutlineExclamationCircle } from "react-icons/hi2";
import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
const BenifitStepThree = () => {
return (
<Box >
{/* Your form fields */}
<Stack spacing={4}>
<Box>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Create submission policy</Text>
</Box>
<Box>
<Box>
<Text fontSize={"sm"} fontWeight={500} mb={3}>
1. Requirement of receipt
</Text>
<RadioGroup defaultValue='2'>
<Stack>
<Radio size='md' name='1' colorScheme='purple' value='1'>
<Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Required</Text>
</Radio>
<Radio size='md' name='1' colorScheme='purple' value='2'>
<Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}> Not required</Text>
</Radio>
</Stack>
</RadioGroup>
</Box>
<Box mt={4}>
<Text fontSize={"xs"} color={"#535963"} fontWeight={500} mb={2}>
Required for
</Text>
<RadioGroup defaultValue='2'>
<Stack>
<Radio size='md' name='1' colorScheme='purple' value='1'>
<Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>All transaction</Text>
</Radio>
<HStack>
<Radio size='md' name='1' colorScheme='purple' value='2'>
<Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Transaction above</Text>
</Radio>
<InputGroup w={60} >
<InputLeftElement pointerEvents='none'>
<MdCurrencyRupee color='#636F83' size={12} />
</InputLeftElement>
<Input border={"1px solid #8a4dd8"} />
</InputGroup>
</HStack>
</Stack>
</RadioGroup>
</Box>
</Box>
<Box>
<Box>
<Text fontSize={"sm"} fontWeight={500} mb={3}>
2. what nature of receipt/memo
</Text>
<RadioGroup defaultValue='3'>
<Stack>
<Radio size='md' name='1' colorScheme='purple' value='1'>
<Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Printed</Text>
</Radio>
<Radio size='md' name='1' colorScheme='purple' value='2'>
<Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Hand written</Text>
</Radio>
<Radio size='md' name='1' colorScheme='purple' value='3'>
<Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Both</Text>
</Radio>
</Stack>
</RadioGroup>
</Box>
</Box>
</Stack>
</Box>
)
}
export default BenifitStepThree

57
src/Pages/OptiFiiExpense/wallet/BenifitStepTwo.jsx
View File

@@ -1,57 +0,0 @@
import React, { useState } from 'react';
import {
Box, Text, Input, Select, Stack,
InputGroup,
InputLeftElement,
HStack,
Divider,
} from "@chakra-ui/react";
import { MdCurrencyRupee } from "react-icons/md";
import { HiOutlineExclamationCircle } from "react-icons/hi2";
import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
const BenifitStepTwo = () => {
return (
<Box >
{/* Your form fields */}
<Stack spacing={4}>
<Box>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={1}>Create approval policy</Text>
<Text fontSize="12px" fontWeight="500" color={"#606060"} mb={0}>Add up to 5 policy per approver flow </Text>
</Box>
{/* <Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Description</Text>
<Box bg={"#f7f3fc"} p={2} rounded={"md"}>
<Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
</Text>
</Box>
</Box> */}
{/*
<Box>
<Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select transaction type</Text>
<Select placeholder="Select transaction type" fontSize={"sm"} fontWeight={500}>
<option value="ecommerce">Ecommerce</option>
</Select>
</Box>
<Divider color={"#f6f1fc"} /> */}
<Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
<Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set amount limit</Text>
<RupeeSlider />
</Box>
</Stack>
</Box>
)
}
export default BenifitStepTwo

170
src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
View File

@@ -1,170 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import {
Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
HStack,
Divider,
Button
} from "@chakra-ui/react";
import {
Step,
StepIndicator,
StepSeparator,
StepTitle,
Stepper,
} from '@chakra-ui/react';
import { IoCheckmark } from "react-icons/io5";
import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
import BenifitStepOne from './BenifitStepOne';
import BenifitStepTwo from './BenifitStepTwo';
import BenifitStepThree from './BenifitStepThree';
const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
// Define steps
const steps = [
{ title: 'Wallet policy' },
{ title: 'Approval policy' },
{ title: 'Submission policy' },
{ title: 'Define budget' },
];
// Use useState to control the active step
const [activeStep, setActiveStep] = useState(0);
const stepRefs = useRef([]); // Create refs for each step
const nextStep = () => {
if (activeStep < steps.length - 1) {
setActiveStep(activeStep + 1);
}
};
const prevStep = () => {
if (activeStep > 0) {
setActiveStep(activeStep - 1);
}
};
return (
<Box>
{/* Modal component */}
<Modal isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent maxW={"800px"}>
<ModalHeader>Create Benefit Wallet</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* Stepper Component with 130% width, custom scrollbar and horizontal scroll */}
<Box pb={4}
overflowX="auto"
sx={{
'&::-webkit-scrollbar': {
height: '4px',
},
'&::-webkit-scrollbar-thumb': {
background: '#3725EA', // Custom scrollbar thumb color
borderRadius: '10px',
},
'&::-webkit-scrollbar-track': {
background: '#e0e0e0', // Custom scrollbar track color
},
}}
>
<Box>
<Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator w={6} h={6}>
<Box
borderRadius="full"
bg={index < activeStep ? '#3725EA' : (index === activeStep ? '#3725EA' : 'gray.300')}
color={index < activeStep || index === activeStep ? 'white' : 'gray.500'}
w={4}
h={4}
display="flex"
alignItems="center"
justifyContent="center"
>
{index < activeStep ? (
<IoCheckmark />
) : (
<Text mb={0} fontSize={"sm"}>{index + 1}</Text>
)}
</Box>
</StepIndicator>
<Box flexShrink="0" ml={2}>
<StepTitle mb={0} fontSize="sm" >
<Text
mb={0}
fontSize="sm"
fontWeight={500}
color={index <= activeStep ? '#3725EA' : 'gray.500'}
>
{step.title}
</Text>
</StepTitle>
</Box>
{index !== steps.length - 1 && (
<StepSeparator borderColor="gray.300" />
)}
</Step>
))}
</Stepper>
</Box>
</Box>
<Divider color={"#f6f1fc"} />
{/* Conditionally render form fields based on active step */}
<Box mt={6}>
<Stack spacing={4}>
{/* Step 1 Content: Create Wallet Policy */}
{activeStep === 0 && (
<BenifitStepOne />
)}
{/* Step 2 Content: Approval Policy */}
{activeStep === 1 && (
<BenifitStepTwo />
)}
{/* Step 3 Content: Submission Policy */}
{activeStep === 2 && (
<BenifitStepThree />
)}
{/* Step 4 Content: Define Budget */}
{activeStep === 3 && (
<Box>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Define Budget</Text>
<RupeeSlider />
</Box>
)}
{/* Stepper Controls */}
<HStack justifyContent="center" my={4}>
<Button
onClick={prevStep}
isDisabled={activeStep === 0}
fontSize={"sm"}
h={8}
>
Previous
</Button>
<PrimaryButton title={"Save & Proceed"}
onClick={nextStep}
isDisabled={activeStep === steps.length - 1}
/>
</HStack>
</Stack>
</Box>
</ModalBody>
</ModalContent>
</Modal>
</Box>
);
};
export default CreateBenefitWalletModal;

194
src/Pages/OptiFiiExpense/wallet/DefineBudget.jsx
View File

@@ -1,194 +0,0 @@
import {
Box,
FormLabel,
VStack,
Input,
InputGroup,
InputLeftElement,
Radio,
RadioGroup,
Text,
HStack,
Select,
Checkbox,
Button,
StackDivider,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { MdCurrencyRupee } from "react-icons/md";
import { CiCircleInfo } from "react-icons/ci";
import { CiSettings } from "react-icons/ci";
import { IoMdArrowDropup } from "react-icons/io";
import RupeeSlider from "../../../Components/RupeeSlider/RupeeSlider";
const DefineBudget = () => {
const [selectedDepartment, setSelectedDepartment] = useState("Finance");
const [budget, setBudget] = useState("");
const employees = [
{ name: "Sr. accountant", amount: "₹ 25,000", percentage: "50%" },
{ name: "Reethik thota", amount: "₹ 25,000", percentage: "50%" },
];
const departments = ["Sales", "Design", "Development", "IT", "Management"];
return (
<Box
display="flex"
w="100%"
flexDirection="column"
alignItems="flex-start"
gap={4}
>
<Text fontSize="sm" fontWeight="600" color={"#383838"}>
Define budget for department
</Text>
<Text fontSize="sm" fontWeight="600" color={"#3F4754"}>
Departments
</Text>
<VStack bgColor="#6311CB08" alignItems="flex-start" spacing={4} w="100%">
{/* Department Radio Selection */}
<RadioGroup value={selectedDepartment} onChange={setSelectedDepartment}>
<VStack alignItems="flex-start">
<Radio value="Finance" colorScheme="purple">
Finance
</Radio>
</VStack>
</RadioGroup>
<Box borderBottom="0.5px solid #3725EA3D" w="100%" />
<HStack justifyContent="space-between" w="100%" alignItems="center">
{/* Budget Input */}
<VStack alignItems="flex-start" w="50%">
<FormLabel
color="#3F4754"
fontSize="small"
fontWeight={600}
htmlFor="budget-input"
>
Budget for this department
</FormLabel>
<InputGroup w="100%">
<InputLeftElement pointerEvents="none">
<MdCurrencyRupee color="#636F83" size={16} />
</InputLeftElement>
<Input
id="budget-input"
type="tel"
value={budget}
onChange={(e) => setBudget(e.target.value)}
/>
</InputGroup>
</VStack>
{/* Frequency Selection */}
<VStack alignItems="flex-start" w="50%">
<FormLabel
color="#3F4754"
fontSize="small"
fontWeight={600}
htmlFor="frequency-select"
>
Frequency
</FormLabel>
<Select id="frequency-select" placeholder="Select frequency">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Select>
</VStack>
</HStack>
<VStack alignItems="flex-start">
<HStack alignItems="center">
<Checkbox colorScheme="purple">
<Text as="span" fontSize="small">
Checkbox
</Text>
</Checkbox>
<CiCircleInfo fontSize="medium" color="purple" />
</HStack>
<HStack>
<CiSettings fontSize="medium" color="purple" />
<Text as="span" fontSize="small">
Advance Setup
</Text>
<Text fontSize="small" as="span">
{"( Set budget per employee ) "}
</Text>
<IoMdArrowDropup fontSize="small" />
</HStack>
</VStack>
{/* Render employee list with map */}
<VStack bgColor="#FFFFFF" p={2} w={"100%"} alignItems="flex-start">
{employees.map((employee, index) => (
<HStack key={index} alignItems="center">
<Checkbox colorScheme="purple">
<Text as="span" fontSize="small">
{employee.name}
</Text>
</Checkbox>
<HStack
bgColor="#3725EA14"
borderRadius="5px"
h="31px"
pt={4}
px={2}
alignItems="center"
justifyContent="center"
spacing={2}
>
<Text
color="#3725EA"
fontSize="small"
fontWeight={500}
aria-label="Amount"
>
{employee.amount}
</Text>
<Text
color="#747474"
fontSize="small"
fontWeight={500}
aria-label="Percentage"
>
{employee.percentage}
</Text>
</HStack>
</HStack>
))}
</VStack>
<HStack justifyContent="space-between" w="100%">
<VStack spacing={4} align="start" mb={6}>
<Checkbox>Manager</Checkbox>
<Checkbox>Manager</Checkbox>
</VStack>
<Button colorScheme="purple" size="md" w="81px">
Save
</Button>
</HStack>
{/* Render department checkboxes with map */}
<VStack
w="100%"
spacing={4}
align="start"
mt={6}
divider={<StackDivider borderColor="gray.200" />}
>
{departments.map((department, index) => (
<Checkbox key={index}>{department}</Checkbox>
))}
</VStack>
</VStack>
</Box>
);
};
export default DefineBudget;

249
src/Pages/OptiFiiExpense/wallet/RequestModal.jsx
View File

@@ -1,249 +0,0 @@
import React from "react";
import {
Box,
Button,
Divider,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Radio,
Tag,
TagLabel,
Text,
useDisclosure,
VStack,
} from "@chakra-ui/react";
// import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import {
Tabs,
TabList,
Tab,
TabIndicator,
TabPanels,
TabPanel,
} from "@chakra-ui/react";
import Sales from "./Sales";
const RequestModal = () => {
const transactionLimits = [
{ period: "Daily", amount: "₹ 5000" },
{ period: "Weekly", amount: "₹ 25000" },
{ period: "Monthly", amount: "₹ 50000" },
];
const Submission = [
{ receipt: "Required for all transaction", natureofreceipt: "Printed" },
];
const departmentBudget = [
{ name: "Reethik thota", amt: "₹ 25000" },
{ name: "Pooja patade", amt: "₹ 25000 " },
];
const approvers1 = [
{ name: "Reethik thota", role: "Bill approver" },
{ name: "Reethik thota", role: "Bill approver" },
];
const approvers2 = [
{ name: "Reethik thota", role: "Bill approver" },
{ name: "Reethik thota", role: "Bill approver" },
];
return (
<Box>
<VStack w="100%" bgColor="#FFFFFF" p={4} alignItems="flex-start" gap={3}>
<Text as="span" color="#3725EA" fontWeight={500} fontSize="medium">
Food wallet policy
</Text>
<Text as="span" color="#667085" fontSize="xs" fontWeight={400}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa
mi.
</Text>
<HStack w="100%" justifyContent="space-between">
<HStack>
<Text as="span" color="#565D6C" fontSize="small" fontWeight={500}>
Wallet type
</Text>
<Text as="span" fontWeight={600} color="#121212" fontSize="small">
Prepaid
</Text>
</HStack>
<HStack>
<Text as="span" color="#565D6C" fontSize="small" fontWeight={500}>
Transaction type
</Text>
<Text as="span" fontWeight={600} color="#121212" fontSize="small">
ATM, Contactless
</Text>
</HStack>
</HStack>
</VStack>
<VStack w="100%" bgColor="#FFFFFF" p={4} alignItems="flex-start">
<Text as="span" color="#1A1A1A" fontWeight={600} fontSize="small">
Transaction limit
</Text>
<HStack w="100%" alignItems="flex-start" gap={3}>
{transactionLimits.map((limit, index) => (
<HStack key={index}>
<Text as="span" color="#565D6C" fontSize="small" fontWeight={500}>
{limit.period}
</Text>
<Text as="span" fontWeight={600} color="#121212" fontSize="small">
{limit.amount}
</Text>
</HStack>
))}
</HStack>
</VStack>
<VStack p={4} bgColor="#FFFFFF" alignItems="flex-start">
<Text color="#1A1A1A" fontSize="small" fontWeight={600}>
Approver flow 1
</Text>
<HStack>
<Text fontSize="small" color="#565D6C">
Amount
</Text>
<Text fontSize="small" fontWeight={600} color="#565D6C">
₹ 500
</Text>
</HStack>
<Tabs variant="soft-rounded" colorScheme="purple">
<HStack>
<Text as="span" fontSize="small">
Department
</Text>
<TabList>
<Tab bgColor="#EFE3FF">Sales</Tab>
<Tab bgColor="#EFE3FF">Design</Tab>
<Tab bgColor="#EFE3FF">Finance</Tab>
</TabList>
</HStack>
<TabPanels>
<TabPanel>
<Sales />
</TabPanel>
<TabPanel>
<Text>Design</Text>
</TabPanel>
<TabPanel>
<Text>Finance</Text>
</TabPanel>
</TabPanels>
</Tabs>
</VStack>
<VStack p={4} bgColor="#FFFFFF" alignItems="flex-start">
<Text color="#1A1A1A" fontSize="small" fontWeight={600}>
Submission policy
</Text>
{Submission.map((val) => (
<HStack
key={val.receipt}
w="100%"
justifyContent="space-between"
alignItems="flex-start"
>
<HStack bgColor="#FFFFFF">
<Text as="span" fontSize="small" fontWeight={400}>
Receipt
</Text>
<Text fontSize="small" fontWeight={600} color="#121212" as="span">
{val.receipt}
</Text>
</HStack>
<HStack bgColor="#FFFFFF">
<Text as="span" fontSize="small" fontWeight={400}>
Nature of receipt
</Text>
<Text fontSize="small" fontWeight={600} color="#121212" as="span">
{val.natureofreceipt}
</Text>
</HStack>
</HStack>
))}
</VStack>
<VStack p={4} bgColor="#FFFFFF" gap={4} alignItems="flex-start">
<Text fontSize="small" fontWeight={600}>
Department budget
</Text>
<HStack>
<Text as="span" color="#565D6C" fontWeight={500} fontSize="small">
Sales
</Text>
<Text as="span" color="#121212" fontWeight={600} fontSize="small">
₹ 50000
</Text>
</HStack>
<HStack alignItems="flex-start">
<Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
Sr. accountant
</Text>
<VStack>
{departmentBudget.map((approver, index) => (
<HStack key={index} alignItems="flex-start">
<Text
as="span"
fontSize="small"
fontWeight={700}
color="#1E1E1E"
>
{approver.name}
</Text>
<Text as="span" fontSize="small" color="#565D6C">
{"( " + approver.amt + " )"}
</Text>
</HStack>
))}
</VStack>
</HStack>{" "}
<HStack>
<Text as="span" color="#565D6C" fontWeight={500} fontSize="small">
Design
</Text>
<Text as="span" color="#121212" fontWeight={600} fontSize="small">
₹ 50000
</Text>
</HStack>
<HStack alignItems="flex-start">
<Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
Sr. accountant
</Text>
<VStack>
{departmentBudget.map((approver, index) => (
<HStack key={index} alignItems="flex-start">
<Text
as="span"
fontSize="small"
fontWeight={700}
color="#1E1E1E"
>
{approver.name}
</Text>
<Text as="span" fontSize="small" color="#565D6C">
{"( " + approver.amt + " )"}
</Text>
</HStack>
))}
</VStack>
</HStack>
</VStack>
</Box>
);
};
export default RequestModal;

63
src/Pages/OptiFiiExpense/wallet/Sales.jsx
View File

@@ -1,63 +0,0 @@
import { HStack, Text, VStack } from "@chakra-ui/react";
import React from "react";
const Sales = () => {
const approvers1 = [
{ name: "Reethik thota", role: "Bill approver" },
{ name: "Reethik thota", role: "Bill approver" },
];
const approvers2 = [
{ name: "Reethik thota", role: "Bill approver" },
{ name: "Reethik thota", role: "Bill approver" },
];
const transactionLimits = [
{ period: "Daily", amount: "₹ 5000" },
{ period: "Weekly", amount: "₹ 25000" },
{ period: "Monthly", amount: "₹ 50000" },
];
return (
<VStack alignItems="flex-start" gap={8}>
<HStack alignItems="flex-start">
<Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
Approver level 1 -
</Text>
<VStack>
{approvers1.map((approver, index) => (
<HStack key={index} alignItems="flex-start">
<Text as="span" fontSize="small" fontWeight={700} color="#1E1E1E">
{approver.name}
</Text>
<Text as="span" fontSize="small" color="#565D6C">
{"( " + approver.role + " )"}
</Text>
</HStack>
))}
</VStack>
</HStack>
<HStack alignItems="flex-start">
<Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
Approver level 1 -
</Text>
<VStack>
{approvers2.map((approver, index) => (
<HStack key={index} alignItems="flex-start">
<Text as="span" fontSize="small" fontWeight={700} color="#1E1E1E">
{approver.name}
</Text>
<Text as="span" fontSize="small" color="#565D6C">
{"( " + approver.role + " )"}
</Text>
</HStack>
))}
</VStack>
</HStack>
</VStack>
);
};
export default Sales;

124
src/Pages/OptiFiiExpense/wallet/SubmissionPolicy.jsx
View File

@@ -1,124 +0,0 @@
import {
Box,
HStack,
Input,
InputGroup,
InputLeftElement,
Stack,
Text,
VStack,
} from "@chakra-ui/react";
import { Radio, RadioGroup } from "@chakra-ui/react";
import React, { useState } from "react";
import { MdCurrencyRupee } from "react-icons/md";
const SubmissionPolicy = () => {
const [receiptRequirement, setReceiptRequirement] = useState("1");
const [transactionRequirement, setTransactionRequirement] = useState("1");
const [nature, setNature] = useState("1");
const receiptOptions = [
{ value: "1", label: "Required" },
{ value: "2", label: "Not required" },
];
const transactionOptions = [
{ value: "1", label: "All transactions" },
{ value: "2", label: "Transactions above" },
];
const natureOptions = [
{ value: "1", label: "Printed" },
{ value: "2", label: "Hand written" },
{ value: "3", label: "Both" },
];
return (
<Box p={0} display="flex" flexDirection="column" gap={4}>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>
Create submission policy
</Text>
<VStack gap={4} alignItems="flex-start">
<HStack mt={5}>
<Text as="span" color="#383838" fontSize="small" fontWeight={600}>
1.{" "}
</Text>
<Text as="span" color="#383838" fontSize="small" fontWeight={600}>
Requirement of receipt
</Text>
</HStack>
<RadioGroup
colorScheme="purple"
onChange={setReceiptRequirement}
value={receiptRequirement}
>
<Stack display="flex" flexDirection="column">
{receiptOptions.map((option) => (
<Radio key={option.value} value={option.value}>
{option.label}
</Radio>
))}
</Stack>
</RadioGroup>
</VStack>
<VStack gap={4} alignItems="flex-start">
<Text as="span" color="#535963" fontSize="small" fontWeight={400}>
Required for
</Text>
<RadioGroup
colorScheme="purple"
onChange={setTransactionRequirement}
value={transactionRequirement}
>
<Stack display="flex" flexDirection="column">
{transactionOptions.map((option) =>
option.value === "2" ? (
<HStack key={option.value} justifyContent="space-between" w="100%" alignItems="center">
<Radio w="50%" value={option.value}>
{option.label}
</Radio>
<InputGroup w="70%">
<InputLeftElement pointerEvents="none">
<MdCurrencyRupee color="#636F83" size={12} />
</InputLeftElement>
<Input type="tel" />
</InputGroup>
</HStack>
) : (
<Radio key={option.value} value={option.value}>
{option.label}
</Radio>
)
)}
</Stack>
</RadioGroup>
</VStack>
{/* Nature of Receipt/Memo */}
<VStack gap={4} alignItems="flex-start">
<HStack mt={5}>
<Text as="span" color="#383838" fontSize="small" fontWeight={600}>
2.{" "}
</Text>
<Text as="span" color="#383838" fontSize="small" fontWeight={600}>
What nature of receipt/memo
</Text>
</HStack>
<RadioGroup colorScheme="purple" onChange={setNature} value={nature}>
<Stack display="flex" flexDirection="column">
{natureOptions.map((option) => (
<Radio key={option.value} value={option.value}>
{option.label}
</Radio>
))}
</Stack>
</RadioGroup>
</VStack>
</Box>
);
};
export default SubmissionPolicy;

174
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx
View File

@@ -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 (
<Box p={4}>
<Box>
<RadioGroup
value={String(step)}
onChange={(val) => setStep(Number(val))}
>
<Flex p={4} justifyContent="space-between" alignItems="center">
{steps.map((item, index) => (
<VStack key={index} spacing={2}>
<Radio value={String(index + 1)} colorScheme="purple" size="lg">
{/* {index + 1} */}
</Radio>
<Text fontSize="small" color="#9C9C9C" fontWeight={400}>
STEP {index + 1}
</Text>
<Text color="#000000" fontWeight={600} fontSize="small">
{item.label}
</Text>
<Text
fontSize="sm"
color={index + 1 === step ? "blue.500" : "gray.500"}
>
{index + 1 === step ? "In Progress" : "Pending"}
</Text>
</VStack>
))}
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: <DigitalTable />, // Component must be rendered properly
label: "Step 1: Digital Table", // Label for clarity
description: "Pending",
},
{
component: <Box>Select employee component here</Box>, // 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 (
<Box overflowX="scroll" p={4}>
<Box>
<RadioGroup
value={String(step)}
onChange={(val) => setStep(Number(val))}
>
<Flex p={4} justifyContent="space-between" alignItems="center">
{steps.map((item, index) => (
<VStack key={index} spacing={2}>
<Radio value={String(index + 1)} colorScheme="purple" size="lg" />
<Text fontSize="small" color="#9C9C9C" fontWeight={400}>
STEP {index + 1}
</Text>
<Text color="#000000" fontWeight={600} fontSize="small">
{item.label}
</Text>
<Text
fontSize="sm"
color={index + 1 === step ? "blue.500" : "gray.500"}
>
{index + 1 === step ? "In Progress" : "Pending"}
</Text>
</VStack>
))}
</Flex>
</RadioGroup>
{/* Render the appropriate component */}
<Box mt={4}>{steps[currentStep].component}</Box>
<Flex justifyContent="space-between" mt={8}>
<Button
onClick={handlePrev}
disabled={isFirstStep}
colorScheme="purple"
variant="outline"
>
Previous
</Button>
<Button
onClick={handleNext}
disabled={isLastStep}
colorScheme="purple"
>
Next
</Button>
</Flex>
</RadioGroup>
<Box mt={4}>{steps[currentStep].label}</Box>
<Flex justifyContent="space-between" mt={8}>
<Button
onClick={handlePrev}
disabled={isFirstStep}
colorScheme="purple"
variant="outline"
>
Previous
</Button>
<Button
onClick={handleNext}
disabled={isLastStep}
colorScheme="purple"
>
Next
</Button>
</Flex>
</Box>
</Box>
</Box>
);
};
export default ApplyForDigitalCard;
);
};
export default ApplyForDigitalCard;

224
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx
View File

@@ -1,4 +1,4 @@
import React, { useContext, useState } from "react";
import React, { useState } from "react";
import {
Box,
Button,
@@ -7,189 +7,99 @@ import {
RadioGroup,
Text,
VStack,
Divider,
useBreakpointValue,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import SelectCard from "./SelectCard";
import DigiTable from "./DigiTable";
import DigiTable from "../DigiTable";
import WhereToShare from "./WhereToShare";
import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
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 { useNavigate } from "react-router-dom";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
const Stepper = () => {
const [step, setStep] = useState(1);
const { useForm } = useContext(GlobalStateContext);
const {
selectedCardIndex,
setSelectedCardIndex,
selectionCount,
setSelectionCount,
showAnotherComponent,
setShowAnotherComponent,
hasProceeded,
setHasProceeded,
} = useContext(GlobalStateContext);
const { isOpen, onOpen, onClose } = useContext(GlobalStateContext);
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const navigate = useNavigate();
const handleNext = () => {
if (selectedCardIndex < selectedCardIndex.length) {
setStep(selectedCardIndex + 1);
}
if (selectedCardIndex !== null) {
setHasProceeded(true);
// onOpen();
} else {
alert("Please select a card before proceeding.");
}
setShowAnotherComponent(!showAnotherComponent);
};
// const handleNext = () => {
// if (selectedCardIndex !== null) {
// if (selectedCardIndex < maxSteps - 1) {
// setStep(selectedCardIndex + 1);
// }
// setHasProceeded(true);
// } else {
// alert("Please select a card before proceeding.");
// }
// setShowAnotherComponent((prevState) => !prevState);
// };
const handlePrev = () => {
navigate("/optifii-gifts-dashboard/apply-for-giftcards");
};
console.log(selectedCardIndex, "Neko-chan");
const steps = [
{ component: <SelectCard />, description: "In Progress" },
{
component: (
<SelectCard
handleNext={handleNext}
/>
),
label: "Select card type",
description: "In Progress",
},
{
component: <WhereToShare handleNext={handleNext} />,
component: <WhereToShare />,
label: "Where to share?",
description: "Pending",
},
{
component: <DigiTable handleNext={handleNext} />,
component: <DigiTable />,
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 (
<Box bgColor="#F3F3F9" {...OPACITY_ON_LOAD} overflow={"scroll"} p={4}>
<Box>
<Box bgColor="#fff" maxW="100%" rounded={"md"} p={4} mb={4}>
<RadioGroup
value={String(step)}
// value={String(selectedCardIndex)}
onChange={(val) => setStep(Number(val))}
// onChange={(val) => setSelectedCardIndex(parseInt(val, 10))}
>
<Flex
justifyContent="space-between"
alignItems="center"
position="relative"
>
{steps.map((item, index) => (
<React.Fragment key={index}>
<VStack spacing={0}>
<Radio
value={String(index + 1)}
colorScheme="purple"
size="lg"
/>
<Text
fontSize="xs"
color="#9C9C9C"
fontWeight={400}
mb={0}
mt={1}
>
STEP {index + 1}
</Text>
<Text color="#000000" fontWeight={600} fontSize="sm" mb={0}>
{item.label}
</Text>
<Text
fontSize="xs"
mb={0}
fontWeight={600}
color={
index + 1 === step
? "#3725EA"
: index < step
? "green"
: "#666666"
}
>
{index + 1 === step
? "In Progress"
: index < step
? "Completed"
: "Pending"}
</Text>
</VStack>
{index < steps.length - 1 && (
<Box
flex="1"
height="1px"
mb={"60px"}
position="relative"
top="50%"
bgColor={index + 1 <= step ? "#3725EA" : "#e2e2e2"}
/>
)}
</React.Fragment>
))}
</Flex>
</RadioGroup>
</Box>
<Box bgColor="#fff" maxW="100%">
<RadioGroup
value={String(step)}
onChange={(val) => setStep(Number(val))}
>
<Flex p={4} justifyContent="space-between" alignItems="center">
{steps.map((item, index) => (
<VStack key={index} spacing={2}>
<Radio value={String(index + 1)} colorScheme="purple" size="lg">
{/* {index + 1} */}
</Radio>
<Text fontSize="small" color="#9C9C9C" fontWeight={400}>
STEP {index + 1}
</Text>
<Text color="#000000" fontWeight={600} fontSize="small">
{item.label}
</Text>
<Text
fontSize="sm"
color={index + 1 === step ? "blue.500" : "gray.500"}
>
{index + 1 === step ? "In Progress" : "Pending"}
</Text>
</VStack>
))}
</Flex>
</RadioGroup>
{/* Stepper Content */}
<Box bgColor="#fff" maxW="100%" rounded={"md"} p={4}>
<Text color="#000000" fontWeight={600} fontSize="small">
{steps[currentStep].label}
</Text>
{/* Step Component */}
<Box>{steps[currentStep].component}</Box>
<Box mt={4}>{steps[currentStep].component}</Box>
{/* Navigation Buttons */}
<Box mt={8}>
<PrimaryButton
title={" Save & Proceed"}
onClick={handleNext}
isDisabled={step === steps.length}
/>
{/* {selectedCardIndex > 0 && (
<Button mt={4} onClick={handlePrev}>
Previous
</Button>
)} */}
</Box>
</Box>
{/* Navigation Buttons */}
<Flex justifyContent="space-between" mt={8}>
<Button
onClick={handlePrev}
disabled={isFirstStep}
colorScheme="purple"
variant="outline"
>
Previous
</Button>
<Button
onClick={handleNext}
disabled={isLastStep}
colorScheme="purple"
>
Next
</Button>
</Flex>
</Box>
</Box>
);

209
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx
View File

@@ -1,209 +0,0 @@
import {
Box,
Button,
Text,
useDisclosure,
Flex,
HStack,
Menu,
MenuButton,
MenuList,
MenuItem,
Select,
Image,
} from "@chakra-ui/react";
import React, { useState } from "react";
import FileUploader from "../../../Components/FileUploader/FileUploader";
import { useRef } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DigiTable from "./DigitalTable";
import { BsFilterRight } from "react-icons/bs";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { LuListFilter } from "react-icons/lu";
import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
import SuccesIcon from "../../../assets/Modaltick.png";
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
} from "@chakra-ui/react";
const BrandVoucherTable = () => {
const [selectedValue, setSelectedValue] = useState("1");
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = useRef();
const renderContent = () => {
switch (selectedValue) {
case "1":
return <Text>Hii</Text>;
case "2":
return <Text>Heelo</Text>;
default:
return null;
}
};
return (
<Box h="100%" {...OPACITY_ON_LOAD} overflowX="scroll">
<Box
display="flex"
w="100%"
flexDirection="column"
bgColor="#FFFFFF"
alignItems="start"
rounded={"md"}
>
<Text fontSize="sm" fontWeight={600}>
Import employee
</Text>
<FileUploader />
</Box>
<HStack
bg={"#F4F4F4"}
p={2}
rounded={"md"}
mt={2}
justifyContent={"center"}
>
<Text
align="center"
color="#0F0F0F"
fontWeight={500}
fontSize="small"
mb={0}
>
Download a{" "}
<span style={{ color: "#3725EA", fontWeight: 700 }}>
sample spreadsheet
</span>{" "}
to quickly start your import
</Text>
</HStack>
{/* Divider with "OR" */}
<Flex alignItems="center" my={6}>
<Box flex="1" borderBottom="1px" borderColor="#DCDCDC" />
<Text px={4} fontSize={"sm"} fontWeight={500} color="#9C9C9C" mb={0}>
OR
</Text>
<Box flex="1" borderBottom="1px" borderColor="#DCDCDC" />
</Flex>
<Box>
<HStack w={"100%"} justifyContent={"space-between"}>
<Flex align={"center"} gap={5}>
<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>
<Flex align={"center"} gap={2}>
<Text as={"span"} fontSize={"xs"}>
Show
</Text>
<Select borderRadius={5} size={"sm"}>
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
</Select>
<Text as={"span"} fontSize={"xs"}>
entries
</Text>
</Flex>
</Flex>
<HStack>
<Menu>
<MenuButton
as={Button}
leftIcon={<LuListFilter fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Filter
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Descending</MenuItem>
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
<PrimaryButton onClick={onOpen} title={"Proceed"} px={4} />
</HStack>
</HStack>
<DigiTable />
</Box>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>
<Image src={SuccesIcon} w={"48px"} />
</ModalHeader>
<ModalBody>
<HStack>
<Text color="#A0A0A0" fontWeight={400} fontSize="small">
Order Id:
</Text>
<Text color="#3725EA" fontWeight={400} fontSize="small">
#451245
</Text>
</HStack>
<Text color="#101828" fontSize="medium" fontWeight={600}>
Your employee list has been submitted
</Text>
<Text color="#A0A0A0" fontWeight={400} fontSize="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
consectetur adipiscing elit.
</Text>
</ModalBody>
<ModalFooter>
<Button
color={"#344054"}
bgColor="#ffff"
fontSize="small"
fontWeight={600}
>
Submit new application
</Button>
<Button
bgColor="#6311CB"
color="#fff"
_hover={{ bgColor: "#6311CB" }}
fontSize="small"
onClick={onClose}
>
Check status
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Box>
);
};
export default BrandVoucherTable;

285
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx
View File

@@ -1,202 +1,87 @@
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) => ({
id: item.id,
"Emp ID": (
// <Checkbox colorScheme="purple" value="1">
<Text as={"span"} fontSize={"xs"}>
{item?.EmpID}
</Text>
// </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,
Department: item?.Department,
Designation: item?.Role,
Status: (
<Tag
my={1}
size={"sm"}
borderRadius="full"
colorScheme={
item?.status === "Active"
? "green"
: item?.status === "Inactive"
? "red"
: "gray"
}
border={`1px solid ${
item?.status === "Active"
? "green"
: item?.status === "Inactive"
? "red"
: "gray"
}`}
p={1}
px={3}
>
<TagLabel>{item?.status}</TagLabel>
</Tag>
),
Action: (
<Box>
<Menu>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<BsThreeDotsVertical />}
bg={"transparent"}
/>
<MenuList>
<MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>
Edit
</MenuItem>
<MenuItem
icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
>
Delete
</MenuItem>
<MenuItem
icon={<LuEye color="#6311CB" size={16} />}
onClick={() => navigate("/employees/view")}
>
View
</MenuItem>
</MenuList>
</Menu>
</Box>
),
}));
return (
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"}>
<Box
rounded={"xl"}
py={3}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<NormalTable
emptyMessage={`We don't have any Employees`}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
setSelectedRadio={setSelectedRadio}
selectedRadio={selectedRadio}
/>
</Box>
</Box>
);
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 <Text>Hii</Text>;
case "2":
return <Text>Heelo</Text>;
default:
return null;
}
};
export default Employees;
return (
<Box
bgColor="#F3F3F9"
h="100%"
{...OPACITY_ON_LOAD}
p={4}
overflowX="scroll"
>
<Box
display="flex"
w="100%"
flexDirection="column"
bgColor="#FFFFFF"
p={4}
alignItems="start"
rounded={"md"}
>
<Text fontSize="medium" fontWeight={600}>
Select employee
</Text>
<FileUploader />
</Box>
<Text
align="center"
mt="1rem"
color="#0F0F0F"
fontWeight={600}
fontSize="small"
>
Download a{" "}
<span style={{ color: "#3725EA", fontWeight: 700 }}>
sample spreadsheet
</span>{" "}
to quickly start your import
</Text>
<Box>
<DigiTable />
</Box>
</Box>
);
};
export default BrandVoucherTable;

26
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/MultipleAddress.jsx
View File

@@ -1,26 +0,0 @@
import { Box, FormControl, FormLabel, Input, Select, Text } from "@chakra-ui/react";
import { Grid, GridItem } from "@chakra-ui/react";
import React from "react";
import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
import { ArrowForwardIcon } from "@chakra-ui/icons";
import { MdKeyboardArrowRight } from "react-icons/md";
const MultipleAddress = () => {
return (
<Box>
<Box p={4} rounded={"md"} shadow={"md"} border={"1px dashed #000"} bg={"#f9f6fd"}>
<Text fontWeight={600} fontSize="small" mb={4}>
Awesome! Proceed to select the multiple users..
</Text>
<PrimaryButton
title={"Select Employees and Addresses"}
rightIcon={<MdKeyboardArrowRight size={16} />}
px={4}
/>
</Box>
</Box>
);
};
export default MultipleAddress;

243
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx
View File

@@ -1,67 +1,48 @@
import { Box, Button, Icon, Image, Text, VStack } from "@chakra-ui/react";
import React, { useContext, useEffect, useRef, useState } from "react";
import VanillaTilt from "vanilla-tilt";
import { Box, Button, Image, Text, VStack } from "@chakra-ui/react";
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 { IoMdCheckmark } from "react-icons/io";
import DigiTable from "./DigiTable";
import WhereToShare from "./WhereToShare";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
const SelectCard = ({ handleNext }) => {
const {
selectedCardIndex,
setSelectedCardIndex,
selectionCount,
setSelectionCount,
hasProceeded,
} = useContext(GlobalStateContext);
const cards = [
{
title: "Save More",
subtitle: "Digital Gift Card",
description:
"Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
image: mobilepng,
img: cardfooter,
link: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
},
{
title: "Save More",
subtitle: "Physical Gift Card",
description:
"Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
img: cardfooter2,
},
{
title: "Save More",
subtitle: "Insta Gift Card",
description:
"Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
img: cardfooter3,
},
];
const SelectCard = () => {
const tiltRefs = useRef([]);
const cards = [
{
title: "Save More",
subtitle: "Digital Gift Card",
description:
"Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
image: mobilepng,
img: cardfooter,
component: <WhereToShare />,
},
{
title: "Save More",
subtitle: "Physical Gift Card",
description:
"Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
img: cardfooter2,
component: <DigiTable />,
},
{
title: "Save More",
subtitle: "Insta Gift Card",
description:
"Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
img: cardfooter3,
component: <WhereToShare />,
},
];
const handleCardClick = (index) => {
setSelectedCardIndex(index);
setSelectionCount(selectionCount + 1);
};
// VanillaTilt effect
useEffect(() => {
tiltRefs.current.forEach((node) => {
if (node) {
VanillaTilt.init(node, {
max: 8,
max: 13,
speed: 700,
glare: true,
scale: 1.01,
scale: 1.05,
"max-glare": 0.5,
onEnter: () => {
node.style.zIndex = 10; // Bring to top on hover
@@ -73,7 +54,7 @@ const SelectCard = ({ handleNext }) => {
}
});
// Cleanup VanillaTilt
// Cleanup VanillaTilt instances on unmount
return () => {
tiltRefs.current.forEach((node) => {
if (node?.vanillaTilt) {
@@ -81,105 +62,85 @@ const SelectCard = ({ handleNext }) => {
}
});
};
}, []);
}, [tiltRefs]);
return (
<Box>
{hasProceeded && selectedCardIndex !== null ? (
<Box>{cards[selectedCardIndex].component}</Box>
) : (
<Box
display="flex"
justifyContent={"start"}
alignItems={"start"}
gap={6}
>
{cards.map((card, index) => (
<Box
key={index}
ref={(el) => (tiltRefs.current[index] = el)}
bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)"
color="white"
borderRadius="lg"
overflow="hidden"
width={{ base: "100%", md: "300px" }}
padding={6}
textAlign="center"
boxShadow="lg"
<Box p={4}>
<Text color="#000000" fontWeight={600} fontSize="small">
Select card type
</Text>
<Box display="flex" justifyContent="center" gap={4}>
{cards.map((card, index) => (
<Box
key={index}
ref={(el) => (tiltRefs.current[index] = el)}
bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)"
color="white"
borderRadius="lg"
overflow="hidden"
width={{ base: "100%", md: "300px" }}
padding={6}
textAlign="center"
boxShadow="lg"
position="relative"
>
<VStack
h="373px"
alignItems="flex-start"
spacing={4}
position="relative"
>
<VStack
h="373px"
alignItems="flex-start"
spacing={0}
position="relative"
<Button
p={4}
bgColor="transparent"
border="1px solid #fff"
color="#fff"
fontSize="small"
_hover={{ bgColor: "transparent", color: "white" }}
>
<Button
h={8}
px={6}
bgColor={selectedCardIndex === index ? "#fff" : "transparent"}
color={selectedCardIndex === index ? "purple.500" : "#fff"}
border="1px solid #fff"
fontSize="small"
fontWeight={500}
_hover={{ bgColor: "transparent", color: "white" }}
onClick={() => handleCardClick(index)}
>
{selectedCardIndex === index ? (
<>
<Icon as={IoMdCheckmark} mr={2} />
Selected
</>
) : (
"Select"
)}
</Button>
Select
</Button>
<Text as="span" fontSize="lg" fontWeight={400} mb={0} mt={4}>
{card.title}
</Text>
<Text as="span" fontSize="large">
{card.title}
</Text>
<Text as="span" fontSize="lg" fontWeight={500} mb={2}>
{card.subtitle}
</Text>
<Text as="span" fontSize="large">
{card.subtitle}
</Text>
<Text as="span" fontSize="xs" textAlign="start">
{card.description}
</Text>
<Text as="span" fontSize="small" textAlign="start">
{card.description}
</Text>
{card.image && (
<Image
src={card.image}
h="190px"
objectFit="cover"
position="absolute"
bottom="-1.5rem"
right="-1.5rem"
borderRadius="md"
/>
)}
{card.image && (
<Image
src={card.image}
h="190px"
objectFit="cover"
position="absolute"
bottom="-1.5rem"
right="-1.5rem"
borderRadius="md"
/>
)}
{card.img && (
<Image
src={card.img}
h="111px"
objectFit="cover"
position="absolute"
bottom="-1.5rem"
left="-1.5rem"
borderRadius="md"
/>
)}
</VStack>
</Box>
))}
</Box>
)}
{/* <Box mt={8}>
<Button colorScheme="purple" onClick={handleProceed}>
Save and Proceed
</Button>
</Box> */}
{card.img && (
<Image
src={card.img}
h="111px"
objectFit="cover"
position="absolute"
bottom="-1.5rem"
left="-1.5rem"
borderRadius="md"
/>
)}
</VStack>
</Box>
))}
</Box>
</Box>
);
};

156
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx
View File

@@ -1,144 +1,44 @@
import {
Box,
FormControl,
FormLabel,
Input,
Select,
Text,
Grid,
GridItem,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalFooter,
useDisclosure,
Icon,
Image,
HStack,
} from "@chakra-ui/react";
import React, { useContext } from "react";
// import { useForm } from "react-hook-form";
import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
import SuccesIcon from "../../../assets/Modaltick.png";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
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", name: "address1" },
{ label: "Address line 2", name: "address2" },
{ label: "Pincode", name: "pincode" },
{ label: "City", name: "city" },
{ label: "Single Point Activation Number", name: "span" },
{
label: "Address line 1",
},
{
label: "Address line 2",
},
{
label: "Pincode",
},
{
label: "City",
},
{
label: "Single Point Activation Number",
},
];
const SingleAddress = () => {
const { useForm } = useContext(GlobalStateContext);
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const { isOpen, onOpen, onClose } = useContext(GlobalStateContext);
const onSubmit = (data) => {
console.log(data);
onOpen();
};
return (
<Box>
<Text color="#5E5E5E" fontWeight={500} fontSize="small" mb={4}>
<Box p={4}>
<Text color="#5E5E5E" fontWeight={600} fontSize="small" mb={4}>
Fill address details
</Text>
<FormControl as="form">
<Grid templateColumns="repeat(2, 1fr)" gap={6}>
<FormControl>
<Grid templateColumns='repeat(2, 1fr)' gap={6}>
{formsInfos.map((val) => (
<GridItem key={val.label}>
<FormLabel fontSize="xs" color="#344054">
{val.label}
</FormLabel>
{val.label === "City" ? (
<Select
placeholder="Select city"
{...register(val.name, { required: "City is required" })}
>
<option value="new-york">New York</option>
<option value="los-angeles">Los Angeles</option>
<option value="chicago">Chicago</option>
<option value="houston">Houston</option>
</Select>
) : (
<Input
type="text"
{...register(val.name, {
required: `${val.label} is required`,
})}
/>
)}
{errors[val.name] && (
<Text fontSize="xs" color="red.500">
{errors[val.name]?.message}
</Text>
)}
<GridItem
key={val.label}
>
<FormLabel>{val.label}</FormLabel>
<Input type="text" />
</GridItem>
))}
</Grid>
<PrimaryButton
type="submit"
title={"Submit"}
onClick={handleSubmit(onSubmit)}
/>
</FormControl>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>
<Image src={SuccesIcon} w={"48px"} />
</ModalHeader>
<ModalBody>
<HStack>
<Text color="#A0A0A0" fontWeight={400} fontSize="small">
Order Id:
</Text>
<Text color="#3725EA" fontWeight={400} fontSize="small">
#451245
</Text>
</HStack>
<Text color="#101828" fontSize="medium" fontWeight={600}>
Your employee list has been submitted
</Text>
<Text color="#A0A0A0" fontWeight={400} fontSize="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
consectetur adipiscing elit.
</Text>
</ModalBody>
<ModalFooter>
<Button
color={"#344054"}
bgColor="#ffff"
fontSize="small"
fontWeight={600}
>
Submit new application
</Button>
<Button
bgColor="#6311CB"
color="#fff"
_hover={{ bgColor: "#6311CB" }}
fontSize="small"
onClick={onClose}
>
Check status
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Box>
);
};

18
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx
View File

@@ -1,7 +1,6 @@
import { Box, Divider, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
import React, { useState } from "react";
import SingleAddress from "./SingleAddress";
import MultipleAddress from "./MultipleAddress";
const WhereToShare = ({ register }) => {
const [selectedValue, setSelectedValue] = useState("1");
@@ -11,7 +10,7 @@ const WhereToShare = ({ register }) => {
case "1":
return <SingleAddress />;
case "2":
return <MultipleAddress/>;
return <Box>Add department content</Box>;
default:
return null;
}
@@ -26,11 +25,10 @@ const WhereToShare = ({ register }) => {
display="flex"
flexDirection="row"
borderRadius="5px"
bgColor="#F4F4F4"
>
<Radio size="sm" colorScheme="purple" value="1">
<Text color={"#3F4754"} mb={0} fontWeight={500} fontSize={"xs"}>
Single address
</Text>
Single address
</Radio>
</Box>
<Box
@@ -38,16 +36,14 @@ const WhereToShare = ({ register }) => {
display="flex"
flexDirection="row"
borderRadius="5px"
bgColor="#F4F4F4"
>
<Radio size="sm" colorScheme="purple" value="2">
<Text color={"#3F4754"} mb={0} fontWeight={500} fontSize={"xs"}>
Multiple address
</Text>
<Radio size="sm" colorScheme="blue" value="2">
Multiple address
</Radio>
</Box>
</Stack>
</RadioGroup>
<Divider/>
<Box mt={4}>{renderContent()}</Box>
</>
);

1
src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
View File

@@ -86,7 +86,6 @@ const BrandVoucher = () => {
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = voucher.map((item, index) => ({
id: item.id,
"Sr. no": (
<Text
as={"span"}

273
src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx Normal file
View File

@@ -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": (
// <Checkbox colorScheme="purple" value="1">
<Text as={"span"} fontSize={"xs"}>
{item?.EmpID}
</Text>
// </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,
Department: item?.Department,
Designation: item?.Role,
Status: (
<Tag
my={1}
size={"sm"}
borderRadius="full"
colorScheme={
item?.status === "Active"
? "green"
: item?.status === "Inactive"
? "red"
: "gray"
}
border={`1px solid ${
item?.status === "Active"
? "green"
: item?.status === "Inactive"
? "red"
: "gray"
}`}
p={1}
px={3}
>
<TagLabel>{item?.status}</TagLabel>
</Tag>
),
Action: (
<Box>
<Menu>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<BsThreeDotsVertical />}
bg={"transparent"}
/>
<MenuList>
<MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>
Edit
</MenuItem>
<MenuItem
icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
>
Delete
</MenuItem>
<MenuItem
icon={<LuEye color="#6311CB" size={16} />}
onClick={() => navigate("/employees/view")}
>
View
</MenuItem>
</MenuList>
</Menu>
</Box>
),
}));
return (
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
<Box
rounded={"xl"}
py={3}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<Box
display="flex"
w="100%"
flexDirection="column"
bgColor="#FFFFFF"
p={4}
alignItems="start"
rounded={"md"}
>
<Text fontSize="medium" fontWeight={600}>
Import employee
</Text>
<FileUploader />
</Box>
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Box>
<Menu>
<MenuButton
as={Button}
leftIcon={<BsFilterRight fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
>
Sort
</MenuButton>
<MenuList>
<MenuItem>Ascending</MenuItem>
<MenuItem>Descending</MenuItem>
<MenuItem>Recently Viewed</MenuItem>
<MenuItem>Recently Added</MenuItem>
</MenuList>
</Menu>
</Box>
<HStack>
<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>
<Menu>
<MenuButton
as={Button}
leftIcon={<LuListFilter fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
>
Filter
</MenuButton>
<MenuList>
<MenuItem>Ascending</MenuItem>
<MenuItem>Descending</MenuItem>
<MenuItem>Recently Viewed</MenuItem>
<MenuItem>Recently Added</MenuItem>
</MenuList>
</Menu>
<Button
color="white"
bgColor="#6311CB"
fontSize="small"
_hover={{ bgColor: "#6311CB", color: "white" }}
>
Proceed
</Button>
</HStack>
</HStack>
</VStack>
<NormalTable
emptyMessage={`We don't have any Employees`}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
setSelectedRadio={setSelectedRadio}
selectedRadio={selectedRadio}
/>
</Box>
</Box>
);
};
export default Employees;

129
src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx
View File

@@ -59,30 +59,25 @@ import asian from "../../assets/asain.png";
import goth from "../../assets/goth.png";
import info from "../../assets/info.png";
import redinfo from "../../assets/redinfo.png";
const GiftCard = () => {
const { digital } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [selectedCheckBox, setSelectedCheckBox] = useState([]);
const [users, setusers] = useState(50);
const [tabIndex, setTabIndex] = useState(
() => parseInt(sessionStorage.getItem("activeTabIndex")) || 0
);
useEffect(() => {
sessionStorage.setItem("activeTabIndex", tabIndex);
}, [tabIndex]);
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false);
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 = [
@@ -118,18 +113,17 @@ const GiftCard = () => {
];
const physicalCardArr = digital.map((item, index) => ({
id: item.id,
"Sr. no": (
// <Radio colorScheme="purple" value="1">
// <Checkbox colorScheme="purple">
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{/* <Icon
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{/* <Icon
as={PiReceipt}
boxSize={8}
p={1.5}
@@ -137,8 +131,8 @@ const GiftCard = () => {
rounded={"full"}
/> */}
{item?.id}
</Text>
{item?.id}
</Text>
// </Checkbox>
),
"Order ID": (
@@ -183,7 +177,7 @@ const GiftCard = () => {
? "green"
: item?.status === "Inactive"
? "red"
: "gray"
: "gray" // default border color if status doesn't match any condition
}`}
p={1}
px={3}
@@ -216,9 +210,9 @@ const GiftCard = () => {
boxShadow="md"
justifyContent={"center"}
>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
</Box>
</Box>
),
@@ -341,17 +335,37 @@ const GiftCard = () => {
}));
const extractedArray = digital.map((item, index) => ({
id: item.id,
"Sr. no": (
// <Radio colorScheme="purple" value="1">
// <Checkbox colorScheme="purple">
<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?.id}
</Text>
),
"Order ID": (
<NavLink to="/gift-card/digital-application-status">
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{/* <Icon
as={PiReceipt}
@@ -361,29 +375,8 @@ const GiftCard = () => {
rounded={"full"}
/> */}
{item?.id}
{item?.orderid}
</Text>
),
"Order ID": (
<NavLink to="/gift-card/digital-application-status">
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
color="#3725EA"
>
{/* <Icon
as={PiReceipt}
boxSize={8}
p={1.5}
bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
rounded={"full"}
/> */}
{item?.orderid}
</Text>
</NavLink>
),
"Email Address": item?.emailAddress,
@@ -441,9 +434,9 @@ const GiftCard = () => {
boxShadow="md"
justifyContent={"center"}
>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
</Box>
</Box>
),
@@ -511,26 +504,25 @@ const GiftCard = () => {
}));
const instaCardArr = digital.map((item, index) => ({
id: item.id,
"Sr. no": (
// <Radio colorScheme="purple" value="1">
// <Checkbox colorScheme="purple">
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{/* <Icon
<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?.id}
</Text>
{item?.id}
</Text>
// </Checkbox>
),
"Order ID": (
@@ -611,9 +603,9 @@ const GiftCard = () => {
boxShadow="md"
justifyContent={"center"}
>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
</Box>
</Box>
),
@@ -816,12 +808,7 @@ const GiftCard = () => {
</Box>
</HStack>
</VStack>
<Tabs
index={tabIndex}
onChange={(index) => setTabIndex(index)}
position="relative"
variant="unstyled"
>
<Tabs position="relative" variant="unstyled">
<TabList color="#B0B0B0">
<Tab
fontSize="small"

178
src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx
View File

@@ -40,7 +40,7 @@ import {
} from "@chakra-ui/icons";
import info from "../../assets/info.png";
import redinfo from "../../assets/redinfo.png";
import { Link, NavLink } from "react-router-dom";
import { NavLink } from "react-router-dom";
import { CiCalendar } from "react-icons/ci";
import ReactApexChart from "react-apexcharts";
import { GoDotFill } from "react-icons/go";
@@ -752,41 +752,31 @@ const GiftDashboard = () => {
<Box>
<HStack align="center" wrap="wrap" gap={4} mb={6}>
{/* Gift Card */}
<NavLink
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
cursor: "pointer",
flex: 1,
}}
to="/optifii-gifts-dashboard/apply-for-giftcards"
<Box
h="20"
borderRadius="md"
bgGradient="linear(94.7deg, #C33FAD -20.49%, #3725EA -10.28%, #6311CB 39.15%)"
px={4}
color="white"
display="flex"
alignItems="center"
justifyContent="space-between"
shadow="md"
flex={1}
position={"relative"}
overflow={"hidden"}
>
<Box
h="20"
borderRadius="md"
bgGradient="linear(94.7deg, #C33FAD -20.49%, #3725EA -10.28%, #6311CB 39.15%)"
px={4}
color="white"
display="flex"
alignItems="center"
justifyContent="space-between"
shadow="md"
flex={1}
position={"relative"}
overflow={"hidden"}
>
<Flex alignItems="center" gap={4}>
<Box
bgGradient={
"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
}
p={2}
rounded={"md"}
>
<Image src={GC} w={10} h={6}></Image>
</Box>
<Flex alignItems="center" gap={4}>
<Box
bgGradient={
"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
}
p={2}
rounded={"md"}
>
<Image src={GC} w={10} h={6}></Image>
</Box>
<NavLink style={{display:"flex" , flexDirection:"row" , alignItems:"center"}} to="/dashboard/apply-for-giftcards">
<Text fontWeight="500" fontSize="sm" mb={0}>
Apply for gift card
</Text>
@@ -802,76 +792,66 @@ const GiftDashboard = () => {
>
<ArrowForwardIcon boxSize={5} color="white" />
</Box>
</Flex>
<Box position={"absolute"} right={-2}>
<Image
src={GC}
w={16}
mixBlendMode={"screen"}
opacity={0.7}
></Image>
</Box>
</NavLink>
</Flex>
<Box position={"absolute"} right={-2}>
<Image
src={GC}
w={16}
mixBlendMode={"screen"}
opacity={0.7}
></Image>
</Box>
</NavLink>
</Box>
{/* Brand Voucher */}
<Link
style={{
flex: 1,
display:"flex",
flexDirection:"row",
alignItems:"center"
}}
to="/brand-voucher/buy-voucher"
<Box
h="20"
borderRadius="md"
bgGradient="linear(94.7deg, #C33FAD -20.49%, #6311CB -10.28%, #3725EA 39.15%)"
px={4}
color="white"
display="flex"
alignItems="center"
justifyContent="space-between"
shadow="md"
flex={1}
position={"relative"}
>
<Box
h="20"
borderRadius="md"
bgGradient="linear(94.7deg, #C33FAD -20.49%, #6311CB -10.28%, #3725EA 39.15%)"
px={4}
color="white"
display="flex"
alignItems="center"
justifyContent="space-between"
shadow="md"
flex={1}
position={"relative"}
>
<Flex alignItems="center" gap={4}>
<Box
bgGradient={
"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
}
p={2}
rounded={"md"}
>
<Image src={BV} w={10} h={6}></Image>
</Box>
<Text fontWeight="500" fontSize="sm" mb={0}>
Apply for brand voucher
</Text>
<Box
bg="#5f51ee"
w="6"
h="6"
display="flex"
alignItems="center"
justifyContent="center"
rounded="full"
>
<ArrowForwardIcon boxSize={5} color="white" />
</Box>
</Flex>
<Box position={"absolute"} right={-2}>
<Image
src={BV}
w={16}
mixBlendMode={"screen"}
opacity={0.7}
></Image>
<Flex alignItems="center" gap={4}>
<Box
bgGradient={
"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
}
p={2}
rounded={"md"}
>
<Image src={BV} w={10} h={6}></Image>
</Box>
<Text fontWeight="500" fontSize="sm" mb={0}>
Apply for brand voucher
</Text>
<Box
bg="#5f51ee"
w="6"
h="6"
display="flex"
alignItems="center"
justifyContent="center"
rounded="full"
>
<ArrowForwardIcon boxSize={5} color="white" />
</Box>
</Flex>
<Box position={"absolute"} right={-2}>
<Image
src={BV}
w={16}
mixBlendMode={"screen"}
opacity={0.7}
></Image>
</Box>
</Link>
</Box>
{/* GPR Card */}
<Box

1
src/Pages/OptiFiiGifsAndVouchers/SelectDepartment.jsx
View File

@@ -75,7 +75,6 @@ const Employees = () => {
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
id: item.id,
"Sr No": (
<Text as={"span"} fontSize={"small"}>
{item?.id}

1
src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx
View File

@@ -111,7 +111,6 @@ const Employees = () => {
];
const extractedArray = employees.map((item) => ({
id: item.id,
"Emp ID": (
// <Checkbox colorScheme="purple" value="1">
<Text as={"span"} fontSize={"xs"}>

394
src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx
View File

@@ -1,394 +0,0 @@
import {
Avatar,
Box,
Button,
Checkbox,
Divider,
Flex,
HStack,
Icon,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Radio,
Select,
Tag,
TagLabel,
Text,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import womenpfp from "../../assets/womenpfp1.png";
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 MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import Food from "../../assets/icons/Food.png";
import Fuel from "../../assets/icons/Fuel.png";
import Gift from "../../assets/icons/gift.png";
import books from "../../assets/icons/bookStack.png";
import telecom from "../../assets/icons/telecom.png";
import gadget from "../../assets/icons/gadget.png";
import foods from "../../assets/icons/foods.png";
import {
AddIcon,
CalendarIcon,
ChevronDownIcon,
EmailIcon,
SearchIcon,
ViewIcon,
} from "@chakra-ui/icons";
import {
MdFilterList,
MdNotificationsNone,
MdOutlineHeadsetMic,
} from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import { LuListFilter } from "react-icons/lu";
import { BsFilterRight } from "react-icons/bs";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
const BenifitOverView = () => {
const [dash, setDash] = useState([
{
id: 1,
wallet: "Food",
walletAmount: "₹ 70,000",
balanceRemaining: "₹ 20,000",
status: "Approved",
totalEmployees: 500,
users: 5,
icon: foods,
},
{
id: 2,
wallet: "Fuel",
walletAmount: "₹ 50,000",
balanceRemaining: "₹ 15,000",
status: "Approved",
totalEmployees: 200,
users: 3,
icon: Fuel,
},
{
id: 3,
wallet: "Books & Periodicals",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: books,
},
{
id: 4,
wallet: "Telecom",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: telecom,
},
{
id: 5,
wallet: "Books & periodicals",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: books,
},
{
id: 6,
wallet: "Learning & development",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: books,
},
{
id: 7,
wallet: "Gadget & equipment",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: gadget,
},
{
id: 8,
wallet: "Telecom",
walletAmount: "₹ 100,000",
balanceRemaining: "₹ 80,000",
status: "Pending",
totalEmployees: 300,
users: 4,
icon: telecom,
},
{
id: 1,
wallet: "Food",
walletAmount: "₹ 70,000",
balanceRemaining: "₹ 20,000",
status: "Approved",
totalEmployees: 500,
users: 5,
icon: foods,
},
]);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [users, setusers] = useState(50);
const [selectedRadio, setSelectedRadio] = useState([]);
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const dashHeadSecRow = [
"Sr No",
"Wallet Name",
"Total employees",
"Amount in card",
"Pending amount ",
"Pending request",
];
const dashSecArr = dash.map((item, index) => ({
id:item.id,
"Sr No": item.id,
"Wallet Name": (
<HStack key={`wallet-${index}`}>
{/* <Box p={2} bg="#ebe0f8" rounded="full">
<MdNoFood color="#6311CB" />
</Box> */}
<Image src={item.icon} h="20px" />
<Text mb={0} fontSize="xs">
{item.wallet || "Food"}
</Text>
</HStack>
),
"Total employees": (
<Box
position="relative"
display="flex"
flexDirection="row"
alignItems="center"
>
<Image src={womenpfp} h={"30px"} position="absolute" />
<Image src={blackmen} h={"30px"} position="absolute" left="1.4rem" />
<Image src={koreanpfp} h={"30px"} position="absolute" left="2.7rem" />
<Image src={asian} h={"30px"} position="absolute" left="3.9rem" />
<Image src={goth} h={"30px"} position="absolute" left="4.9rem" />
<Box
display="flex"
position="absolute"
alignItems="center"
flexDirection="column"
borderRadius="50%"
h={"30px"}
w="30px"
bgColor="#F9F5FF"
left="5.9rem"
boxShadow="md"
justifyContent={"center"}
>
<Text color="#7F56D9" fontSize="xs" mb={0}>
+{users}
</Text>
</Box>
</Box>
),
"Amount in card": (
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
{item.walletAmount || 5000}
</Text>
),
"Pending amount ": (
<Text key={`balance-${index}`} mb={0} fontSize="xs">
{item.balanceRemaining || "₹ 2000"}
</Text>
),
"Pending request": (
<>
<NavLink to="/dashboard/beinefit-overview/benefit-request">
<Button
bgColor="#6311CB"
color="#fff"
fontSize="x-small"
w={"87px"}
h={"27px"}
_hover={{ bgColor: "#6311CB", borderRadius: "5px" }}
>
View
</Button>
</NavLink>
</>
),
}));
return (
<Box {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<Box
rounded={"md"}
py={4}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={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>
<Divider />
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
<Flex align={"center"} gap={5}>
<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>
<Flex align={"center"} gap={2}>
<Text as={"span"} fontSize={"xs"}>
Show
</Text>
<Select borderRadius={5} size={"sm"}>
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
</Select>
<Text as={"span"} fontSize={"xs"}>
entries
</Text>
</Flex>
</Flex>
<Box>
<Link to={"#"} style={{ marginRight: "8px" }}>
{/* <SecondaryButton
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
title={"Pull back funds"}
/> */}
</Link>
<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>
</Box>
</HStack>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={dashHeadSecRow}
data={dashSecArr}
isLoading={isLoading}
showRadioButton={true}
setSelectedRadio={setSelectedRadio}
selectedRadio={selectedRadio}
/>
</Box>
</Box>
);
};
export default BenifitOverView;

386
src/Pages/OptiFiiTaxBenefit/BenefitOverviewView.jsx
View File

@@ -1,386 +0,0 @@
import {
Box,
Button,
HStack,
VStack,
Icon,
Checkbox,
Tag,
TagLabel,
Text,
Image,
useDisclosure,
Alert,
CloseButton,
AlertDescription,
} 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 { RiDeleteBin5Line } from "react-icons/ri";
import { AiOutlineEdit } from "react-icons/ai";
import { LiaFileInvoiceSolid } from "react-icons/lia";
import { PiReceipt } from "react-icons/pi";
import { MdOutlineNoFood } from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { IoMdCheckmark } from "react-icons/io";
import { RxCross2 } from "react-icons/rx";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
import { TiTick } from "react-icons/ti";
import { ImCancelCircle } from "react-icons/im";
const tableData = [
{
id:1,
datetime:"Jan 12, 2022, 10 am",
merchant:"Dine in",
category :"Food",
paymentmethod :"Expense card",
reimburseAmount :"₹ 5000",
},
{
id:2,
datetime:"Jan 12, 2022, 10 am",
merchant:"Airtel postpaid",
category :"telecom",
paymentmethod :"Expense card",
reimburseAmount :"₹ 5000",
},
{
id:3,
datetime:"Jan 12, 2022, 10 am",
merchant:"Lorem ipsum dolor adipiscing elit.",
category :"Fuel",
paymentmethod :"Expense card",
reimburseAmount :"₹ 5000",
},
{
id:4,
datetime:"Jan 12, 2022, 10 am",
merchant:"Airtel postpaid",
category :"Telecom",
paymentmethod :"Cash",
reimburseAmount :"₹ 5000",
},
{
id:3,
datetime:"Jan 12, 2022, 10 am",
merchant:"Lorem ipsum dolor adipiscing elit.",
category :"Fuel",
paymentmethod :"Cash",
reimburseAmount :"₹ 5000",
},
]
const ReimbursementRequestView = () => {
const [alertStatus, setAlertStatus] = useState(null);
const handleApprove = () => {
setAlertStatus("success");
};
const handleReject = () => {
setAlertStatus("error");
};
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
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 = [
"Sr. No",
"Date & time",
"Merchant",
"Category",
"Payment mode",
"Reimburse Amount",
"Bills",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = tableData.map((item, index) => ({
"Sr. No": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{index + 1}
</Text>
),
"Date & time": item?.datetime,
"Merchant": item?.merchant,
"Category": item?.category,
"Payment mode": item?.paymentmethod,
"Reimburse Amount": item?.reimburseAmount,
Bills: (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
</Box>
<Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
Invoice243
</Text>
</HStack>
),
Action: (
<HStack>
<Button
display="flex"
flexDirection="row"
fontSize="small"
fontWeight={400}
p={2}
bg={"#00A43824"}
rounded={"medium"}
borderRadius="7.25px"
border="1px solid #00A438"
color="#00A438"
>
<TiTick color="#00A438" />
Approve
</Button>
<Button
display="flex"
flexDirection="row"
fontSize="small"
fontWeight={400}
p={2}
bg={"#EE1B241A"}
border="1px solid #EE1B24"
borderRadius="7.25px"
color="#EE1B24"
gap={1}
>
<ImCancelCircle color="red" />
Reject
</Button>
</HStack>
),
}));
return (
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
{/* <MiniHeader
title={"My Requests"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/> */}
{alertStatus === "success" && (
<Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
<Box>
<HStack>
<IoMdCheckmark size={16} />
<Text fontSize="xs" mb={0} fontWeight={500}>
Approved by giftryt
</Text>
</HStack>
</Box>
</Alert>
)}
{alertStatus === "error" && (
<Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
<Box>
<HStack>
<RxCross2 size={16} />
<Text fontSize="xs" mb={0} fontWeight={500}>
Rejected by giftryt
</Text>
</HStack>
</Box>
</Alert>
)}
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
<HStack width={"100%"} mb={8}>
<Box
bg={"#e5f6eb"}
border={"1px solid #00A438"}
px={4}
py={1}
rounded={"md"}
h={14}
flex={1}
>
<HStack>
<IoMdCheckmark color="#00A438" />
<Text color={"#00A438"} fontSize={"sm"} mb={1} fontWeight={500}>
Approved
</Text>
</HStack>
<Text color={"#667085"} fontSize={"xs"} fontWeight={400} mb={0}>
By Sr. Manager
</Text>
</Box>
<HStack
bg={"#00A438"}
px={4}
py={1}
rounded={"md"}
h={14}
justifyContent={"start"}
flex={1}
>
<Text color={"#fff"} fontSize={"sm"} mb={0} fontWeight={400}>
In progress
</Text>
</HStack>
<VStack
bg={"#f9f9f9"}
px={4}
py={1}
rounded={"md"}
h={14}
spacing={1}
alignItems={"start"}
flex={1}
>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
<VStack
bg={"#f9f9f9"}
px={4}
py={1}
rounded={"md"}
h={14}
spacing={1}
alignItems={"start"}
flex={1}
>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
<VStack
bg={"#f9f9f9"}
px={4}
py={1}
rounded={"md"}
h={14}
spacing={1}
alignItems={"start"}
flex={1}
>
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
Pending
</Text>
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
By Sr. Manager
</Text>
</VStack>
</HStack>
<HStack justifyContent={"space-between"} mb={6}>
<Box>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Report number : 1254587841
</Text>
<Text color={"#252C32"} fontSize={"sm"} mb={0} fontWeight={500}>
Reimbursement report 2024
</Text>
</Box>
<Box>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Amount to be reimbursed
</Text>
<Text color={"#252C32"} fontSize={"sm"} fontWeight={500} mb={0}>
₹ 50,000
</Text>
</Box>
</HStack>
<HStack justifyContent={"space-between"} mb={6}>
<Box>
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
Submitted by
</Text>
<HStack mb={4} alignItems={"start"}>
<Image
borderRadius="full"
boxSize="40px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
<Box>
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
Pooja Shah
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
poojashah @wdipl.com
</Text>
</Box>
</HStack>
<Text color={"#252C32"} fontSize={"xs"} mb={0} fontWeight={400}>
Duration - 10 June - 28 June
</Text>
</Box>
<Box textAlign={"end"}>
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
Pending approval
</Text>
<HStack mb={4} alignItems={"start"}>
<Box>
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
Manav sain
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
manavsain@wdipl.com
</Text>
</Box>
<Image
borderRadius="full"
boxSize="40px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
</HStack>
</Box>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
/>
<HStack justifyContent={"end"} my={4} spacing={4}>
<SecondaryButton title="Reject" onClick={handleReject} />
<PrimaryButton title="Approve" onClick={handleApprove} />
</HStack>
</Box>
</Box>
);
};
export default ReimbursementRequestView;

157
src/Pages/OptiFiiTaxBenefit/BenefitViewFood.jsx
View File

@@ -1,157 +0,0 @@
import {
Box,
Button,
HStack,
Icon,
Checkbox,
Tag,
TagLabel,
Text,
Image,
} 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 { MdOutlineNoFood } from "react-icons/md";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { NavLink, useNavigate } from "react-router-dom";
const ReimbursementRequest = () => {
const navigate = useNavigate();
const { employees } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
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 = [
"Sr. No",
"Report name",
"Report by",
"Report amount",
"Date & time",
"Approver",
"Disburser",
"Action"
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) =>
({
"Sr. No": (
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{index + 1}
</Text>
),
"Report name": (
<Text color="#3725EA" fontSize="small" fontWeight={400}>{item?.reportname}</Text>
),
// "Report by": item?.emailAddress,
"Report amount": item?.reportamount,
"Date & time": item?.datetime,
"Approver": item?.approver,
"Disburser": item?.disburser,
"Report by": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Pooja Shah
</Text>
</HStack>
),
Action: (
<NavLink to="/dashboard/beinefit-overview/benefit-request/beinefit-overview-view">
<Button
_hover={{ color: "gray.900", bg: "gray.300" }}
transition={"0.3s"}
onClick={() => navigate("/reimbursement-request-view")}
size={"xs"}
bg={"#6311CB"}
py={1}
fontWeight={400}
px={3}
color="#fff"
>
View
</Button>
</NavLink>
),
}));
return (
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
{/* <MiniHeader
title={"My Requests"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/> */}
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={4}>
<HStack justifyContent={"space-between"}>
<HStack alignItems={"start"} spacing={4}>
<Box bg={"#d7d3fb"} p={2} rounded={"full"}>
<MdOutlineNoFood color="#3725EA" />
</Box>
<Box>
<Text color={"#667085"} fontWeight={600} fontSize={"sm"} mb={1}>
Food
</Text>
<Text color={"#667085"} fontSize={"xs"} mb={0}>
Created by - Reethik Thota
</Text>
</Box>
</HStack>
<Box>
<Text color={"#667085"} fontSize={"xs"} fontWeight={600} mb={1}>
Wallet Amount
</Text>
<Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
₹ 50,000
</Text>
</Box>
</HStack>
</Box>
<Box>
</Box>
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
/>
</Box>
</Box>
);
};
export default ReimbursementRequest;

346
src/Pages/Report/Report.jsx
View File

@@ -1,17 +1,9 @@
import {
Badge,
Box,
Button,
Divider,
Heading,
HStack,
Icon,
Image,
Menu,
MenuButton,
MenuItem,
MenuList,
Select,
Tag,
TagLabel,
Text,
@@ -21,24 +13,16 @@ import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { CalendarIcon, ChevronDownIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { MdNotificationsNone, MdOutlineHeadsetMic, MdOutlineUnarchive } from "react-icons/md";
import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
import { AiOutlineCalendar, AiOutlineEdit } from "react-icons/ai";
import { AiOutlineEdit } from "react-icons/ai";
import { FaRegEye } from "react-icons/fa";
import { PiReceipt } from "react-icons/pi";
import ApexLine from "../../Components/Doughnut/ApexLine";
import PieCharts from "../../Components/Doughnut/PieCharts";
import { GoDotFill } from "react-icons/go";
import { Link } from "react-router-dom";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import { IoMdArrowDropdown } from "react-icons/io";
import Chart from 'chart.js/auto'
const Report = () => {
const { transactionHistory } = useContext(GlobalStateContext);
const { reportStatus } = useContext(GlobalStateContext);
const { reportsHistory } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
@@ -56,207 +40,138 @@ const Report = () => {
// ===============================[ Table Header ]
const tableHeadRow = [
"Employee Name",
"Employee ID",
"Department",
"Wallet",
"Merchant",
"Nature of expense",
"Date & time",
"Amount",
"Name",
"Last Update",
"Report type",
"Total Expense",
"Status",
"Actions",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = transactionHistory.map((item, index) => ({
const extractedArray = reportsHistory.map((item, index) => ({
Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
<Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
"Employee Name":
item?.employeeName,
"Employee ID": item?.employeeID,
"Department": item?.department,
"Wallet": item?.wallet,
"Merchant": item?.merchant,
"Nature of expense": item?.natureExpense,
"Date & time": item?.dateTime,
"Amount":(
<Box color={"#59C36A"}>{item?.amount}</Box>
"Last Update":
item?.lastUpdated,
"Report type": item?.reportType,
"Total Expense": item?.totalExpense,
Status: (
<Tag
my={1}
size={"sm"}
borderRadius="full"
colorScheme={
item?.status === "Approved"
? "green"
: item?.status === "Fully Reimbursed"
? "purple"
: item?.status === "Disapproved"
? "red"
: item?.status === "Saved"
? "yellow"
: item?.status === "Partially Reimbursed"
? "orange"
: "gray" // default color scheme if status doesn't match any condition
}
border={`1px solid ${
item?.status === "Approved"
? "green"
: item?.status === "Fully Reimbursed"
? "purple"
: item?.status === "Disapproved"
? "red"
: item?.status === "Saved"
? "orange"
: item?.status === "Partially Reimbursed"
? "orange"
: "gray" // default border color if status doesn't match any condition
}`}
p={1}
px={3}
>
<TagLabel>{item?.status}</TagLabel>
</Tag>
),
Actions: (
<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>
),
}));
// ===============================[ Table Header ]
const tableHeadRowReport = [
"Report Name",
"Report by",
"Report amount",
"Date & time",
"Status",
"Approver",
"Disburser",
"Action",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArrayReport = reportStatus.map((item, index) => ({
Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
<Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
"Report Name":item?.reportName,
"Report by":(
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Pooja Shah
</Text>
</HStack>
),
"Report amount": item?.reportAmount,
"Date & time": item?.dateTime,
"Status": (
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
gap={1}
bg={
item?.status === "Fully Reimbursed"
? "#F8F3FF"
: item?.status === "Partially Reimbursed"
? "Partially Reimbursed"
: item?.status === "Approved"
? "#00A43814"
: "#f8d7da"
}
rounded={"full"}
color={
item?.status === "Fully Reimbursed"
? "#6311CB"
: item?.status === "Partially Reimbursed"
? "#EAB600"
: item?.status === "Approved"
? "#00A438"
: "#721c24" // Default red text for unknown statuses
}
py={1.5}
px={1}
>
<GoDotFill />
{item?.status}
</Box>
),
"Approver": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Ravi Sharma
</Text>
</HStack>
),
"Disburser":(
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text color={"#667085"} fontSize={"xs"} mb={1}>
Karan Johar
</Text>
</HStack>
),
"Action":(
<Link to="/reports/view-report"><Badge fontWeight={500} fontSize={"10px"} bg="#6211CB" color={"#fff"} p={1} px={2} rounded={5}>View Reports</Badge></Link>
),
}));
return (
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
<HStack mb={4} justifyContent={"space-between"}>
<Heading fontSize={"md"} fontWeight={500} mb={0}>
Report
</Heading>
<Box display={"flex"} alignItems={"center"} gap={3}>
<Box
fontSize={"xs"}
display={"flex"}
alignItems={"center"}
bg={"#fff"}
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>
<Button
as={Button}
leftIcon={<MdOutlineUnarchive fontSize={"16px"} />}
// rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
size={"sm"}
me={2}
style={{backgroundColor:"#fff"}}
color={"#6311CB"}
>
Export
</Button>
</Box>
</HStack>
<HStack w={"100%"} mb={4}>
<Box h={300} bg={"#fff"} me={2} rounded={6} w={"65%"} pb={0} p={4} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
{/* <ApexLine /> */}
</Box>
<Box h={300} bg={"#fff"} rounded={6} w={"35%"} p={4} display={"flex"} justifyContent={"center"} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
{/* <PieCharts /> */}
</Box>
</HStack>
<MiniHeader
title={"Reports History"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
mb={4}
>
<Box display={"flex"} justifyContent={"space-between"} p={4} alignItems={"center"}>
<Heading fontSize={"md"} mb={0} fontWeight={500}>Transaction history</Heading>
<Box display={"flex"}>
<Select placeholder="Weekly" size={"sm"} rounded={"md"}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Select>
</Box>
</Box>
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
<Text fontSize={"lg"} fontWeight={600}>
Reports
</Text>
<HStack w={"100%"} justifyContent={"space-between"}>
<Button
fontWeight={500}
size={"sm"}
leftIcon={<CalendarIcon color={"purple.800"} />}
colorScheme="gray"
color={"gray.700"}
variant="outline"
fontSize={"xs"}
>
Select Date Range
</Button>
<Button
_hover={{
// bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
opacity: 0.8,
}}
bgGradient="linear(to-r, #3725EA, #5E0FCD)"
fontSize={"xs"}
px={8}
fontWeight={500}
size={"sm"}
color={"#fff"}
variant="outline"
transition={"0.5s all"}
_active={{
// bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
opacity: 1,
}}
>
Add to Report
</Button>
</HStack>
</VStack>
<Divider />
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
@@ -264,31 +179,6 @@ const Report = () => {
isLoading={isLoading}
/>
</Box>
<Box
rounded={"xl"}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<Box display={"flex"} justifyContent={"space-between"} p={4} alignItems={"center"}>
<Heading fontSize={"md"} mb={0} fontWeight={500}>Reimbursement status</Heading>
<Box display={"flex"}>
<Select placeholder="Weekly" size={"sm"} rounded={"md"}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Select>
</Box>
</Box>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRowReport}
data={extractedArrayReport}
isLoading={isLoading}
/>
</Box>
</Box>
);
};

201
src/Pages/Report/ViewReports.jsx
View File

@@ -1,201 +0,0 @@
import { Box, Button, Divider, Heading, HStack, Image, Menu, MenuButton, MenuItem, MenuList, Tag, TagLabel, Text } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { LiaFileInvoiceSolid } from "react-icons/lia";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { GrDownload } from "react-icons/gr";
import { GoDotFill } from "react-icons/go";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import { ChevronDownIcon } from "@chakra-ui/icons";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
const ViewReports = () => {
const { viewReports } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ======================= [ Table Header ] =======================
const tableHeadRow = [
"Invoice",
"Amount",
"Paid from wallet",
"Status",
"Action",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = viewReports.map((item, index) => ({
Invoice: (
<HStack>
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
<LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
</Box>
<Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
{item?.inVoice}
</Text>
</HStack>
),
Amount: item?.amount,
"Paid from wallet": item?.paidWallet,
Status:(
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
gap={1}
bg={
item?.status === "Fully Reimbursed"
? "#F8F3FF"
: item?.status === "Partially Reimbursed"
? "Partially Reimbursed"
: item?.status === "Approved"
? "#00A43814"
: "#f8d7da"
}
rounded={"full"}
color={
item?.status === "Fully Reimbursed"
? "#6311CB"
: item?.status === "Partially Reimbursed"
? "#EAB600"
: item?.status === "Approved"
? "#00A438"
: "#721c24" // Default red text for unknown statuses
}
p={1} >
<GoDotFill />
{item?.status}
</Box>
),
Action: (
<Button
gap={2}
fontSize="x-small"
color="#039E38"
bgColor="transparent"
_hover={{ bgColor: "white" }}
>
<GrDownload />
Download
</Button>
),
}));
return (
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={5}>
<HStack mb={4} justifyContent={"space-between"}>
<Heading fontSize={"md"} fontWeight={500} mb={0}>
Food expense June 2024
</Heading>
<Box
fontSize={"xs"}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
gap={1}
bg={"#F8F3FF"}
rounded={"full"}
color={"#6311CB"}
py={1} px={2} >
<GoDotFill />
Fully Reimbursed
</Box>
</HStack>
<Divider />
<HStack width={"100%"} mb={8}>
<Box flex={1}>
<Text fontSize={"sm"} mb={2} fontWeight={500}>
Report by
</Text>
<Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
Kartikey Gautam
</Text>
</Box>
<Box flex={1}>
<Text fontSize={"sm"} mb={2} fontWeight={500}>
Report amount
</Text>
<Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
₹ 10,000
</Text>
</Box>
<Box flex={1}>
<Text fontSize={"sm"} mb={2} fontWeight={500}>
Date & time
</Text>
<Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
22 June, 2024
</Text>
</Box>
<Box flex={1}>
<Text fontSize={"sm"} mb={2} fontWeight={500}>
Approver
</Text>
<Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
Pooja Patade
</Text>
</Box>
<Box flex={1}>
<Text fontSize={"sm"} mb={2} fontWeight={500}>
Disburser
</Text>
<Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
Pooja Patade
</Text>
</Box>
</HStack>
</Box>
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
<HStack mb={4} justifyContent={"space-between"}>
<Heading fontSize={"md"} fontWeight={500} mb={0}>
Food expense June 2024
</Heading>
<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>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
showRadioButton={true}
/>
</Box>
</Box>
);
};
export default ViewReports;

166
src/Pages/SupportAndTicket/SupportAndTicket.jsx
View File

@@ -20,14 +20,13 @@ import {
useDisclosure,
Select,
Textarea,
Flex,
} 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 { OPACITY_ON_LOAD } from "../../Layout/animations";
import { NavLink, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import ExcelIcon from "../../assets/ExcelIcon.svg";
import { GoDotFill } from "react-icons/go";
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
@@ -35,15 +34,14 @@ import { FaArrowUpFromBracket } from "react-icons/fa6";
import { PiIdentificationBadge } from "react-icons/pi";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
import { BsFilterRight } from "react-icons/bs";
import { LuListFilter } from "react-icons/lu";
const SupportAndTicket = () => {
const navigate = useNavigate();
const { SupportAndTicket } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const { isOpen, onOpen, onClose } = useDisclosure();
const { isOpen, onOpen, onClose } = useDisclosure()
useEffect(() => {
// Set isLoading to true
@@ -60,12 +58,12 @@ const SupportAndTicket = () => {
// ===============================[ Table Header ]
const tableHeadRow = [
"Select",
"Ticket ID",
"Subject",
"Status",
"Last update",
"Support",
"Action",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
@@ -82,8 +80,8 @@ const SupportAndTicket = () => {
{item?.TicketID}
</Text>
),
Subject: item?.Subject,
Status: (
"Subject": item?.Subject,
"Status": (
<Box
display={"flex"}
alignItems={"center"}
@@ -93,20 +91,20 @@ const SupportAndTicket = () => {
item?.Status === "In progress"
? "#ebf8ef"
: item?.Status === "On hold"
? "#f2f9ff"
: item?.Status === "Inactive"
? "#ffeeed"
: "#f8d7da" // Default reddish background for unknown statuses
? "#f2f9ff"
: item?.Status === "Inactive"
? "#ffeeed"
: "#f8d7da" // Default reddish background for unknown statuses
}
rounded={"full"}
color={
item?.Status === "In progress"
? "#00A438"
: item?.Status === "On hold"
? "#62B2FD"
: item?.Status === "Inactive"
? "#FF2E23"
: "#721c24" // Default red text for unknown statuses
? "#62B2FD"
: item?.Status === "Inactive"
? "#FF2E23"
: "#721c24" // Default red text for unknown statuses
}
py={1.5}
px={1}
@@ -116,21 +114,7 @@ const SupportAndTicket = () => {
</Box>
),
"Last update": item?.LastUpdate,
Support: item?.Support,
Action: (
<NavLink to="/support-ticket/view-ticket">
<Button
bgColor="#6311CB"
color="#fff"
fontSize="x-small"
w={"87px"}
h={"27px"}
_hover={{ bgColor: "#6311CB", borderRadius: "5px" }}
>
View
</Button>
</NavLink>
),
"Support": item?.Support,
}));
return (
@@ -156,7 +140,7 @@ const SupportAndTicket = () => {
</InputLeftElement>
<Input
type="search"
placeholder=" "
placeholder="Search"
rounded="md"
focusBorderColor="#3725EA"
value={searchTerm}
@@ -190,69 +174,10 @@ const SupportAndTicket = () => {
<PrimaryButton
onClick={onOpen}
leftIcon={<AddIcon />}
title={"Add new ticket"}
/>
title={"Add new ticket"} />
</Box>
</Box>
<hr />
<HStack w={"100%"} justifyContent={"space-between"} px={4} mb={4}>
<Flex align={'center'} gap={5}>
<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>
<Flex align={'center'} gap={2}>
<Text as={'span'} fontSize={'xs'}>Show</Text>
<Select borderRadius={5} size={"sm"}>
<option value='10'>10</option>
<option value='30'>30</option>
<option value='50'>50</option>
<option value='80'>80</option>
</Select>
<Text as={'span'} fontSize={'xs'}>entries</Text>
</Flex>
</Flex>
<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>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
@@ -263,83 +188,56 @@ const SupportAndTicket = () => {
</Box>
{/* modal */}
<Modal size={"md"} isOpen={isOpen} onClose={onClose} isCentered>
<Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader fontSize={"md"}>Add New ticket</ModalHeader>
<ModalHeader>Add New ticket</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={4}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Requester
</Text>
<Input
size={"sm"}
rounded={"md"}
fontSize={"sm"}
fontWeight={500}
/>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
<Box mb={4}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Subject
</Text>
<Input
size={"sm"}
rounded={"md"}
fontSize={"sm"}
fontWeight={500}
/>
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
</Box>
<Box mb={4}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Type
</Text>
<Select
size={"sm"}
rounded={"md"}
fontSize={"sm"}
fontWeight={500}
placeholder=" "
>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<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 mb={4}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Priority
</Text>
<Select
size={"sm"}
rounded={"md"}
fontSize={"sm"}
fontWeight={500}
placeholder=" "
>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<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 mb={4}>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Description
</Text>
<Textarea
size={"sm"}
rounded={"md"}
fontSize={"sm"}
fontWeight={500}
resize={"none"}
/>
<Textarea size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} resize={"none"} />
</Box>
<HStack py={4} justifyContent={"center"}>
<SecondaryButton title={"Cancel"} />
<SecondaryButton title={"Cancel"}/>
<PrimaryButton title={"Create ticket"} />
</HStack>
</ModalBody>
</ModalContent>
</Modal>

252
src/Pages/SupportAndTicket/ViewTicket.jsx
View File

@@ -1,252 +0,0 @@
import {
Box,
Button,
Flex,
HStack,
Image,
Input,
Switch,
Tag,
Text,
Textarea,
VStack,
} from "@chakra-ui/react";
import React from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import womenpfp from "../../assets/womenpfp1.png";
import { AttachmentIcon } from "@chakra-ui/icons";
const data = [{ id: 1, label: "Ticket ID:" }];
const ViewTicket = () => {
return (
<Box
bgColor="#F3F3F9"
{...OPACITY_ON_LOAD}
p={4}
overflowX="scroll"
display="flex"
flexDirection="column"
gap={4}
>
<Flex
p={4}
alignItems="flex-start"
flexDirection="row"
gap={2}
bgColor="#FFFFFF"
boxShadow="0px 6px 12px 0px #0000001A"
h="100%"
borderRadius="10px"
justifyContent="space-between"
>
<VStack alignItems="flex-start">
<HStack alignItems="center" gap={2}>
<Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
Ticket ID:
</Text>
<Box
borderRadius="50px"
px={2}
py={1}
variant="outline"
bg={"#ececec"}
color="#202020"
fontSize="x-small"
border="1px solid #9E9E9E"
fontWeight={600}
>
#1E233
</Box>
</HStack>
<HStack alignItems="center" gap={2}>
<Text as="span" color="#7E7E7E" fontSize="small" fontWeight={500}>
Created:
</Text>
<Text as="span" fontSize="small" color="#202020" fontWeight={600}>
31 Dec 2022
</Text>
</HStack>
<HStack alignItems="center" gap={2}>
<Text fontSize="small" as="span" color="#7E7E7E" fontWeight={500}>
Last message:
</Text>
<Text fontSize="small" as="span" color="#202020" fontWeight={600}>
31 Dec 2022
</Text>
</HStack>
</VStack>
<VStack>
<HStack alignItems="center" gap={2}>
<Text as="span" color="#7E7E7E" fontSize="small" fontWeight={500}>
Status:
</Text>
<Box
borderRadius="50px"
px={2}
py={1}
fontWeight={700}
variant="outline"
bgColor="#f0f9f2"
color="#03781D"
fontSize="x-small"
border="1px solid #6DC580"
>
Open
</Box>
</HStack>
<HStack alignItems="center" gap={2}>
<Text as="span" color="#7E7E7E" fontSize="small" fontWeight={500}>
Priority:
</Text>
<Box
borderRadius="50px"
px={2}
py={1}
fontWeight={700}
variant="outline"
bgColor="#f9f2f2"
color="#BA1717"
fontSize="x-small"
border="1px solid #E2A1A1"
>
Urgent
</Box>
</HStack>
</VStack>
</Flex>
<Box p={4} bgColor="#FFFFFF" boxShadow="0px 6px 12px 0px #0000001A" borderRadius="10px">
{/* {/ First Chat Bubble /} */}
<HStack py={4} alignItems="start" spacing={2}>
<Box
bgColor="#FFFF"
h="40px"
w="40px"
borderRadius="50%"
boxShadow="0px 4px 20px 0px #00000040"
p={1}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
>
<Image
borderRadius='full'
boxSize='30px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
</Box>
<VStack alignItems="flex-start" gap={2}>
<Box
borderTopRightRadius="10px"
borderBottomRadius="10px"
backgroundColor="#EBEBEB"
p={4}
>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Life seasons open have. Air have of. Lights fill after let third darkness replenish fruitful let. Wherein set image. Creepeth said above gathered bring.
</Text>
</Box>
<HStack ml={1} alignSelf="flex-start">
<Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
Katherine
</Text>
<Text color="#9E9E9E" fontSize="x-small" fontWeight={500}>
Today, 11:30 PM
</Text>
</HStack>
</VStack>
</HStack>
{/* {/ Second Chat Bubble /} */}
<Flex py={4} flexDirection="row" gap={2} justifyContent="flex-end">
<VStack alignItems="flex-start" gap={2}>
<Box
borderTopLeftRadius="10px"
borderBottomRadius="10px"
backgroundColor="#F7F5FF"
p={4}
>
<Text fontSize={"xs"} fontWeight={500} mb={1}>
Life seasons open have. Air have of.
</Text>
</Box>
<HStack ml={1} alignSelf="flex-end">
<Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
Katherine
</Text>
<Text color="#9E9E9E" fontSize="x-small" fontWeight={500}>
Today, 11:30 PM
</Text>
</HStack>
</VStack>
<Box
bgColor="#FFFF"
h="40px"
w="40px"
borderRadius="50%"
boxShadow="0px 4px 20px 0px #00000040"
p={1}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
>
<Image
borderRadius='full'
boxSize='30px'
src='https://bit.ly/code-beast'
alt='Dan Abramov'
/>
</Box>
</Flex>
</Box>
<Flex
p={4}
alignItems="flex-start"
flexDirection="column"
gap={3}
bgColor="#FFFFFF"
boxShadow="0px 6px 12px 0px #0000001A"
h="100%"
borderRadius="10px"
>
<Textarea fontSize="small" placeholder="Write your response for issue" outline="none" />
<HStack w="100%" justifyContent="space-between">
<HStack alignItems="center">
<Switch w="44px" size="sm" />
<Text as="span" color="#5F5F5F" fontSize="small">Private</Text>
</HStack>
<HStack>
<Button
as="label"
htmlFor="file-upload"
leftIcon={<AttachmentIcon />}
variant="outline"
cursor="pointer"
border="1px solid #9E9E9E"
bgColor="#FFFFFF"
color="#5F5F5F"
borderRadius="5px"
fontSize="small"
>
Attach
<Input id="file-upload" type="file" display="none" />
</Button>
<Button fontSize="small" color="#fff" bgColor="#3818D9">
Send
</Button>
</HStack>
</HStack>
</Flex>
</Box>
);
};
export default ViewTicket;

18
src/Routes/Nav.js
View File

@@ -16,12 +16,12 @@ export const nav = [
Icon: AiOutlineHome,
},
{
title: "ANALYTICS",
title: "Analytics",
type: "title",
},
{
title: "Manage Human Resource",
Icon: TbAlignBoxBottomCenter,
Icon: FaRegAddressCard,
path: "/home",
submenu: [
{
@@ -123,7 +123,7 @@ export const nav = [
type: "accordion",
},
{
title: "SHOP",
title: "Shop",
type: "title",
},
{
@@ -138,18 +138,6 @@ export const nav = [
path: "/support-ticket",
Icon: MdOutlineNotifications,
},
{
title: "Notification",
type: "single",
path: "/notification",
Icon: TbAlignBoxBottomCenter,
},
{
title: "Settings",
type: "single",
path: "/setting",
Icon: IoSettingsOutline,
},
// {
// title: "Settings",
// type: "title",

45
src/Routes/Routes.js
View File

@@ -38,19 +38,8 @@ import BrandVoucherTable from "../Pages/OptiFiiGifsAndVouchers/BrandVoucherTable
import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher";
import Profile from "../Pages/Profile/Profile";
import WalletsPullBackFunds from "../Pages/ManageHumanResource/WalletsPullBackFunds";
import ViewReports from "../Pages/Report/ViewReports";
import ApplyForGiftCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard";
import ApplyForDigitalCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard";
import BenifitOverView from "../Pages/OptiFiiTaxBenefit/BeinifitOverView";
import ViewTicket from "../Pages/SupportAndTicket/ViewTicket";
import Notification from "../Pages/Notification/Notification";
import WalletRequest from "../Pages/OptiFiiExpense/WalletRequest"
import OnboardingDirectorDetails from "../Pages/Onboarding/OnboardingDirectorDetails";
import BenifitOverViewView from "../Pages/OptiFiiTaxBenefit/BenefitOverviewView";
import BenefitViewFood from "../Pages/OptiFiiTaxBenefit/BenefitViewFood"
import ExpenseOverView from "../Pages/Expenses/ExpenseOverView"
import ExpenseView from "../Pages/Expenses/ExpenseView"
export const RouteLink = [
{ path: "/", Component: Dashbaord },
{ path: "/expenses", Component: Expenses },
@@ -63,14 +52,6 @@ export const RouteLink = [
{ path: "/reimbursement-request", Component: ReimbursementRequest },
{ path: "/reimbursement-request-view", Component: ReimbursementRequestView },
{ path: "/advance-expense-request", Component: AdvanceExpenseRequest },
{path :"/OnboardingDirectorDetails" , Component : OnboardingDirectorDetails },
// Notification
{ path: "/notification", Component: Notification },
{
path: "/advance-expense-request-view",
Component: AdvanceExpenseRequestView,
@@ -79,7 +60,6 @@ export const RouteLink = [
{ path: "/optiFii-benefit", Component: OptiFiiExpenseDashboard },
{ path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
{ path: "/reports", Component: Report },
{ path: "/reports/view-report", Component: ViewReports },
{ path: "/support-ticket", Component: SupportAndTicket },
{ path: "/settings", Component: Settings },
{ path: "/department", Component: Department },
@@ -119,33 +99,13 @@ export const RouteLink = [
path: "/employees/view/wallet-pull-back-funds",
Component: WalletsPullBackFunds,
},
{
path: "/dashboard/beinefit-overview",
Component: BenifitOverView,
},
{
path:"/dashboard/beinefit-overview/benefit-request/beinefit-overview-view",
Component :BenifitOverViewView
},
{
path: "/gift-card/digital-application-status",
Component: DigitalApplicationStatus,
},
{
path: "/dashboard/expense-over-View",
Component : ExpenseOverView
},
{
path:"/dashboard/expense-over-View/expense-view",
Component : ExpenseView
},
{
path: "/dashboard/beinefit-overview/benefit-request",
Component: BenefitViewFood
},
{ path: "/wallet-program/create-wallet", Component: CreateWallet },
{ path: "/optifii-gifts-dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
{path :"dashboard/wallet-request",Component : WalletRequest},
{ path: "/dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
{
path: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
Component: ApplyForDigitalCard,
@@ -165,5 +125,4 @@ export const RouteLink = [
// =======================[ Gift Voucher ]==============
{ path: "/profile", Component: Profile },
{ path: "/support-ticket/view-ticket", Component: ViewTicket },
];

BIN
src/assets/Modaltick.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/company.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 330 B

BIN
src/assets/fonts/Gilroy-Medium.ttf
View File

Binary file not shown.

BIN
src/assets/icons/bargraph.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 248 B

BIN
src/assets/icons/foods.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/pfp.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 588 B