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

Registered Corp

Browse Source
This commit is contained in:
YasinShaikh123
2024-09-27 20:53:28 +05:30
parent 954ed070d6
commit f17209ef43
6 changed files with 252 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/EmptySearchList.jsx
View File

@@ -11,7 +11,7 @@ const EmptySearchList = ({message}) => {
flexDirection={'column'}
w={"100%"} h={"40vh"}
>
<Image w={200} mb={8} src={EmptySearchListImage} alt='empty list' />
{/* <Image w={200} mb={8} src={EmptySearchListImage} alt='empty list' /> */}
{/* <Text className=" fw-bold fs-5" >{message}</Text> */}
<Text className=" fw-bold fs-5" >We do not have any records</Text>
{/* <Text as={'p'} className="web-text-medium">Posts of tanami will appear here.</Text> */}

4
src/Components/HeaderMain.jsx
View File

@@ -45,12 +45,12 @@ const HeaderMain = ({
w={"100%"}
h={{ base: "8%", xl: "6%" }}
position={"relative"}
className={`pt-2 pb-2 fw-400 d-flex ${
className={`pt-4 pb-4 fw-400 d-flex ${
slideDirecttion ? "ps-2" : ""
} justify-content-between align-items-center`}
zIndex={999}
// bgGradient="linear(to-r, #1A0436, #6311CB)" // Linear gradient
bgGradient="linear(to-r, #1A0436, #5E0FCD)"
bgGradient="linear(to-r, #1A0436, #5E0FCD)"
color={"#fff"}
sha
>

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

@@ -72,7 +72,7 @@ const RegisteredCorporate = () => {
console.log(data?.data?.rows);
// Table headers
// Table headers
const tableHeadRow = [
"Select",
"Corp Id",
@@ -94,7 +94,10 @@ const RegisteredCorporate = () => {
gap={2}
alignItems={"center"}
cursor={"pointer"}
onClick={() => navigate("/register-corporates/view-corporates")}
// onClick={() => navigate(`/register-corporates/view-corporates/${item.id}`)}
onClick={() => {
navigate(`/register-corporates/view-corporates/${item.id}`);
}}
>
{item?.corporate_code}
</Text>

307
src/Pages/ViewCorporates/ViewCorporates.jsx
View File

@@ -1,4 +1,27 @@
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 {
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";
@@ -16,16 +39,34 @@ 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"
import { useNavigate } from "react-router-dom";
import pancard from "../../assets/pancard.svg";
import gift from "../../assets/gift.svg";
import { useNavigate, useParams } from "react-router-dom";
import { useGetViewIdQuery } from "../../Services/register.corporate.service";
const ViewCorporates = () => {
const navigate = useNavigate()
const navigate = useNavigate();
const params = useParams();
const id = params?.id;
const { empData } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [selectedRadio, setSelectedRadio] = useState("");
const [getByIdData, setGetByIdData] = useState();
// const { data, isLoading } = useGetViewIdQuery(debouncedSearchTerm, {
// skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip only if searchTerm has been cleared after a previous search
// });
// console.log(data?.data?.rows);
const {
data,
isLoading: corporateLoading,
error,
} = useGetViewIdQuery({ id });
console.log(data?.data);
const panCardData = [
{ id: 1, src: pancard, title: "Wdipl PAN. pdf", size: "201 kb" },
@@ -53,7 +94,7 @@ const ViewCorporates = () => {
"Department",
"Role",
"Status",
"Action"
"Action",
];
// Extracted data for table
const extractedArray = empData?.map((item, index) => ({
@@ -62,13 +103,13 @@ const ViewCorporates = () => {
{item.EmpId}
</Text>
),
"Name": (
Name: (
<HStack>
<Image
borderRadius='full'
boxSize='40px'
src='https://bit.ly/dan-abramov'
alt='Dan Abramov'
borderRadius="full"
boxSize="40px"
src="https://bit.ly/dan-abramov"
alt="Dan Abramov"
/>
<Text
as={"span"}
@@ -86,8 +127,8 @@ const ViewCorporates = () => {
{item.EmailAddress}
</Text>
),
"Mobile number":
(<Text
"Mobile number": (
<Text
as={"span"}
display={"flex"}
fontSize={"xs"}
@@ -95,28 +136,30 @@ const ViewCorporates = () => {
alignItems={"center"}
>
{item.MobileNumber}
</Text>),
"Grade": (
</Text>
),
Grade: (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Grade}
</Text>
),
"Department": (
Department: (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Department}
</Text>
),
"Role": (
Role: (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Role}
</Text>
),
"Status": (
Status: (
<Tag bg={index % 2 === 0 ? "green.100" : "#fff"} size="sm">
<GoDotFill color="green" /> <Text
<GoDotFill color="green" />{" "}
<Text
ms={1}
bgGradient="linear(to-l, green.700, green.600)"
bgClip="text"
@@ -128,22 +171,25 @@ const ViewCorporates = () => {
</Text>
</Tag>
),
"Action": (
<HStack onClick={()=> navigate('/register-corporates/view-corporates-employee-details')}>
Action: (
<HStack
onClick={() =>
navigate("/register-corporates/view-corporates-employee-details")
}
>
<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"}>
(data && <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<MiniHeader backButton={true} title={""} />
<Box roundedTop={"lg"} shadow={'md'} p={4} bg={'#fff'}>
<Box roundedTop={"lg"} shadow={"md"} p={4} bg={"#fff"}>
<HStack justifyContent={"space-between"}>
<Box>
<HStack spacing={4} alignItems={"start"}>
@@ -152,7 +198,9 @@ const ViewCorporates = () => {
<Text mb={0} fontSize={"md"} fontWeight={500}>
Website developers India
</Text>
<Text fontSize={"sm"} color={"#999999"}>Limited Liability Partnership (LLP)</Text>
<Text fontSize={"sm"} color={"#999999"}>
Limited Liability Partnership (LLP)
</Text>
</VStack>
{/* <Badge
@@ -171,30 +219,31 @@ const ViewCorporates = () => {
</Badge> */}
<Tag bg={"green.100" } size="sm">
<GoDotFill color={"#00A438"} /> <Text
ms={1}
bgGradient="linear(to-l, green.700, green.600)"
bgClip="text"
fontSize={"xs"}
as={"span"}
fontWeight={600}
>
Registered
</Text>
</Tag>
<Tag bg={"green.100"} size="sm">
<GoDotFill color={"#00A438"} />{" "}
<Text
ms={1}
bgGradient="linear(to-l, green.700, green.600)"
bgClip="text"
fontSize={"xs"}
as={"span"}
fontWeight={600}
>
Registered
</Text>
</Tag>
</HStack>
</Box>
<HStack>
<PrimaryButton
title={"Edit"}
size={'sm'}
size={"sm"}
leftIcon={<MdOutlineModeEdit fontSize={"xs"} color="#fff" />}
/>
<SecondaryButton
title={"Archive"}
size={'sm'}
size={"sm"}
leftIcon={<LuArchive fontSize={"xs"} />}
/>
</HStack>
@@ -210,14 +259,14 @@ const ViewCorporates = () => {
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<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
{data?.data?.entity_name}
</Text>
</VStack>
<VStack alignItems={"start"}>
@@ -225,7 +274,7 @@ const ViewCorporates = () => {
Email address
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
jennywilson@gmail.com
{data?.data?.emailAddress}
</Text>
</VStack>
<VStack alignItems={"start"}>
@@ -233,7 +282,7 @@ const ViewCorporates = () => {
Phone number
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+91 4578451245
{data?.data?.mobileNumber}
</Text>
</VStack>
</HStack>
@@ -247,14 +296,14 @@ const ViewCorporates = () => {
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<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
{data?.data?.corporate_name}
</Text>
</VStack>
<VStack alignItems={"start"}>
@@ -262,7 +311,7 @@ const ViewCorporates = () => {
Industry
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
Fintech
{data?.data?.industry_xid}
</Text>
</VStack>
<VStack alignItems={"start"}>
@@ -270,7 +319,7 @@ const ViewCorporates = () => {
type
</Text>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
LLP
{data?.data?.corporate_type_xid}
</Text>
</VStack>
</HStack>
@@ -284,7 +333,7 @@ const ViewCorporates = () => {
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<Box shadow={"md"} p={4} bg={"#fff"}>
<HStack spacing={12} mb={6}>
<VStack alignItems={"start"}>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
@@ -311,14 +360,29 @@ const ViewCorporates = () => {
<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" />
<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}>
<Text
color={"#1E1E1E"}
fontWeight={500}
fontSize={"sm"}
mb={2}
>
{item.title}
</Text>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
<Text
color={"#777777"}
fontWeight={400}
fontSize={"xs"}
mb={0}
>
{item.size}
</Text>
</Box>
@@ -328,7 +392,6 @@ const ViewCorporates = () => {
</Box>
))}
</HStack>
</Box>
{/* for pink bg */}
<Box bg={"#f4eefb"} py={2} px={4}>
@@ -339,7 +402,7 @@ const ViewCorporates = () => {
</Text>
</HStack>
</Box>
<Box shadow={'md'} p={4} bg={'#fff'}>
<Box shadow={"md"} p={4} bg={"#fff"}>
<Text color={"#090909"} fontWeight={500} fontSize={"sm"}>
Director 1
</Text>
@@ -377,14 +440,29 @@ const ViewCorporates = () => {
<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" />
<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}>
<Text
color={"#1E1E1E"}
fontWeight={500}
fontSize={"sm"}
mb={2}
>
{item.title}
</Text>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
<Text
color={"#777777"}
fontWeight={400}
fontSize={"xs"}
mb={0}
>
{item.size}
</Text>
</Box>
@@ -433,14 +511,29 @@ const ViewCorporates = () => {
<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" />
<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}>
<Text
color={"#1E1E1E"}
fontWeight={500}
fontSize={"sm"}
mb={2}
>
{item.title}
</Text>
<Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
<Text
color={"#777777"}
fontWeight={400}
fontSize={"xs"}
mb={0}
>
{item.size}
</Text>
</Box>
@@ -461,7 +554,7 @@ const ViewCorporates = () => {
</Text>
</HStack>
</Box>
<Box roundedBottom={'lg'} shadow={'md'} p={4} bg={'#fff'}>
<Box roundedBottom={"lg"} shadow={"md"} p={4} bg={"#fff"}>
<HStack spacing={6}>
<Box bg={"#f7f6fe"} p={4} rounded={"md"}>
<HStack justifyContent={"space-between"} mb={4}>
@@ -477,22 +570,30 @@ const ViewCorporates = () => {
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.
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"} />
<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"} />
<ListIcon
as={MdCheckCircle}
color="#3725EA"
fontSize={"lg"}
/>
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
@@ -500,13 +601,21 @@ const ViewCorporates = () => {
</List>
<List spacing={3} pl={0}>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<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"} />
<ListIcon
as={MdCheckCircle}
color="#3725EA"
fontSize={"lg"}
/>
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
@@ -528,22 +637,30 @@ const ViewCorporates = () => {
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.
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"} />
<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"} />
<ListIcon
as={MdCheckCircle}
color="#3725EA"
fontSize={"lg"}
/>
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
@@ -551,13 +668,21 @@ const ViewCorporates = () => {
</List>
<List spacing={3} pl={0}>
<ListItem display={"flex"} gap={0}>
<ListIcon as={MdCheckCircle} color="#3725EA" fontSize={"lg"} />
<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"} />
<ListIcon
as={MdCheckCircle}
color="#3725EA"
fontSize={"lg"}
/>
<Text color={"#585858"} fontSize={"xs"}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</Text>
@@ -568,16 +693,14 @@ const ViewCorporates = () => {
</HStack>
<Box />
</Box>
<Box rounded={'lg'} mt={4} shadow={'md'} py={2} bg={'#fff'}>
<Box rounded={"lg"} 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'>
<Box as="span" flex="1" textAlign="left">
<HStack>
<FaRegFile color="#6311CB" />
<Text fontWeight={500} fontSize={"sm"} mb={0}>
@@ -585,14 +708,20 @@ const ViewCorporates = () => {
</Text>
</HStack>
</Box>
<AccordionIcon bg={"#f4eefb"} rounded={"full"} color={"#6311CB"} />
<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>
<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">
@@ -602,13 +731,12 @@ const ViewCorporates = () => {
type="search"
placeholder="Search..."
rounded="md"
bg={'gray.100'}
border={'none'}
// value={searchTerm}
// onChange={(e) => setSearchTerm(e.target.value)}
bg={"gray.100"}
border={"none"}
// value={searchTerm}
// onChange={(e) => setSearchTerm(e.target.value)}
/>
</InputGroup>
</HStack>
</HStack>
<NormalTable
@@ -624,14 +752,9 @@ const ViewCorporates = () => {
</VStack>
</AccordionPanel>
</AccordionItem>
</Accordion>
</Box>
</Box>
</Box>)
);
};

2
src/Routes/Routes.js
View File

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

46
src/Services/register.corporate.service.js
View File

@@ -10,29 +10,39 @@ export const registerCorporate = createApi({
reducerPath: "registerCorporate",
baseQuery: baseQuery,
tagTypes: ["getAllCorp"],
endpoints: (builder) => ({
getAllCorp: builder.query({
// query: (searchData) => `/corporate/admin`,
query: (searchData) => `/corporate/admin/?search_data=${searchData}?page=${1}&size=${100}`,
providesTags: ["getAllCorp"],
}),
// query: (searchData) => `/corporate/admin`,
query: (searchData) =>
`/corporate/admin/?search_data=${searchData}?page=${1}&size=${100}`,
providesTags: ["getAllCorp"],
}),
// =====[create]
corporateQuickAdd: builder.mutation({
query: (data) => ({
url: `/corporate/admin/quick-add`,
method: "POST",
body: data,
}),
invalidatesTags: ["getAllCorp"],
// =====[create]
corporateQuickAdd: builder.mutation({
query: (data) => ({
url: `/corporate/admin/quick-add`,
method: "POST",
body: data,
}),
invalidatesTags: ["getAllCorp"],
}),
getViewId: builder.query({
query: ({ data, id }) => ({
url: `/corporate/admin/${id}`,
method: "GET",
body: data,
}),
invalidatesTags: ["getAllCorp"],
}),
}),
});
// Export hooks for usage in functional components
export const { useCorporateQuickAddMutation, useGetAllCorpQuery } = registerCorporate;
export const {
useCorporateQuickAddMutation,
useGetAllCorpQuery,
useGetViewIdQuery,
} = registerCorporate;