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

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

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-10 13:44:06 +05:30
parent 2177d91d9d 2ece190d43
commit e431699e6b
38 changed files with 4326 additions and 1065 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@@ -28,6 +28,7 @@
"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",
@@ -5321,6 +5322,14 @@
"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,6 +30,7 @@
"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",

14
src/App.css
View File

@@ -46,6 +46,7 @@ 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%);
@@ -535,4 +536,17 @@ 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 */

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

@@ -63,9 +63,9 @@ const NormalTable = ({
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
<TableCaption p={total ? 0 : null}>
{total ? total : "Tanami v1.0.0"}
</TableCaption>
{/* <TableCaption p={total ? 0 : null}>
{total ? total : "Optifii v1.0.0"}
</TableCaption> */}
<Thead bg="purple.100">
<Tr>
{showRadioButton && (

183
src/Contexts/GlobalStateProvider.jsx
View File

@@ -20,6 +20,7 @@ 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";
const getRandomDate = (start, end) => {
const date = new Date(
start.getTime() + Math.random() * (end.getTime() - start.getTime())
@@ -58,58 +59,70 @@ 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: "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",
@@ -118,24 +131,28 @@ 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",
@@ -144,17 +161,18 @@ const GlobalStateProvider = ({ children }) => {
{
wallet: "Food",
walBal: "₹ 5000",
}, {
},
{
wallet: "Travel",
walBal: "₹ 7000",
}, {
},
{
wallet: "Toor",
walBal: "₹ 3000",
},]
},
],
reportamount: "₹ 50000",
approver:"Reethik thota",
},
{
id: 5,
@@ -162,32 +180,39 @@ 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",
@@ -196,17 +221,18 @@ const GlobalStateProvider = ({ children }) => {
{
wallet: "Food",
walBal: "₹ 5000",
}, {
},
{
wallet: "Travel",
walBal: "₹ 7000",
}, {
},
{
wallet: "Toor",
walBal: "₹ 3000",
},]
},
],
reportamount: "₹ 50000",
approver:"Reethik thota",
},
{
id: 7,
@@ -214,18 +240,24 @@ 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",
@@ -234,29 +266,33 @@ 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,
@@ -264,36 +300,49 @@ 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,
@@ -2083,7 +2132,7 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// Recent transaction
// Recent transaction
const [recentTransaction, setRecentTransaction] = useState([
{
@@ -2137,7 +2186,7 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// Wallets EB&G
// Wallets EB&G
const [walletExpense, setWalletExpense] = useState([
{
wallet: "Food",
@@ -2165,38 +2214,49 @@ const GlobalStateProvider = ({ children }) => {
},
]);
// main dash
// main dash
const [dash, setDash] = useState([
{
id: 1,
wallet: "Employee Wallet",
wallet: "Food",
walletAmount: "₹ 70,000",
balanceRemaining: "₹ 20,000",
status: "Approved",
totalEmployees: 500,
users: 5,
icon: foods,
},
{
id: 2,
wallet: "Travel Wallet",
wallet: "Fuel",
walletAmount: "₹ 50,000",
balanceRemaining: "₹ 15,000",
status: "Approved",
totalEmployees: 200,
users: 3,
icon: Fuel,
},
{
id: 3,
wallet: "Food Wallet",
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,
},
]);
@@ -2390,6 +2450,11 @@ const GlobalStateProvider = ({ children }) => {
setSupportAndTicket,
recentReports, setRecentReports,
recentTransaction, setRecentTransaction,
recentReports,
setRecentReports,
recentTransaction,
setRecentTransaction,
walletExpense,
setWalletExpense,
dash,

121
src/Layout/DefaultLayout.jsx
View File

@@ -5,7 +5,10 @@ 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,
@@ -43,6 +46,10 @@ 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
@@ -125,13 +132,12 @@ const DashboardLayout = ({ isOnline }) => {
navigate("/login");
};
if (isSplashVisible) {
return <SplashScreen />;
}
return (
<Box height={"100vh"}>
<Box height={"100vh"} className="gilroy">
<HeaderMain
isDrawerOpen={isDrawerOpen}
logOutHandler={logOutHandler}
@@ -221,7 +227,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`}
>
@@ -257,7 +263,7 @@ const DashboardLayout = ({ isOnline }) => {
flexDirection={"column"}
gap={1}
>
{submenu?.map(
{/* {submenu?.map(
(
{
title: subMenuTitle,
@@ -292,7 +298,6 @@ const DashboardLayout = ({ isOnline }) => {
<SubIcon
fontSize={"8px"}
className="ms-2"
// style={{ zIndex: 111, color:colorCode?colorCode:"" }}
/>
)}
<Text
@@ -306,6 +311,71 @@ 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>
@@ -315,7 +385,8 @@ const DashboardLayout = ({ isOnline }) => {
<Text
as={"span"}
key={index}
className="web-text-xxsmall fw-600 text-secondary fw-bold"
fontSize="small"
className=" fw-600 text-secondary fw-bold"
>
{title}
</Text>
@@ -353,6 +424,44 @@ 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>

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

File diff suppressed because it is too large Load Diff

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

@@ -205,12 +205,6 @@ const Approvers = () => {
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) => (

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

@@ -1,69 +1,115 @@
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
} from '@chakra-ui/react';
import Header from './Header';
Box,
Text,
Stepper,
Step,
StepIndicator,
StepStatus,
StepSeparator,
useSteps,
StepTitle,
Divider,
Button,
HStack,
IconButton,
Flex,
useDisclosure,
Image,
} 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 {
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";
// 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,
},
];
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({
// 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();
@@ -71,175 +117,216 @@ const handleNext = () => {
// 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}
/>,
];
// 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,
}}
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" }}
>
{/* 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>
{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>
{/* 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"}>
{/* 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>
{/* 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>
<Box>
<Box w={{ base: "70%", lg: "92%" }} mx={"auto"}>
{/* Render the current step component */}
{stepComponents[activeStep]}
<Box>
<Box
w={{ base: "70%", lg: "92%" }}
mx={"auto"}
>
{/* Render the current step component */}
{stepComponents[activeStep]}
{/* <HStack mt={6}>
{/* <HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
@@ -267,16 +354,16 @@ const handleNext = () => {
{activeStep === steps.length - 1 ? 'Next step' : 'Next step'}
</Button>
</HStack> */}
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
{/* Modal for final step */}
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
</Box>
</Box>
);
</Box>
{/* Modal for final step */}
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
</Box>
);
};
export default OnboardingFrame;

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

@@ -0,0 +1,452 @@
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 Normal file
View File

@@ -0,0 +1,452 @@
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,8 +55,9 @@ 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);
@@ -65,8 +66,6 @@ const AdvanceExpenseRequest = () => {
const [users, setusers] = useState(50);
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
@@ -127,25 +126,32 @@ 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) => ({
@@ -181,26 +187,33 @@ 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) => ({
@@ -238,58 +251,50 @@ 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: <NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={pendingTable}
isLoading={isLoading}
/>
content: <AdvanceExpensePending />,
},
{
label: 'Completed',
content: <NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={completedTable}
isLoading={isLoading}
/>
label: "Completed",
content: <AdvanceExpenseCompleted />,
},
{
label: 'Rejected',
content: <NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={rejectedTable}
isLoading={isLoading}
/>
}
label: "Rejected",
content: (
<AdvanceExpenseReject/>
),
},
];
return (
@@ -297,123 +302,12 @@ 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) => (
@@ -424,23 +318,26 @@ 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"
@@ -451,11 +348,8 @@ 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 Normal file
View File

@@ -0,0 +1,452 @@
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;

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

@@ -22,6 +22,9 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useNavigate } from "react-router-dom";
const ReimbursementRequest = () => {
@@ -44,21 +47,20 @@ const ReimbursementRequest = () => {
// ===============================[ Table Header ]
const tableHeadRow = [
// "Select",
"Sr. No",
"Name",
"Status",
"Email Address",
"Mobile number",
"Grade",
"Department",
"Role",
"Action",
"Report name",
"Report by",
"Report amount",
"Date & time",
"Approver",
"Disburser",
"Action"
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = employees.map((item, index) => ({
const extractedArray = employees.map((item, index) =>
({
"Sr. No": (
<Text
as={"span"}
@@ -70,13 +72,15 @@ const ReimbursementRequest = () => {
{index + 1}
</Text>
),
"Name": item?.Name,
"Email Address": item?.emailAddress,
"Mobile number": item?.mobileNumber,
Grade: item?.Grade,
Department: item?.Department,
Role: item?.Role,
Status: (
"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'

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

@@ -59,7 +59,6 @@ const ReimbursementRequestView = () => {
// ===============================[ Table Header ]
const tableHeadRow = [
"Select",
"Sr. No",
"Name",
"Email Address",

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

@@ -18,7 +18,7 @@ import {
Text,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import React, { useContext, useEffect, useMemo, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
@@ -102,66 +102,35 @@ const WalletProgram = () => {
// const extractedArray = reportsHistory.map((item)=>({ }))
walletProgram.map((item) => console.log(item));
const extractedArray = walletProgram.map((item, index) => ({
ID: (
// <Radio colorScheme="purple" value="1">
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
>
{item?.id}
</Text>
// </Radio>
),
"Wallet Name": (
<Box display="flex" flexDirection="row" alignItems="center" gap={1}>
<Image
h="23px"
src={item.walletName[0]?.icon}
alt={item.walletName[0]?.icon}
/>
{/* <Text fontSize={"xs"}></Text> */}
{item?.walletName[0]?.name}
</Box>
),
"Wallet type": item?.WalletType,
Department: item?.mobileNumber,
Grade: item?.Grade,
Department: item?.department,
Role: item?.Role,
Status: (
<Tag
my={1}
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,
"Created on": item?.CreatedOn,
"Created by": item?.CreatedBy,
}));
const extractedArray = useMemo(() => {
return walletProgram.map((item) => ({
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} />
{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,
"Created on": item?.CreatedOn,
"Created by": item?.CreatedBy,
}));
}, [walletProgram]);
return (
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>

78
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx Normal file
View File

@@ -0,0 +1,78 @@
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>
))}
</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>
);
};
export default ApplyForDigitalCard;

110
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx Normal file
View File

@@ -0,0 +1,110 @@
import React, { useState } from "react";
import {
Box,
Button,
Flex,
Radio,
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 WhereToShare from "./WhereToShare";
const handleNext = () => {
if (step < steps.length) {
setStep(step + 1);
}
};
const handlePrev = () => {
if (step > 1) {
setStep(step - 1);
}
};
const Stepper = () => {
const [step, setStep] = useState(1);
const steps = [
{ component: <SelectCard handleNext={handleNext}/>, description: "In Progress" },
{
component: <WhereToShare handleNext={handleNext} />,
label: "Where to share?",
description: "Pending",
},
{
component: <DigiTable handleNext={handleNext} />,
label: "Select employee",
description: "Pending",
},
];
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 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 mt={4}>{steps[currentStep].component}</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>
);
};
export default Stepper;

88
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx Normal file
View File

@@ -0,0 +1,88 @@
import {
Box,
Button,
Image,
Radio,
RadioGroup,
Stack,
Text,
Drawer,
DrawerBody,
DrawerFooter,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
useDisclosure,
} from "@chakra-ui/react";
import React, { useState } from "react";
import FileUploader from "../../../Components/FileUploader/FileUploader";
import blackmen from "../../../assets/blackmen.png";
import koreanpfp from "../../../assets/koreanboi.png";
import asian from "../../../assets/asain.png";
import goth from "../../../assets/goth.png";
import womenpfp from "../../../assets/womenpfp1.png";
import { useRef } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DigiTable from "./DigitalTable";
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
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;

274
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx Normal file
View File

@@ -0,0 +1,274 @@
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;

149
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx Normal file
View File

@@ -0,0 +1,149 @@
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";
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 = ({ handleNext }) => {
const tiltRefs = useRef([]);
useEffect(() => {
tiltRefs.current.forEach((node) => {
if (node) {
VanillaTilt.init(node, {
max: 13,
speed: 700,
glare: true,
scale: 1.05,
"max-glare": 0.5,
onEnter: () => {
node.style.zIndex = 10; // Bring to top on hover
},
onLeave: () => {
node.style.zIndex = 1; // Reset zIndex after hover
},
});
}
});
// Cleanup VanillaTilt instances on unmount
return () => {
tiltRefs.current.forEach((node) => {
if (node?.vanillaTilt) {
node.vanillaTilt.destroy();
}
});
};
}, [tiltRefs]);
return (
<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"
>
<Button
onClick={handleNext}
p={4}
bgColor="transparent"
border="1px solid #fff"
color="#fff"
fontSize="small"
_hover={{ bgColor: "transparent", color: "white" }}
>
Select
</Button>
<Text as="span" fontSize="large">
{card.title}
</Text>
<Text as="span" fontSize="large">
{card.subtitle}
</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.img && (
<Image
src={card.img}
h="111px"
objectFit="cover"
position="absolute"
bottom="-1.5rem"
left="-1.5rem"
borderRadius="md"
/>
)}
</VStack>
</Box>
))}
</Box>
</Box>
);
};
export default SelectCard;

46
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx Normal file
View File

@@ -0,0 +1,46 @@
import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react";
import { Grid, GridItem } from "@chakra-ui/react";
import React from "react";
const formsInfos = [
{
label: "Address line 1",
},
{
label: "Address line 2",
},
{
label: "Pincode",
},
{
label: "City",
},
{
label: "Single Point Activation Number",
},
];
const SingleAddress = () => {
return (
<Box p={4}>
<Text color="#5E5E5E" fontWeight={600} fontSize="small" mb={4}>
Fill address details
</Text>
<FormControl>
<Grid templateColumns='repeat(2, 1fr)' gap={6}>
{formsInfos.map((val) => (
<GridItem
key={val.label}
>
<FormLabel>{val.label}</FormLabel>
<Input type="text" />
</GridItem>
))}
</Grid>
</FormControl>
</Box>
);
};
export default SingleAddress;

52
src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx Normal file
View File

@@ -0,0 +1,52 @@
import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
import React, { useState } from "react";
import SingleAddress from "./SingleAddress";
const WhereToShare = ({ register }) => {
const [selectedValue, setSelectedValue] = useState("1");
const renderContent = () => {
switch (selectedValue) {
case "1":
return <SingleAddress />;
case "2":
return <Box>Add department content</Box>;
default:
return null;
}
};
return (
<>
<RadioGroup onChange={setSelectedValue} value={selectedValue}>
<Stack spacing={4} direction="row">
<Box
p={1}
display="flex"
flexDirection="row"
borderRadius="5px"
bgColor="#F4F4F4"
>
<Radio size="sm" colorScheme="purple" value="1">
Single address
</Radio>
</Box>
<Box
p={2}
display="flex"
flexDirection="row"
borderRadius="5px"
bgColor="#F4F4F4"
>
<Radio size="sm" colorScheme="blue" value="2">
Multiple address
</Radio>
</Box>
</Stack>
</RadioGroup>
<Box mt={4}>{renderContent()}</Box>
</>
);
};
export default WhereToShare;

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

@@ -1,41 +1,65 @@
import { Box, Button, Checkbox, Flex, Heading, Image, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuItem, MenuList, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Tag, TagLabel } from '@chakra-ui/react'
import React, { useContext, useEffect, useState } from 'react'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import { HStack, Text, VStack } from '@chakra-ui/react';
import { BsArrowsAngleExpand, BsFilterRight } from 'react-icons/bs';
import GlobalStateContext from '../../Contexts/GlobalStateContext';
import {
Box,
Button,
Checkbox,
Flex,
Heading,
Image,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Tab,
TabIndicator,
TabList,
TabPanel,
TabPanels,
Tabs,
Tag,
TagLabel,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { HStack, Text, VStack } from "@chakra-ui/react";
import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import koreanpfp from "../../assets/koreanboi.png";
import asian from "../../assets/asain.png";
import womenpfp from "../../assets/womenpfp1.png";
import NormalTable from '../../Components/DataTable/NormalTable';
import { AiOutlineCalendar } from 'react-icons/ai';
import { IoMdArrowDropdown } from 'react-icons/io';
import { LuListFilter } from 'react-icons/lu';
import { ArrowForwardIcon, ChevronDownIcon, SearchIcon } from '@chakra-ui/icons';
import NormalTable from "../../Components/DataTable/NormalTable";
import { AiOutlineCalendar } from "react-icons/ai";
import { IoMdArrowDropdown } from "react-icons/io";
import { LuListFilter } from "react-icons/lu";
import {
ArrowForwardIcon,
ChevronDownIcon,
SearchIcon,
} from "@chakra-ui/icons";
import info from "../../assets/info.png";
import redinfo from "../../assets/redinfo.png";
import { Link, NavLink } from 'react-router-dom';
import { CiCalendar } from 'react-icons/ci';
import ReactApexChart from 'react-apexcharts';
import { GoDotFill } from 'react-icons/go';
import GC from '../../assets/GC.svg'
import GPR from '../../assets/GPR.svg'
import BV from '../../assets/BV.svg'
import { NavLink } from "react-router-dom";
import { CiCalendar } from "react-icons/ci";
import ReactApexChart from "react-apexcharts";
import { GoDotFill } from "react-icons/go";
import GC from "../../assets/GC.svg";
import GPR from "../../assets/GPR.svg";
import BV from "../../assets/BV.svg";
const GiftDashboard = () => {
const { digital } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [users, setusers] = useState(50);
const [searchTerm, setSearchTerm] = useState("");
const [chartData, setChartData] = useState({
series: [78, 68, 87], // Ensure these are numeric values, not strings
options: {
chart: {
height: 390,
type: 'radialBar',
type: "radialBar",
},
plotOptions: {
radialBar: {
@@ -44,14 +68,14 @@ const GiftDashboard = () => {
endAngle: 270,
hollow: {
margin: 5,
size: '50%',
background: 'transparent',
size: "50%",
background: "transparent",
image: undefined,
},
track: {
show: true,
background: '#f2f2f2', // Light background for the track
strokeWidth: '80%', // Thinner track for the bars
background: "#f2f2f2", // Light background for the track
strokeWidth: "80%", // Thinner track for the bars
},
dataLabels: {
name: {
@@ -65,15 +89,20 @@ const GiftDashboard = () => {
enabled: true,
useSeriesColors: true,
offsetX: -8,
fontSize: '12px',
fontSize: "12px",
formatter: function (seriesName, opts) {
return seriesName + ': ' + opts.w.globals.series[opts.seriesIndex] + '%';
return (
seriesName +
": " +
opts.w.globals.series[opts.seriesIndex] +
"%"
);
},
},
},
},
colors: ['#C33FAD', '#3725EA', '#6311CB'],
labels: ['540', '300', '230'],
colors: ["#C33FAD", "#3725EA", "#6311CB"],
labels: ["540", "300", "230"],
responsive: [
{
breakpoint: 480,
@@ -100,8 +129,6 @@ const GiftDashboard = () => {
return () => clearTimeout(timer);
}, []); // Empty dependency array means this effect runs once after the component mounts
// ===============================[ Table Header ]
const tableHeadRow = [
"Order ID",
@@ -132,7 +159,7 @@ const GiftDashboard = () => {
"Activation Status",
];
// Voucher tab
// Voucher tab
const voucherTableHeadRow = [
"Sr. no",
@@ -183,15 +210,16 @@ const GiftDashboard = () => {
item?.laodStatus === "Fully Loaded"
? "#027A48"
: item?.laodStatus === "Inactive"
? "red"
: "gray"
? "red"
: "gray"
}
border={`0px solid ${item?.laodStatus === "Fully Loaded"
? "green"
: item?.status === "Inactive"
border={`0px solid ${
item?.laodStatus === "Fully Loaded"
? "green"
: item?.status === "Inactive"
? "red"
: "gray" // default border color if status doesn't match any condition
}`}
}`}
p={1}
px={3}
>
@@ -349,7 +377,6 @@ const GiftDashboard = () => {
"Sr. no": (
// <Radio colorScheme="purple" value="1">
<Checkbox colorScheme="purple">
<Text
as={"span"}
display={"flex"}
@@ -389,22 +416,23 @@ const GiftDashboard = () => {
item?.laodStatus === "Fully Loaded"
? "#027A48"
: item?.laodStatus === "Inactive"
? "red"
: "gray"
? "red"
: "gray"
}
border={`0px solid ${item?.laodStatus === "Fully Loaded"
? "green"
: item?.status === "Inactive"
border={`0px solid ${
item?.laodStatus === "Fully Loaded"
? "green"
: item?.status === "Inactive"
? "red"
: "gray" // default border color if status doesn't match any condition
}`}
}`}
p={1}
px={3}
>
<TagLabel>{item?.laodStatus}</TagLabel>
</Tag>
),
"Total employees": (
"Total employees": (
<Box
position="relative"
display="flex"
@@ -540,22 +568,23 @@ const GiftDashboard = () => {
item?.laodStatus === "Fully Loaded"
? "#027A48"
: item?.laodStatus === "Inactive"
? "red"
: "gray"
? "red"
: "gray"
}
border={`0px solid ${item?.laodStatus === "Fully Loaded"
? "green"
: item?.status === "Inactive"
border={`0px solid ${
item?.laodStatus === "Fully Loaded"
? "green"
: item?.status === "Inactive"
? "red"
: "gray" // default border color if status doesn't match any condition
}`}
}`}
p={1}
px={3}
>
<TagLabel>{item?.laodStatus}</TagLabel>
</Tag>
),
"Total employees": (
"Total employees": (
<Box
position="relative"
display="flex"
@@ -663,32 +692,29 @@ const GiftDashboard = () => {
</Checkbox>
),
"Vouchers": (
Vouchers: (
<HStack>
<Text key={`balance-${index}`} mb={0} fontSize="xs" color={"#007E23"}>
+4 new
</Text>
<Text mb={0} size="xs" bg="#6311CB" rounded="md" py={1.5} px={4} fontWeight={400} color="#fff">
<Text
mb={0}
size="xs"
bg="#6311CB"
rounded="md"
py={1.5}
px={4}
fontWeight={400}
color="#fff"
>
View
</Text>
</HStack>
),
"Valuation": (
<Text mb={0}>
₹ 20,000
</Text>
),
"Type": (
<Text mb={0}>
Admin
</Text>
),
"Style": (
<Text mb={0}>
Admin
</Text>
),
"Status": (
Valuation: <Text mb={0}>₹ 20,000</Text>,
Type: <Text mb={0}>Admin</Text>,
Style: <Text mb={0}>Admin</Text>,
Status: (
<Tag
size={"sm"}
py={1.5}
@@ -698,35 +724,31 @@ const GiftDashboard = () => {
item?.status === "Distributed"
? "#00A438"
: item?.status === "Pending"
? "#EAB600"
: "red"
}
border={`1px solid ${item?.status === "Distributed"
? "#00A438"
: item?.status === "Pending"
? "#EAB600"
: "red"
}`}
}
border={`1px solid ${
item?.status === "Distributed"
? "#00A438"
: item?.status === "Pending"
? "#EAB600"
: "red"
}`}
bg={
item?.status === "Distributed"
? "#ebf8ef"
: item?.status === "Pending"
? "#fdf9eb"
: "#ffe5e5"
? "#fdf9eb"
: "#ffe5e5"
}
>
<Text mb={0}>
{item?.status || "N/A"}
</Text>
<Text mb={0}>{item?.status || "N/A"}</Text>
</Tag>
),
}));
return (
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
<Box>
<HStack align="center" wrap="wrap" gap={4} mb={6}>
{/* Gift Card */}
@@ -746,33 +768,35 @@ const GiftDashboard = () => {
>
<Flex alignItems="center" gap={4}>
<Box
bgGradient={"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"}
bgGradient={
"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
}
p={2}
rounded={"md"}
>
<Image src={GC}
w={10}
h={6}
></Image>
</Box>
<Text fontWeight="500" fontSize="sm" mb={0}>
Apply for gift card
</Text>
<Box
bg="#8241d5"
w="6"
h="6"
display="flex"
alignItems="center"
justifyContent="center"
rounded="full"
>
<ArrowForwardIcon boxSize={5} color="white" />
<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>
<Box
bg="#8241d5"
w="6"
h="6"
display="flex"
alignItems="center"
justifyContent="center"
rounded="full"
>
<ArrowForwardIcon boxSize={5} color="white" />
</Box>
</NavLink>
</Flex>
<Box position={"absolute"} right={-2}>
<Image src={GC}
<Image
src={GC}
w={16}
mixBlendMode={"screen"}
opacity={0.7}
@@ -797,15 +821,13 @@ const GiftDashboard = () => {
<Link to="/brand-voucher/buy-voucher">
<Flex alignItems="center" gap={4}>
<Box
bgGradient={"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"}
bgGradient={
"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
}
p={2}
rounded={"md"}
>
<Image
src={BV}
w={10}
h={6}
></Image>
<Image src={BV} w={10} h={6}></Image>
</Box>
<Text fontWeight="500" fontSize="sm" mb={0}>
Apply for brand voucher
@@ -823,7 +845,8 @@ const GiftDashboard = () => {
</Box>
</Flex>
<Box position={"absolute"} right={-2}>
<Image src={BV}
<Image
src={BV}
w={16}
mixBlendMode={"screen"}
opacity={0.7}
@@ -848,15 +871,13 @@ const GiftDashboard = () => {
>
<Flex alignItems="center" gap={4}>
<Box
bgGradient={"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"}
bgGradient={
"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
}
p={2}
rounded={"md"}
>
<Image
src={GPR}
w={10}
h={6}
></Image>
<Image src={GPR} w={10} h={6}></Image>
</Box>
<Text fontWeight="500" fontSize="sm" mb={0}>
Apply for GPR card
@@ -874,7 +895,8 @@ const GiftDashboard = () => {
</Box>
</Flex>
<Box position={"absolute"} right={-2}>
<Image src={GPR}
<Image
src={GPR}
w={16}
mixBlendMode={"screen"}
opacity={0.7}
@@ -887,14 +909,20 @@ const GiftDashboard = () => {
{/*Application status */}
<HStack alignItems={"start"} spacing={6}>
<Box flex={1} w={700}>
{/* table 1 */}
<Box bg={"#fff"} shadow={"md"} rounded={"md"} p={4} mb={4} h={507} overflowY={"auto"}>
<Box
bg={"#fff"}
shadow={"md"}
rounded={"md"}
p={4}
mb={4}
h={507}
overflowY={"auto"}
>
<HStack justifyContent={"space-between"} mb={2}>
<Heading fontSize={"md"} fontWeight={500} mb={0} >
Application status
<Heading fontSize={"md"} fontWeight={500} mb={0}>
Application status
</Heading>
<HStack>
<Menu>
@@ -956,8 +984,7 @@ const GiftDashboard = () => {
</HStack>
</HStack>
<Tabs position='relative' variant='unstyled'>
<Tabs position="relative" variant="unstyled">
<Box borderBottom={"1px solid #D4D4D4"}>
<TabList>
<Tab
@@ -966,7 +993,8 @@ const GiftDashboard = () => {
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>
}}
>
Digital card
</Tab>
<Tab
@@ -975,7 +1003,8 @@ const GiftDashboard = () => {
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>
}}
>
Physical card
</Tab>
<Tab
@@ -984,7 +1013,8 @@ const GiftDashboard = () => {
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>
}}
>
Insta card
</Tab>
<Tab
@@ -993,13 +1023,18 @@ const GiftDashboard = () => {
fontWeight={500}
_selected={{
color: "#5E0FCD",
}}>
}}
>
GPR card
</Tab>
</TabList>
<TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
<TabIndicator
mt="-1.5px"
height="2px"
bg="#5E0FCD"
borderRadius="1px"
/>
</Box>
<TabPanels>
@@ -1042,24 +1077,14 @@ const GiftDashboard = () => {
{/* box 2 */}
<Box
rounded={"md"}
boxShadow="md"
p={4}
bg="white"
w={350}
>
<Box rounded={"md"} boxShadow="md" p={4} bg="white" w={350}>
<HStack justifyContent={"space-between"} mb={4}>
<Box>
<Text fontSize={"sm"} fontWeight={500} mb={0}>Card distributions</Text>
<Text fontSize={"sm"} fontWeight={500} mb={0}>
Card distributions
</Text>
</Box>
<Box
fontSize={"xs"}
bg={"#F2EEF8"}
p={2}
rounded={"md"}
>
<Box fontSize={"xs"} bg={"#F2EEF8"} p={2} rounded={"md"}>
<Text
as={"span"}
display={"flex"}
@@ -1088,46 +1113,68 @@ const GiftDashboard = () => {
</Box>
</Flex>
<Box>
<HStack justifyContent={"space-between"} borderBottom={"1px solid #f2f2f2"} pb={4}>
<HStack
justifyContent={"space-between"}
borderBottom={"1px solid #f2f2f2"}
pb={4}
>
<HStack spacing={2}>
<GoDotFill color='#C33FAD' />
<Text fontSize={"sm"} fontWeight={500} mb={0}>Gift Cards</Text>
<GoDotFill color="#C33FAD" />
<Text fontSize={"sm"} fontWeight={500} mb={0}>
Gift Cards
</Text>
</HStack>
<Box>
<Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>20%</Text>
<Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>
20%
</Text>
</Box>
</HStack>
<HStack justifyContent={"space-between"} borderBottom={"1px solid #f2f2f2"} py={4}>
<HStack
justifyContent={"space-between"}
borderBottom={"1px solid #f2f2f2"}
py={4}
>
<HStack spacing={2}>
<GoDotFill color='#3725EA' />
<Text fontSize={"sm"} fontWeight={500} mb={0}>Gift Voucher</Text>
<GoDotFill color="#3725EA" />
<Text fontSize={"sm"} fontWeight={500} mb={0}>
Gift Voucher
</Text>
</HStack>
<Box>
<Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>50%</Text>
<Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>
50%
</Text>
</Box>
</HStack>
<HStack justifyContent={"space-between"} borderBottom={"1px solid #f2f2f2"} py={4}>
<HStack
justifyContent={"space-between"}
borderBottom={"1px solid #f2f2f2"}
py={4}
>
<HStack spacing={2}>
<GoDotFill color='#6311CB' />
<Text fontSize={"sm"} fontWeight={500} mb={0}>GPR Cards</Text>
<GoDotFill color="#6311CB" />
<Text fontSize={"sm"} fontWeight={500} mb={0}>
GPR Cards
</Text>
</HStack>
<Box>
<Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>30%</Text>
<Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>
30%
</Text>
</Box>
</HStack>
</Box>
</Box>
</HStack>
{/* last table */}
<Box bg={"#fff"} shadow={"md"} py={4} rounded={"md"}>
<Box px={4} mb={4}>
<Heading fontSize={"md"} fontWeight={500} mb={0} >
<Heading fontSize={"md"} fontWeight={500} mb={0}>
My vouchers
</Heading>
<HStack mt={4} justifyContent={"space-between"}>
@@ -1197,10 +1244,8 @@ const GiftDashboard = () => {
isLoading={isLoading}
/>
</Box>
</Box>
);
};
)
}
export default GiftDashboard
export default GiftDashboard;

395
src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx Normal file
View File

@@ -0,0 +1,395 @@
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 womenpfp from "../../assets/womenpfp1.png";
import blackmen from "../../assets/blackmen.png";
import koreanpfp from "../../assets/koreanboi.png";
import asian from "../../assets/asain.png";
import { GoDotFill } from "react-icons/go";
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 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 = [
"Wallet Name",
"Total employees",
"Benefit limit",
"Remaining amount",
"Pending request",
];
const dashSecArr = dash.map((item, index) => ({
"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>
),
"Benefit limit": (
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
{item.walletAmount || 5000}
</Text>
),
"Remaining amount": (
<Text key={`balance-${index}`} mb={0} fontSize="xs">
{item.balanceRemaining || "₹ 2000"}
</Text>
),
"Pending request": (
<>
<Button
bgColor="#6311CB"
color="#fff"
fontSize="x-small"
w={"87px"}
h={"27px"}
_hover={{ bgColor: "#6311CB", borderRadius: "5px" }}
>
View
</Button>
</>
),
}));
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={dashHeadSecRow}
data={dashSecArr}
isLoading={isLoading}
/>
</Box>
</Box>
);
};
export default BenifitOverView;

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

@@ -27,7 +27,7 @@ import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useNavigate } from "react-router-dom";
import { NavLink, 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";
@@ -39,12 +39,11 @@ 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
@@ -61,12 +60,12 @@ const SupportAndTicket = () => {
// ===============================[ Table Header ]
const tableHeadRow = [
// "Select",
"Ticket ID",
"Subject",
"Status",
"Last update",
"Support",
"Action",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
@@ -83,8 +82,8 @@ const SupportAndTicket = () => {
{item?.TicketID}
</Text>
),
"Subject": item?.Subject,
"Status": (
Subject: item?.Subject,
Status: (
<Box
display={"flex"}
alignItems={"center"}
@@ -94,20 +93,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}
@@ -117,7 +116,21 @@ const SupportAndTicket = () => {
</Box>
),
"Last update": item?.LastUpdate,
"Support": item?.Support,
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>
),
}));
return (
@@ -177,7 +190,8 @@ const SupportAndTicket = () => {
<PrimaryButton
onClick={onOpen}
leftIcon={<AddIcon />}
title={"Add new ticket"} />
title={"Add new ticket"}
/>
</Box>
</Box>
<hr />
@@ -259,46 +273,73 @@ const SupportAndTicket = () => {
<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='Select option'>
<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='Select option'>
<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 Normal file
View File

@@ -0,0 +1,252 @@
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={600}
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={600}
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: FaRegAddressCard,
Icon: TbAlignBoxBottomCenter,
path: "/home",
submenu: [
{
@@ -123,7 +123,7 @@ export const nav = [
type: "accordion",
},
{
title: "Shop",
title: "SHOP",
type: "title",
},
{
@@ -138,6 +138,18 @@ export const nav = [
path: "/support-ticket",
Icon: MdOutlineNotifications,
},
{
title: "Notification",
type: "single",
path: "/home",
Icon: TbAlignBoxBottomCenter,
},
{
title: "Settings",
type: "single",
path: "/home",
Icon: IoSettingsOutline,
},
// {
// title: "Settings",
// type: "title",

42
src/Routes/Routes.js
View File

@@ -39,6 +39,11 @@ import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVou
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";
export const RouteLink = [
{ path: "/", Component: Dashbaord },
{ path: "/expenses", Component: Expenses },
@@ -83,19 +88,36 @@ export const RouteLink = [
path: "/employees/view/recent-transaction",
Component: EmployeesViewRecentTransaction,
},
{ path: "/employees/view/recent-reports", Component: EmployeesViewRecentReports },
{ path: "/employees/view/recent-reports/view", Component: EmployeesViewRecentReportsView },
{ path: "/employees/view/recent-transaction", Component: EmployeesViewRecentTransaction },
{ path: "/employees/view/wallet-pull-back-funds", Component: WalletsPullBackFunds },
{
path: "/employees/view/recent-reports",
Component: EmployeesViewRecentReports,
},
{
path: "/employees/view/recent-reports/view",
Component: EmployeesViewRecentReportsView,
},
{
path: "/employees/view/recent-transaction",
Component: EmployeesViewRecentTransaction,
},
{
path: "/employees/view/wallet-pull-back-funds",
Component: WalletsPullBackFunds,
},
{
path: "/dashboard/beinefit-overview",
Component: BenifitOverView,
},
{
path: "/gift-card/digital-application-status",
Component: DigitalApplicationStatus,
},
{ path: "/wallet-program/create-wallet", Component: CreateWallet },
{ path: "/dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
{
path: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
Component: ApplyForDigitalCard,
},
// =======================[ Gift Voucher ]==============
{ path: "/optifii-gifts-dashboard", Component: GiftDashboard },
{ path: "/brand-voucher", Component: BrandVoucher },
@@ -108,8 +130,8 @@ export const RouteLink = [
},
{ path: "/brand-voucher/voucher-payment", Component: PaymentaVoucher },
// =======================[ Gift Voucher ]==============
{path :"/profile" , Component : Profile}
{ path: "/profile", Component: Profile },
{ path: "/support-ticket/view-ticket", Component: ViewTicket },
];

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 B

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

Binary file not shown.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 588 B