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

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

Browse Source
This commit is contained in:
Siddhesh More
2024-07-09 14:53:12 +05:30
parent d84e707e6c cd22e61993
commit b6e4d29044
23 changed files with 2093 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
package-lock.json generated
View File

@@ -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"

43
src/Components/FormInputMain.jsx
View File

@@ -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"

82
src/Contexts/GlobalStateProvider.jsx
View File

@@ -411,58 +411,65 @@ const GlobalStateProvider = ({ children }) => {
totalReturnOnInvestment: "73.0%",
},
]);
const [create, setCreate] = useState([
const [caseDetails, setCaseDetails] = useState([
{
id: 1,
Type: "PDF",
fileName: "Investment Private Company",
document: "Investment.pdf",
status: true,
date: "02-Jan-24",
particulars: "Cash Reserve- Initated",
amount: "50,000.00",
comments: " ",
updateBy: "Faisal",
updateOn: "02-Jan-24",
},
{
id: 2,
Type: "PDF",
fileName: "Investment Private",
document: "Investment.pdf",
status: true,
date: "12-Feb-24",
particulars: "Fees & Expense",
amount: "22,000.00",
comments: "Fees = $20,000 Expense = $2,000 ",
updateBy: "Faisal",
updateOn: "13-Feb-24",
},
{
id: 3,
Type: "PDF",
fileName: "Investment Private",
document: "Investment.pdf",
status: true,
date: "23-Mar-24",
particulars: "Distribution Received From Sponsor",
amount: "50,000.00",
comments: " ",
updateBy: "Nawab",
updateOn: "24-Mar-24",
},
{
id: 4,
Type: "PDF",
fileName: "Investment Private",
document: "Investment.pdf",
status: true,
date: "28-Mar-24",
particulars: "Distribution Paid To Investors",
amount: "40,000.00",
comments: " ",
updateBy: "Faisal",
updateOn: "28-Mar-24",
},
{
id: 5,
Type: "PDF",
fileName: "Investment Private",
document: "Investment.pdf",
status: true,
date: "26-Jun-24",
particulars: "Distribution Received From Sponsor",
amount: "70,000.00",
comments: " ",
updateBy: "Faisal",
updateOn: "27-Jun-24",
},
{
id: 6,
Type: "PDF",
fileName: "Investment Private",
document: "Investment.pdf",
status: true,
},
{
id: 7,
Type: "PDF",
fileName: "Investment Private",
document: "Investment.pdf",
status: true,
date: "02-Jan-24",
particulars: "Distribution Paid To Investors",
amount: "60,000.00",
comments: " ",
updateBy: "Nawab",
updateOn: "28-Jun-24",
},
]);
const [keyMerits, setKeyMerits] = useState([
{
id: 1,
@@ -1549,14 +1556,17 @@ const GlobalStateProvider = ({ children }) => {
setDeleteRequest,
viewIO,
setViewIO,
create,
setCreate,
// create,
// setCreate,
keyMerits,
setKeyMerits,
iOArtifacts,
setIOArtifacts,
investors,
setInvestors,IODetails, setIODetails
setInvestors,IODetails, setIODetails,
caseDetails,
setCaseDetails,
}}
>
{children}

4
src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
View File

@@ -8,7 +8,6 @@ import {
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";
@@ -21,6 +20,7 @@ import {
EditIcon,
ViewIcon,
} from "@chakra-ui/icons";
import IOArtifactsAdd from "../IOArtifactsAdd";
const IOArtifacts = ({enableNextTab, index}) => {
const { iOArtifacts, setIOArtifacts, slideFromRight } =
@@ -218,7 +218,7 @@ const IOArtifacts = ({enableNextTab, index}) => {
>
Add artifacts
</Button>
<InvestmentDocuments
<IOArtifactsAdd
isOpen={isOpen}
onClose={onClose}
firstField={firstField}

297
src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
View File

@@ -1,9 +1,294 @@
import React from 'react'
import {
Box,
Button,
HStack,
Input,
Table,
Tag,
Tbody,
Text,
Th,
Tr,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DataTable from "../../../Components/DataTable/DataTable";
import Pagination from "../../../Components/Pagination";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import { debounce } from "../../Master/Sponser/AddSponser";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
const IOCashDetails = () => {
return (
<div>IOCashDetails</div>
)
}
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
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: () => <ToastBox message={"Status changed succesfully.!"} />,
});
}, 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": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.date}
</Text>
),
"Particulars": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.particulars}
</Text>
),
"Amount": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.amount}
</Text>
),
"Comments": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.comments}
</Text>
),
"Update by ": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.updateBy}
</Text>
),
"Update On": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.updateOn}
</Text>
),
})));
const handleDelete = () => {
const updatedSponsors = sponser.filter(
(sponsor) => sponsor.id !== actionId
);
setTimeout(() => {
setCaseDetails(updatedSponsors);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
setIsLoading(true);
};
const Total = () => {
return (
<Table size="sm">
<Tbody backgroundColor="gray.50">
<Tr >
<Th
textAlign={"center"}
p={3}
width="80px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
Total
</Th>
<Th
textAlign={"center"}
p={3}
width="210px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{" "}
</Th>
<Th
textAlign={"center"}
p={3}
width="80px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{/* {totalAmount} */}
{"5000"}
</Th>
<Th
textAlign={"center"}
p={3}
width="160px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{" "}
</Th>
<Th
textAlign={"center"}
p={3}
width="100px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{" "}
</Th>
<Th
textAlign={"center"}
p={3}
width="100px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{" "}
</Th>
</Tr>
</Tbody>
</Table>
);
};
return (
<Box {...OPACITY_ON_LOAD} pb={0}>
<Box bg="white.500">
<HStack
display={"flex"}
justifyContent={"space-between"}
pb={3}
spacing="24px"
>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack>
</HStack>
</Box>
<DataTable
centered={true}
emptyMessage={`We don't have any Sponers`}
tableHeadRow={tableHeadRow}
data={extractedArray}
setData={setExtractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
caption={<Total />}
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 IOCashDetails;

229
src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
View File

@@ -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: <GrDocumentPdf />,
fileName: "Investment Private Company",
document: "Investment.pdf",
status: true,
},
{
id: 2,
Type: <AiOutlineFileGif />,
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: () => <ToastBox message={"Status changed succesfully.!"} />,
render: () => (
<Box color="white" p={3} bg="green.500">
Status changed successfully!
</Box>
),
});
}, 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": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
as="span"
color="teal.900"
fontWeight="500"
className="d-flex align-items-center web-text-small"
>
{index + 1}
</Text>
),
"Type": (
Type: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
as="span"
color="teal.900"
fontWeight="500"
className="d-flex align-items-center"
fontSize={'xl'}
>
{item.Type}
</Text>
),
"File Name": (
<Box w={"200px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
<Box w="200px" isTruncated>
<Text as="span" color="teal.900" fontWeight="500">
{item.fileName}
</Text>
</Box>
),
"Document": (
Document: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
as="span"
color="teal.900"
fontWeight="500"
className="d-flex align-items-center web-text-small"
>
{item.document}
</Text>
),
Action: (
<Box display={"flex"} justifyContent={"space-evenly"}>
<Box display="flex" justifyContent="space-evenly">
<Tooltip
rounded={"sm"}
fontSize={"xs"}
rounded="sm"
fontSize="xs"
label="View"
bg="#fff"
color={"green.500"}
color="green.500"
placement="top"
>
<Button
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
onClick={() => {
navigate(`view-investment/${item.id}`);
}}
onClick={() => navigate(`view-investment/${item.id}`)}
color="green.300"
rounded={"sm"}
size={"xs"}
rounded="sm"
size="xs"
>
<ViewIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
rounded="sm"
fontSize="xs"
label="Edit"
bg="#fff"
color={"blue.500"}
color="blue.500"
placement="top"
>
<Button
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
rounded={"sm"}
size={"xs"}
rounded="sm"
size="xs"
>
<EditIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
rounded="sm"
fontSize="xs"
label="Download"
bg="#fff"
color={"blue.500"}
color="blue.500"
placement="top"
>
<Button
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
rounded={"sm"}
size={"xs"}
rounded="sm"
size="xs"
>
<DownloadIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
rounded="sm"
fontSize="xs"
label="Delete"
bg="#fff"
color={"red.500"}
color="red.500"
placement="top"
>
<Button
onClick={() => {
setActionId(item?.id);
setActionId(item.id);
setDeleteAlert(true);
}}
_hover={{ color: "red.500" }}
// transition={"0.5s all"}
color="red.300"
rounded={"sm"}
size={"xs"}
rounded="sm"
size="xs"
>
<DeleteIcon />
</Button>
@@ -197,10 +217,9 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
),
}));
return (
<Box>
<Box display={"flex"} justifyContent={"space-between"} mb={4}>
<Box display="flex" justifyContent="space-between" mb={4}>
<Input
type="search"
width={300}
@@ -214,43 +233,47 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
<Button
leftIcon={<AddIcon />}
onClick={onOpen}
size={"sm"}
// width={"44.5%"}
// width={"44.5%"}
fontSize={"xs"}
rounded={"sm"}
// colorScheme="green"
color={'green'}
size="sm"
fontSize="xs"
rounded="sm"
colorScheme="green"
>
Add document
</Button>
<InvestmentDocuments
create={create}
setCreate={setCreate}
isOpen={isOpen}
onClose={onClose}
firstField={firstField}
/>
</Box>
<DataTable
emptyMessage={`We don't have any Sponers `}
emptyMessage="We don't have any Sponsors"
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
// totalPages={10}
setMouseEnteredId={setMouseEnteredId}
setMouseEntered={setMouseEntered}
/>
<HStack justifyContent={'flex-end'}>
<Button ps={8} pe={8} colorScheme="green" size={'sm'} rounded={'sm'} onClick={()=> enableNextTab(index)}>Next</Button>
<HStack justifyContent="flex-end">
<Button
ps={8}
pe={8}
colorScheme="green"
size="sm"
rounded="sm"
onClick={() => enableNextTab(index)}
>
Next
</Button>
</HStack>
<CustomAlertDialog
onClose={() => 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}
/>

11
src/Pages/IO_Management/CreateIO/Investors.jsx
View File

@@ -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}

6
src/Pages/IO_Management/CreateIO/KeyMerits.jsx
View File

@@ -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"}
>
<ViewIcon />
<ViewIcon />
</Button>
</Tooltip>
<Tooltip
@@ -207,7 +209,7 @@ const KeyMerits = ({enableNextTab, index}) => {
>
Add key merits
</Button>
<InvestmentDocuments
<KeyMeritsAdd
isOpen={isOpen}
onClose={onClose}
firstField={firstField}

283
src/Pages/IO_Management/EditIO/EditIO.jsx Normal file
View File

@@ -0,0 +1,283 @@
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;

69
src/Pages/IO_Management/EditIO/EditIOForm.jsx Normal file
View File

@@ -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 (
<Box width={width}>
<FormControl isInvalid={errors[name]}>
<FormLabel fontSize={"sm"} fontWeight={"400"}>
{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;

140
src/Pages/IO_Management/IOArtifactsAdd.jsx Normal file
View File

@@ -0,0 +1,140 @@
import {
Box,
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
FormControl,
FormLabel,
Input,
InputGroup,
Stack,
} from "@chakra-ui/react";
import * as yup from "yup";
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"),
document: yup.string().required("Sponser name is required"),
fileName: yup.string().required("Mobile no is required"),
});
const IOArtifactsAdd = ({ 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 onSubmit = (data) => {
console.log(data);
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentDoct,
]);
};
const handleSave = () => {
console.log({
fileName: fileName,
file:file
});
setAlert(false)
onClose()
}
return (
<>
<Drawer
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
onClose={onClose}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>IO Artifacts</DrawerHeader>
<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"}
/>
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize={"sm"}>Document</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?"}
/>
</>
);
};
export default IOArtifactsAdd;

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

@@ -11,63 +11,110 @@ import {
FormControl,
FormLabel,
Input,
InputGroup,
Stack,
Text,
} from "@chakra-ui/react";
import * as yup from "yup";
import React, { useContext, useEffect, useRef, useState } from "react";
import FormInputMain from "../../Components/FormInputMain";
import React, { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { v4 as uuidv4 } from 'uuid';
import { useNavigate } from 'react-router-dom';
import { GrDocumentPdf } from "react-icons/gr";
import { FaRegFileAlt } from "react-icons/fa";
import { TbFileTypeDocx } from "react-icons/tb";
import { AiOutlineFileGif } from "react-icons/ai";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import InvestmentDocument from "./CreateIO/InvestmentDocument";
export const investmentDoct = yup.object().shape({
type: yup.string().required("Sponser name is required"),
document: yup.string().required("Sponser name is required"),
fileName: yup.string().required("Mobile no is required"),
export const bytesToMB = (bytes) => {
if (bytes === 0) return "0 MB";
const bytesInMB = 1024 * 1024;
return (bytes / bytesInMB).toFixed(2) + " MB";
};
export const investmentDocSchema = yup.object().shape({
document: yup.mixed().required("Document is required"),
fileName: yup.string().required("File name is required"),
});
const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
const [file, setFile] = useState("");
const [fileName, setFileName] = useState("");
const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreate }) => {
const [file, setFile] = useState(null);
const [alert, setAlert] = useState(false);
const navigate = useNavigate();
const {
control,
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(investmentDoct),
resolver: yupResolver(investmentDocSchema),
});
// const onSubmit = (data) => {
// console.log(data);
// setFile(data.document[0]);
// // Additional code for handling form submission
// };
const onSubmit = (data) => {
console.log(data);
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentDoct,
]);
setFile(data.document[0]);
const newDocument = {
...data,
document: data.document[0].name, // Store the document name
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
Type:getFileIcon(file.type)
};
setCreate((prevCreate) => [...prevCreate, newDocument]);
navigate(" ");
};
const handleSave = () => {
console.log({
fileName: fileName,
file:file
});
setAlert(false)
onClose()
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
}
const getFileIcon = (type) => {
switch (type) {
case 'application/pdf':
return <GrDocumentPdf />;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
case 'application/msword':
return <TbFileTypeDocx />;
case 'image/jpeg':
case 'image/png':
case 'image/gif':
return <AiOutlineFileGif />;
default:
return <FaRegFileAlt />;
}
};
const getFileTitle = (type) => {
switch (type) {
case 'application/pdf':
return "PDF";
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
case 'application/msword':
return "DOCX";
case 'image/jpeg':
case 'image/png':
case 'image/gif':
return "JPG";
default:
return "HH";
}
};
return (
<>
<Drawer
<Drawer
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
@@ -76,61 +123,81 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>Add Details</DrawerHeader>
<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"}
/>
</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>
<DrawerHeader fontSize="sm">Add Details</DrawerHeader>
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<DrawerBody>
<FormControl mb={4}>
<FormLabel fontSize="sm">File Name</FormLabel>
<Input
name="fileName"
{...register("fileName")}
fontSize="sm"
type="text"
size="sm"
/>
{errors.fileName && (
<Text fontSize="sm" color="red">
{errors.fileName.message}
</Text>
)}
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize="sm">Document</FormLabel>
<Input
name="document"
{...register("document")}
fontSize="sm"
className="form-control"
type="file"
size="sm"
onChange={handleFileChange}
/>
{errors.document && (
<Text fontSize="sm" color="red">
{errors.document.message}
</Text>
)}
</FormControl>
{file && (
<Box mt={4}>
<Box display="flex" mb={2}>
<Text>{getFileIcon(file.type)}</Text>
<Text fontSize="sm" ml={2} mb={0 }>
{file.name}
</Text>
</Box>
<Text fontSize="sm">{bytesToMB(file.size)}</Text>
</Box>
)}
</DrawerBody>
<DrawerFooter>
<Button
variant="outline"
colorScheme="green"
rounded="sm"
size="sm"
mr={3}
onClick={onClose}
>
Cancel
</Button>
<Button
colorScheme="green"
rounded="sm"
size="sm"
type="submit"
onClick={onSubmit}
>
Save
</Button>
</DrawerFooter>
</Box>
</DrawerContent>
</Drawer>
<CustomAlertDialog
isOpen={alert}
onClose={() => setAlert(false)}
alertHandler={handleSave}
message={"Are you sure you want to add this document?"}
message="Are you sure you want to add this document?"
/>
</>
);

150
src/Pages/IO_Management/KeyMeritsAdd.jsx Normal file
View File

@@ -0,0 +1,150 @@
import {
Box,
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
FormControl,
FormLabel,
Input,
InputGroup,
Stack,
} from "@chakra-ui/react";
import * as yup from "yup";
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"),
document: yup.string().required("Sponser name is required"),
fileName: yup.string().required("Mobile no is required"),
});
const KeyMeritsAdd = ({ 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 onSubmit = (data) => {
console.log(data);
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentDoct,
]);
};
const handleSave = () => {
console.log({
fileName: fileName,
file:file
});
setAlert(false)
onClose()
}
return (
<>
<Drawer
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
onClose={onClose}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>Key Merits</DrawerHeader>
<DrawerBody>
<FormControl mb={4}>
<FormLabel fontSize={"sm"}>Title</FormLabel>
<Input
value={fileName}
onChange={(e) => setFileName(e.target.value)}
fontSize={"sm"}
type="text"
size={"sm"}
/>
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize={"sm"}>Sub Title</FormLabel>
<Input
value={fileName}
onChange={(e) => setFileName(e.target.value)}
fontSize={"sm"}
type="textarea"
size={"sm"}
/>
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize={"sm"}>Icon</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?"}
/>
</>
);
};
export default KeyMeritsAdd;

68
src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx Normal file
View File

@@ -0,0 +1,68 @@
import {
Box,
Button,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
Textarea,
} from "@chakra-ui/react";
const AmountInvested = ({ isOpen, onClose }) => {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Amount Invested</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 AmountInvested;

68
src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx Normal file
View File

@@ -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;

68
src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx Normal file
View File

@@ -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
View 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
View 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;

68
src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx Normal file
View File

@@ -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;

19
src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
View File

@@ -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";
@@ -30,13 +31,15 @@ import InvestmentDocument from "../CreateIO/InvestmentDocument";
import KeyMerits from "../CreateIO/KeyMerits";
import IOArtifacts from "../CreateIO/IOArtifacts";
import Investors from "../CreateIO/Investors"
import EditIO from "../EditIO/EditIO";
const ViewIOdata = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const params = useParams()
console.log(params?.id);
const [isEditing, setIsEditing] = useState(false);
const navigate = useNavigate();
const tabs = [
@@ -81,7 +84,19 @@ const ViewIOdata = () => {
</Box>
<Button onClick={()=> navigate(`/create-io/${params?.id}`)} ps={4} pe={4} colorScheme="green" rounded={"sm"} size={'xs'}>Edit</Button>
</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>

273
src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
View File

@@ -1,7 +1,87 @@
import { Badge, 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,
MenuItemOption,
MenuGroup,
MenuOptionGroup,
MenuDivider,
} 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";
import { useRef } from "react";
const ViewIOdataHeader = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = useRef();
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",
};
const style = {
fontSize: "0.875rem",
fontWeight: "400",
};
return (
<Box
display={"flex"}
@@ -22,6 +102,8 @@ const ViewIOdataHeader = () => {
paddingRight={"10px"}
borderRadius={"10px"}
>
<Box p={1}>
<Image h={82} src={header} />
@@ -46,6 +128,197 @@ const ViewIOdataHeader = () => {
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO NAV</Text>
<Text as={'span'} fontSize={"sm"} 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}
ref={btnRef}
>
<HiDotsVertical className="rubix-text-dark fs-6" />
</MenuButton>
<MenuList>
<Box display={"grid"} alignContent={"left"} justifyItems={"start"}>
<MenuItem _hover={hover} _focus={{ bg: "transparent" }}>
<Button
onClick={onInvestmentOpen}
bg={bg}
_hover={hover}
style={style}
>
Amount Invested
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onFeesOpen}
bg={bg}
_hover={hover}
style={style}
>
Fees & Expenses
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onDistSponsorOpen}
bg={bg}
_hover={hover}
style={style}
>
Distribution from Sponsors
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onDistInvestorOpen}
bg={bg}
_hover={hover}
style={style}
>
Distribution To Investors
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onUpdateNavOpen}
bg={bg}
_hover={hover}
style={style}
>
Update IO NAV
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onUpdateStatusOpen}
bg={bg}
_hover={hover}
style={style}
>
Update IO Status
</Button>
</MenuItem>
</Box>
</MenuList>
</Menu>
{/* Drawer */}
{/* <Drawer
isOpen={isOpen}
placement="right"
onClose={onClose}
finalFocusRef={btnRef}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Transaction</DrawerHeader>
<DrawerBody>
<Box
display={"grid"}
alignContent={"left"}
justifyItems={"start"}
>
<Button
onClick={onInvestmentOpen}
bg={bg}
_hover={hover}
paddingInline={"0px"}
>
Amount Invested
</Button>
<Divider />
<Button
onClick={onFeesOpen}
bg={bg}
_hover={hover}
paddingInline={"0px"}
>
Fees & Expenses
</Button>
<Divider />
<Button
onClick={onDistSponsorOpen}
bg={bg}
_hover={hover}
paddingInline={"0px"}
>
Distribution from Sponsors
</Button>
<Divider />
<Button
onClick={onDistInvestorOpen}
bg={bg}
_hover={hover}
paddingInline={"0px"}
>
Distribution To Investors
</Button>
<Divider />
<Button
onClick={onUpdateNavOpen}
bg={bg}
_hover={hover}
paddingInline={"0px"}
>
Update IO NAV
</Button>
<Divider />
<Button
onClick={onUpdateStatusOpen}
bg={bg}
_hover={hover}
paddingInline={"0px"}
>
Update IO Status
</Button>
<Divider />
</Box>
</DrawerBody>
<DrawerFooter>
<Button variant="outline" mr={3} onClick={onClose}>
Cancel
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer> */}
{/* 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>
);
};

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

@@ -257,7 +257,7 @@ const AddSponser = () => {
createdAt: new Date().toISOString(),
},
...sponser,
]);
]);
navigate("/sponser");
};

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

@@ -1,16 +1,8 @@
import {
Avatar,
Badge,
Box,
Button,
HStack,
Input,
Menu,
MenuButton,
MenuItem,
MenuList,
Portal,
Select,
Switch,
Tag,
Text,
@@ -194,7 +186,7 @@ const Sponser = () => {
<EditIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
@@ -261,6 +253,7 @@ const Sponser = () => {
}, 100);
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>