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

tab pending

Browse Source
This commit is contained in:
priyanshuvish
2024-09-25 20:16:48 +05:30
parent 350908d73f
commit 0a73b155ac
16 changed files with 1353 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
package-lock.json generated
View File

@@ -19,7 +19,7 @@
"bootstrap": "5.3.3",
"chart.js": "^4.4.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.5",
"framer-motion": "^11.6.0",
"js-cookie": "^3.0.5",
"react": "^18.2.0",
"react-apexcharts": "^1.4.1",
@@ -28,19 +28,21 @@
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.3",
"react-icons": "^5.1.0",
"react-phone-input-2": "^2.15.1",
"react-quill": "^0.0.2",
"react-redux": "^9.1.1",
"react-router-dom": "^6.22.3",
"redux-persist": "^6.0.0",
"redux-persist-transform-encrypt": "^5.1.1",
"uuid": "^10.0.0",
"vanilla-tilt": "^1.8.1",
"xlsx": "^0.18.5",
"yup": "^1.4.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react-swc": "^3.5.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
@@ -2816,7 +2818,6 @@
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz",
"integrity": "sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@swc/core": "^1.5.7"
},
@@ -3255,6 +3256,11 @@
"pnpm": ">=8"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@@ -4278,10 +4284,9 @@
}
},
"node_modules/framer-motion": {
"version": "11.3.28",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.28.tgz",
"integrity": "sha512-dqhoawipEAjqdv32zbv72sOMJZjol7dROWn7t/FOq23WXJ40O4OUybgnO2ldnuS+3YquSn8xO/KKRavZ+TBVOQ==",
"license": "MIT",
"version": "11.6.0",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.6.0.tgz",
"integrity": "sha512-+NJ8MpS2A7apQf3WjSrMl6xlQeYVmPGp8OZ0grNKJEyEILl6EerQrvj2bc+MgrsUndbweZsYdog1/NsxRrkWdA==",
"dependencies": {
"tslib": "^2.4.0"
},
@@ -5232,6 +5237,16 @@
],
"license": "MIT"
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5245,6 +5260,16 @@
"integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
"license": "MIT"
},
"node_modules/lodash.reduce": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
"integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw=="
},
"node_modules/lodash.startswith": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
"integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww=="
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5875,6 +5900,23 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT"
},
"node_modules/react-phone-input-2": {
"version": "2.15.1",
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
"integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
"dependencies": {
"classnames": "^2.2.6",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.reduce": "^4.6.0",
"lodash.startswith": "^4.2.1",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
"react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
}
},
"node_modules/react-quill": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/react-quill/-/react-quill-0.0.2.tgz",
@@ -6880,6 +6922,11 @@
"uuid": "dist/bin/uuid"
}
},
"node_modules/vanilla-tilt": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
"integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
},
"node_modules/vite": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",

6
package.json
View File

@@ -21,7 +21,7 @@
"bootstrap": "5.3.3",
"chart.js": "^4.4.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.5",
"framer-motion": "^11.6.0",
"js-cookie": "^3.0.5",
"react": "^18.2.0",
"react-apexcharts": "^1.4.1",
@@ -30,19 +30,21 @@
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.3",
"react-icons": "^5.1.0",
"react-phone-input-2": "^2.15.1",
"react-quill": "^0.0.2",
"react-redux": "^9.1.1",
"react-router-dom": "^6.22.3",
"redux-persist": "^6.0.0",
"redux-persist-transform-encrypt": "^5.1.1",
"uuid": "^10.0.0",
"vanilla-tilt": "^1.8.1",
"xlsx": "^0.18.5",
"yup": "^1.4.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react-swc": "^3.5.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",

8
src/App.css
View File

@@ -489,3 +489,11 @@
opacity: 0;
}
}
.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus {
background-color: transparent !important;
}
.react-tel-input .selected-flag {
background: transparent !important;
padding: 0 0 0 16px !important;
}

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

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

98
src/Contexts/GlobalStateProvider.jsx
View File

@@ -299,6 +299,100 @@ const GlobalStateProvider = ({ children }) => {
)
const [empData, setEmpData] = useState([
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
{
"EmpId": "145832",
"Name": "Olivia Ipsum",
"EmailAddress": "info@wdimails.com",
"MobileNumber": "+91 ***8451254",
"Grade": "L1",
"Department": "Sales",
"Role": "Sr. Manager",
"Status": "Active",
"Action": "View"
},
]
)
return (
<GlobalStateContext.Provider
value={{
@@ -307,7 +401,9 @@ const GlobalStateProvider = ({ children }) => {
requestsTable,
setRequestTable,
corpData,
setCorpData
setCorpData,
empData,
setEmpData
}}
>
{children}

21
src/Pages/RegisteredCorporate/RegisteredCorporate.jsx
View File

@@ -1,4 +1,4 @@
import { Box, Button, HStack, Icon, Input, InputGroup, InputLeftElement, Tag, Text, VStack } from "@chakra-ui/react";
import { Box, Button, HStack, Icon, Input, InputGroup, InputLeftElement, Tag, Text, useDisclosure, VStack } from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
@@ -10,12 +10,15 @@ import { AiOutlineEdit } from "react-icons/ai";
import { AddIcon, SearchIcon } from "@chakra-ui/icons";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
import { GoDotFill } from "react-icons/go";
import RegisteredCorporateAddNewModal from "./RegisteredCorporateAddNewModal";
const RegisteredCorporate = () => {
const { corpData } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [selectedRadio, setSelectedRadio] = useState("");
const { isOpen, onOpen, onClose } = useDisclosure()
// Simulate loading effect
useEffect(() => {
setIsLoading(true);
@@ -128,8 +131,8 @@ const RegisteredCorporate = () => {
),
"Status": (
<Tag bg={index % 2 === 0 ? "green.100" : "#fff"} size="sm">
<GoDotFill color="green"/> <Text
<Tag bg={index % 2 === 0 ? "green.100" : "#fff"} size="sm">
<GoDotFill color="green" /> <Text
ms={1}
bgGradient="linear(to-l, green.700, green.600)"
bgClip="text"
@@ -167,7 +170,14 @@ const RegisteredCorporate = () => {
/>
</InputGroup>
<PrimaryButton title={"Add New"} size={'sm'} leftIcon={<AddIcon fontSize={'xs'}/>}/>
<PrimaryButton
onClick={onOpen}
title={"Add New"}
size={'sm'}
leftIcon={<AddIcon fontSize={'xs'} />}
/>
{/* Modal is triggered on button click */}
<RegisteredCorporateAddNewModal isOpen={isOpen} onClose={onClose} />
</HStack>
</HStack>
<NormalTable
@@ -181,6 +191,9 @@ const RegisteredCorporate = () => {
setSelectedRadio={setSelectedRadio}
/>
</VStack>
{/* Modal is triggered on button click */}
<RegisteredCorporateAddNewModal isOpen={isOpen} onClose={onClose} />
</Box>
);
};

88
src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModal.jsx Normal file
View File

@@ -0,0 +1,88 @@
import { Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, Button, Input, Text, HStack } from '@chakra-ui/react'
import React, { useState } from 'react'
import PrimaryButton from '../../Components/Buttons/PrimaryButton'
import SecondaryButton from '../../Components/Buttons/SecondaryButton'
import RegisteredCorporateAddNewModalSuccessModal from './RegisteredCorporateAddNewModalSuccessModal'
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
const RegisteredCorporateAddNewModal = ({ isOpen, onClose }) => {
const [isSuccessOpen, setIsSuccessOpen] = useState(false);
const [phone, setPhone] = useState("");
const handleAddClick = () => {
// Handle the form submission logic here (e.g., send data to the server)
// After successful submission, open the success modal
setIsSuccessOpen(true);
onClose(); // Close the initial add form modal
}
const handleSuccessClose = () => {
setIsSuccessOpen(false);
}
return (
<Box>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Quick Add</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box as='form'>
<Box mb={4}>
<Text fontSize='xs' fontWeight={400} mb={1} color={"#4F4F4F"}>Entity Name</Text>
<Input />
</Box>
<Box mb={4}>
<Text fontSize='xs' fontWeight={400} mb={1} color={"#4F4F4F"}>Email ID</Text>
<Input />
</Box>
<Box mb={10}>
<Text
color={"#4F4F4F"}
fontSize={"xs"}
fontWeight={500}
mb={1}
>
Phone Number
</Text>
<PhoneInput
country={"in"} // Default country
value={phone}
onChange={setPhone}
inputStyle={{
width: "100%",
borderRadius: "md",
paddingLeft: "8",
border: "1px solid #e2e8f0",
height: "40px"
}}
buttonStyle={{
border: "none",
borderRadius: "8px 0 0 8px",
backgroundColor: "transparent",
}}
/>
</Box>
</Box>
<HStack justifyContent={"center"} spacing={4} my={6}>
<SecondaryButton title={"Cancel"} onClick={onClose} />
<PrimaryButton
onClick={handleAddClick} // Add button triggers form submission and success modal
title={"Add"}
/>
</HStack>
</ModalBody>
</ModalContent>
</Modal>
{/* Success Modal */}
<RegisteredCorporateAddNewModalSuccessModal isOpen={isSuccessOpen} onClose={handleSuccessClose} />
</Box>
)
}
export default RegisteredCorporateAddNewModal;

114
src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModalSuccessModal.jsx Normal file
View File

@@ -0,0 +1,114 @@
import {
Box,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
Text,
HStack,
} from "@chakra-ui/react";
import React from "react";
import { motion } from "framer-motion"; // Import motion from framer-motion
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
// Define motion components
const MotionBox = motion(Box);
const MotionSvg = motion.svg;
const MotionCircle = motion.circle;
const MotionPolyline = motion.polyline;
const RegisteredCorporateAddNewModalSuccessModal = ({ isOpen, onClose }) => {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader></ModalHeader>
<ModalCloseButton />
<ModalBody>
<MotionBox
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
mb={8}
>
{/* svg with Framer Motion animation */}
<HStack justifyContent={"center"} mb={6}>
<MotionSvg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 130.2 130.2"
width="60px"
height="60px"
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
transition={{ duration: 0.6, type: "spring", bounce: 0.5 }}
>
<MotionCircle
cx="65.1"
cy="65.1"
r="62.1"
fill="#65F37C"
stroke="#159F2B"
strokeWidth="0"
strokeDasharray="1000"
strokeDashoffset="1000"
initial={{ strokeDashoffset: 1000 }}
animate={{ strokeDashoffset: 0 }}
transition={{ duration: 1 }}
/>
<MotionPolyline
points="100.2,40.2 51.5,88.8 29.8,67.5"
fill="none"
stroke="#159F2B"
strokeWidth="6"
strokeLinecap="round"
strokeMiterlimit="10"
strokeDasharray="1000"
strokeDashoffset="-100"
initial={{ strokeDashoffset: 1000 }}
animate={{ strokeDashoffset: 0 }}
transition={{ duration: 0.7, delay: 1 }}
/>
</MotionSvg>
</HStack>
<Text
color={"#100F14"}
fontSize={"lg"}
fontWeight={"500"}
mb={2}
textAlign={"center"}
>
One More On The List!
</Text>
<Text
color={"#4F4F4F"}
fontSize={"xs"}
fontWeight={"500"}
textAlign={"center"}
mb={10}
>
The Corporate has been added to the List.
</Text>
<Text
color={"#4F4F4F"}
fontSize={"xs"}
fontWeight={"500"}
textAlign={"center"}
>
An email with the onboarding link along with the instruction has been sent has been sent.You can view their onboarding status, by clicking on the button below
</Text>
<HStack justifyContent={"center"} mt={6}>
<PrimaryButton title={"Check Application Status"} />
</HStack>
</MotionBox>
</ModalBody>
</ModalContent>
</Modal>
);
};
export default RegisteredCorporateAddNewModalSuccessModal;

622
src/Pages/ViewCorporates/ViewCorporates.jsx Normal file
View File

@@ -0,0 +1,622 @@
import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Badge, Box, Button, Divider, HStack, Icon, Image, Input, InputGroup, InputLeftElement, List, ListIcon, ListItem, Tag, Text, useDisclosure, VStack } from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { useContext, useEffect, useState } from "react";
import NormalTable from "../../Components/DataTable/NormalTable";
import { AddIcon, SearchIcon } from "@chakra-ui/icons";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
import { BsBuildingsFill } from "react-icons/bs";
import { GoDotFill } from "react-icons/go";
import { FiUser } from "react-icons/fi";
import { LuArchive } from "react-icons/lu";
import { GoClock } from "react-icons/go";
import { BsDownload } from "react-icons/bs";
import { FaRegFile } from "react-icons/fa";
import { LuEye } from "react-icons/lu";
import { MdCheckCircle, MdOutlineModeEdit } from "react-icons/md";
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
import pancard from "../../assets/pancard.svg"
import gift from "../../assets/gift.svg"
const ViewCorporates = () => {
const { empData } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [selectedRadio, setSelectedRadio] = useState("");
const panCardData = [
{ id: 1, src: pancard, title: "Wdipl PAN. pdf", size: "201 kb" },
{ id: 2, src: pancard, title: "Corporate PAN. pdf", size: "310 kb" },
{ id: 3, src: pancard, title: "Personal PAN. pdf", size: "150 kb" },
];
// Simulate loading effect
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => setIsLoading(false), 500);
return () => clearTimeout(timer);
}, []);
console.log(empData);
// Table headers
const tableHeadRow = [
"Select",
"Emp Id",
"Name",
"Email Address",
"Mobile number",
"Grade",
"Department",
"Role",
"Status",
"Action"
];
// Extracted data for table
const extractedArray = empData?.map((item, index) => ({
"Emp Id": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.EmpId}
</Text>
),
"Name": (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<Text
as={"span"}
display={"flex"}
fontSize={"xs"}
gap={2}
alignItems={"center"}
>
{item.Name}
</Text>
</HStack>
),
"Email Address": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.EmailAddress}
</Text>
),
"Mobile number":
(<Text
as={"span"}
display={"flex"}
fontSize={"xs"}
gap={2}
alignItems={"center"}
>
{item.MobileNumber}
</Text>),
"Grade": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Grade}
</Text>
),
"Department": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Department}
</Text>
),
"Role": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Role}
</Text>
),
"Status": (
<Tag bg={index % 2 === 0 ? "green.100" : "#fff"} size="sm">
<GoDotFill color="green" /> <Text
ms={1}
bgGradient="linear(to-l, green.700, green.600)"
bgClip="text"
fontSize={"xs"}
as={"span"}
fontWeight={600}
>
{item.Status}
</Text>
</Tag>
),
"Action": (
<HStack>
<LuEye color="#6311CB" />
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"} mb={0}>
{item.Action}
</Text>
</HStack>
),
}));
return (
<Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<MiniHeader backButton={true} title={""} />
<Box shadow={'md'} p={4} bg={'#fff'}>
<HStack justifyContent={"space-between"}>
<Box>
<HStack spacing={4} alignItems={"start"}>
<BsBuildingsFill />
<VStack spacing={"1"} alignItems={"start"}>
<Text mb={0} fontSize={"md"} fontWeight={500}>
Website developers India
</Text>
<Text fontSize={"sm"} color={"#999999"}>Limited Liability Partnership (LLP)</Text>
</VStack>
<Badge
bg={"#ebf8ef"}
color={"#00A438"}
fontSize={"xs"}
borderRadius={"full"}
fontWeight={400}
py={2}
px={4}
>
<HStack>
<GoDotFill color={"#00A438"} />
<Text mb={0}>Registered</Text>
</HStack>
</Badge>
</HStack>
</Box>
<HStack>
<PrimaryButton
title={"Edit"}
size={'sm'}
leftIcon={<MdOutlineModeEdit fontSize={"xs"} color="#fff" />}
/>
<SecondaryButton
title={"Archive"}
size={'sm'}
leftIcon={<LuArchive fontSize={"xs"} />}
/>
</HStack>
</HStack>
<Divider />
</Box>
{/* for pink bg */}
<Box bg={"#f4eefb"} py={2} px={4}>
<HStack>
<FiUser fontSize={"xs"} color="#6311CB" />
<Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
User details
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<HStack spacing={12}>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Full Name
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
Jenny Wilson
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Email address
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
jennywilson@gmail.com
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Phone number
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+91 4578451245
</Text>
</VStack>
</HStack>
</Box>
{/* for pink bg */}
<Box bg={"#f4eefb"} py={2} px={4}>
<HStack>
<BsBuildingsFill fontSize={"xs"} color="#6311CB" />
<Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
About company
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<HStack spacing={12}>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Company Name
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
WDIPL
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Industry
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
Fintech
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
type
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
LLP
</Text>
</VStack>
</HStack>
</Box>
{/* for pink bg */}
<Box bg={"#f4eefb"} py={2} px={4}>
<HStack>
<BsBuildingsFill fontSize={"xs"} color="#6311CB" />
<Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
Company Details
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<HStack spacing={12} mb={6}>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
CIN
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
WDIPL
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Company GST number
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
Fintech
</Text>
</VStack>
</HStack>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Documents
</Text>
<HStack spacing={4} wrap="wrap">
{panCardData.map((item) => (
<Box key={item.id} bg={"#F4F4F4"} p={2} rounded={"md"} minW={280}>
<Box p={2}>
<Box w="100%">
<Image src={item.src} alt={item.title} width="100%" objectFit="cover" />
</Box>
<HStack justifyContent={"space-between"} bg={"#FFFFFF"} p={2}>
<Box>
<Text color={"#1E1E1E"} fontWeight={500} fontSize={"sm"} mb={2}>
{item.title}
</Text>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
{item.size}
</Text>
</Box>
<BsDownload color={"#6311CB"} fontSize={"xs"} />
</HStack>
</Box>
</Box>
))}
</HStack>
</Box>
{/* for pink bg */}
<Box bg={"#f4eefb"} py={2} px={4}>
<HStack>
<BsBuildingsFill fontSize={"xs"} color="#6311CB" />
<Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
Director Details
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"}>
Director 1
</Text>
<HStack spacing={12} mb={6}>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Full Name
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
Jenny Wilson
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Email address
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
jennywilson@gmail.com
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Phone number
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+91 4578451245
</Text>
</VStack>
</HStack>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Documents
</Text>
<HStack spacing={4} wrap="wrap">
{panCardData.map((item) => (
<Box key={item.id} bg={"#F4F4F4"} p={2} rounded={"md"} minW={280}>
<Box p={2}>
<Box w="100%">
<Image src={item.src} alt={item.title} width="100%" objectFit="cover" />
</Box>
<HStack justifyContent={"space-between"} bg={"#FFFFFF"} p={2}>
<Box>
<Text color={"#1E1E1E"} fontWeight={500} fontSize={"sm"} mb={2}>
{item.title}
</Text>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
{item.size}
</Text>
</Box>
<BsDownload color={"#6311CB"} fontSize={"xs"} />
</HStack>
</Box>
</Box>
))}
</HStack>
<Divider />
<Text color={"#090909"} fontWeight={500} fontSize={"sm"}>
Director 2
</Text>
<HStack spacing={12} mb={6}>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Full Name
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
Jenny Wilson
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Email address
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
jennywilson@gmail.com
</Text>
</VStack>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
Phone number
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+91 4578451245
</Text>
</VStack>
</HStack>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Documents
</Text>
<HStack spacing={4} wrap="wrap">
{panCardData.map((item) => (
<Box key={item.id} bg={"#F4F4F4"} p={2} rounded={"md"} minW={280}>
<Box p={2}>
<Box w="100%">
<Image src={item.src} alt={item.title} width="100%" objectFit="cover" />
</Box>
<HStack justifyContent={"space-between"} bg={"#FFFFFF"} p={2}>
<Box>
<Text color={"#1E1E1E"} fontWeight={500} fontSize={"sm"} mb={2}>
{item.title}
</Text>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
{item.size}
</Text>
</Box>
<BsDownload color={"#6311CB"} fontSize={"xs"} />
</HStack>
</Box>
</Box>
))}
</HStack>
</Box>
{/* for pink bg */}
<Box bg={"#f4eefb"} py={2} px={4}>
<HStack>
<BsBuildingsFill fontSize={"xs"} color="#6311CB" />
<Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
Package selected
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<HStack spacing={6}>
<Box bg={"#f7f6fe"} p={4} rounded={"md"}>
<HStack justifyContent={"space-between"} mb={4}>
<HStack>
<Image src={gift}></Image>
<Text color={"#393939"} fontWeight={500} fontSize={"sm"} mb={0}>
OptiFii Benefit
</Text>
</HStack>
<HStack>
<GoClock size={16} color={"#00A438"} />
<Text color={"#00A438"} fontWeight={400} fontSize={"xs"} mb={0}>
Renewal in 30 days
</Text>
</HStack>
</HStack>
<Text color={"#6F8196"} fontWeight={400} fontSize={"sm"} mb={8}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
</Text>
<HStack spacing={4}>
<List spacing={3} pl={0}>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
</List>
<List spacing={3} pl={0}>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
</List>
</HStack>
</Box>
<Box bg={"#f7f6fe"} p={4} rounded={"md"}>
<HStack justifyContent={"space-between"} mb={4}>
<HStack>
<Image src={gift}></Image>
<Text color={"#393939"} fontWeight={500} fontSize={"sm"} mb={0}>
OptiFii Benefit
</Text>
</HStack>
<HStack>
<GoClock size={16} color={"#00A438"} />
<Text color={"#00A438"} fontWeight={400} fontSize={"xs"} mb={0}>
Renewal in 30 days
</Text>
</HStack>
</HStack>
<Text color={"#6F8196"} fontWeight={400} fontSize={"sm"} mb={8}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
</Text>
<HStack spacing={4}>
<List spacing={3} pl={0}>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
</List>
<List spacing={3} pl={0}>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
</ListItem>
</List>
</HStack>
</Box>
</HStack>
<Box />
</Box>
<Box mt={4} shadow={'md'} py={2} bg={'#fff'}>
<Accordion allowMultiple>
<AccordionItem border={"none"}>
<Text mb={0}>
<AccordionButton py={2}>
<Box as='span' flex='1' textAlign='left'>
<HStack>
<FaRegFile color="#6311CB" />
<Text fontWeight={500} fontSize={"sm"} mb={0}>
Employee list
</Text>
</HStack>
</Box>
<AccordionIcon bg={"#f4eefb"} rounded={"full"} color={"#6311CB"} />
</AccordionButton>
</Text>
<AccordionPanel pb={4}>
{/* table knvfidem */}
<VStack gap={3} py={3} bg={'#fff'}>
<HStack px={3} w={'100%'} justifyContent={'space-between'}>
<Text as={'span'} fontWeight={500} fontSize={'sm'}>Corporates</Text>
<HStack>
<InputGroup width={350} size="sm" ml={5}>
<InputLeftElement pointerEvents="none">
<SearchIcon color="gray.500" />
</InputLeftElement>
<Input
type="search"
placeholder="Search..."
rounded="md"
bg={'gray.100'}
border={'none'}
// value={searchTerm}
// onChange={(e) => setSearchTerm(e.target.value)}
/>
</InputGroup>
</HStack>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponsors `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
radio={true}
showRadioButton={true}
selectedRadio={selectedRadio}
setSelectedRadio={setSelectedRadio}
/>
</VStack>
</AccordionPanel>
</AccordionItem>
</Accordion>
</Box>
</Box>
);
};
export default ViewCorporates;

149
src/Pages/ViewCorporates/ViewCorporatesEmployeeDetails.jsx Normal file
View File

@@ -0,0 +1,149 @@
import { Badge, Box, HStack, Image, Tab, TabList, TabPanel, TabPanels, Tabs, Text, VStack } from '@chakra-ui/react'
import React from 'react'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import MiniHeader from '../../Components/MiniHeader'
import { BsBuildingsFill } from 'react-icons/bs'
import { GoDotFill } from 'react-icons/go'
import PayCard from '../../Components/PayCard'
const ViewCorporatesEmployeeDetails = () => {
return (
<Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<MiniHeader backButton={true} title={""} />
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Employee Details
</Text>
<HStack spacing={6} alignItems={"start"}>
<HStack spacing={4} alignItems={"start"}>
<Image
borderRadius='full'
boxSize='80px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
/>
<VStack spacing={"1"} alignItems={"start"}>
<Text mb={0} fontSize={"md"} fontWeight={500}>
Pooja Shah
</Text>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Design - UI/UX Designer</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
Employee ID : WD-0067
</Text>
<Text fontSize={"xs"} color={"#999999"}>Member Since : 1st Jan 2022</Text>
</VStack>
<Badge
bg={"#ebf8ef"}
color={"#00A438"}
fontSize={"xs"}
borderRadius={"full"}
fontWeight={400}
py={2}
px={4}
>
<HStack>
<GoDotFill color={"#00A438"} />
<Text mb={0}>Active</Text>
</HStack>
</Badge>
</HStack>
<Box
borderLeft="1px dashed #BCBCBC"
pl={6}
>
<HStack mb={2}>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Phone :</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
+91 4578451245
</Text>
</HStack>
<HStack mb={2}>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Email :</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
poojashah@wdipl.com
</Text>
</HStack>
<HStack>
<Text fontSize={"xs"} color={"#999999"} mb={0}>Grade :</Text>
<Text mb={0} fontSize={"xs"} fontWeight={500}>
A01
</Text>
</HStack>
</Box>
</HStack>
</Box>
<HStack spacing={4} w={"100%"} alignItems={"start"} mt={4}>
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Card Details
</Text>
<HStack spacing={6} alignItems={"start"}>
<HStack spacing={8} alignItems={"center"}>
<PayCard />
<VStack alignItems={"start"} spacing={10}>
<Box>
<Text fontSize={"sm"} color={"#999999"} mb={1}>Card ID</Text>
<Text mb={0} fontSize={"sm"} fontWeight={500}>
0067445
</Text>
</Box>
<Box>
<Text fontSize={"sm"} color={"#999999"} mb={1}>Card limit</Text>
<Text mb={0} fontSize={"sm"} fontWeight={500}>
₹ 10,000
</Text>
</Box>
<Box>
<Text fontSize={"sm"} color={"#999999"} mb={1}>Card type</Text>
<Text mb={0} fontSize={"sm"} fontWeight={500}>
Reloadable
</Text>
</Box>
</VStack>
</HStack>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
Wallets
</Text>
<Box>
<Tabs>
<TabList>
<Tab>Expense</Tab>
<Tab>Benefit</Tab>
<Tab>Gift & reward</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Box>
</HStack>
</Box>
)
}
export default ViewCorporatesEmployeeDetails

4
src/Routes/Routes.js
View File

@@ -1,8 +1,12 @@
import NotFound from "../Pages/NotFound";
import RegisteredCorporate from "../Pages/RegisteredCorporate/RegisteredCorporate";
import ViewCorporates from "../Pages/ViewCorporates/ViewCorporates";
import ViewCorporatesEmployeeDetails from "../Pages/ViewCorporates/ViewCorporatesEmployeeDetails";
export const RouteLink = [
{ path: "/", Component: NotFound },
{ path: "/register-corporates", Component: RegisteredCorporate },
{ path: "/view-corporates", Component: ViewCorporates },
{ path: "/view-corporates-employee-details", Component: ViewCorporatesEmployeeDetails },
];

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

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

After

Width:  |  Height:  |  Size: 13 KiB

4
src/assets/gift.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="30" height="19" viewBox="0 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.0509 7.46079H14.5308L15.7219 7.21264C16.0267 7.14884 16.2891 6.95741 16.445 6.69154C16.601 6.42212 16.6365 6.09953 16.5408 5.8053C16.4309 5.46144 16.1579 5.19202 15.8105 5.08922C15.4631 4.98642 15.0873 5.05732 14.8073 5.28774L12.9107 6.81561L11.0142 5.28774C10.7306 5.06086 10.3584 4.98642 10.011 5.08922C9.66356 5.19202 9.3906 5.46144 9.2807 5.8053C9.18499 6.09953 9.22044 6.42567 9.37642 6.69154C9.5324 6.96095 9.79472 7.14884 10.0996 7.21264L11.2907 7.46079H7.77055C7.55786 7.46079 7.38416 7.63449 7.38416 7.84719V10.0947C7.38416 10.3074 7.55786 10.4811 7.77055 10.4811H8.08251V16.5146C8.08251 16.7273 8.25621 16.901 8.46891 16.901H17.349C17.5617 16.901 17.7354 16.7273 17.7354 16.5146V10.4811H18.0474C18.2601 10.4811 18.4338 10.3074 18.4338 10.0947V7.84719C18.4338 7.63449 18.2601 7.46079 18.0474 7.46079H18.0509ZM15.2965 5.88329C15.3567 5.8372 15.4241 5.81239 15.4985 5.81239C15.5305 5.81239 15.5624 5.81593 15.5943 5.82657C15.6971 5.85847 15.7751 5.93292 15.8105 6.03572C15.8389 6.12435 15.8282 6.21651 15.7821 6.29805C15.7361 6.37958 15.6616 6.43276 15.5694 6.45048L14.2543 6.72699L15.3 5.88329H15.2965ZM10.05 6.29805C10.0039 6.21651 9.99324 6.12435 10.0216 6.03572C10.0535 5.93292 10.1315 5.85493 10.2378 5.82657C10.2697 5.81593 10.3016 5.81239 10.3336 5.81239C10.4045 5.81239 10.4754 5.8372 10.5356 5.88329L11.5814 6.72699L10.2662 6.45048C10.174 6.43276 10.0996 6.37604 10.0535 6.29805H10.05ZM11.6629 16.1282H8.85886V10.4811H11.6629V16.1282ZM11.6629 9.70829H8.16404V8.23714H11.6629V9.70829ZM13.3893 16.1282H12.4393V8.23714H13.3893V16.1282ZM16.9662 16.1282H14.1621V10.4811H16.9662V16.1282ZM17.6645 9.70829H14.1656V8.23714H17.6645V9.70829Z" fill="#3725EA"/>
<path d="M29.1182 13.8386L27.8598 1.75736C27.7463 0.683243 26.7821 -0.0966453 25.708 0.00970325L3.57685 2.31392C3.08765 2.36355 2.65871 2.59752 2.3503 2.93429H1.96036C0.879148 2.93429 0 3.81343 0 4.89464V17.0396C0 18.1209 0.879148 19 1.96036 19H24.212C25.2932 19 26.1724 18.1209 26.1724 17.0396V16.1144L27.3741 15.9903C28.4482 15.8769 29.2317 14.9127 29.1218 13.8386H29.1182ZM25.1053 17.0432C25.1053 17.5359 24.7048 17.9401 24.2085 17.9401H1.95681C1.46406 17.9401 1.05994 17.5395 1.05994 17.0432V4.89819C1.05994 4.40544 1.46052 4.00132 1.95681 4.00132H24.2085C24.7012 4.00132 25.1053 4.4019 25.1053 4.89819V17.0432ZM27.2607 14.9339L26.1688 15.0474V4.89464C26.1688 3.81343 25.2897 2.93429 24.2085 2.93429H7.89815L25.8214 1.0661C25.8533 1.0661 25.8852 1.06255 25.9171 1.06255C26.1227 1.06255 26.3177 1.13345 26.4808 1.26107C26.6651 1.4135 26.7821 1.6262 26.8069 1.86371L28.0654 13.9449C28.115 14.4376 27.757 14.8772 27.2678 14.9304L27.2607 14.9339Z" fill="#3725EA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

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

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

After

Width:  |  Height:  |  Size: 6.8 KiB

9
src/assets/pancard.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 134 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB