From 0a73b155ac5812f8985a42c1607277e3a8981780 Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Wed, 25 Sep 2024 20:16:48 +0530 Subject: [PATCH] tab pending --- package-lock.json | 61 +- package.json | 6 +- src/App.css | 8 + src/Components/PayCard.jsx | 97 +++ src/Contexts/GlobalStateProvider.jsx | 102 ++- .../RegisteredCorporate.jsx | 137 ++-- .../RegisteredCorporateAddNewModal.jsx | 88 +++ ...steredCorporateAddNewModalSuccessModal.jsx | 114 ++++ src/Pages/ViewCorporates/ViewCorporates.jsx | 622 ++++++++++++++++++ .../ViewCorporatesEmployeeDetails.jsx | 149 +++++ src/Routes/Routes.js | 4 + src/assets/TRANSCORP_LOGO.svg | 13 + src/assets/gift.svg | 4 + src/assets/logo_card.svg | 13 + src/assets/pancard.svg | 9 + src/assets/rupayImg.png | Bin 0 -> 8181 bytes 16 files changed, 1353 insertions(+), 74 deletions(-) create mode 100644 src/Components/PayCard.jsx create mode 100644 src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModal.jsx create mode 100644 src/Pages/RegisteredCorporate/RegisteredCorporateAddNewModalSuccessModal.jsx create mode 100644 src/Pages/ViewCorporates/ViewCorporates.jsx create mode 100644 src/Pages/ViewCorporates/ViewCorporatesEmployeeDetails.jsx create mode 100644 src/assets/TRANSCORP_LOGO.svg create mode 100644 src/assets/gift.svg create mode 100644 src/assets/logo_card.svg create mode 100644 src/assets/pancard.svg create mode 100644 src/assets/rupayImg.png 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 0000000000000000000000000000000000000000..9112fe6035fd19cc910204fc0531f73d7fb4f820 GIT binary patch literal 8181 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 literal 0 HcmV?d00001