diff --git a/package-lock.json b/package-lock.json index 4b3e017..a7dc44f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx index ee67c64..2edef3d 100644 --- a/src/Components/FormInputMain.jsx +++ b/src/Components/FormInputMain.jsx @@ -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 (
{Object.entries(groupedFields).map(([section, fields], index) => ( - - + + {/* */} {section} ( @@ -83,22 +84,24 @@ const FormInputMain = ({ ))} {children} - - - - {onCancle && } + + + + {onCancle && ( + + )} - new Date(date).toLocaleDateString(); // Simple date formatter const IOCashDetails = () => { - return ( -
IOCashDetails
- ) -} + const toast = useToast(); + const { caseDetails, setCaseDetails, slideFromRight } = + 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(""); -export default IOCashDetails \ No newline at end of file + useEffect(() => { + // Simulate loading + const timer = setTimeout(() => { + setIsLoading(false); + }, 1500); + + // Cleanup the timer on component unmount + return () => clearTimeout(timer); + }, []); + + // Calculate totals + const totalAmount = caseDetails.reduce( + (acc, caseDetail) => acc + caseDetail.amount, + 0 + ); + + // Table setup + const tableHeadRow = [ + "Date", + "Particulars", + "Amount", + "Comments", + "Update by ", + "Update On", + ]; + + const handleUpdateStatus = debounce((id) => { + setCaseDetails((prevSponser) => + prevSponser.map((sponsor) => + sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor + ) + ); + toast({ + render: () => , + }); + }, 300); + + // Table filter + const filteredData = caseDetails.filter((item) => { + const name = item.date; + const searchLower = searchTerm.toLowerCase(); + const nameMatches = name.toLowerCase().includes(searchLower); + return nameMatches; + }); + + + const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({ + id: item?.id, + "Date": ( + + {item.date} + + ), + "Particulars": ( + + {item.particulars} + + ), + "Amount": ( + + {item.amount} + + ), + "Comments": ( + + {item.comments} + + ), + "Update by ": ( + + {item.updateBy} + + ), + "Update On": ( + + {item.updateOn} + + ), + }))); + + const handleDelete = () => { + const updatedSponsors = sponser.filter( + (sponsor) => sponsor.id !== actionId + ); + + setTimeout(() => { + setCaseDetails(updatedSponsors); + setDeleteAlert(false); + setIsLoading(false); + }, 100); + setIsLoading(true); + }; + + const Total = () => { + return ( + + + + + + + + + + + +
+ Total + + {" "} + + {/* {totalAmount} */} + {"5000"} + + {" "} + + {" "} + + {" "} +
+ ); + }; + + return ( + + + + setSearchTerm(e.target.value)} + /> + + + + + + + + } + setMouseEnteredId={setMouseEnteredId} + setMouseEntered={setMouseEntered} + /> + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + ); +}; + +export default IOCashDetails; diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx index 018ecc4..815dca9 100644 --- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx +++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx @@ -1,44 +1,71 @@ -import { Box, Button, HStack, Input, Text, Tooltip, useDisclosure, VStack } from "@chakra-ui/react"; +import { + Box, + Button, + HStack, + Input, + Text, + Tooltip, + useDisclosure, + VStack, + useToast, +} from "@chakra-ui/react"; import React, { useContext, useEffect, useRef, useState } from "react"; +import { useNavigate } from "react-router-dom"; 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, DeleteIcon, DownloadIcon, EditIcon, ViewIcon } from "@chakra-ui/icons"; +import { + AddIcon, + DeleteIcon, + DownloadIcon, + EditIcon, + ViewIcon, +} from "@chakra-ui/icons"; +import { GrDocumentPdf } from "react-icons/gr"; +import { AiOutlineFileGif } from "react-icons/ai"; const InvestmentDocument = ({ control, errors, enableNextTab, index }) => { - const { create, setCreate, sponser, setSponser,slideFromRight} = - 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(); + const { slideFromRight } = + useContext(GlobalStateContext); + const firstField = useRef(); + const [searchTerm, setSearchTerm] = useState(""); + const [isLoading, setIsLoading] = useState(true); + const [deleteAlert, setDeleteAlert] = useState(false); + const [actionId, setActionId] = useState(null); + const [mouseEntered, setMouseEntered] = useState(false); + const [mouseEnteredId, setMouseEnteredId] = useState(""); + const { isOpen, onOpen, onClose } = useDisclosure(); + const navigate = useNavigate(); + const toast = useToast(); - useEffect(() => { - // Simulate loading - const timer = setTimeout(() => { - setIsLoading(false); - }, 1500); - - // Cleanup the timer on component unmount - return () => clearTimeout(timer); - }, []); + const [create, setCreate] = useState([ + { + id: 1, + Type: , + fileName: "Investment Private Company", + document: "Investment.pdf", + status: true, + }, + { + id: 2, + Type: , + fileName: "Investment Private", + document: "Investment.pdf", + status: true, + }, + ]); + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 1500); - - const tableHeadRow = [ - "Sr.no", - "Type", - "File Name", - "Document", - "Action", - ]; + return () => clearTimeout(timer); + }, []); + + const tableHeadRow = ["Sr.no", "Type", "File Name", "Document", "Action"]; const handleUpdateStatus = debounce((id) => { setCreate((prevCreate) => @@ -47,148 +74,141 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => { ) ); toast({ - render: () => , + render: () => ( + + Status changed successfully! + + ), }); }, 300); - const filteredData = create?.filter((item) => { - // Filter by name (case insensitive) - const name = item.Type; - const searchLower = searchTerm.toLowerCase(); - const nameMatches = name.toLowerCase().includes(searchLower); - - return nameMatches; - }); + const filteredData = create.filter((item) => + item?.fileName?.toLowerCase().includes(searchTerm.toLowerCase()) + ); const handleDelete = () => { const updatedCreate = create.filter((create) => create.id !== actionId); - setTimeout(() => { - setSponser(updatedCreate); + setCreate(updatedCreate); setDeleteAlert(false); setIsLoading(false); }, 100); setIsLoading(true); }; - const extractedArray = filteredData?.map((item, index) => ({ + const extractedArray = filteredData.map((item, index) => ({ "Sr.no": ( {index + 1} ), - "Type": ( + Type: ( {item.Type} ), "File Name": ( - - + + {item.fileName} ), - "Document": ( + Document: ( {item.document} ), Action: ( - + @@ -197,10 +217,9 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => { ), })); - return ( - + { - - - + + setDeleteAlert(false)} isOpen={deleteAlert} - message={"Are you sure you want to delete sponers?"} + message="Are you sure you want to delete the sponsor?" alertHandler={handleDelete} isLoading={isLoading} /> diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx index ebd3eb0..7d3d6ea 100644 --- a/src/Pages/IO_Management/CreateIO/Investors.jsx +++ b/src/Pages/IO_Management/CreateIO/Investors.jsx @@ -27,15 +27,6 @@ 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, - 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"; @@ -396,7 +387,7 @@ const Investors = () => { centered={true} emptyMessage={`We don't have any Sponers `} tableHeadRow={tableHeadRow} - data={extractedArray} + data={extractedArray} setData={setExtractedArray} isLoading={isLoading} viewActionId={actionId} diff --git a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx index 695db3d..d1cdd3a 100644 --- a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx +++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx @@ -7,6 +7,7 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext"; import { debounce } from "../../Master/Sponser/AddSponser"; import { formatDate } from "../../../Components/Functions/UTCConvertor"; import { AddIcon, DeleteIcon, DownloadIcon, EditIcon, ViewIcon } from "@chakra-ui/icons"; +import KeyMeritsAdd from "../KeyMeritsAdd"; const KeyMerits = ({enableNextTab, index}) => { const { keyMerits, setKeyMerits,slideFromRight} = @@ -19,6 +20,7 @@ const KeyMerits = ({enableNextTab, index}) => { const [mouseEntered, setMouseEntered] = useState(false); const [mouseEnteredId, setMouseEnteredId] = useState(""); const { isOpen, onOpen, onClose } = useDisclosure(); + useEffect(() => { // Simulate loading @@ -133,7 +135,7 @@ const KeyMerits = ({enableNextTab, index}) => { rounded={"sm"} size={"xs"} > - + { > Add key merits - { + + 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 ( + + + + Update IO Status + + + + + {formFields.map((field, index) => ( + + ))} + + + + + + + + + + ); +}; + +export default EditIO; diff --git a/src/Pages/IO_Management/EditIO/EditIOForm.jsx b/src/Pages/IO_Management/EditIO/EditIOForm.jsx new file mode 100644 index 0000000..60af0e9 --- /dev/null +++ b/src/Pages/IO_Management/EditIO/EditIOForm.jsx @@ -0,0 +1,69 @@ +import React, { useContext } from "react"; +import { + Box, + Input, + Select, + Textarea, + FormControl, + FormLabel, + FormErrorMessage, +} from "@chakra-ui/react"; +import GlobalStateContext from "../../../Contexts/GlobalStateContext"; +import { useParams } from "react-router-dom"; + +const FormField = ({ field, register, errors }) => { + const { label, name, type, placeHolder, options, width } = field; + + return ( + + + + {label} + + {type === "text" && ( + + )} + {type === "textarea" && ( +