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

ioUpdated

Browse Source
This commit is contained in:
Siddhesh More
2024-07-05 15:28:02 +05:30
parent 00cd046f67
commit 9154113dfc
14 changed files with 573 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/CustomAlertDialog.jsx
View File

@@ -16,7 +16,7 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m
<AlertDialogContent w={400}>
<AlertDialogCloseButton className="web-text-xsmall link" />
<AlertDialogBody className="text-center web-text-large fw-bold" pt={8}>
<AlertDialogBody className="text-center web-text-large fw-bold" pt={10}>
{message}
</AlertDialogBody>
<AlertDialogFooter display={"flex"} justifyContent={"center"}>

10
src/Components/FormInputMain.jsx
View File

@@ -10,6 +10,8 @@ const FormInputMain = ({
errors,
onSubmit,
children,
p,
w
}) => {
return (
<form onSubmit={onSubmit}>
@@ -22,7 +24,7 @@ const FormInputMain = ({
<Box display={"flex"} gap={0}>
<Box
width={"100%"}
p={5}
p={p?p:5}
display={"flex"}
flexWrap={"wrap"}
gap={4}
@@ -81,10 +83,10 @@ const FormInputMain = ({
{children}
<Box display={'flex'} justifyContent={'end'} mb={5}>
<Box display={"flex"} justifyContent={"space-around"} p={4} w={'49%'}>
<Box display={"flex"} justifyContent={"space-around"} p={2} w={'49%'} gap={4}>
<Button
size={"sm"}
width={"44.5%"}
width={w?w:"44.5%"}
rounded={"sm"}
type="submit"
colorScheme='gray'
@@ -93,7 +95,7 @@ const FormInputMain = ({
</Button>
<Button
size={"sm"}
width={"44.5%"}
width={w?w:"44.5%"}
rounded={"sm"}
type="submit"
colorScheme="green"

402
src/Pages/IO_Management/CreateIO.jsx → src/Pages/IO_Management/CreateIO/CreateIO.jsx
View File

@@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import {
Box,
Divider,
@@ -33,17 +33,25 @@ import {
WarningTwoIcon,
} from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
import FormField from "../../Components/FormField";
import FormField from "../../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
import AddIOCharges from "./AddIOCharges";
import FormInputMain from "../../Components/FormInputMain";
import DataTable from "../../Components/DataTable/DataTable";
import { debounce } from "../Master/Sponser/AddSponser";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import InvestmentDocuments from "./InvestmentDocuments";
import AddIOCharges from "../AddIOCharges";
import FormInputMain from "../../../Components/FormInputMain";
import DataTable from "../../../Components/DataTable/DataTable";
import { debounce } from "../../Master/Sponser/AddSponser";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { formatDate } from "../../../Components/Functions/UTCConvertor";
import IODetails from "./IODetails";
import KeyMerits from "./KeyMerits";
import IOArtifacts from "./IOArtifacts";
import Investors from "./Investors";
import IOCashDetails from "./IOCashDetails";
import IONAVDetails from "./IONAVDetails";
import Distribution from "./Destribution";
import InvestmentDocuments from "../InvestmentDocuments";
import InvestmentDocument from "./InvestmentDocument";
const schema = yup.object().shape({
ioName: yup.string().required("Arabic name is required"),
@@ -108,6 +116,12 @@ const years = Array.from(
(_, i) => startYear + i
).map((year) => ({ value: year, label: year }));
const CreateIO = () => {
const navigate = useNavigate();
const { create, setCreate, sponser, setSponser, investment, setInvestment } =
@@ -138,7 +152,16 @@ const CreateIO = () => {
resolver: yupResolver(schema),
});
console.log(errors);
const tabs = [
{ label: 'IO Details', content: <IODetails control={control} errors={errors} /> },
{ label: 'Investment documents', content: <InvestmentDocument control={control} errors={errors} /> },
{ label: 'Key merits', content: <KeyMerits control={control} errors={errors} /> },
{ label: 'IO artifacts', content: <IOArtifacts control={control} errors={errors} /> },
{ label: 'Investors', content: <Investors control={control} errors={errors} /> },
{ label: 'IO Cash Details', content: <IOCashDetails control={control} errors={errors} /> },
{ label: 'IO NAV Details', content: <IONAVDetails control={control} errors={errors} /> },
{ label: 'Distribution', content: <Distribution control={control} errors={errors} /> },
];
useEffect(() => {
// Simulate loading
@@ -150,85 +173,6 @@ const CreateIO = () => {
return () => clearTimeout(timer);
}, []);
const tableHeadRow = [
"Sponser name",
"Address",
"Mobile no",
"Created At",
"Action",
];
const handleUpdateStatus = debounce((id) => {
setCreate((prevCreate) =>
prevCreate.map((create) =>
create.id === id ? { ...create, status: !create.status } : create
)
);
toast({
render: () => <ToastBox message={"Status changed succesfully.!"} />,
});
}, 300);
const filteredData = create?.filter((item) => {
// Filter by name (case insensitive)
const name = item.sponserName;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
});
const handleDelete = () => {
const updatedCreate = create.filter((create) => create.id !== actionId);
setTimeout(() => {
setSponser(updatedCreate);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
setIsLoading(true);
};
const extractedArray = filteredData?.map((item) => ({
id: item?.id,
"Sponser name": (
<Text
justifyContent={"left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
"{item.sponserName}"
</Text>
),
Address: (
<Box w={350} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
" {item.sponserAddress}"
</Text>
</Box>
),
"Mobile no": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
"{item.mobileNo}"
</Text>
</Box>
),
"Created At": (
<span className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
{formatDate(item.createdAt)}
</Text>
</span>
),
Action: <Box display={"flex"} justifyContent={"space-between"}></Box>,
}));
console.log(extractedArray);
const destributedAmount = Number(watch().destributedAmount) || 0;
useEffect(() => {
@@ -323,171 +267,6 @@ const CreateIO = () => {
setSelectedOtherImageData(newSelectedImageData);
};
const formFields = [
{
label: "IO Name (English)",
placeHolder: " ",
name: "ioName",
type: "text",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "IO Name (Arabic)",
placeHolder: " ",
name: "ioNameArabic",
type: "text",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Description (English)",
placeHolder: " ",
name: "discription",
type: "textarea",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Description (Arabic)",
placeHolder: " ",
name: "discriptionArabic",
type: "textarea",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Investment Type (English)",
placeHolder: " ",
name: "typeName",
type: "select",
isRequired: true,
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
},
{
label: "Investment Type (Arabic)",
placeHolder: " ",
name: "typeNameArabic",
type: "select",
isRequired: true,
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
},
{
label: "Sponser Name (English)",
placeHolder: " ",
name: "sponserName",
type: "text",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Goal Amount (English)",
placeHolder: " ",
name: "goalAmount",
type: "Number",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Minimum Investment Amount (English)",
placeHolder: " ",
name: "minInvestment",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Maximum Investment Amount (English)",
placeHolder: " ",
name: "maxInvestment",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Holding Period (English)",
placeHolder: " ",
name: "holdingPeriod",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Expected Return Estimated (English)",
placeHolder: " ",
name: "expectedReturn",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Closing Date (English)",
placeHolder: " ",
name: "closingDate",
type: "date",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "IO Status (English)",
placeHolder: " ",
name: "minInvestment",
type: "text",
isRequired: true,
section: " ",
width: "32.3%",
},
];
const keyMerits = [
{
label: "Name (English)",
@@ -591,14 +370,7 @@ const CreateIO = () => {
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const groupedFieldsTwo = keyMerits.reduce((groups, field) => {
const { section } = field;
@@ -637,16 +409,19 @@ const CreateIO = () => {
}, {});
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Tabs mt={4}>
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
<Tabs mt={2}>
<TabList>
{tabs.map(({label}, index) => (
<Tab
disabled={true}
key={index}
fontSize={"sm"}
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
>
IO Details
</Tab>
<Tab
{label}
</Tab>))}
{/* <Tab
fontSize={"sm"}
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
>
@@ -687,61 +462,29 @@ const CreateIO = () => {
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
>
Distribution
</Tab>
</Tab> */}
</TabList>
<TabPanels>
<TabPanel>
<FormInputMain
width={"23.8%"}
groupedFields={groupedFields}
control={control}
errors={errors}
></FormInputMain>
</TabPanel>
<TabPanel>
<Box display={'flex'} justifyContent={'space-between'} mb={4}>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Button leftIcon={<AddIcon />} onClick={onOpen}
size={"sm"}
// width={"44.5%"}
fontSize={'xs'}
rounded={"sm"}
colorScheme='green'
>
Add
</Button>
<InvestmentDocuments isOpen={isOpen} onClose={onClose} firstField={firstField} />
</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}
/>
{tabs.map(({content}, index) => (
<TabPanel>
{content}
</TabPanel>))}
{/* <TabPanel>
<IODetails control={control} errors={errors} />
</TabPanel>
<TabPanel>
<InvestmentDocument control={control} errors={errors}/>
</TabPanel>
<TabPanel>
<FormInputMain
width={"23.8%"}
@@ -749,8 +492,12 @@ const CreateIO = () => {
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
></FormInputMain>
/>
</TabPanel>
<TabPanel>
<FormInputMain
width={"23.8%"}
@@ -758,8 +505,12 @@ const CreateIO = () => {
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
></FormInputMain>
/>
</TabPanel>
<TabPanel>
<FormInputMain
width={"23.8%"}
@@ -767,9 +518,16 @@ const CreateIO = () => {
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
></FormInputMain>
/>
</TabPanel>
<TabPanel></TabPanel>
<TabPanel></TabPanel> */}
</TabPanels>
</Tabs>
</Box>

9
src/Pages/IO_Management/CreateIO/Destribution.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const Distribution = () => {
return (
<div>Distribution</div>
)
}
export default Distribution

9
src/Pages/IO_Management/CreateIO/IOArtifacts.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const IOArtifacts = () => {
return (
<div>IOArtifacts</div>
)
}
export default IOArtifacts

9
src/Pages/IO_Management/CreateIO/IOCashDetails.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const IOCashDetails = () => {
return (
<div>IOCashDetails</div>
)
}
export default IOCashDetails

190
src/Pages/IO_Management/CreateIO/IODetails.jsx Normal file
View File

@@ -0,0 +1,190 @@
import React from "react";
import FormInputMain from "../../../Components/FormInputMain";
const IODetails = ({ control, errors }) => {
const formFields = [
{
label: "IO Name (English)",
placeHolder: " ",
name: "ioName",
type: "text",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "IO Name (Arabic)",
placeHolder: " ",
name: "ioNameArabic",
type: "text",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Description (English)",
placeHolder: " ",
name: "discription",
type: "textarea",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Description (Arabic)",
placeHolder: " ",
name: "discriptionArabic",
type: "textarea",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Investment Type (English)",
placeHolder: " ",
name: "typeName",
type: "select",
isRequired: true,
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
},
{
label: "Investment Type (Arabic)",
placeHolder: " ",
name: "typeNameArabic",
type: "select",
isRequired: true,
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
},
{
label: "Sponser Name (English)",
placeHolder: " ",
name: "sponserName",
type: "text",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Goal Amount (English)",
placeHolder: " ",
name: "goalAmount",
type: "Number",
isRequired: true,
section: " ",
width: "49%",
},
{
label: "Minimum Investment Amount (English)",
placeHolder: " ",
name: "minInvestment",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Maximum Investment Amount (English)",
placeHolder: " ",
name: "maxInvestment",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Holding Period (English)",
placeHolder: " ",
name: "holdingPeriod",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Expected Return Estimated (English)",
placeHolder: " ",
name: "expectedReturn",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "Closing Date (English)",
placeHolder: " ",
name: "closingDate",
type: "date",
isRequired: true,
section: " ",
width: "32.3%",
},
{
label: "IO Status (English)",
placeHolder: " ",
name: "minInvestment",
type: "text",
isRequired: true,
section: " ",
width: "32.3%",
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
return (
<FormInputMain
p={0.1}
width={"23.8%"}
groupedFields={groupedFields}
control={control}
errors={errors}
/>
);
};
export default IODetails;

9
src/Pages/IO_Management/CreateIO/IONAVDetails.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const IONAVDetails = () => {
return (
<div>IONAVDetails</div>
)
}
export default IONAVDetails

170
src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx Normal file
View File

@@ -0,0 +1,170 @@
import { Box, Button, Input, Text, useDisclosure } from "@chakra-ui/react";
import React, { useContext, useEffect, useRef, useState } from "react";
import InvestmentDocuments from "../InvestmentDocuments";
import DataTable from "../../../Components/DataTable/DataTable";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { debounce } from "../../Master/Sponser/AddSponser";
import { formatDate } from "../../../Components/Functions/UTCConvertor";
import { AddIcon } from "@chakra-ui/icons";
const InvestmentDocument = ({ control, errors }) => {
const { create, setCreate, sponser, setSponser, investment, setInvestment } =
useContext(GlobalStateContext);
const firstField = useRef();
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("");
const { isOpen, onOpen, onClose } = useDisclosure();
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 1500);
// Cleanup the timer on component unmount
return () => clearTimeout(timer);
}, []);
const tableHeadRow = [
"Sponser name",
"Address",
"Mobile no",
"Created At",
"Action",
];
const handleUpdateStatus = debounce((id) => {
setCreate((prevCreate) =>
prevCreate.map((create) =>
create.id === id ? { ...create, status: !create.status } : create
)
);
toast({
render: () => <ToastBox message={"Status changed succesfully.!"} />,
});
}, 300);
const filteredData = create?.filter((item) => {
// Filter by name (case insensitive)
const name = item.sponserName;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
});
const handleDelete = () => {
const updatedCreate = create.filter((create) => create.id !== actionId);
setTimeout(() => {
setSponser(updatedCreate);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
setIsLoading(true);
};
const extractedArray = filteredData?.map((item) => ({
id: item?.id,
"Sponser name": (
<Text
justifyContent={"left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
h={7}
>
"{item.sponserName}"
</Text>
),
Address: (
<Box w={350} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
" {item.sponserAddress}"
</Text>
</Box>
),
"Mobile no": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
"{item.mobileNo}"
</Text>
</Box>
),
"Created At": (
<span className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
{formatDate(item.createdAt)}
</Text>
</span>
),
Action: <Box display={"flex"} justifyContent={"space-between"}></Box>,
}));
return (
<Box>
<Box display={"flex"} justifyContent={"space-between"} mb={4}>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Button
leftIcon={<AddIcon />}
onClick={onOpen}
size={"xs"}
// width={"44.5%"}
fontSize={"xs"}
rounded={"sm"}
ps={3}
pe={4}
colorScheme="green"
>
Add
</Button>
<InvestmentDocuments
isOpen={isOpen}
onClose={onClose}
firstField={firstField}
/>
</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 InvestmentDocument;

9
src/Pages/IO_Management/CreateIO/Investors.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const Investors = () => {
return (
<div>Investors</div>
)
}
export default Investors

9
src/Pages/IO_Management/CreateIO/KeyMerits.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const KeyMerits = () => {
return (
<div>KeyMerits</div>
)
}
export default KeyMerits

113
src/Pages/IO_Management/InvestmentDocuments.jsx
View File

@@ -19,6 +19,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
import FormInputMain from "../../Components/FormInputMain";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
export const investmentDoct = yup.object().shape({
type: yup.string().required("Sponser name is required"),
@@ -27,54 +28,19 @@ export const investmentDoct = yup.object().shape({
});
const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
const [file, setFile] = useState("");
const [fileName, setFileName] = useState("");
const [alert, setAlert] = useState(false);
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(investmentDoct),
});
const formFields = [
{
label: "Type",
placeHolder: " ",
name: "type",
type: "text",
isRequired: true,
section: "Add Details",
width: "100%",
},
{
label: "File Name",
name: "fileName",
placeHolder: " ",
type: "text",
isRequired: true,
section: "Add Details",
width: "100%",
},
{
label: "Document",
name: "document",
placeHolder: " ",
type: "fileNormal",
isRequired: true,
section: "Add Details",
width: "100%",
},
];
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);
@@ -89,6 +55,16 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
]);
};
const handleSave = () => {
console.log({
fileName: fileName,
file:file
});
setAlert(false)
onClose()
}
return (
<>
<Drawer
@@ -100,21 +76,62 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>Investment Documents</DrawerHeader>
<DrawerHeader fontSize={"sm"}>Add Details</DrawerHeader>
<DrawerBody padding={0}>
<Stack>
<FormInputMain
width={"100%"}
groupedFields={groupedFields}
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
<DrawerBody>
<FormControl mb={4}>
<FormLabel fontSize={"sm"}>File Name</FormLabel>
<Input
value={fileName}
onChange={(e) => setFileName(e.target.value)}
fontSize={"sm"}
type="text"
size={"sm"}
/>
</Stack>
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize={"sm"}>File Name</FormLabel>
<Input
value={file}
onChange={(e) => setFile(e.target.value)}
fontSize={"sm"}
type="file"
className="form-control"
size={"sm"}
/>
</FormControl>
</DrawerBody>
<DrawerFooter>
<Button
variant="outline"
colorScheme={"green"}
rounded={"sm"}
size={"sm"}
mr={3}
onClick={onClose}
>
Cancel
</Button>
<Button
colorScheme={"green"}
rounded={"sm"}
size={"sm"}
onClick={() => setAlert(true)}
>
Save
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
<CustomAlertDialog
isOpen={alert}
onClose={() => setAlert(false)}
alertHandler={handleSave}
message={"Are you sure you want to add this document?"}
/>
</>
);
};

9
src/Pages/IO_Management/ViewIOdata.jsx
View File

@@ -13,10 +13,13 @@ const ViewIOdata = () => {
const { viewIO } = useContext(GlobalStateContext);
const { reset } = useForm(); // assuming react-hook-form
const id = params?.id;
const foundObject = viewIO.find((item) =>
console.log(item?.id.toString() == id.toString())
);
const foundObject = viewIO.find((item) =>item?.id.toString() === id.toString());
console.log(foundObject);
if (!foundObject) {
return <Box>Loading...</Box>;

2
src/Routes/Routes.js
View File

@@ -7,7 +7,7 @@ import BankInvestor from "../Pages/Admin/BankInvestor";
import Contact from "../Pages/Admin/Contact";
import Notification from "../Pages/Admin/Notification";
import Users from "../Pages/Admin/Users";
import CreateIO from "../Pages/IO_Management/CreateIO";
import CreateIO from "../Pages/IO_Management/CreateIO/CreateIO";
// import CreateIO from "../Pages/IO_Management/InputComponents";
import Create from "../Pages/IO_Management/InputComponents";
import ViewIO from "../Pages/IO_Management/ViewIO";