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

updated

Browse Source
This commit is contained in:
Siddhesh More
2024-09-25 11:22:09 +05:30
parent e3ccad0359
commit 350908d73f
8 changed files with 539 additions and 1494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,54 +9,68 @@ import {
Tr,
Skeleton,
TableCaption,
Tfoot,
Radio,
RadioGroup,
CheckboxGroup,
Checkbox,
} from "@chakra-ui/react";
import EmptySearchList from "../EmptySearchList";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
const DataTable = ({
const NormalTable = ({
data,
isLoading,
tableHeadRow,
emptyMessage,
centered,
total,
showRadioButton, // New prop for showing the radio button
selectedRadio,
setSelectedRadio, // State for managing radio button selection
}) => {
console.log(data);
const columnWidth =
data && data[0]
? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
: "auto";
const handleRadioChange = (value) => {
setSelectedRadio(value);
};
return (
<TableContainer overflowX={"auto"} className="h-auto mb-3 w-100 table-scroll">
<TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
{data?.length === 0 ? (
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
<TableCaption p={total ? 0 : null}>
{total ? total : "Tanami v1.0.0"}
{total ? total : "OptiFii v1.0.0"}
</TableCaption>
<Thead backgroundColor="forestGreen.100">
<Thead bg="#6311cb37">
<Tr>
{tableHeadRow.map((heading, index) => (
<Th
color={"purple.900"}
textAlign={
tableHeadRow.length - 1 === index || centered
? "center"
: "left"
}
key={index}
p={3}
width="20px" // Adjust width as needed
color={"#004118"}
whiteSpace="normal" // Allow text to wrap
wordBreak="normal" // Ensure long words break properly
overflowWrap="normal" // Break long words if necessary
p={4}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
textTransform={"none"}
>
{isLoading ? <Skeleton height="20px" /> : heading}
{/* {heading} */}
{/* Conditionally render radio button in the heading */}
{showRadioButton && heading === "Select" ? (
<CheckboxGroup value={selectedRadio}>
<Checkbox isDisabled /> {/* Disabled radio button in header */}
</CheckboxGroup>
) : (
isLoading ? <Skeleton height="20px" /> : heading
)}
</Th>
))}
</Tr>
@@ -65,17 +79,15 @@ const DataTable = ({
{isLoading
? Array.from({ length: TABLE_PAGINATION?.size }).map(
(_, index) => (
<Tr bg={index % 2 === 0 ? "" : "forestGreen.50"} key={index}>
<Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
{tableHeadRow.map((_, i) => (
<Td
width={"fit-content"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
w={columnWidth}
>
<Skeleton height="20px" mb={1} mt={1} />
</Td>
@@ -84,7 +96,7 @@ const DataTable = ({
)
)
: data?.map((item, index) => (
<Tr bg={index % 2 === 0 ? "" : "forestGreen.50"} key={index}>
<Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
{tableHeadRow.map((heading, i) => (
<Td
textAlign={
@@ -94,13 +106,24 @@ const DataTable = ({
}
color={"gray.600"}
key={i}
fontWeight={500}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
{item[heading]}
{/* Conditionally render radio button in the table body */}
{showRadioButton && heading === "Select" ? (
<CheckboxGroup
value={selectedRadio}
onChange={handleRadioChange}
>
<Checkbox bg={'#fff'} value={item.id} /> {/* Dynamic radio buttons */}
</CheckboxGroup>
) : (
item[heading]
)}
</Td>
))}
</Tr>
@@ -112,4 +135,4 @@ const DataTable = ({
);
};
export default DataTable;
export default NormalTable;

6
src/Components/HeaderMain.jsx
View File

@@ -45,12 +45,14 @@ const HeaderMain = ({
w={"100%"}
h={{ base: "8%", xl: "6%" }}
position={"relative"}
className={`pt-2 pb-2 fw-400 border-bottom d-flex ${
className={`pt-2 pb-2 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, #6311CB)" // Linear gradient
bgGradient="linear(to-r, #1A0436, #5E0FCD)"
color={"#fff"}
sha
>
<Box display={"flex"} alignItems={"center"}>
<Box

49
src/Components/MiniHeader.jsx Normal file
View File

@@ -0,0 +1,49 @@
import { ArrowBackIcon } from "@chakra-ui/icons";
import { Box, HStack, Icon, Text, VStack } from "@chakra-ui/react";
import React from "react";
import { useNavigate } from "react-router-dom";
const MiniHeader = ({ title, subTitle, backButton }) => {
const navigate = useNavigate();
const [firstPart, secondPart] = title && title?.split(/ (.+)/);
return (
<HStack gap={3} mb={4}>
{backButton && (
<Icon
boxShadow='md'
cursor={"pointer"}
onClick={() => navigate(-1)}
as={ArrowBackIcon}
boxSize={7}
bg={"#fff"}
p={1}
rounded={"full"}
/>
)}
<VStack alignItems={"start"} gap={1}>
<Box as="span" display={"flex"} gap={2}>
<Text fontSize={"lg"} as={"span"} fontWeight={600}>
{firstPart}
</Text>
<Text
bgGradient="linear(to-l, #3725EA, #5E0FCD)"
bgClip="text"
fontSize={"lg"}
as={"span"}
fontWeight={600}
>
{secondPart}
</Text>
</Box>
<Text fontSize={"xs"} color={"gray.500"} fontWeight={500} as={"span"}>
{subTitle}
</Text>
</VStack>
</HStack>
);
};
export default MiniHeader;

1726
src/Contexts/GlobalStateProvider.jsx
View File

File diff suppressed because it is too large Load Diff

16
src/Pages/Login.jsx
View File

@@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
import { TiWarning } from "react-icons/ti";
import Loader01 from "../Components/Loaders/Loader01";
import Asset1 from "../assets/loginpat.png";
import logo from "../assets/logoOptifii.svg";
import logo from "../assets/optifii_white.svg";
import {
Box,
Button,
@@ -30,6 +30,7 @@ import { useLoginMutation } from "../Services/token.serivce";
// import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import PrimaryButton from "../Components/Buttons/PrimaryButton";
const validationSchema = Yup.object().shape({
@@ -144,11 +145,12 @@ const Login = () => {
justifyContent={'end'}
overflow={'hidden'}
bg={'#EFEFEF'}
// bg={'#EFEFEF'}
bgGradient="linear(to-l, #3725EA, #5E0FCD)"
>
<Box position={'relative'} display={'flex'} justifyContent={'center'} alignItems={'center'} w={'55%'}>
<Image w={40} src={logo} />
<Image w={48} src={logo} />
</Box>
<Box
@@ -165,6 +167,7 @@ const Login = () => {
alignItems={'start'}
flexDirection={'column'}
position={'relative'}
shadow={'lg'}
>
<Box display={'flex'} flexDirection={'column'} gap={0} mb={8}>
<Text as={'span'} fontSize={'xl'} fontWeight={600} >
@@ -237,9 +240,9 @@ const Login = () => {
type="submit"
className="w-100"
color={"whitesmoke"}
bg="#6211CB"
_hover={{bg:'#6211CB', opacity:0.9}}
_active={{bg:"#6211CB", opacity:1}}
bg="#5E0FCD"
_hover={{bg:'#5E0FCD', opacity:0.9}}
_active={{bg:"#5E0FCD", opacity:1}}
size="md"
fontWeight={400}
fontSize={'sm'}
@@ -247,6 +250,7 @@ const Login = () => {
>
Send OTP
</Button>
{/* <PrimaryButton type="submit" title={'Sent OTP'} w="100%"/> */}
<Text w={'100%'} color={'gray.500'} fontSize={'sm'} textAlign={'center'} >Forgot Password</Text>

188
src/Pages/RegisteredCorporate/RegisteredCorporate.jsx Normal file
View File

@@ -0,0 +1,188 @@
import { Box, Button, HStack, Icon, Input, InputGroup, InputLeftElement, Tag, Text, 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 { MdOutlineRamenDining } from "react-icons/md";
import { RiDeleteBin5Line } from "react-icons/ri";
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";
const RegisteredCorporate = () => {
const { corpData } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [selectedRadio, setSelectedRadio] = useState("");
// Simulate loading effect
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => setIsLoading(false), 500);
return () => clearTimeout(timer);
}, []);
console.log(corpData);
// Table headers
const tableHeadRow = [
"Select",
"Corp Id",
"Company Name",
"Date Of Onboarding",
"Email Address",
"Industry",
"Type",
"Subscription",
"Status"
];
// Extracted data for table
const extractedArray = corpData?.map((item, index) => ({
"Corp Id": (
<Text
as={"span"}
display={"flex"}
fontSize={"xs"}
gap={2}
alignItems={"center"}
>
{item.CorpId}
</Text>
),
"Company Name":
(<Text
as={"span"}
display={"flex"}
fontSize={"xs"}
gap={2}
alignItems={"center"}
>
{item.CompanyName}
</Text>),
"Date Of Onboarding": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.DateOfOnbaording}
</Text>
),
// "Email Address": (
// <HStack flexWrap={"wrap"}>
// <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
// <Text
// bgGradient="linear(to-l, #3725EA, #5E0FCD)"
// bgClip="text"
// fontSize={"xs"}
// as={"span"}
// fontWeight={600}
// >
// {item.EmailAddress}
// </Text>
// </Tag>
// <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
// <Text
// bgGradient="linear(to-l, #3725EA, #5E0FCD)"
// bgClip="text"
// fontSize={"xs"}
// as={"span"}
// fontWeight={600}
// >
// {item.walletType}
// </Text>
// </Tag>
// <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
// <Text
// bgGradient="linear(to-l, #3725EA, #5E0FCD)"
// bgClip="text"
// fontSize={"xs"}
// as={"span"}
// fontWeight={600}
// >
// {item.walletType}
// </Text>
// </Tag>
// </HStack>
// ),
"Email Address": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.EmailAddress}
</Text>
),
"Industry": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Industry}
</Text>
),
"Type": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Type}
</Text>
),
"Subscription": (
<Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
{item.Subscription}
</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>
),
}));
return (
<Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
<MiniHeader backButton={true} title={"Manage Registered Corporates"} />
<VStack shadow={'md'} rounded={'md'} 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>
<PrimaryButton title={"Add New"} size={'sm'} leftIcon={<AddIcon fontSize={'xs'}/>}/>
</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>
</Box>
);
};
export default RegisteredCorporate;

2
src/Routes/Nav.js
View File

@@ -51,7 +51,7 @@ export const nav = [
submenu: [
{
title: "Registered Corporates",
path: "/sponser",
path: "/register-corporates",
},
{
title: "New Corporates Request",

5
src/Routes/Routes.js
View File

@@ -1,9 +1,8 @@
import NotFound from "../Pages/NotFound";
import Welcome from "../Pages/PaymentSuccess";
import RegisteredCorporate from "../Pages/RegisteredCorporate/RegisteredCorporate";
export const RouteLink = [
// =============[ Tanami ]================
// ===============[ Management]===============
{ path: "/", Component: NotFound },
{ path: "/register-corporates", Component: RegisteredCorporate },
];