diff --git a/package-lock.json b/package-lock.json index c8bf1bf..df131da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 15006a0..16fc301 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.css b/src/App.css index 4a4f6bf..6c2c0db 100644 --- a/src/App.css +++ b/src/App.css @@ -488,4 +488,12 @@ 80% { 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; } \ No newline at end of file diff --git a/src/Components/PayCard.jsx b/src/Components/PayCard.jsx new file mode 100644 index 0000000..941ae2c --- /dev/null +++ b/src/Components/PayCard.jsx @@ -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 ( + + + + + + + + + 1234 5678 1234 5678 + + + + + + {/* */} + + + + + Valid in india + + + ) +} + +export default PayCard \ No newline at end of file diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 5abeab1..c1bb7f1 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -299,15 +299,111 @@ 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 ( {children} diff --git a/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx b/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx index d8a3eb1..8fcb542 100644 --- a/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx +++ b/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx @@ -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); @@ -52,15 +55,15 @@ const RegisteredCorporate = () => { ), "Company Name": - ( - {item.CompanyName} - ), + ( + {item.CompanyName} + ), "Date Of Onboarding": ( {item.DateOfOnbaording} @@ -104,44 +107,44 @@ const RegisteredCorporate = () => { // // ), "Email Address": ( - - {item.EmailAddress} - + + {item.EmailAddress} + ), "Industry": ( - - {item.Industry} - + + {item.Industry} + ), "Type": ( - - {item.Type} - + + {item.Type} + ), "Subscription": ( - - {item.Subscription} - + + {item.Subscription} + ), "Status": ( - - - {item.Status} - - + + + {item.Status} + + ), - + })); return ( @@ -150,37 +153,47 @@ const RegisteredCorporate = () => { - Corporates - + Corporates + - - - - setSearchTerm(e.target.value)} - /> - + + + + setSearchTerm(e.target.value)} + /> + - }/> - + } + /> + {/* Modal is triggered on button click */} + + - + + + {/* Modal is triggered on button click */} + ); }; diff --git a/src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModal.jsx b/src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModal.jsx new file mode 100644 index 0000000..c706814 --- /dev/null +++ b/src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModal.jsx @@ -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 ( + + + + + Quick Add + + + + + Entity Name + + + + Email ID + + + + + Phone Number + + + + + + + + + + + + + + {/* Success Modal */} + + + ) +} + +export default RegisteredCorporateAddNewModal; diff --git a/src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModalSuccessModal.jsx b/src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModalSuccessModal.jsx new file mode 100644 index 0000000..c07dfec --- /dev/null +++ b/src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModalSuccessModal.jsx @@ -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 ( + + + + + + + + {/* svg with Framer Motion animation */} + + + + + + + + + One More On The List! + + + The Corporate has been added to the List. + + + 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 + + + + + + + + + + ); +}; + +export default RegisteredCorporateAddNewModalSuccessModal; diff --git a/src/Pages/ViewCorporates/ViewCorporates.jsx b/src/Pages/ViewCorporates/ViewCorporates.jsx new file mode 100644 index 0000000..20eaf04 --- /dev/null +++ b/src/Pages/ViewCorporates/ViewCorporates.jsx @@ -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": ( + + {item.EmpId} + + ), + "Name": ( + + Dan Abramov + + {item.Name} + + + ), + "Email Address": ( + + {item.EmailAddress} + + ), + "Mobile number": + ( + {item.MobileNumber} + ), + "Grade": ( + + {item.Grade} + + ), + + "Department": ( + + {item.Department} + + ), + + "Role": ( + + {item.Role} + + ), + + "Status": ( + + + {item.Status} + + + ), + "Action": ( + + + + {item.Action} + + + ), + + })); + + return ( + + + + + + + + + + + Website developers India + + Limited Liability Partnership (LLP) + + + + + + Registered + + + + + + + } + /> + } + /> + + + + + {/* for pink bg */} + + + + + User details + + + + + + + + Full Name + + + Jenny Wilson + + + + + Email address + + + jennywilson@gmail.com + + + + + Phone number + + + +91 4578451245 + + + + + {/* for pink bg */} + + + + + About company + + + + + + + + Company Name + + + WDIPL + + + + + Industry + + + Fintech + + + + + type + + + LLP + + + + + {/* for pink bg */} + + + + + Company Details + + + + + + + + CIN + + + WDIPL + + + + + Company GST number + + + Fintech + + + + + Documents + + + {panCardData.map((item) => ( + + + + {item.title} + + + + + {item.title} + + + {item.size} + + + + + + + ))} + + + + {/* for pink bg */} + + + + + Director Details + + + + + + Director 1 + + + + + Full Name + + + Jenny Wilson + + + + + Email address + + + jennywilson@gmail.com + + + + + Phone number + + + +91 4578451245 + + + + + Documents + + + {panCardData.map((item) => ( + + + + {item.title} + + + + + {item.title} + + + {item.size} + + + + + + + ))} + + + + + Director 2 + + + + + Full Name + + + Jenny Wilson + + + + + Email address + + + jennywilson@gmail.com + + + + + Phone number + + + +91 4578451245 + + + + + Documents + + + {panCardData.map((item) => ( + + + + {item.title} + + + + + {item.title} + + + {item.size} + + + + + + + ))} + + + + {/* for pink bg */} + + + + + Package selected + + + + + + + + + + + OptiFii Benefit + + + + + + Renewal in 30 days + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + + + + + + OptiFii Benefit + + + + + + Renewal in 30 days + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + + + + + + + + + + + + + + + + + + + Employee list + + + + + + + + {/* table knvfidem */} + + + Corporates + + + + + + setSearchTerm(e.target.value)} + /> + + + + + + + + + + + + + + + + + ); +}; + +export default ViewCorporates; diff --git a/src/Pages/ViewCorporates/ViewCorporatesEmployeeDetails.jsx b/src/Pages/ViewCorporates/ViewCorporatesEmployeeDetails.jsx new file mode 100644 index 0000000..9339a2c --- /dev/null +++ b/src/Pages/ViewCorporates/ViewCorporatesEmployeeDetails.jsx @@ -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 ( + + + + + Employee Details + + + + + Dan Abramov + + + Pooja Shah + + Design - UI/UX Designer + + Employee ID : WD-0067 + + Member Since : 1st Jan 2022 + + + + + + Active + + + + + + Phone : + + +91 4578451245 + + + + Email : + + poojashah@wdipl.com + + + + Grade : + + A01 + + + + + + + + + + Card Details + + + + + + + + + Card ID + + 0067445 + + + + Card limit + + ₹ 10,000 + + + + Card type + + Reloadable + + + + + + + + + + + Wallets + + + + + Expense + Benefit + Gift & reward + + + + +

one!

+ + +

two!

+ + +

three!

+ + + + + + + + + + + ) +} + +export default ViewCorporatesEmployeeDetails + + diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 43b7569..5110a63 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -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 }, ]; diff --git a/src/assets/TRANSCORP_LOGO.svg b/src/assets/TRANSCORP_LOGO.svg new file mode 100644 index 0000000..35ab6d7 --- /dev/null +++ b/src/assets/TRANSCORP_LOGO.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/gift.svg b/src/assets/gift.svg new file mode 100644 index 0000000..d940e6f --- /dev/null +++ b/src/assets/gift.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/logo_card.svg b/src/assets/logo_card.svg new file mode 100644 index 0000000..443ef88 --- /dev/null +++ b/src/assets/logo_card.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/pancard.svg b/src/assets/pancard.svg new file mode 100644 index 0000000..c670d23 --- /dev/null +++ b/src/assets/pancard.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/rupayImg.png b/src/assets/rupayImg.png new file mode 100644 index 0000000..9112fe6 Binary files /dev/null and b/src/assets/rupayImg.png differ