Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

Browse Source
This commit is contained in:
rockyeverlast
2024-07-01 12:54:10 +05:30
parent e23b635745 dfe123c7df
commit 4be947537b
21 changed files with 2354 additions and 1261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Components/CustomAlertDialog.jsx
View File

@@ -29,12 +29,11 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m
No
</Button>
<Button
backgroundColor={"#ff6b6b"}
isLoading={isLoading}
onClick={alertHandler}
size={"sm"}
rounded={'sm'}
colorScheme="red"
colorScheme="green"
ml={3}
>
Yes

326
src/Components/FormField.jsx
View File

@@ -1,12 +1,30 @@
import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack, Box, Heading, FormHelperText, Kbd } from '@chakra-ui/react';
import { Controller } from 'react-hook-form';
import { TiWarning } from 'react-icons/ti';
import { motion } from 'framer-motion';
import {
FormControl,
FormLabel,
Input,
Textarea,
Select,
Checkbox,
RadioGroup,
Radio,
Stack,
Box,
Heading,
FormHelperText,
Kbd,
Image,
Text,
} from "@chakra-ui/react";
import { Controller } from "react-hook-form";
import { TiWarning } from "react-icons/ti";
import { motion } from "framer-motion";
import { AddIcon, CloseIcon } from "@chakra-ui/icons";
const FormField = ({
label,
control,
name,
id,
type = "text",
options = [],
errors,
@@ -17,44 +35,57 @@ const FormField = ({
helperText,
multiple,
handleImageChange,
selectedImageData,
setSelectedImageData,
removeImage,
imageData ,
...props
}) => (
<FormControl w={"49%"} isInvalid={errors[name]} isRequired={isRequired} className="mb-3">
<FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
<FormControl
w={"49%"}
isInvalid={errors[name]}
isRequired={isRequired}
className="mb-3"
>
<FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>
{label}
</FormLabel>
<Controller
control={control}
name={name}
defaultValue=""
rules={rules}
render={({ field }) => {
if (type === 'select') {
if (type === "select") {
return (
<Select
focusBorderColor="forestGreen.300"
size={"sm"}
{...field}
{...props}
cursor={'pointer'}
placeholder={placeHolder? placeHolder : label}
cursor={"pointer"}
placeholder={placeHolder ? placeHolder : label}
textAlign={arabic ? "right" : "left"}
>
{options.map((option, index) => (
<option key={index} value={option.value}>{option.label}</option>
<option key={index} value={option.value}>
{option.label}
</option>
))}
</Select>
);
} else if (type === 'textarea') {
} else if (type === "textarea") {
return (
<Textarea
focusBorderColor="forestGreen.400"
size={"sm"}
{...field}
{...props}
placeholder={placeHolder? placeHolder : label}
placeholder={placeHolder ? placeHolder : label}
textAlign={arabic ? "right" : "left"}
/>
);
} else if (type === 'checkbox') {
} else if (type === "checkbox") {
return (
<Checkbox
size={"sm"}
@@ -65,7 +96,7 @@ const FormField = ({
{label}
</Checkbox>
);
} else if (type === 'radio') {
} else if (type === "radio") {
return (
<RadioGroup {...field} {...props}>
<Stack direction="row">
@@ -77,92 +108,95 @@ const FormField = ({
</Stack>
</RadioGroup>
);
} else if (type === 'file') {
} else if (type === "file") {
return (
<Box
borderColor="gray.300"
borderStyle="dashed"
borderWidth="2px"
rounded="md"
shadow="sm"
role="group"
transition="all 150ms ease-in-out"
_hover={{
shadow: "md",
}}
as={motion.div}
initial="rest"
animate="rest"
whileHover="hover"
height={"105px"}
className="pointer"
>
<Box position="relative" height="100%" width="100%">
<Box
position="absolute"
top="0"
left="0"
height="100%"
width="100%"
display="flex"
flexDirection="column"
>
<Stack
<>
<Box
borderColor="gray.300"
borderStyle="dashed"
borderWidth="2px"
rounded="md"
shadow="sm"
role="group"
transition="all 150ms ease-in-out"
_hover={{
shadow: "md",
}}
as={motion.div}
initial="rest"
animate="rest"
whileHover="hover"
height={"105px"}
className="pointer"
>
<Box position="relative" height="100%" width="100%">
<Box
position="absolute"
top="0"
left="0"
height="100%"
width="100%"
display="flex"
alignItems="center"
justify="center"
flexDirection="column"
>
<span
className="d-flex flex-column align-items-center pointer"
spacing="1"
<Stack
height="100%"
width="100%"
display="flex"
alignItems="center"
justify="center"
>
<Heading
fontSize="lg"
color="gray.700"
fontWeight="bold"
cursor={"pointer"}
>
Drop images here
</Heading>
<span
fontWeight="light"
className="web-text-large text-secondary text-center pointer"
className="d-flex flex-column align-items-center pointer"
spacing="1"
>
or click to upload
<Heading
fontSize="lg"
color="gray.700"
fontWeight="bold"
cursor={"pointer"}
>
Drop images here
</Heading>
<span
fontWeight="light"
className="web-text-large text-secondary text-center pointer"
>
or click to upload
</span>
</span>
</span>
</Stack>
</Stack>
</Box>
<Input
{...field}
{...props}
type="file"
height="100%"
width="100%"
position="absolute"
top="0"
left="0"
opacity="0"
aria-hidden="true"
accept="image/*"
onChange={(e) => {
field.onChange(e);
handleImageChange(e);
}}
onDrop={(e) => {
field.onChange(e);
handleImageChange(e);
}}
/>
</Box>
<Input
{...field}
{...props}
type="file"
height="100%"
width="100%"
position="absolute"
top="0"
left="0"
opacity="0"
aria-hidden="true"
accept="image/*"
onChange={(e) => {
field.onChange(e);
handleImageChange(e);
}}
onDrop={(e) => {
field.onChange(e);
handleImageChange(e);
}}
/>
</Box>
</Box>
</>
);
}else if (type === 'fileNormal') {
} else if (type === "fileNormal") {
return (
<>
<Input
id={id}
{...field}
{...props}
multiple={multiple} // Support for multiple file uploads
@@ -179,10 +213,118 @@ const FormField = ({
<FormHelperText className="web-text-small">
You can select multiple images using{" "}
<span className="text-dark">
<Kbd size={'sm'} className="text-dark">ctrl</Kbd> + <Kbd className="text-dark">select</Kbd>
</span>.
<Kbd size={"sm"} className="text-dark">
ctrl
</Kbd>{" "}
+ <Kbd className="text-dark">select</Kbd>
</span>
.
</FormHelperText>
)}
{selectedImageData && (
multiple ?
selectedImageData?.length > 0 && (
<Box mt={4} width={"100%"} display="flex" flexWrap="wrap" gap={4}>
{selectedImageData?.map((imageDataLink, index) => (
<Box key={index} width={"100px"}>
<Image
rounded={"md"}
objectFit={"cover"}
src={imageDataLink}
alt={`profile-${index}`}
width={100}
height={100}
/>
<Box
display={"flex"}
flexDirection={"column"}
position={"relative"}
>
<CloseIcon
onClick={() => removeImage(index)}
bg={"#fff"}
className="link pointer"
p={1}
fontSize={"lg"}
color={"red"}
fontWeight={"500"}
rounded={"md"}
position={"absolute"}
bottom={0}
right={0}
/>
<Text
as={"span"}
fontSize={"xs"}
fontWeight={"500"}
mt={1}
isTruncated={true}
>
{imageData[index]?.name}
</Text>
<Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
{(imageData[index]?.size / (1024 * 1024)).toFixed(2)}{" "}
mb
</Text>
</Box>
</Box>
))}
<AddIcon
onClick={() =>
document.getElementById(id).click()
}
rounded={"md"}
width={50}
height={50}
mt={26}
p={4}
cursor={"pointer"}
className="link"
/>
</Box>)
:<Box mt={5} width={"49%"}>
<Image
rounded={"md"}
objectFit={"cover"}
src={selectedImageData}
alt="profile"
width={100}
height={100}
/>
<Box
w={"30%"}
display={"flex"}
flexDirection={"column"}
position={"relative"}
>
<CloseIcon
onClick={() => setSelectedImageData(null)}
className="link pointer"
p={1}
fontSize={"lg"}
color={"red"}
fontWeight={"500"}
rounded={"md"}
position={"absolute"}
top={1}
right={0}
/>
<Text
as={"span"}
fontSize={"xs"}
w={"70%"}
fontWeight={"500"}
mt={1}
isTruncated={true}
>
{imageData?.name}
</Text>
<Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
{(imageData?.size / (1024 * 1024)).toFixed(2)} mb
</Text>
</Box>
</Box>
)}
</>
);
} else {
@@ -193,7 +335,7 @@ const FormField = ({
type={type}
{...field}
{...props}
placeholder={placeHolder? placeHolder : label}
placeholder={placeHolder ? placeHolder : label}
textAlign={arabic ? "right" : "left"}
/>
);
@@ -205,10 +347,10 @@ const FormField = ({
<TiWarning className="fw-bold fs-5 " /> {errors[name].message}
</span>
)}
{helperText &&<FormHelperText className="web-text-small">
{helperText}
</FormHelperText>}
{type === 'file' && (
{helperText && (
<FormHelperText className="web-text-small">{helperText}</FormHelperText>
)}
{type === "file" && (
<FormHelperText className="web-text-small">
Maximum limit of image is 10MB.
</FormHelperText>

257
src/Components/FormFieldMainReference.jsx Normal file
View File

@@ -0,0 +1,257 @@
import React, { useContext, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import {
Box,
Divider,
FormControl,
FormLabel,
Heading,
Input,
Select,
Textarea,
Button,
Text,
} from "@chakra-ui/react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
import FormField from "../../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
import FormInputMain from "../../../Components/AddEditComponentMain";
export const addSponser = yup.object().shape({
sponserName: yup.string().required("Sponser name is required"),
sponserNameArabic: yup.string().required("Sponser name is required"),
mobileNo: yup.string().required("Mobile no is required"),
sponserAddress: yup.string().required("Sponser address is required"),
bankName: yup.string().required("Bank Name is required"),
accountNumber: yup.string().required("Account Number is required"),
swiftCode: yup.string().required("SWIFT/BIC Code is required"),
bankEmail: yup.string().email("Invalid email format"),
// routingNumber: yup.string().required("Routing Number is required"),
// iban: yup.string().required("IBAN is required"),
// accountType: yup.string().required("Account Type is required"),
// bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
// bankBranch: yup.string().required("Bank Branch is required"),
// branchAddress: yup.string().required("Branch Address is required"),
// ifscCode: yup.string().required("IFSC Code is required"),
// accountHolderName: yup.string().required("Account Holder's Name is required"),
});
export function debounce(func, delay) {
let debounceTimer;
return function(...args) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(this, args), delay);
};
}
const AddSponser = () => {
const navigate = useNavigate();
const [bannerImageData, setBannerImageData] = useState(null);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
const { sponser, setSponser } = useContext(GlobalStateContext);
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(addSponser),
});
const handleBannerImageChange = (e) => {
const file = e.target.files[0];
setBannerImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedBannerImageData(reader.result);
};
reader.readAsDataURL(file);
}
};
// Handler for file input
const handleOtherImageChange = (e) => {
const files = Array.from(e.target.files);
const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
setOtherImageData(newImageData);
const readers = files.map((file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
});
Promise.all(readers)
.then((results) => {
setSelectedOtherImageData([
...(selectedOtherImageData || []),
...results,
]); // Ensure selectedOtherImageData is an array
})
.catch((error) => {
console.error("Error reading files:", error);
});
};
// Function to remove a specific image
const removeOtherImage = (index) => {
const newImageData = otherImageData.filter((_, i) => i !== index);
const newSelectedImageData = selectedOtherImageData.filter(
(_, i) => i !== index
);
setOtherImageData(newImageData);
setSelectedOtherImageData(newSelectedImageData);
};
console.log(selectedBannerImageData);
const formFields = [
{
label: "Sponser name",
name: "sponserName",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser Name (Arabic)",
name: "sponserNameArabic",
type: "text",
isRequired: true,
arabic: true,
section: "Personal Details",
},
{
label: "Mobile no",
name: "mobileNo",
type: "number",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser address",
name: "sponserAddress",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Bank name",
name: "bankName",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Name",
name: "accountNumber",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "SWIFT/BIC Code",
name: "swiftCode",
type: "number",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Banner image",
name: "banner_image",
id:"banner_image",
type: "fileNormal",
isRequired: true,
section: "Bank Details",
multiple:false,
selectedImageData:selectedBannerImageData,
setSelectedImageData:setSelectedBannerImageData,
imageData:bannerImageData,
handleImageChange:handleBannerImageChange
},
{
label: "Multi Image",
name: "OtherImage",
id:"OtherImage",
type: "fileNormal",
isRequired: true,
section: "Bank Details",
multiple:true,
selectedImageData:selectedOtherImageData,
setSelectedImageData:setSelectedOtherImageData,
imageData:otherImageData,
handleImageChange:handleOtherImageChange,
removeImage:removeOtherImage
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const onSubmit = (data) => {
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...sponser,
]);
navigate("/sponser");
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
/></Box>
);
};
export default AddSponser;

94
src/Components/FormInputMain.jsx Normal file
View File

@@ -0,0 +1,94 @@
import { Box, Button, Divider, Heading } from "@chakra-ui/react";
import React from "react";
import FormField from "./FormField";
import { OPACITY_ON_LOAD } from "../Layout/animations";
const FormInputMain = ({
groupedFields,
control,
errors,
onSubmit,
children,
}) => {
return (
<form onSubmit={onSubmit}>
{Object.entries(groupedFields).map(([section, fields], index) => (
<Box key={section}>
<Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
{section}
</Heading>
<Box display={"flex"} gap={0}>
<Box
width={"100%"}
p={5}
display={"flex"}
flexWrap={"wrap"}
gap={4}
>
{fields.map(
(
{
label,
name,
id,
arabic,
type,
isRequired,
selectedImageData,
setSelectedImageData,
imageData,
handleImageChange,
removeImage,
placeHolder,
options,
helperText,
multiple,
},
key
) => (
<FormField
id={id}
key={key}
label={label}
type={type}
name={name}
helperText={helperText ? helperText : undefined}
options={options ? options : undefined}
placeHolder={placeHolder ? placeHolder : undefined}
control={control}
errors={errors}
multiple={multiple}
isRequired={isRequired}
arabic={arabic}
selectedImageData={selectedImageData}
setSelectedImageData={setSelectedImageData}
imageData={imageData}
handleImageChange={handleImageChange}
removeImage={removeImage}
/>
)
)}
</Box>
</Box>
{index < Object.entries(groupedFields).length - 1 && <Divider />}
</Box>
))}
{children}
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"49.5%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
);
};
export default FormInputMain;

102
src/Components/InvestmentCard/InvestmentCard.jsx
View File

@@ -30,14 +30,14 @@ const InvestmentCard = ({ investment }) => {
p={"14px"}
rounded={"24px"}
objectFit="cover"
w={"200px"}
h={"140px"}
w={"180px"}
h={"160px"}
src={investment?.banner_image}
alt={investment?.ioName}
/>
<Stack w={"38%"}>
<CardBody>
<Stack w={"22%"}>
<CardBody p={"18px 12px 18px 0px"}>
<Heading size="sm" fontWeight={"500"}>
{investment?.ioName}
<Badge
@@ -54,6 +54,7 @@ const InvestmentCard = ({ investment }) => {
pb={0.5}
fontSize={"xs"}
ms={3}
fontWeight={'600'}
>
{investment?.status === "Available"
? "Available"
@@ -62,68 +63,87 @@ const InvestmentCard = ({ investment }) => {
: "Closed"}
</Badge>
</Heading>
<Text fontSize="sm" mb={"4px"}>
Sponsor:
<Text as={"span"} fontWeight={"600"}>
<Text
fontSize="sm"
mb={"4px"}
display={"flex"}
justifyContent={"space-between"}
>
Sponsor:
<Text as={"span"} fontWeight={"500"}>
{investment?.sponserName}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann return:
<Text as={"span"} fontWeight={"600"}>
<Text
fontSize="sm"
mb={"4px"}
display={"flex"}
justifyContent={"space-between"}
>
Ann return:
<Text as={"span"} fontWeight={"500"}>
{investment?.annualReturn}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann Yield:
<Text as={"span"} fontWeight={"600"}>
<Text
fontSize="sm"
mb={"4px"}
display={"flex"}
justifyContent={"space-between"}
>
Ann Yield:
<Text as={"span"} fontWeight={"500"}>
{investment?.annualyield}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"}>
Tenure:
<Text as={"span"} fontWeight={"600"}>
{investment?.tenure}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"}>
Quaterly:
<Text as={"span"} fontWeight={"600"}>
{investment?.quaterly}
</Text>
</Text>
</CardBody>
</Stack>
<Stack borderLeft={"1px solid #ccc"}>
<CardBody>
<Text fontSize="sm" mb={"4px"}>
Destributed Amount:
<Text as={"span"} fontWeight={"600"}>
<Stack w={"22%"} borderLeft={"1px solid #ccc"}>
<CardBody p={"38px 12px 7px 12px"}>
<Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
Tenure:
<Text as={"span"} fontWeight={"500"}>
{investment?.tenure}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
Quaterly:
<Text as={"span"} fontWeight={"500"}>
{investment?.quaterly}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
Destributed Amount:
<Text as={"span"} fontWeight={"500"}>
{investment?.destributedAmount}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"}>
</CardBody>
</Stack>
<Stack w={"22%"} borderLeft={"1px solid #ccc"}>
<CardBody p={"38px 12px 7px 12px"}>
<Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
Min.Invests:
<Text as={"span"} fontWeight={"600"}>
{investment?.minInvests}
<Text as={"span"} fontWeight={"500"}>
{investment?.miniInvest}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"}>
<Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
Targ Close:
<Text as={"span"} fontWeight={"600"}>
<Text as={"span"} fontWeight={"500"}>
{new Date(investment?.targetClose).toLocaleDateString()}
</Text>
</Text>
<Text fontSize="sm" mb={"4px"}>
Year:
<Text as={"span"} fontWeight={"600"}>
<Text fontSize="sm" mb={"4px"} display={'flex'} justifyContent={'space-between'}>
Year:
<Text as={"span"} fontWeight={"500"}>
{investment?.year}
</Text>
</Text>
</CardBody>
</Stack>
<Stack>
<CardBody>
<Stack w={"20%"} borderLeft={"1px solid #ccc"}>
<CardBody padding={'25px 12px 7px 12px'}>
<Box
as="span"
display={"flex"}
@@ -138,7 +158,7 @@ const InvestmentCard = ({ investment }) => {
</Text>
</Box>
<Progress
width={"200px"}
width={"100%"}
value={75} // Assuming a static progress value
rounded={"10px"}
colorScheme={"green"}

464
src/Contexts/GlobalStateProvider.jsx
View File

@@ -25,6 +25,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 1,
sponserName: "John Doe",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "1234567890",
sponserAddress: "123 Main St, Springfield, USA",
accountHolderName: "John Doe",
@@ -45,6 +46,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 2,
sponserName: "Jane Smith",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "9876543210",
sponserAddress: "456 Oak St, Metropolis, USA",
accountHolderName: "Jane Smith",
@@ -65,6 +67,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 3,
sponserName: "Alice Johnson",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "1231231234",
sponserAddress: "789 Pine St, Gotham, USA",
accountHolderName: "Alice Johnson",
@@ -85,6 +88,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 4,
sponserName: "Bob Brown",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "3213214321",
sponserAddress: "101 Maple St, Smallville, USA",
accountHolderName: "Bob Brown",
@@ -105,6 +109,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 5,
sponserName: "Charlie Davis",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "5555555555",
sponserAddress: "202 Birch St, Star City, USA",
accountHolderName: "Charlie Davis",
@@ -125,6 +130,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 6,
sponserName: "Daniel Evans",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "4444444444",
sponserAddress: "303 Cedar St, Central City, USA",
accountHolderName: "Daniel Evans",
@@ -145,6 +151,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 7,
sponserName: "Ella Fitzgerald",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "3333333333",
sponserAddress: "404 Elm St, Coast City, USA",
accountHolderName: "Ella Fitzgerald",
@@ -165,6 +172,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 8,
sponserName: "Frank Green",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "2222222222",
sponserAddress: "505 Ash St, Keystone City, USA",
accountHolderName: "Frank Green",
@@ -185,6 +193,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 9,
sponserName: "Grace Hall",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "1111111111",
sponserAddress: "606 Willow St, Hub City, USA",
accountHolderName: "Grace Hall",
@@ -205,6 +214,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 10,
sponserName: "Henry Ingram",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "6666666666",
sponserAddress: "707 Spruce St, Fawcett City, USA",
accountHolderName: "Henry Ingram",
@@ -225,6 +235,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 11,
sponserName: "Grace Hall",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "1111111111",
sponserAddress: "606 Willow St, Hub City, USA",
accountHolderName: "Grace Hall",
@@ -245,6 +256,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 12,
sponserName: "Henry Ingram",
sponserNameArabic:"الرجاء إدخال القيمة",
mobileNo: "6666666666",
sponserAddress: "707 Spruce St, Fawcett City, USA",
accountHolderName: "Henry Ingram",
@@ -267,245 +279,246 @@ const GlobalStateProvider = ({ children }) => {
const [investmentType, setInvestmentType] = useState([
{
id: 1,
investmentName: "John Doe",
mobileNo: "1234567890",
sponserAddress: "123 Main St, Springfield, USA",
accountHolderName: "John Doe",
bankName: "Example Bank",
accountNumber: "1234567890",
bankBranch: "Main Branch",
branchAddress: "456 Elm St, Springfield, USA",
ifscCode: "IFSC12345",
swiftCode: "SWIFT56789",
routingNumber: "987654321",
iban: "IBAN987654321",
accountType: "savings",
bankPhoneNumber: "9876543210",
bankEmail: "john.doe@example.com",
investmentName: "Michael Scott",
mobileNo: "0987654321",
investmentAddress: "1725 Slough Ave, Scranton, USA",
accountHolderName: "Michael Scott",
bankName: "Dunder Mifflin Bank",
accountNumber: "1111222233",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC11111",
swiftCode: "SWIFT12345",
routingNumber: "123450987",
iban: "IBAN1111222233",
accountType: "checking",
bankPhoneNumber: "0987654321",
bankEmail: "michael.scott@example.com",
status: true,
createdAt: "45",
},
{
id: 2,
investmentName: "Jane Smith",
mobileNo: "9876543210",
sponserAddress: "456 Oak St, Metropolis, USA",
accountHolderName: "Jane Smith",
bankName: "Another Bank",
accountNumber: "0987654321",
bankBranch: "Downtown Branch",
branchAddress: "789 Pine St, Metropolis, USA",
ifscCode: "IFSC54321",
swiftCode: "SWIFT98765",
routingNumber: "123456789",
iban: "IBAN123456789",
accountType: "checking",
bankPhoneNumber: "1234567890",
bankEmail: "jane.smith@example.com",
investmentName: "Pam Beesly",
mobileNo: "1234509876",
investmentAddress: "3487 Palm St, Scranton, USA",
accountHolderName: "Pam Beesly",
bankName: "Dunder Mifflin Bank",
accountNumber: "4444555566",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC44444",
swiftCode: "SWIFT54321",
routingNumber: "543211234",
iban: "IBAN4444555566",
accountType: "savings",
bankPhoneNumber: "1234509876",
bankEmail: "pam.beesly@example.com",
status: false,
createdAt: "45",
},
{
id: 3,
investmentName: "Alice Johnson",
mobileNo: "1231231234",
sponserAddress: "789 Pine St, Gotham, USA",
accountHolderName: "Alice Johnson",
bankName: "Gotham Bank",
accountNumber: "5678901234",
bankBranch: "Uptown Branch",
branchAddress: "101 Oak St, Gotham, USA",
ifscCode: "IFSC67890",
swiftCode: "SWIFT34567",
investmentName: "Jim Halpert",
mobileNo: "2345678901",
investmentAddress: "5701 Maple Ave, Scranton, USA",
accountHolderName: "Jim Halpert",
bankName: "Dunder Mifflin Bank",
accountNumber: "7777888899",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC77777",
swiftCode: "SWIFT87654",
routingNumber: "987654321",
iban: "IBAN345678901",
iban: "IBAN7777888899",
accountType: "business",
bankPhoneNumber: "5556667777",
bankEmail: "alice.johnson@example.com",
bankPhoneNumber: "2345678901",
bankEmail: "jim.halpert@example.com",
status: true,
createdAt: "12",
},
{
id: 4,
investmentName: "Bob Brown",
mobileNo: "3213214321",
sponserAddress: "101 Maple St, Smallville, USA",
accountHolderName: "Bob Brown",
bankName: "Smallville Credit Union",
accountNumber: "5432109876",
bankBranch: "Main Street Branch",
branchAddress: "202 Pine St, Smallville, USA",
ifscCode: "IFSC43210",
swiftCode: "SWIFT87654",
routingNumber: "123456789",
iban: "IBAN567890123",
investmentName: "Dwight Schrute",
mobileNo: "3456789012",
investmentAddress: "1725 Slough Ave, Scranton, USA",
accountHolderName: "Dwight Schrute",
bankName: "Dunder Mifflin Bank",
accountNumber: "3333444455",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC33333",
swiftCode: "SWIFT34567",
routingNumber: "765432109",
iban: "IBAN3333444455",
accountType: "savings",
bankPhoneNumber: "8889990000",
bankEmail: "bob.brown@example.com",
bankPhoneNumber: "3456789012",
bankEmail: "dwight.schrute@example.com",
status: true,
createdAt: "7",
},
{
id: 5,
investmentName: "Charlie Davis",
mobileNo: "5555555555",
sponserAddress: "202 Birch St, Star City, USA",
accountHolderName: "Charlie Davis",
bankName: "Star City Bank",
accountNumber: "9876543210",
bankBranch: "Downtown Branch",
branchAddress: "303 Oak St, Star City, USA",
investmentName: "Stanley Hudson",
mobileNo: "4567890123",
investmentAddress: "202 Industrial St, Scranton, USA",
accountHolderName: "Stanley Hudson",
bankName: "Dunder Mifflin Bank",
accountNumber: "5555666677",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC55555",
swiftCode: "SWIFT00000",
routingNumber: "111223344",
iban: "IBAN999988887",
swiftCode: "SWIFT45678",
routingNumber: "876543210",
iban: "IBAN5555666677",
accountType: "checking",
bankPhoneNumber: "1112223333",
bankEmail: "charlie.davis@example.com",
bankPhoneNumber: "4567890123",
bankEmail: "stanley.hudson@example.com",
status: false,
createdAt: "4",
},
{
id: 6,
investmentName: "Daniel Evans",
mobileNo: "4444444444",
sponserAddress: "303 Cedar St, Central City, USA",
accountHolderName: "Daniel Evans",
bankName: "Central City Bank",
accountNumber: "4444555566",
bankBranch: "Uptown Branch",
branchAddress: "404 Elm St, Central City, USA",
ifscCode: "IFSC44444",
swiftCode: "SWIFT11111",
routingNumber: "555666777",
iban: "IBAN4444555566",
investmentName: "Angela Martin",
mobileNo: "5678901234",
investmentAddress: "7777 Cat Ave, Scranton, USA",
accountHolderName: "Angela Martin",
bankName: "Dunder Mifflin Bank",
accountNumber: "8888999900",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC88888",
swiftCode: "SWIFT56789",
routingNumber: "987654321",
iban: "IBAN8888999900",
accountType: "business",
bankPhoneNumber: "4445556666",
bankEmail: "daniel.evans@example.com",
bankPhoneNumber: "5678901234",
bankEmail: "angela.martin@example.com",
status: true,
createdAt: "2",
},
{
id: 7,
investmentName: "Ella Fitzgerald",
mobileNo: "3333333333",
sponserAddress: "404 Elm St, Coast City, USA",
accountHolderName: "Ella Fitzgerald",
bankName: "Coast City Bank",
accountNumber: "3333444455",
bankBranch: "Downtown Branch",
branchAddress: "505 Cedar St, Coast City, USA",
ifscCode: "IFSC77777",
swiftCode: "SWIFT22222",
routingNumber: "888999000",
iban: "IBAN888999000",
investmentName: "Kevin Malone",
mobileNo: "6789012345",
investmentAddress: "3333 Cookie Ln, Scranton, USA",
accountHolderName: "Kevin Malone",
bankName: "Dunder Mifflin Bank",
accountNumber: "9999000011",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC99999",
swiftCode: "SWIFT67890",
routingNumber: "876543210",
iban: "IBAN9999000011",
accountType: "savings",
bankPhoneNumber: "7778889999",
bankEmail: "ella.fitzgerald@example.com",
bankPhoneNumber: "6789012345",
bankEmail: "kevin.malone@example.com",
status: false,
createdAt: "9",
},
{
id: 8,
investmentName: "Frank Green",
mobileNo: "2222222222",
sponserAddress: "505 Ash St, Keystone City, USA",
accountHolderName: "Frank Green",
bankName: "Keystone City Bank",
accountNumber: "2222333344",
bankBranch: "Main Branch",
branchAddress: "606 Birch St, Keystone City, USA",
ifscCode: "IFSC88888",
swiftCode: "SWIFT33333",
routingNumber: "444555666",
iban: "IBAN444555666",
investmentName: "Phyllis Vance",
mobileNo: "7890123456",
investmentAddress: "4545 Knitting Way, Scranton, USA",
accountHolderName: "Phyllis Vance",
bankName: "Dunder Mifflin Bank",
accountNumber: "0000111122",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC00000",
swiftCode: "SWIFT78901",
routingNumber: "123456789",
iban: "IBAN0000111122",
accountType: "checking",
bankPhoneNumber: "2222333444",
bankEmail: "frank.green@example.com",
bankPhoneNumber: "7890123456",
bankEmail: "phyllis.vance@example.com",
status: true,
createdAt: "8",
},
{
id: 9,
investmentName: "Grace Hall",
mobileNo: "1111111111",
sponserAddress: "606 Willow St, Hub City, USA",
accountHolderName: "Grace Hall",
bankName: "Hub City Bank",
investmentName: "Meredith Palmer",
mobileNo: "8901234567",
investmentAddress: "6666 Booze Blvd, Scranton, USA",
accountHolderName: "Meredith Palmer",
bankName: "Dunder Mifflin Bank",
accountNumber: "1111222233",
bankBranch: "Downtown Branch",
branchAddress: "707 Cedar St, Hub City, USA",
ifscCode: "IFSC99999",
swiftCode: "SWIFT44444",
routingNumber: "555566677",
iban: "IBAN555566677",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC11111",
swiftCode: "SWIFT89012",
routingNumber: "123450987",
iban: "IBAN1111222233",
accountType: "business",
bankPhoneNumber: "1111222333",
bankEmail: "grace.hall@example.com",
bankPhoneNumber: "8901234567",
bankEmail: "meredith.palmer@example.com",
status: true,
createdAt: "1",
createdAt: "1"
},
{
id: 10,
investmentName: "Henry Ingram",
mobileNo: "6666666666",
sponserAddress: "707 Spruce St, Fawcett City, USA",
accountHolderName: "Henry Ingram",
bankName: "Fawcett City Bank",
accountNumber: "6666777788",
bankBranch: "Main Street Branch",
branchAddress: "808 Oak St, Fawcett City, USA",
ifscCode: "IFSC66666",
swiftCode: "SWIFT55555",
routingNumber: "999000111",
iban: "IBAN999000111",
investmentName: "Ryan Howard",
mobileNo: "9012345678",
investmentAddress: "7777 Temp Way, Scranton, USA",
accountHolderName: "Ryan Howard",
bankName: "Dunder Mifflin Bank",
accountNumber: "2222333344",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC22222",
swiftCode: "SWIFT90123",
routingNumber: "234561098",
iban: "IBAN2222333344",
accountType: "savings",
bankPhoneNumber: "6666777888",
bankEmail: "henry.ingram@example.com",
bankPhoneNumber: "9012345678",
bankEmail: "ryan.howard@example.com",
status: false,
createdAt: "6",
},
{
id: 11,
investmentName: "Grace Hall",
mobileNo: "1111111111",
sponserAddress: "606 Willow St, Hub City, USA",
accountHolderName: "Grace Hall",
bankName: "Hub City Bank",
accountNumber: "1111222233",
bankBranch: "Downtown Branch",
branchAddress: "707 Cedar St, Hub City, USA",
ifscCode: "IFSC99999",
swiftCode: "SWIFT44444",
routingNumber: "555566677",
iban: "IBAN555566677",
investmentName: "Oscar Martinez",
mobileNo: "0123456789",
investmentAddress: "2222 Math St, Scranton, USA",
accountHolderName: "Oscar Martinez",
bankName: "Dunder Mifflin Bank",
accountNumber: "3333444455",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC33333",
swiftCode: "SWIFT01234",
routingNumber: "345671209",
iban: "IBAN3333444455",
accountType: "business",
bankPhoneNumber: "1111222333",
bankEmail: "grace.hall@example.com",
bankPhoneNumber: "0123456789",
bankEmail: "oscar.martinez@example.com",
status: true,
createdAt: "1",
},
{
id: 12,
investmentName: "Henry Ingram",
mobileNo: "6666666666",
sponserAddress: "707 Spruce St, Fawcett City, USA",
accountHolderName: "Henry Ingram",
bankName: "Fawcett City Bank",
accountNumber: "6666777788",
bankBranch: "Main Street Branch",
branchAddress: "808 Oak St, Fawcett City, USA",
ifscCode: "IFSC66666",
swiftCode: "SWIFT55555",
routingNumber: "999000111",
iban: "IBAN999000111",
investmentName: "Kelly Kapoor",
mobileNo: "9876543210",
investmentAddress: "4444 Fashion Ave, Scranton, USA",
accountHolderName: "Kelly Kapoor",
bankName: "Dunder Mifflin Bank",
accountNumber: "4444555566",
bankBranch: "Scranton Branch",
branchAddress: "101 Paper St, Scranton, USA",
ifscCode: "IFSC44444",
swiftCode: "SWIFT23456",
routingNumber: "456781320",
iban: "IBAN4444555566",
accountType: "savings",
bankPhoneNumber: "6666777888",
bankEmail: "henry.ingram@example.com",
bankPhoneNumber: "9876543210",
bankEmail: "kelly.kapoor@example.com",
status: false,
createdAt: "6",
},
]);
const [investment, setInvestment] = useState([
// {
@@ -901,6 +914,117 @@ const GlobalStateProvider = ({ children }) => {
},
]);
const [investorRequest, setInvestorRequest] = useState([
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
},
]);
return (
<GlobalStateContext.Provider
value={{
@@ -928,7 +1052,9 @@ const GlobalStateProvider = ({ children }) => {
viewHistory,
setViewHistory,
investmentType,
setInvestmentType
setInvestmentType,
investorRequest,
setInvestorRequest,
}}
>
{children}

594
src/Pages/IO_Management/CreateIO.jsx
View File

@@ -23,6 +23,7 @@ import { useNavigate } from "react-router-dom";
import FormField from "../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
import AddIOCharges from "./AddIOCharges";
import FormInputMain from "../../Components/FormInputMain";
const schema = yup.object().shape({
ioNameArabic: yup.string().required("Arabic name is required"),
@@ -64,17 +65,16 @@ const years = Array.from(
const CreateIO = () => {
const navigate = useNavigate();
const { sponser, setSponser,investment, setInvestment } = useContext(GlobalStateContext);
const { sponser, setSponser, investment, setInvestment } =
useContext(GlobalStateContext);
const [bannerImageData, setBannerImageData] = useState(null);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
const [charges, setCharges] = useState([]);
const [totalCharge, setTotalCharge] = useState(0.0);
const [totalAmount, setTotalAmount] = useState(0.0);
const {
control,
handleSubmit,
@@ -112,12 +112,11 @@ const CreateIO = () => {
}, [charges, destributedAmount]);
const onSubmit = (data) => {
// setValue("banner_image", selectedBannerImageData);
data.banner_image = selectedBannerImageData;
const updatedData = { ...data, status: "Available"}
const updatedData = { ...data, status: "Available" };
console.log(selectedBannerImageData);
setInvestment([...investment,updatedData])
setInvestment([...investment, updatedData]);
navigate("/view-io");
reset();
};
@@ -128,6 +127,97 @@ const CreateIO = () => {
label: item.sponserName,
}));
const [investForm, setInvestForm] = useState(
[
{
label: "Investment object name",
name: "ioName",
type: "text",
isRequired: true,
},
{
label: "Investment object",
name: "ioNameArabic",
placeHolder: "الرجاء إدخال القيمة",
arabic: true,
isRequired: true,
},
{
label: "Destributed Amount",
placeHolder: "$00.0",
helperText: "Please enter value in $",
name: "destributedAmount",
type: "number",
isRequired: true,
},
{
label: "Min Invest",
placeHolder: "$00.00",
helperText: "Please enter value in $",
name: "miniInvest",
type: "number",
isRequired: true,
},
{
label: "Year",
name: "year",
type: "select",
options: years,
isRequired: true,
},
{
label: "Quaterly",
name: "quaterly",
type: "select",
options: [
{ label: "Q1", value: "Q1" },
{ label: "Q2", value: "Q2" },
{ label: "Q3", value: "Q3" },
{ label: "Q4", value: "Q4" },
],
isRequired: true,
},
{
label: "Sponsers Name",
name: "sponserName",
type: "select",
options: sponserOptions,
isRequired: true,
},
{
label: "Target close",
name: "targetClose",
type: "date",
isRequired: true,
},
{
label: "Tenure",
name: "tenure",
type: "number",
isRequired: true,
},
{
label: "Annual yeild",
placeHolder: "00.00%",
helperText: "Please enter value in percentage",
name: "annualyield",
type: "number",
isRequired: true,
},
{
label: "Annual return",
placeHolder: "00.00%",
helperText: "Please enter value in percentage",
name: "annualReturn",
type: "number",
isRequired: true,
},
]
);
const handleBannerImageChange = (e) => {
const file = e.target.files[0];
setBannerImageData(file);
@@ -172,7 +262,7 @@ const CreateIO = () => {
// Function to remove a specific image
const removeOtherImage = (index) => {
const newImageData = otherImageData.filter((_, i) => i !== index);
const newSelectedImageData = selectedOtherImageData.filter(
const newSelectedImageData = selectedOtherImageData.filter(
(_, i) => i !== index
);
@@ -180,300 +270,147 @@ const CreateIO = () => {
setSelectedOtherImageData(newSelectedImageData);
};
const formFields = [
{
label: "Investment object name",
name: "ioName",
type: "text",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Investment object (Arabic)",
name: "ioNameArabic",
placeHolder: "الرجاء إدخال القيمة",
type: "text",
isRequired: true,
arabic: true,
section: "Investment Object Details",
},
{
label: "Destributed Amount",
name: "destributedAmount",
type: "number",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Min Invest",
name: "miniInvest",
type: "number",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Sponsers name",
name: "sponserName",
type: "text",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Year",
name: "accountNumber",
type: "select",
options: years,
isRequired: true,
section: "Investment Object Details",
},
{
label: "Annual return",
name: "annualReturn",
type: "number",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Annual yeild",
name: "annualyield",
type: "number",
helperText: "Please enter value in percentage",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Quaterly",
name: "quaterly",
type: "select",
options: [
{
label: "Q1",
value: "Q1",
},
{
label: "Q2",
value: "Q2",
},
{
label: "Q3",
value: "Q3",
},
{
label: "Q4",
value: "Q4",
},
],
isRequired: true,
section: "Investment Object Details",
},
{
label: "Target close",
name: "targetClose",
type: "date",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Banner image",
name: "banner_image",
id: "banner_image",
type: "fileNormal",
isRequired: true,
section: "Uplaod Banner Images",
multiple: false,
selectedImageData: selectedBannerImageData,
setSelectedImageData: setSelectedBannerImageData,
imageData: bannerImageData,
handleImageChange: handleBannerImageChange,
},
{
label: "Multi Image",
name: "OtherImage",
id: "OtherImage",
type: "fileNormal",
isRequired: true,
section: "Uplaod Banner Images",
multiple: true,
selectedImageData: selectedOtherImageData,
setSelectedImageData: setSelectedOtherImageData,
imageData: otherImageData,
handleImageChange: handleOtherImageChange,
removeImage: removeOtherImage,
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Heading as="h6" size="xs" mt={4}>
Investment Object Details
</Heading>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
label="Investment object name"
name="ioName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Investment object"
name="ioNameArabic"
placeHolder={"الرجاء إدخال القيمة"}
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
<FormField
label="Destributed Amount"
placeHolder={"$00.0"}
helperText={"Please enter value in $"}
name="destributedAmount"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Min Invest"
placeHolder={"$00.00"}
helperText={"Please enter value in $"}
name="miniInvest"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Sponsers Name"
control={control}
name="sponserName"
type="select"
options={sponserOptions}
errors={errors}
isRequired={true}
/>
<FormField
label="Year"
control={control}
name="year"
type="select"
options={years}
errors={errors}
isRequired={true}
/>
<FormField
label="Annual return"
placeHolder={"00.00%"}
helperText={"Please enter value in percentage"}
name="annualReturn"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Annual yeild"
placeHolder={"00.00%"}
helperText={"Please enter value in percentage"}
name="annualyield"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Quaterly"
control={control}
name="quaterly"
type="select"
options={[
{
label: "Q1",
value: "Q1",
},
{
label: "Q2",
value: "Q2",
},
{
label: "Q3",
value: "Q3",
},
{
label: "Q4",
value: "Q4",
},
]}
errors={errors}
isRequired={true}
/>
<FormField
label="Tenure"
// helperText={"Please enter value in Dollar"}
name="tenure"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Target close"
name="targetClose"
type="date"
control={control}
errors={errors}
isRequired={true}
/>
</Box>
<Divider />
<Heading w={"100%"} as="h6" size="xs" mb={5}>
Uplaod Banner Images
</Heading>
<Box
width={"100%"}
p={5}
pt={0}
display={"flex"}
flexWrap={"wrap"}
gap={4}
>
<FormField
label="Banner image"
control={control}
name="banner_image"
type="fileNormal"
helperText={"You can select only one image for banner."}
errors={errors}
multiple={false}
handleImageChange={handleBannerImageChange}
isRequired={true}
rules={{
required: "Profile image is required",
}}
// register={register} // Pass register function to FormField
/>
<FormField
id="otherImageInput"
label="Other images"
control={control}
name="other_image"
type="fileNormal"
multiple={true}
errors={errors}
handleImageChange={handleOtherImageChange}
isRequired={true}
rules={{
required: "Profile image is required",
}}
// register={register} // Pass register function to FormField
/>
{selectedBannerImageData && (
<Box width={"49%"}>
<Image
rounded={"md"}
objectFit={"cover"}
src={selectedBannerImageData}
alt="profile"
width={100}
height={100}
/>
<Box
w={"30%"}
display={"flex"}
flexDirection={"column"}
position={"relative"}
>
<CloseIcon
onClick={() => setSelectedBannerImageData(null)}
className="link pointer"
p={1}
fontSize={"lg"}
color={"red"}
fontWeight={"500"}
rounded={"md"}
position={"absolute"}
top={1}
right={0}
/>
<Text
as={"span"}
fontSize={"xs"}
w={"70%"}
fontWeight={"500"}
mt={1}
isTruncated={true}
>
{bannerImageData?.name}
</Text>
<Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
{(bannerImageData?.size / (1024 * 1024)).toFixed(2)} mb
</Text>
</Box>
</Box>
)}
{selectedOtherImageData?.length > 0 && (
<Box width={"49.5%"} display="flex" flexWrap="wrap" gap={4}>
{selectedOtherImageData.map((imageData, index) => (
<Box key={index} width={"100px"}>
<Image
rounded={"md"}
objectFit={"cover"}
src={imageData}
alt={`profile-${index}`}
width={100}
height={100}
/>
<Box
display={"flex"}
flexDirection={"column"}
position={"relative"}
>
<CloseIcon
onClick={() => removeOtherImage(index)}
bg={"#fff"}
className="link pointer"
p={1}
fontSize={"lg"}
color={"red"}
fontWeight={"500"}
rounded={"md"}
position={"absolute"}
bottom={0}
right={0}
/>
<Text
as={"span"}
fontSize={"xs"}
fontWeight={"500"}
mt={1}
isTruncated={true}
>
{otherImageData[index]?.name}
</Text>
<Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
{(otherImageData[index]?.size / (1024 * 1024)).toFixed(2)}{" "}
mb
</Text>
</Box>
</Box>
))}
{/* <Box width={"100px"} display={'flex'} alignItems={'center'}> */}
<AddIcon
onClick={() =>
document.getElementById("otherImageInput").click()
}
rounded={"md"}
width={50}
height={50}
mt={26}
p={4}
cursor={"pointer"}
// rounded={'md'}
className="link"
/>
{/* </Box> */}
</Box>
)}
</Box>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
>
<Divider />
<Heading
w={"100%"}
@@ -557,28 +494,27 @@ const CreateIO = () => {
""
)}
<Box display={"flex"}>
<Text
fontSize={"sm"}
fontWeight={"500"}
as={"span"}
w={"70%"}
bg={""}
>
Total distributed amount
</Text>
<Text
as={"span"}
fontSize={"sm"}
fontWeight={"600"}
w={"30%"}
bg={""}
>
$ {destributedAmount.toFixed(4)}
</Text>
</Box>
<Box display={"flex"}>
<Text
fontSize={"sm"}
fontWeight={"500"}
as={"span"}
w={"70%"}
bg={""}
>
Total distributed amount
</Text>
<Text
as={"span"}
fontSize={"sm"}
fontWeight={"600"}
w={"30%"}
bg={""}
>
$ {destributedAmount.toFixed(4)}
</Text>
</Box>
<Box pt={2} borderTop={"1px solid #fff"} as="span" display={"flex"}>
<Text
fontSize={"sm"}
@@ -599,25 +535,9 @@ const CreateIO = () => {
$ {totalAmount.toFixed(4)}
</Text>
</Box>
</Box>
</Box>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"50%"}
rounded={"sm"}
type="submit"
colorScheme="green"
mt={4}
>
Submit
</Button>
</Box>
</form>
</FormInputMain>
</Box>
);
};

2
src/Pages/IO_Management/ViewIO.jsx
View File

@@ -68,7 +68,7 @@ const ExchangeRate = () => {
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
<Tabs position="relative" variant="unstyled" mt={2}>
<Tabs position="relative" variant="unstyled" mt={2} >
<TabList>
{/* <Tab fontSize={"sm"}>All</Tab> */}
{/* <Tab fontSize={"sm"}>Available</Tab>

22
src/Pages/InvestorUpgrade/InvestorPendingRequest.jsx
View File

@@ -1,22 +0,0 @@
import { Box, Image, Text } from "@chakra-ui/react"
// import error from "../assets/Error.svg"
import robot from "../../assets/robot.png"
// import robot from "../assets/robot.png"
const InvestorPendingRequest = () => {
return (
<Box
h={'100vh'}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}
flexDirection={'column'}
gap={8}
>
<Image src={robot} w={"171px"} />
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
</Box>
)
}
export default InvestorPendingRequest

220
src/Pages/InvestorUpgrade/InvestorRequest.jsx Normal file
View File

@@ -0,0 +1,220 @@
import {
Avatar,
Badge,
Box,
Button,
HStack,
Input,
Text,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import DataTable from "../../Components/DataTable/DataTable";
import Pagination from "../../Components/Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { formatDate } from "../../Components/Functions/UTCConvertor";
// import { formatDate } from "../../Components/Functions/UTCConvertor";
const InvestorRequest = () => {
const toast = useToast();
const { slideFromRight, investorRequest, setInvestorRequest } =
useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [deleteAlert, setDeleteAlert] = useState(false);
const [actionId, setActionId] = useState(false);
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 1500);
// Cleanup the timer on component unmount
return () => clearTimeout(timer);
}, []);
// ====================================================[Table Filter]================================================================
const filteredData = investorRequest.filter((item) => {
// Filter by name (case insensitive)
const name = item.Distribution;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
// Filter by status
// const status = item.status;
// const statusLower = status ? "active" : "inactive";
// const statusMatches =
// statusFilter === "all" ||
// (statusFilter === "active" && status === true) ||
// (statusFilter === "inactive" && status === false);
return nameMatches;
});
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr No.",
"Date",
"Distribution Amount",
"Charges (USD)",
"Year",
"Quater",
"Amount",
];
const extractedArray = filteredData?.map((item, index) => ({
id: item?.id,
"Sr No.": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{index + 1}.
</Text>
),
"Date": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{formatDate(item.date)}
</Text>
),
"Distribution Amount": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.Distribution}
</Text>
),
"Charges (USD)": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.charge}
{/* {formatDate(item.charge)} */}
</Text>
),
Year: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.year}
</Text>
),
Quater: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.quater}
</Text>
),
Amount: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.amount}
</Text>
),
}));
const handleDelete = () => {
const updatedSponsors = sponser.filter(
(sponsor) => sponsor.id !== actionId
);
setTimeout(() => {
setSponser(updatedSponsors);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<Box bg="white.500">
<HStack
display={"flex"}
justifyContent={"space-between"}
ps={1}
pe={1}
pb={4}
pt={4}
spacing="24px"
>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack>
</HStack>
</Box>
<DataTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
// totalPages={10}
setMouseEnteredId={setMouseEnteredId}
setMouseEntered={setMouseEntered}
/>
<CustomAlertDialog
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
message={"Are you sure you want to delete sponers?"}
alertHandler={handleDelete}
isLoading={isLoading}
/>
</Box>
);
};
export default InvestorRequest;

384
src/Pages/Master/InvestmentType/AddInvestmentType.jsx
View File

@@ -1,88 +1,42 @@
import React, { useContext, useState } from "react";
import React, { useContext } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import {
Box,
Divider,
FormControl,
FormLabel,
Heading,
Input,
Select,
Textarea,
Button,
Text,
Image,
} from "@chakra-ui/react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { AddIcon, CloseIcon, WarningTwoIcon } from "@chakra-ui/icons";
import { WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import { useNavigate } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
import FormField from "../../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
const schema = yup.object().shape({
ioNameArabic: yup.string().required("Arabic name is required"),
ioName: yup.string().required("Investment Object name is required"),
sponserName: yup.string().required("Sponser name is required"),
destributedAmount: yup
.number()
.required("Distributed Amount is required")
.positive("Must be a positive number"),
year: yup.string().required("Year is required"),
tenure: yup
.number()
.required("Tenure is required")
.positive("Must be a positive number"),
annualReturn: yup
.number()
.required("Annual Return is required")
.positive("Must be a positive number"),
miniInvest: yup
.number()
.required("Minimum Invest is required")
.positive("Must be a positive number"),
quaterly: yup.string().required("Quaterly is required"),
targetClose: yup.date().required("Target close date is required"),
annualyield: yup
.number()
.required("Annual Yield is required")
.positive("Must be a positive number"),
banner_image: yup.mixed().required("Profile image is required"),
// .test(
// 'fileSize',
// 'File size is too large',
// value => value && value.size <= 10485760 // 10MB
// )
// .test(
// 'fileType',
// 'Unsupported file format',
// value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
// ),
other_image: yup.mixed().required("Profile image is required"),
// .test(
// 'fileSize',
// 'File size is too large',
// value => value && value.size <= 10485760 // 10MB
// )
// .test(
// 'fileType',
// 'Unsupported file format',
// value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
// ),
investmentName: yup.string().required("Investment name is required"),
mobileNo: yup.string().required("Mobile no is required"),
investmentAddress: yup.string().required("Investment address is required"),
bankName: yup.string().required("Bank Name is required"),
accountNumber: yup.string().required("Account Number is required"),
swiftCode: yup.string().required("SWIFT/BIC Code is required"),
bankEmail: yup.string().email("Invalid email format"),
// routingNumber: yup.string().required("Routing Number is required"),
// iban: yup.string().required("IBAN is required"),
// accountType: yup.string().required("Account Type is required"),
// bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
// bankBranch: yup.string().required("Bank Branch is required"),
// branchAddress: yup.string().required("Branch Address is required"),
// ifscCode: yup.string().required("IFSC Code is required"),
// accountHolderName: yup.string().required("Account Holder's Name is required"),
});
const startYear = 2024;
const endYear = 2124;
// const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
const years = Array.from({ length: 2124 - 2024 + 1 }, (_, i) => 2024 + i).map(
(year) => ({ value: year, label: year })
);
console.log(years);
export function debounce(func, delay) {
let debounceTimer;
return function (...args) {
@@ -91,225 +45,139 @@ export function debounce(func, delay) {
};
}
const AddInvestmentType = () => {
const navigate = useNavigate();
const { sponser, setSponser,investment, setInvestment } = useContext(GlobalStateContext);
const [bannerImageData, setBannerImageData] = useState(null);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
const { investmentType, setInvestmentType } =
useContext(GlobalStateContext);
const {
control,
handleSubmit,
reset,
setValue,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
// defaultValues: {
// destributedAmount: 0,
// tenure: 0,
// annualReturn: 0,
// miniInvest: 0,
// annualyield: 0,
// },
});
console.log(errors);
const onSubmit = (data) => {
// setValue("banner_image", selectedBannerImageData);
data.banner_image = selectedBannerImageData;
const updatedData = { ...data, status: "Available"}
console.log(selectedBannerImageData);
setInvestment([...investment,updatedData])
navigate("/view-io");
reset();
setInvestmentType([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentType,
]);
navigate("/investment-type");
};
// Extract options for the select input
const sponserOptions = sponser.map((item) => ({
value: item.sponserName,
label: item.sponserName,
}));
const investForm = [
{
label: "Investment object name",
name: "ioName",
type: "text",
isRequired: true,
},
{
label: "Investment object",
name: "ioNameArabic",
placeHolder: "الرجاء إدخال القيمة",
arabic: true,
isRequired: true,
},
{
label: "Destributed Amount",
placeHolder: "$00.0",
helperText: "Please enter value in $",
name: "destributedAmount",
type: "number",
isRequired: true,
},
{
label: "Min Invest",
placeHolder: "$00.00",
helperText: "Please enter value in $",
name: "miniInvest",
type: "number",
isRequired: true,
},
{
label: "Year",
name: "year",
type: "select",
options: years,
isRequired: true,
},
{
label: "Quaterly",
name: "quaterly",
type: "select",
options: [
{ label: "Q1", value: "Q1" },
{ label: "Q2", value: "Q2" },
{ label: "Q3", value: "Q3" },
{ label: "Q4", value: "Q4" },
],
isRequired: true,
},
{
label: "Sponsers Name",
name: "sponserName",
type: "select",
isRequired: true,
},
{
label: "Target close",
name: "targetClose",
type: "date",
isRequired: true,
},
{
label: "Tenure",
name: "tenure",
type: "number",
isRequired: true,
},
{
label: "Annual yeild",
placeHolder: "00.00%",
helperText: "Please enter value in percentage",
name: "annualyield",
type: "number",
isRequired: true,
},
{
label: "Annual return",
placeHolder: "00.00%",
helperText: "Please enter value in percentage",
name: "annualReturn",
type: "number",
isRequired: true,
},
];
const handleBannerImageChange = (e) => {
const file = e.target.files[0];
setBannerImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedBannerImageData(reader.result);
};
reader.readAsDataURL(file);
}
};
// Handler for file input
const handleOtherImageChange = (e) => {
const files = Array.from(e.target.files);
const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
setOtherImageData(newImageData);
const readers = files.map(file => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
});
Promise.all(readers).then(results => {
setSelectedOtherImageData([...(selectedOtherImageData || []), ...results]); // Ensure selectedOtherImageData is an array
}).catch(error => {
console.error("Error reading files:", error);
});
};
// Function to remove a specific image
const removeOtherImage = (index) => {
const newImageData = otherImageData.filter((_, i) => i !== index);
const newSelectedImageData = selectedOtherImageData.filter((_, i) => i !== index);
setOtherImageData(newImageData);
setSelectedOtherImageData(newSelectedImageData);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Heading as="h6" size="xs" mt={4} mb={4}>
Investment Object Details
<Heading as="h6" size="xs" mt={4}>
Personal Details
</Heading>
<Box w={'100%'} display={'flex'} flexWrap={'wrap'} gap={5} p={2}>
{investForm.map((field, index) => (
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
key={index}
label={field.label}
name={field.name}
type={field.type}
placeHolder={field.placeHolder}
helperText={field.helperText}
options={field.options}
label="Investment Name"
name="investmentName"
control={control}
errors={errors}
isRequired={true}
/>
))}
<FormField
placeHolder={"الرجاء إدخال القيمة"}
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
<FormField
label="Mobile no"
name="mobileNo"
type="tel"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Investment address"
name="investmentAddress"
type="textarea"
control={control}
errors={errors}
isRequired={true}
/>
</Box>
</Box>
<Divider />
<Heading as="h6" size="xs" mt={4}>
Bank Details
</Heading>
<Box display={"flex"} gap={0}>
{Array(1).fill(
<Box
width={"100%"}
p={5}
display={"flex"}
flexWrap={"wrap"}
gap={4}
>
{/* <FormField
label="Account Holder's Name"
name="accountHolderName"
control={control}
errors={errors}
isRequired={true}
/> */}
<FormField
label="Bank Name"
name="bankName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Account Number"
name="accountNumber"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="SWIFT/BIC Code"
name="swiftCode"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Bank Email (optional)"
name="bankEmail"
control={control}
errors={errors}
/>
</Box>
)}
</Box>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"50%"}
rounded={"sm"}
type="submit"
colorScheme="green"
mt={4}
>
Submit
</Button>
size={"sm"}
width={"49.5%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
{/* <Divider /> */}
</Box>
);
};

180
src/Pages/Master/InvestmentType/EditInvestmentType.jsx
View File

@@ -1,22 +1,160 @@
import { Box, Image, Text } from "@chakra-ui/react"
// import error from "../assets/Error.svg"
import robot from "../../../assets/robot.png"
// import robot from "../assets/robot.png"
const EditInvestmentType = () => {
return (
<Box
h={'100vh'}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}
flexDirection={'column'}
gap={8}
>
<Image src={robot} w={"171px"} />
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
</Box>
)
}
import { Box, Button, Divider, Heading } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import FormField from "../../../Components/FormField";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import AddInvestmentType from "./AddInvestmentType";
export default EditInvestmentType
const EditInvestmentType = () => {
const params = useParams();
const { investmentType } = useContext(GlobalStateContext);
const [foundObject, setFoundObject] = useState(null);
const {
control,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(AddInvestmentType),
defaultValues: {
investmentName: foundObject?.investmentName,
mobileNo: foundObject?.mobileNo,
investmentAddress: foundObject?.investmentAddress,
bankName: foundObject?.bankName,
accountNumber: foundObject?.accountNumber,
swiftCode: foundObject?.swiftCode,
bankEmail: foundObject?.bankEmail,
},
});
useEffect(() => {
// console.log(investmentName);
const id = params?.id;
console.log(id);
// Ensure id is compared correctly
const found = investmentType.find((item) => item?.id.toString() === id.toString());
console.log(found);
setFoundObject(found);
if (found) {
reset({
investmentName: found.investmentName,
mobileNo: found.mobileNo,
investmentAddress: found.investmentAddress,
bankName: found.bankName,
accountNumber: found.accountNumber,
swiftCode: found.swiftCode,
bankEmail: found.bankEmail,
});
}
}, [params, investmentType, reset]);
const onSubmit = (data)=> {
console.log(data);
}
if (!foundObject) {
return <Box>Loading...</Box>; // or any loading indicator
}
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
label="Investment name"
name="investmentName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
placeHolder={"الرجاء إدخال القيمة"}
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
<FormField
label="Mobile no"
name="mobileNo"
type="tel"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Investment address"
name="investmentAddress"
type="textarea"
control={control}
errors={errors}
isRequired={true}
/>
</Box>
</Box>
<Divider />
<Heading as="h6" size="xs" mt={4}>
Bank Details
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
label="Bank Name"
name="bankName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Account Number"
name="accountNumber"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="SWIFT/BIC Code"
name="swiftCode"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Bank Email (optional)"
name="bankEmail"
control={control}
errors={errors}
/>
</Box>
</Box>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"49.5%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
</Box>
);
};
export default EditInvestmentType;

198
src/Pages/Master/InvestmentType/InvestmentType.jsx
View File

@@ -14,25 +14,36 @@ import {
Switch,
Tag,
Text,
Tooltip,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DataTable from "../../../Components/DataTable/DataTable";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Link as RouterLink } from "react-router-dom";
import { AddIcon, EmailIcon } from "@chakra-ui/icons";
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import {
AddIcon,
CheckIcon,
CloseIcon,
DeleteIcon,
EditIcon,
EmailIcon,
ViewIcon,
} from "@chakra-ui/icons";
import Pagination from "../../../Components/Pagination";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import { debounce } from "../Sponser/AddSponser";
import { debounce } from "./AddInvestmentType";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
const InvestmentType = () => {
const toast = useToast()
const { investmentType, setInvestmentType,slideFromRight } = useContext(GlobalStateContext);
const navigate = useNavigate()
const toast = useToast();
const { investmentType, setInvestmentType, slideFromRight } =
useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [deleteAlert, setDeleteAlert] = useState(false);
@@ -40,7 +51,6 @@ const InvestmentType = () => {
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
@@ -53,28 +63,24 @@ const InvestmentType = () => {
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"investment name",
"Investment name",
"Address",
"Mobile no",
"Status",
"Created At",
"Action",
];
const handleUpdateStatus = debounce((id) => {
setInvestmentType((prevInvestmentType) =>
prevInvestmentType.map((investmentType) =>
investmentType.id === id ? { ...investmentType, status: !investmentType.status } : investmentType
)
);
toast({
render: () => (
<ToastBox
message={"Status changed succesfully.!"}
/>
),
render: () => <ToastBox message={"Status changed succesfully.!"} />,
});
},300) ;
}, 300);
// ====================================================[Table Filter]================================================================
const filteredData = investmentType.filter((item) => {
@@ -97,63 +103,65 @@ const InvestmentType = () => {
const extractedArray = filteredData?.map((item) => ({
id: item?.id,
"investment name": (
<Text justifyContent={slideFromRight? 'right': 'left' }
"Investment name": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.investmentName}
</Text>
),
Address: (
<Box w={350} isTruncated={true} >
<Text as={"span"} color={"teal.900"}>
{item.sponserAddress}
<Box w={350} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.investmentAddress}
</Text>
</Box>
),
"Mobile no": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.mobileNo}
</Text>
</Box>
),
Status:
Status: (
<Switch
size={"sm"}
color="green"
colorScheme="green"
onChange={() => handleUpdateStatus(item.id)}
isChecked={item.status}
/>
),
// item?.status ? (
// <Badge bg={'transparent'} color={"#05c46b"}>
// Passed
// </Badge>
// ) : (
// <Badge bg={'transparent'} color={"#f53b57"}>
// Not passes
// </Badge>
// ),
// item?.status ? (
// <Badge bg={'transparent'} color={"#05c46b"}>
// Passed
// </Badge>
// ) : (
// <Badge bg={'transparent'} color={"#f53b57"}>
// Not passes
// </Badge>
// ),
,
"Created At": (
<span className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} className=" fw-bold">
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
{formatDate(item.createdAt)}
</Text>
<Menu>
{/* <Menu>
<MenuButton className="link p-1 rounded-1">
<HiDotsVertical className="rubix-text-dark fs-6" />
</MenuButton>
<Portal>
<MenuList minWidth="80px">
<RouterLink to={`edit-investment/${item.id}`}>
<RouterLink to={`edit-sponser/${item.id}`}>
<MenuItem className="web-text-medium">Edit</MenuItem>
</RouterLink>
<RouterLink to={`view-investment/${item.id}`}>
<RouterLink to={`view-sponser/${item.id}`}>
<MenuItem className="web-text-medium">View</MenuItem>
</RouterLink>
<MenuItem
@@ -167,25 +175,119 @@ const InvestmentType = () => {
</MenuItem>
</MenuList>
</Portal>
</Menu>
</Menu> */}
</span>
),
Action: (
<Box display={"flex"} justifyContent={"space-between"}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="View"
bg="#fff"
color={"green.500"}
placement="top"
>
<Button
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
onClick={()=>{ navigate(`view-investment/${item.id}`)}}
color="green.300"
rounded={"sm"}
size={"xs"}
>
<ViewIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
bg="#fff"
color={"blue.500"}
placement="top"
>
<Button
onClick={()=>{ navigate(`edit-investment/${item.id}`)}}
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
rounded={"sm"}
size={"xs"}
>
<EditIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Delete"
bg="#fff"
color={"red.500"}
placement="top"
>
<Button
onClick={() => {
setActionId(item?.id);
setDeleteAlert(true);
}}
_hover={{ color: "red.500" }}
// transition={"0.5s all"}
color="red.300"
rounded={"sm"}
size={"xs"}
>
<DeleteIcon />
</Button>
</Tooltip>
</Box>
),
// "Created At":
// mouseEntered && mouseEnteredId === item?.id ? (
// // false ? (
// <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <EditIcon fontSize={'md'} />
// </Box>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <ViewIcon fontSize={'md'} />
// </Box>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <DeleteIcon fontSize={'md'} />
// </Box>
// </Box>
// ) : (
// <Box
// as="span" display={"flex"} justifyContent={"start"}
// p={1}
// >
// <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
// {formatDate(item.createdAt)}
// </Text>
// </Box>
// ),
}));
const handleDelete = () => {
const updatedInvestmentType = investmentType.filter((investmentType) => investmentType.id !== actionId);
const updatedSponsors = sponser.filter(
(sponsor) => sponsor.id !== actionId
);
setTimeout(() => {
setInvestmentType(updatedInvestmentType);
setSponser(updatedSponsors);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<Box bg="white.500">
@@ -235,18 +337,14 @@ const InvestmentType = () => {
setViewActionId={setActionId}
// totalPages={10}
setMouseEnteredId={setMouseEnteredId}
setMouseEntered={setMouseEntered}
/>
<CustomAlertDialog
onClose={()=> setDeleteAlert(false)}
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
message={"Are you sure you want to delete Investment Type?"}
message={"Are you sure you want to delete sponers?"}
alertHandler={handleDelete}
isLoading={isLoading}
/>

69
src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
View File

@@ -1,22 +1,55 @@
import { Box, Image, Text } from "@chakra-ui/react"
import { Box, FormControl, FormLabel, Image, Text } from "@chakra-ui/react";
// import error from "../assets/Error.svg"
import robot from "../../../assets/robot.png"
import robot from "../../../assets/robot.png";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { useParams } from "react-router-dom";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext } from "react";
// import robot from "../assets/robot.png"
const ViewInvestmentType = () => {
return (
<Box
h={'100vh'}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}
flexDirection={'column'}
gap={8}
>
<Image src={robot} w={"171px"} />
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
</Box>
)
}
const params = useParams();
const { investmentType } = useContext(GlobalStateContext);
const id = params?.id;
export default ViewInvestmentType
const found = investmentType.find(
(item) => item?.id.toString() === id.toString()
);
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormControl w={"49%"} mb={3}>
<FormLabel color={"gray.500"} fontSize={"sm"}>
Investment name
</FormLabel>
<FormLabel fontSize={"sm"}>{found?.investmentName}</FormLabel>
</FormControl>
<FormControl w={"49%"} mb={3}>
<FormLabel color={"gray.500"} fontSize={"sm"}>
Inves name ( Arabic )
</FormLabel>
<FormLabel fontSize={"sm"}>{found?.investmentName}</FormLabel>
</FormControl>
<FormControl w={"49%"} mb={3}>
<FormLabel color={"gray.500"} fontSize={"sm"}>
ADDRESS
</FormLabel>
<FormLabel fontSize={"sm"}>{found?.investmentAddress}</FormLabel>
</FormControl>
<FormControl w={"49%"} mb={3}>
<FormLabel color={"gray.500"} fontSize={"sm"}>
Moobile no
</FormLabel>
<FormLabel fontSize={"md"}>{found?.mobileNo}</FormLabel>
</FormControl>
</Box>
</Box>
</Box>
);
};
export default ViewInvestmentType;

320
src/Pages/Master/Sponser/AddSponser.jsx
View File

@@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React, { useContext, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import {
Box,
@@ -19,11 +19,12 @@ import { WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
import FormField from "../../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
import FormInputMain from "../../../Components/FormInputMain";
const schema = yup.object().shape({
export const addSponser = yup.object().shape({
sponserName: yup.string().required("Sponser name is required"),
sponserNameArabic: yup.string().required("Sponser name is required"),
mobileNo: yup.string().required("Mobile no is required"),
sponserAddress: yup.string().required("Sponser address is required"),
@@ -42,11 +43,9 @@ const schema = yup.object().shape({
// accountHolderName: yup.string().required("Account Holder's Name is required"),
});
export function debounce(func, delay) {
let debounceTimer;
return function(...args) {
return function (...args) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(this, args), delay);
};
@@ -54,16 +53,158 @@ export function debounce(func, delay) {
const AddSponser = () => {
const navigate = useNavigate();
const [bannerImageData, setBannerImageData] = useState(null);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
const { sponser, setSponser } = useContext(GlobalStateContext);
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
resolver: yupResolver(addSponser),
});
console.log(errors);
const handleBannerImageChange = (e) => {
const file = e.target.files[0];
setBannerImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedBannerImageData(reader.result);
};
reader.readAsDataURL(file);
}
};
// Handler for file input
const handleOtherImageChange = (e) => {
const files = Array.from(e.target.files);
const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
setOtherImageData(newImageData);
const readers = files.map((file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
});
Promise.all(readers)
.then((results) => {
setSelectedOtherImageData([
...(selectedOtherImageData || []),
...results,
]); // Ensure selectedOtherImageData is an array
})
.catch((error) => {
console.error("Error reading files:", error);
});
};
// Function to remove a specific image
const removeOtherImage = (index) => {
const newImageData = otherImageData.filter((_, i) => i !== index);
const newSelectedImageData = selectedOtherImageData.filter(
(_, i) => i !== index
);
setOtherImageData(newImageData);
setSelectedOtherImageData(newSelectedImageData);
};
console.log(selectedBannerImageData);
const formFields = [
{
label: "Sponser name",
name: "sponserName",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser Name (Arabic)",
name: "sponserNameArabic",
type: "text",
isRequired: true,
arabic: true,
section: "Personal Details",
},
{
label: "Mobile no",
name: "mobileNo",
type: "number",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser address",
name: "sponserAddress",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Bank name",
name: "bankName",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Name",
name: "accountNumber",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "SWIFT/BIC Code",
name: "swiftCode",
type: "number",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Annual yeild",
name: "annualyield",
type: "number",
helperText: "Please enter value in percentage",
isRequired: true,
section: "Investment Object Details",
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const onSubmit = (data) => {
setSponser([
@@ -80,165 +221,14 @@ const AddSponser = () => {
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Heading as="h6" size="xs" mt={4}>
Personal Details
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
label="Sponser name"
name="sponserName"
control={control}
errors={errors}
isRequired={true}
/><FormField
placeHolder={"الرجاء إدخال القيمة"}
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
<FormField
label="Mobile no"
name="mobileNo"
type="tel"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Sponser address"
name="sponserAddress"
type="textarea"
control={control}
errors={errors}
isRequired={true}
/>
</Box>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}
</Box>
onSubmit={handleSubmit(onSubmit)}
<Divider />
<Heading as="h6" size="xs" mt={4}>
Bank Details
</Heading>
<Box display={"flex"} gap={0}>
{Array(1).fill(
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
{/* <FormField
label="Account Holder's Name"
name="accountHolderName"
control={control}
errors={errors}
isRequired={true}
/> */}
<FormField
label="Bank Name"
name="bankName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Account Number"
name="accountNumber"
control={control}
errors={errors}
isRequired={true}
/>
{/* <FormField
label="Bank Branch"
name="bankBranch"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="Branch Address"
name="branchAddress"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="IFSC Code"
name="ifscCode"
control={control}
errors={errors}
isRequired={true}
/> */}
<FormField
label="SWIFT/BIC Code"
name="swiftCode"
control={control}
errors={errors}
isRequired={true}
/>
{/* <FormField
label="Routing Number"
name="routingNumber"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="IBAN"
name="iban"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="Type of Account"
name="accountType"
control={control}
errors={errors}
isRequired={true}
component={
<Select size={"sm"}>
<option value="savings">Savings</option>
<option value="checking">Checking</option>
<option value="business">Business</option>
</Select>
}
/> */}
{/* <FormField
label="Bank Phone Number"
name="bankPhoneNumber"
control={control}
errors={errors}
isRequired={true}
/> */}
<FormField
label="Bank Email (optional)"
name="bankEmail"
control={control}
errors={errors}
/>
{/* <Button size={"sm"} rounded={"sm"} type="submit" colorScheme="green">
Submit
</Button> */}
</Box>
)}
</Box>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"49.5%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
</Box>
/></Box>
);
};

170
src/Pages/Master/Sponser/EditSponser.jsx
View File

@@ -1,22 +1,150 @@
import { Box, Image, Text } from "@chakra-ui/react"
// import error from "../assets/Error.svg"
import robot from "../../../assets/robot.png"
// import robot from "../assets/robot.png"
const EditSponser = () => {
return (
<Box
h={'100vh'}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}
flexDirection={'column'}
gap={8}
>
<Image src={robot} w={"171px"} />
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
</Box>
)
}
import { Box, Button, Divider, Heading } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { addSponser } from "./AddSponser";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import FormInputMain from "../../../Components/FormInputMain";
export default EditSponser
const EditSponser = () => {
const params = useParams();
const { sponser } = useContext(GlobalStateContext);
const [foundObject, setFoundObject] = useState(null);
const {
control,
handleSubmit,
reset,
getValues,
formState: { errors },
} = useForm({
resolver: yupResolver(addSponser),
});
useEffect(() => {
console.log(sponser);
const id = params?.id;
console.log(id);
// Ensure id is compared correctly
const found = sponser.find((item) => item?.id.toString() === id.toString());
console.log(found?.swiftCode);
setFoundObject(found);
if (found) {
reset({
sponserName: found.sponserName,
sponserNameArabic: found.sponserNameArabic,
mobileNo: found.mobileNo,
sponserAddress: found.sponserAddress,
bankName: found.bankName,
swiftCode: found.swiftCode,
accountNumber: found.accountNumber,
bankEmail: found.bankEmail,
});
}
}, [params, sponser, reset]);
if (!foundObject) {
return <Box>Loading...</Box>; // or any loading indicator
}
const formFields = [
{
label: "Sponser name",
name: "sponserName",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser Name (Arabic)",
name: "sponserNameArabic",
type: "text",
isRequired: true,
arabic: true,
section: "Personal Details",
},
{
label: "Mobile no",
name: "mobileNo",
type: "number",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser address",
name: "sponserAddress",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Bank name",
name: "bankName",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Name",
name: "accountNumber",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "SWIFT/BIC Code",
name: "swiftCode",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const onSubmit = (data) => {
console.log(data);
}
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
/>
</Box>
);
};
export default EditSponser;

5
src/Pages/Master/Sponser/Sponsers.jsx
View File

@@ -21,7 +21,7 @@ import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DataTable from "../../../Components/DataTable/DataTable";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Link as RouterLink } from "react-router-dom";
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import {
AddIcon,
CheckIcon,
@@ -40,6 +40,7 @@ import { debounce } from "./AddSponser";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
const Sponser = () => {
const navigate = useNavigate()
const toast = useToast();
const { sponser, setSponser, slideFromRight } =
useContext(GlobalStateContext);
@@ -191,6 +192,7 @@ const Sponser = () => {
<Button
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
onClick={()=>{ navigate(`view-sponser/${item?.id}`)}}
color="green.300"
rounded={"sm"}
size={"xs"}
@@ -209,6 +211,7 @@ const Sponser = () => {
placement="top"
>
<Button
onClick={()=>{ navigate(`edit-sponser/${item?.id}`)}}
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"

116
src/Pages/Master/Sponser/ViewSponser.jsx
View File

@@ -1,22 +1,102 @@
import { Box, Image, Text } from "@chakra-ui/react"
import {
Box,
Button,
Divider,
FormControl,
FormLabel,
Heading,
Image,
Text,
} from "@chakra-ui/react";
// import error from "../assets/Error.svg"
import robot from "../../../assets/robot.png"
import robot from "../../../assets/robot.png";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { useNavigate, useParams } from "react-router-dom";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext } from "react";
// import robot from "../assets/robot.png"
const ViewSponser = () => {
return (
<Box
h={'100vh'}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}
flexDirection={'column'}
gap={8}
>
<Image src={robot} w={"171px"} />
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
</Box>
)
}
const params = useParams();
const navigate = useNavigate()
const { sponser } = useContext(GlobalStateContext);
const id = params?.id;
export default ViewSponser
const found = sponser.find((item) => item?.id.toString() === id.toString());
const personalDetails = [
{
title: "Sponser Name",
value: found?.sponserName,
},
{
title: "Sponser Name (Arabic)",
value: found?.sponserNameArabic,
},
{
title: "Mobile no",
value: found?.mobileNo,
},
{
title: "Sponser address",
value: found?.sponserAddress,
},
];
const bankDetails = [
{
title: "Bank Name",
value: found?.bankName,
},
{
title: "Account number",
value: found?.accountNumber,
},
{
title: "SWIFT/BIC Code",
value: found?.swiftCode,
},
{
title: "Account Email",
value: found?.bankEmail,
},
];
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Heading display={'flex'} justifyContent={'space-between'} pe={4} as="h6" size="xs" mt={3}>
Personal Details <Button colorScheme="green" size={'xs'} rounded={'sm'} onClick={() => navigate(`/sponser/edit-sponser/${id}`)} >Edit sponsers</Button>
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} pt={5} mb={5} display={"flex"} flexWrap={"wrap"} gap={4}>
{personalDetails?.map(({ title, value }, index) => (
<FormControl className="border-end" key={index} w={"49%"} mb={0}>
<FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"} color={"gray.500"} fontSize={"xs"}>
{title}
</FormLabel>
<FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"} fontSize={"sm"}>{value}</FormLabel>
</FormControl>
))}
</Box>
</Box>
<Divider />
<Heading as="h6" size="xs" mt={0}>
Bank Details
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} pt={5} display={"flex"} flexWrap={"wrap"} gap={4}>
{bankDetails?.map(({ title, value }, index) => (
<FormControl className="border-end" key={index} w={"49%"} mb={0}>
<FormLabel color={"gray.500"} fontSize={"xs"}>
{title}
</FormLabel>
<FormLabel fontSize={"sm"}>{value}</FormLabel>
</FormControl>
))}
</Box>
</Box>
</Box>
);
};
export default ViewSponser;

20
src/Pages/WithDrawal/ViewHistory.jsx
View File

@@ -6,6 +6,7 @@ import {
HStack,
Input,
Text,
Tooltip,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
@@ -15,6 +16,7 @@ import Pagination from "../../Components/Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
// import { formatDate } from "../../Components/Functions/UTCConvertor";
const ViewHistory = () => {
@@ -137,17 +139,15 @@ const ViewHistory = () => {
{item.quarter}
</Text>
),
Action: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.amount}
</Text>
<Box display={'flex'} justifyContent={'space-around'}>
<Tooltip rounded={'sm'} fontSize={'xs'} label='Accept' bg='#fff' color={'green.500'} placement="left-start">
<Button color="green.500" rounded={'sm'} size={'xs'}>
<CheckIcon /></Button></Tooltip>
<Tooltip rounded={'sm'} fontSize={'xs'} label='Reject' bg='#fff' color={'red.500'} placement="left-start">
<Button color="red.500" rounded={'sm'} size={'xs'}>
<CloseIcon /></Button></Tooltip>
</Box>
),
}));

2
src/Routes/Routes.js
View File

@@ -11,7 +11,7 @@ import CreateIO from "../Pages/IO_Management/CreateIO";
import Create from "../Pages/IO_Management/CreateIO";
import ViewIO from "../Pages/IO_Management/ViewIO";
import View from "../Pages/IO_Management/ViewIO";
import InvestorPendingRequest from "../Pages/InvestorUpgrade/InvestorPendingRequest";
import InvestorPendingRequest from "../Pages/InvestorUpgrade/InvestorRequest";
import UpgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
import upgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
import InvestorDetails from "../Pages/Investor_Management/InvestorDetails";

67
src/Theme/Theme.js
View File

@@ -4,42 +4,41 @@ import { extendTheme } from "@chakra-ui/react";
const customTheme = extendTheme({
colors: {
customPink: {
50: '#ffe5e9',
100: '#ffbcc9',
200: '#ff93a8',
300: '#ff6a87',
400: '#ff4166',
500: '#ff1845', // you can choose your custom color values here
600: '#db1139',
700: '#b70d2d',
800: '#930921',
900: '#700616',
50: "#ffe5e9",
100: "#ffbcc9",
200: "#ff93a8",
300: "#ff6a87",
400: "#ff4166",
500: "#ff1845", // you can choose your custom color values here
600: "#db1139",
700: "#b70d2d",
800: "#930921",
900: "#700616",
},
forestGreen: {
50: '#ffe6e9',
100: '#f8c2c7',
200: '#ef9da4',
300: '#e67882',
400: '#dd5460',
500: '#DE858E', // primary shade for your custom color
600: '#DE858E',
700: '#DE858E',
800: '#DE858E',
900: '#DE858E',
},
forestGreen: {
"50": "#e6f3e9",
"100": "#c2e1c7",
"200": "#9dcda4",
"300": "#78b982",
"400": "#54a560",
"500": "#004118", // primary shade for your custom color
"600": "#003b14",
"700": "#003310",
"800": "#002b0c",
"900": "#002308"
}
50: "#ffe6e9",
100: "#f8c2c7",
200: "#ef9da4",
300: "#e67882",
400: "#dd5460",
500: "#DE858E", // primary shade for your custom color
600: "#DE858E",
700: "#DE858E",
800: "#DE858E",
900: "#DE858E",
},
forestGreen: {
50: "#e6f3e9",
100: "#c2e1c7",
200: "#9dcda4",
300: "#78b982",
400: "#54a560",
500: "#004118", // primary shade for your custom color
600: "#003b14",
700: "#003310",
800: "#002b0c",
900: "#002308",
},
},
components: {
// Switch: {