CreatViewIO header menu and EditViewIO modal
This commit is contained in:
rockyeverlast
114
package-lock.json
generated
114
package-lock.json
generated
@@ -19,6 +19,7 @@
|
||||
"framer-motion": "^11.1.5",
|
||||
"js-cookie": "^3.0.5",
|
||||
"react": "^18.2.0",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-icons": "^5.1.0",
|
||||
@@ -27,7 +28,7 @@
|
||||
"react-router-dom": "^6.22.3",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-persist-transform-encrypt": "^5.1.1",
|
||||
"uuid": "^9.0.1",
|
||||
"uuid": "^10.0.0",
|
||||
"xlsx": "^0.18.5",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
@@ -2464,6 +2465,15 @@
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
|
||||
"integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
|
||||
@@ -2485,8 +2495,7 @@
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
|
||||
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
|
||||
"devOptional": true
|
||||
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
|
||||
},
|
||||
"node_modules/@types/quill": {
|
||||
"version": "1.3.10",
|
||||
@@ -2500,7 +2509,6 @@
|
||||
"version": "18.2.79",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
|
||||
"integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
|
||||
"devOptional": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.0.2"
|
||||
@@ -2515,6 +2523,25 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-redux": {
|
||||
"version": "7.1.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz",
|
||||
"integrity": "sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==",
|
||||
"dependencies": {
|
||||
"@types/hoist-non-react-statics": "^3.3.0",
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"redux": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-redux/node_modules/redux": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
|
||||
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
@@ -4626,6 +4653,11 @@
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@@ -5042,6 +5074,11 @@
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/raf-schd": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
|
||||
"integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
@@ -5053,6 +5090,61 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-beautiful-dnd": {
|
||||
"version": "13.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
|
||||
"integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2",
|
||||
"css-box-model": "^1.2.0",
|
||||
"memoize-one": "^5.1.1",
|
||||
"raf-schd": "^4.0.2",
|
||||
"react-redux": "^7.2.0",
|
||||
"redux": "^4.0.4",
|
||||
"use-memo-one": "^1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.5 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-beautiful-dnd/node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-beautiful-dnd/node_modules/react-redux": {
|
||||
"version": "7.2.9",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
|
||||
"integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.15.4",
|
||||
"@types/react-redux": "^7.1.20",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^17.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.3 || ^17 || ^18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-beautiful-dnd/node_modules/redux": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
|
||||
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-clientside-effect": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
|
||||
@@ -5913,6 +6005,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-memo-one": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
|
||||
"integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sidecar": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
||||
@@ -5943,9 +6043,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
|
||||
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
|
||||
"integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/broofa",
|
||||
"https://github.com/sponsors/ctavan"
|
||||
|
||||
@@ -5,28 +5,29 @@ import { OPACITY_ON_LOAD } from "../Layout/animations";
|
||||
import { ArrowBackIcon } from "@chakra-ui/icons";
|
||||
|
||||
const FormInputMain = ({
|
||||
register,
|
||||
groupedFields,
|
||||
control,
|
||||
errors,
|
||||
onSubmit,
|
||||
children,
|
||||
onCancle,
|
||||
onCancle,
|
||||
submitTitle,
|
||||
p,
|
||||
w
|
||||
w,
|
||||
}) => {
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
{Object.entries(groupedFields).map(([section, fields], index) => (
|
||||
<Box key={section} mt={4} >
|
||||
<Heading as="h6" size="xs" mx={5} fontWeight={'500'}>
|
||||
<Box key={section} mt={4}>
|
||||
<Heading as="h6" size="xs" mx={5} fontWeight={"500"}>
|
||||
{/* <ArrowBackIcon fontSize={'lg'} /> */}
|
||||
{section}
|
||||
</Heading>
|
||||
<Box display={"flex"} gap={0}>
|
||||
<Box
|
||||
width={"100%"}
|
||||
p={p?p:5}
|
||||
p={p ? p : 5}
|
||||
display={"flex"}
|
||||
flexWrap={"wrap"}
|
||||
gap={4}
|
||||
@@ -49,7 +50,7 @@ const FormInputMain = ({
|
||||
options,
|
||||
helperText,
|
||||
multiple,
|
||||
width
|
||||
width,
|
||||
},
|
||||
key
|
||||
) => (
|
||||
@@ -83,22 +84,24 @@ const FormInputMain = ({
|
||||
))}
|
||||
|
||||
{children}
|
||||
|
||||
<Box display={'flex'} justifyContent={'end'} mb={5}>
|
||||
<Box display={"flex"} justifyContent={"end"} p={2} w={'49%'} gap={4}>
|
||||
{onCancle && <Button
|
||||
size={"sm"}
|
||||
width={w?w:"44.5%"}
|
||||
rounded={"sm"}
|
||||
type="submit"
|
||||
colorScheme='gray'
|
||||
onClick={onCancle}
|
||||
>
|
||||
Cancel
|
||||
</Button>}
|
||||
|
||||
<Box display={"flex"} justifyContent={"end"} mb={5}>
|
||||
<Box display={"flex"} justifyContent={"end"} p={2} w={"49%"} gap={4}>
|
||||
{onCancle && (
|
||||
<Button
|
||||
size={"sm"}
|
||||
width={w ? w : "44.5%"}
|
||||
rounded={"sm"}
|
||||
type="submit"
|
||||
colorScheme="gray"
|
||||
onClick={onCancle}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size={"sm"}
|
||||
width={w?w:"44.5%"}
|
||||
width={w ? w : "44.5%"}
|
||||
rounded={"sm"}
|
||||
type="submit"
|
||||
colorScheme="green"
|
||||
|
||||
282
src/Pages/IO_Management/EditIO/EditIO.jsx
Normal file
282
src/Pages/IO_Management/EditIO/EditIO.jsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@chakra-ui/react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import FormInputMain from "../../../Components/FormInputMain";
|
||||
import FormField from "./EditIOForm";
|
||||
|
||||
const EditIO = ({ isOpen, onClose }) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
ioName: "",
|
||||
ioNameArabic: "",
|
||||
description: "",
|
||||
descriptionArabic: "",
|
||||
typeName: "",
|
||||
typeNameArabic: "",
|
||||
sponserName: "",
|
||||
sponserNameArabic: "",
|
||||
goalAmount: 0,
|
||||
minInvestment: 0,
|
||||
maxInvestment: 0,
|
||||
holdingPeriod: 0,
|
||||
expectedReturn: 0,
|
||||
closingDate: "",
|
||||
ioStatus: "",
|
||||
},
|
||||
});
|
||||
|
||||
const formFields = [
|
||||
{
|
||||
label: "IO Name (English)",
|
||||
placeHolder: " ",
|
||||
name: "ioName",
|
||||
type: "text",
|
||||
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "IO Name (Arabic)",
|
||||
placeHolder: " ",
|
||||
name: "ioNameArabic",
|
||||
type: "text",
|
||||
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Description (English)",
|
||||
placeHolder: " ",
|
||||
name: "discription",
|
||||
type: "textarea",
|
||||
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Description (Arabic)",
|
||||
placeHolder: " ",
|
||||
name: "discriptionArabic",
|
||||
type: "textarea",
|
||||
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Investment Type (English)",
|
||||
placeHolder: " ",
|
||||
name: "typeName",
|
||||
type: "select",
|
||||
|
||||
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",
|
||||
|
||||
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",
|
||||
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Sponser Name (Arabic)",
|
||||
placeHolder: " ",
|
||||
name: "sponserNameArabic",
|
||||
type: "text",
|
||||
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Goal Amount (English)",
|
||||
placeHolder: " ",
|
||||
name: "goalAmount",
|
||||
type: "Number",
|
||||
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Minimum Investment Amount (English)",
|
||||
placeHolder: " ",
|
||||
name: "minInvestment",
|
||||
type: "number",
|
||||
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Maximum Investment Amount (English)",
|
||||
placeHolder: " ",
|
||||
name: "maxInvestment",
|
||||
type: "number",
|
||||
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Holding Period (English)",
|
||||
placeHolder: " ",
|
||||
name: "holdingPeriod",
|
||||
type: "number",
|
||||
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Expected Return Estimated (English)",
|
||||
placeHolder: " ",
|
||||
name: "expectedReturn",
|
||||
type: "number",
|
||||
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Closing Date (English)",
|
||||
placeHolder: " ",
|
||||
name: "closingDate",
|
||||
type: "date",
|
||||
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "IO status",
|
||||
placeHolder: " ",
|
||||
name: "ioStatus",
|
||||
type: "select",
|
||||
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = (data) => {
|
||||
console.log(data);
|
||||
// Handle form submission
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent maxW={"1280px"}>
|
||||
<ModalHeader>Update IO Status</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody paddingBottom={"20px"}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Box display={"flex"} flexWrap={"wrap"} gap={2}>
|
||||
{formFields.map((field, index) => (
|
||||
<FormField
|
||||
key={index}
|
||||
field={field}
|
||||
register={register}
|
||||
errors={errors}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Box display={"flex"} justifyContent={"end"} mt={4}>
|
||||
<Button
|
||||
bg={"hsla(139, 100%, 14%, 1)"}
|
||||
mr={3}
|
||||
type="submit"
|
||||
color={"#fff"}
|
||||
_hover={{
|
||||
bg: "hsl(139deg 98.99% 26.59%)",
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={onClose}>Close</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditIO;
|
||||
65
src/Pages/IO_Management/EditIO/EditIOForm.jsx
Normal file
65
src/Pages/IO_Management/EditIO/EditIOForm.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Input,
|
||||
Select,
|
||||
Textarea,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
FormErrorMessage,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const FormField = ({ field, register, errors }) => {
|
||||
const { label, name, type, placeHolder, options, width } = field;
|
||||
|
||||
return (
|
||||
<Box width={width}>
|
||||
<FormControl isInvalid={errors[name]}>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
{type === "text" && (
|
||||
<Input
|
||||
placeholder={placeHolder}
|
||||
{...register(name, { required: true })}
|
||||
/>
|
||||
)}
|
||||
{type === "textarea" && (
|
||||
<Textarea
|
||||
placeholder={placeHolder}
|
||||
{...register(name, { required: true })}
|
||||
/>
|
||||
)}
|
||||
{type === "number" && (
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={placeHolder}
|
||||
{...register(name, { required: true })}
|
||||
/>
|
||||
)}
|
||||
{type === "date" && (
|
||||
<Input
|
||||
type="date"
|
||||
placeholder={placeHolder}
|
||||
{...register(name, { required: true })}
|
||||
/>
|
||||
)}
|
||||
{type === "select" && (
|
||||
<Select
|
||||
placeholder={placeHolder}
|
||||
{...register(name, { required: true })}
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
<FormErrorMessage>
|
||||
{errors[name] && `${label} is required`}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormField;
|
||||
@@ -0,0 +1,32 @@
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const AmountInvested = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Investment</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<p>Amount Invested details go here...</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button colorScheme="blue" mr={3} onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AmountInvested;
|
||||
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const DistributionInvestor = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Distribution To investors</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Date
|
||||
</Text>
|
||||
<Input
|
||||
placeholder="Select Date"
|
||||
size="md"
|
||||
type="date"
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
<Text as={"label"}>Amount</Text>
|
||||
<Input placeholder="Enter amount" fontSize={"sm"} />
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Comments
|
||||
</Text>
|
||||
<Textarea placeholder="Write Comments" fontSize={"sm"} />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
bg={"hsla(139, 100%, 14%, 1)"}
|
||||
mr={3}
|
||||
color={"#fff"}
|
||||
_hover={{
|
||||
bg: "hsl(139deg 98.99% 26.59%)",
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button mr={3} onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DistributionInvestor;
|
||||
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const DistributionSponsor = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Distribution from Sponsors</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Date
|
||||
</Text>
|
||||
<Input
|
||||
placeholder="Select Date"
|
||||
size="md"
|
||||
type="date"
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
<Text as={"label"}>Amount</Text>
|
||||
<Input placeholder="Enter amount" fontSize={"sm"} />
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Comments
|
||||
</Text>
|
||||
<Textarea placeholder="Write Comments" fontSize={"sm"} />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
bg={"hsla(139, 100%, 14%, 1)"}
|
||||
mr={3}
|
||||
color={"#fff"}
|
||||
_hover={{
|
||||
bg: "hsl(139deg 98.99% 26.59%)",
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button mr={3} onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DistributionSponsor;
|
||||
69
src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
Normal file
69
src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
InputGroup,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const FeesExpenses = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Fees & Expenses</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Date
|
||||
</Text>
|
||||
<Input
|
||||
placeholder="Select Date"
|
||||
size="md"
|
||||
type="date"
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
<Text as={"label"}>Amount</Text>
|
||||
<Input placeholder="Enter amount" fontSize={"sm"} />
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Comments
|
||||
</Text>
|
||||
<Textarea placeholder="Write Comments" fontSize={"sm"} />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
bg={"hsla(139, 100%, 14%, 1)"}
|
||||
mr={3}
|
||||
color={"#fff"}
|
||||
_hover={{
|
||||
bg: "hsl(139deg 98.99% 26.59%)",
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button mr={3} onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeesExpenses;
|
||||
68
src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
Normal file
68
src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const UpdateIONav = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Update iO NAV</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Date
|
||||
</Text>
|
||||
<Input
|
||||
placeholder="Select Date"
|
||||
size="md"
|
||||
type="date"
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
<Text as={"label"}>Amount</Text>
|
||||
<Input placeholder="Enter amount" fontSize={"sm"} />
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Comments
|
||||
</Text>
|
||||
<Textarea placeholder="Write Comments" fontSize={"sm"} />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
bg={"hsla(139, 100%, 14%, 1)"}
|
||||
mr={3}
|
||||
color={"#fff"}
|
||||
_hover={{
|
||||
bg: "hsl(139deg 98.99% 26.59%)",
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button mr={3} onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateIONav;
|
||||
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const UpdateIOStatus = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Update IO Status</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Date
|
||||
</Text>
|
||||
<Input
|
||||
placeholder="Select Date"
|
||||
size="md"
|
||||
type="date"
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
<Text as={"label"}>Amount</Text>
|
||||
<Input placeholder="Enter amount" fontSize={"sm"} />
|
||||
</Box>
|
||||
|
||||
<Box mb={"15px"}>
|
||||
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
|
||||
Comments
|
||||
</Text>
|
||||
<Textarea placeholder="Write Comments" fontSize={"sm"} />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
bg={"hsla(139, 100%, 14%, 1)"}
|
||||
mr={3}
|
||||
color={"#fff"}
|
||||
_hover={{
|
||||
bg: "hsl(139deg 98.99% 26.59%)",
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button mr={3} onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateIOStatus;
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
@@ -26,9 +27,10 @@ import ViewInvestors from "./ViewInvestors";
|
||||
import ViewIOcash from "./ViewIOcash";
|
||||
import ViewIOnav from "./ViewIOnav";
|
||||
import ViewDistribution from "./ViewDistribution";
|
||||
import EditIO from "../EditIO/EditIO";
|
||||
|
||||
const ViewIOdata = () => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const tabs = [
|
||||
@@ -70,7 +72,19 @@ const ViewIOdata = () => {
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
|
||||
<Box p={3} width={"100%"} textAlign={"right"}>
|
||||
<Button
|
||||
bg={"hsla(139, 100%, 14%, 1)"}
|
||||
color={"#fff"}
|
||||
_hover={{
|
||||
bg: "hsl(139deg 98.99% 26.59%)",
|
||||
}}
|
||||
onClick={onOpen}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<EditIO isOpen={isOpen} onClose={onClose} />
|
||||
</Box>
|
||||
<TabPanels>
|
||||
{tabs.map(({ content }, index) => (
|
||||
<TabPanel key={index}>{content}</TabPanel>
|
||||
|
||||
@@ -1,14 +1,82 @@
|
||||
import { Box, Image, Text } from "@chakra-ui/react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Image,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Portal,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import header from "../../../assets/IOheader.png";
|
||||
import { HiDotsVertical } from "react-icons/hi";
|
||||
import { Link } from "react-router-dom";
|
||||
import AmountInvested from "./HeaderModal/AmountInvested";
|
||||
import FeesExpenses from "./HeaderModal/FeesExpenses";
|
||||
import DistributionSponsor from "./HeaderModal/DistributionSponsor";
|
||||
import DistributionInvestor from "./HeaderModal/DistributionInvestor";
|
||||
import UpdateIONav from "./HeaderModal/UpdateIONav";
|
||||
import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
|
||||
|
||||
const ViewIOdataHeader = () => {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isInvestmentOpen,
|
||||
onOpen: onInvestmentOpen,
|
||||
onClose: onInvestmentClose,
|
||||
} = useDisclosure();
|
||||
const {
|
||||
isOpen: isFeesOpen,
|
||||
onOpen: onFeesOpen,
|
||||
onClose: onFeesClose,
|
||||
} = useDisclosure();
|
||||
const {
|
||||
isOpen: isDistSponsorOpen,
|
||||
onOpen: onDistSponsorOpen,
|
||||
onClose: onDistSponsorClose,
|
||||
} = useDisclosure();
|
||||
const {
|
||||
isOpen: isDistInvestorOpen,
|
||||
onOpen: onDistInvestorOpen,
|
||||
onClose: onDistInvestorClose,
|
||||
} = useDisclosure();
|
||||
const {
|
||||
isOpen: isUpdateNavOpen,
|
||||
onOpen: onUpdateNavOpen,
|
||||
onClose: onUpdateNavClose,
|
||||
} = useDisclosure();
|
||||
const {
|
||||
isOpen: isUpdateStatusOpen,
|
||||
onOpen: onUpdateStatusOpen,
|
||||
onClose: onUpdateStatusClose,
|
||||
} = useDisclosure();
|
||||
|
||||
const bg = {
|
||||
bg: "#fff",
|
||||
};
|
||||
|
||||
const hover = {
|
||||
textDecoration: "underline",
|
||||
background: "#fff",
|
||||
};
|
||||
return (
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
bg={"#caf5d8"}
|
||||
paddingRight={"25px"}
|
||||
paddingRight={"10px"}
|
||||
borderRadius={"10px"}
|
||||
>
|
||||
<Box>
|
||||
@@ -34,6 +102,95 @@ const ViewIOdataHeader = () => {
|
||||
<Text>IO NAV</Text>
|
||||
<Text fontWeight={"500"}>$1,140,500</Text>
|
||||
</Box>
|
||||
|
||||
<Box display={"flex"} alignItems={"start"} height={"95px"}>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
className="link p-1 rounded-1"
|
||||
bg={"#fff"}
|
||||
_hover={{ backgroundColor: "#fff !important" }}
|
||||
onClick={onOpen}
|
||||
>
|
||||
<HiDotsVertical className="rubix-text-dark fs-6" />
|
||||
</MenuButton>
|
||||
{/* <Portal>
|
||||
<MenuList minWidth="80px">
|
||||
<MenuItem className="web-text-medium">Delete</MenuItem>
|
||||
</MenuList>
|
||||
</Portal> */}
|
||||
</Menu>
|
||||
|
||||
{/* Modal */}
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Transaction</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody paddingInline={"10px"}>
|
||||
<Box
|
||||
display={"grid"}
|
||||
alignContent={"left"}
|
||||
justifyItems={"start"}
|
||||
>
|
||||
<Button onClick={onInvestmentOpen} bg={bg} _hover={hover}>
|
||||
Amount Invested
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button onClick={onFeesOpen} bg={bg} _hover={hover}>
|
||||
Fees & Expenses
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button onClick={onDistSponsorOpen} bg={bg} _hover={hover}>
|
||||
Distribution from Sponsors
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button onClick={onDistInvestorOpen} bg={bg} _hover={hover}>
|
||||
Distribution To Investors
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button onClick={onUpdateNavOpen} bg={bg} _hover={hover}>
|
||||
Update IO NAV
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button onClick={onUpdateStatusOpen} bg={bg} _hover={hover}>
|
||||
Update IO Status
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button
|
||||
variant="ghost"
|
||||
mr={3}
|
||||
onClick={onClose}
|
||||
bg={bg}
|
||||
_hover={hover}
|
||||
>
|
||||
Exit
|
||||
</Button>
|
||||
<Divider />
|
||||
{/* <Button variant="ghost" onClick={onClose} bg={bg}>
|
||||
Cancel
|
||||
</Button> */}
|
||||
</Box>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
{/* Modals */}
|
||||
<AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />
|
||||
<FeesExpenses isOpen={isFeesOpen} onClose={onFeesClose} />
|
||||
<DistributionSponsor
|
||||
isOpen={isDistSponsorOpen}
|
||||
onClose={onDistSponsorClose}
|
||||
/>
|
||||
<DistributionInvestor
|
||||
isOpen={isDistInvestorOpen}
|
||||
onClose={onDistInvestorClose}
|
||||
/>
|
||||
<UpdateIONav isOpen={isUpdateNavOpen} onClose={onUpdateNavClose} />
|
||||
<UpdateIOStatus
|
||||
isOpen={isUpdateStatusOpen}
|
||||
onClose={onUpdateStatusClose}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user