diff --git a/src/Components/CustomAlertDialog.jsx b/src/Components/CustomAlertDialog.jsx index e83e4d1..1c1dddb 100644 --- a/src/Components/CustomAlertDialog.jsx +++ b/src/Components/CustomAlertDialog.jsx @@ -16,7 +16,7 @@ const CustomAlertDialog = ({ isOpen, onOpen, onClose, alertHandler, isLoading, m - + {message} diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx index 5785033..8041352 100644 --- a/src/Components/FormInputMain.jsx +++ b/src/Components/FormInputMain.jsx @@ -10,6 +10,8 @@ const FormInputMain = ({ errors, onSubmit, children, + p, + w }) => { return (
@@ -22,7 +24,7 @@ const FormInputMain = ({ - + - - - - setDeleteAlert(false)} - isOpen={deleteAlert} - message={"Are you sure you want to delete sponers?"} - alertHandler={handleDelete} - isLoading={isLoading} - /> + {tabs.map(({content}, index) => ( + + {content} + ))} + + + {/* + + + + + + + + + + { control={control} errors={errors} onSubmit={handleSubmit(onSubmit)} - > + /> + + + + { control={control} errors={errors} onSubmit={handleSubmit(onSubmit)} - > + /> + + + + { control={control} errors={errors} onSubmit={handleSubmit(onSubmit)} - > + /> - + + + + + */} + + + diff --git a/src/Pages/IO_Management/CreateIO/Destribution.jsx b/src/Pages/IO_Management/CreateIO/Destribution.jsx new file mode 100644 index 0000000..532b099 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/Destribution.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Distribution = () => { + return ( +
Distribution
+ ) +} + +export default Distribution \ No newline at end of file diff --git a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx new file mode 100644 index 0000000..4069e31 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IOArtifacts = () => { + return ( +
IOArtifacts
+ ) +} + +export default IOArtifacts \ No newline at end of file diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx new file mode 100644 index 0000000..5420978 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IOCashDetails = () => { + return ( +
IOCashDetails
+ ) +} + +export default IOCashDetails \ No newline at end of file diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx new file mode 100644 index 0000000..cf0df77 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx @@ -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 ( + + ); +}; + +export default IODetails; diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx new file mode 100644 index 0000000..986a658 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const IONAVDetails = () => { + return ( +
IONAVDetails
+ ) +} + +export default IONAVDetails \ No newline at end of file diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx new file mode 100644 index 0000000..6ada9a6 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx @@ -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: () => , + }); + }, 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": ( + + "{item.sponserName}" + + ), + Address: ( + + + " {item.sponserAddress}" + + + ), + "Mobile no": ( + + + "{item.mobileNo}" + + + ), + + "Created At": ( + + + {formatDate(item.createdAt)} + + + ), + Action: , + })); + + + return ( + + + setSearchTerm(e.target.value)} + /> + + + + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + ); +}; + +export default InvestmentDocument; diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx new file mode 100644 index 0000000..4a0b26d --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/Investors.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Investors = () => { + return ( +
Investors
+ ) +} + +export default Investors \ No newline at end of file diff --git a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx new file mode 100644 index 0000000..c739fff --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const KeyMerits = () => { + return ( +
KeyMerits
+ ) +} + +export default KeyMerits \ No newline at end of file diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx index 74e6de5..e95146b 100644 --- a/src/Pages/IO_Management/InvestmentDocuments.jsx +++ b/src/Pages/IO_Management/InvestmentDocuments.jsx @@ -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 ( <> { - Investment Documents + Add Details - - - + + + File Name + setFileName(e.target.value)} + fontSize={"sm"} + type="text" + size={"sm"} /> - + + + File Name + setFile(e.target.value)} + fontSize={"sm"} + type="file" + className="form-control" + size={"sm"} + /> + + + + + + + + setAlert(false)} + alertHandler={handleSave} + message={"Are you sure you want to add this document?"} + /> ); }; diff --git a/src/Pages/IO_Management/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIOdata.jsx index e984d42..afd6d10 100644 --- a/src/Pages/IO_Management/ViewIOdata.jsx +++ b/src/Pages/IO_Management/ViewIOdata.jsx @@ -28,6 +28,8 @@ const ViewIOdata = () => { const { viewIO } = useContext(GlobalStateContext); const { reset } = useForm(); // assuming react-hook-form + + const id = params?.id; const foundObject = viewIO.find( (item) => item?.id.toString() === id.toString() diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 662a975..fed20c5 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -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";