invest add
This commit is contained in:
YasinShaikh123
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"
|
||||
|
||||
@@ -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,
|
||||
@@ -1500,14 +1507,16 @@ const GlobalStateProvider = ({ children }) => {
|
||||
setDeleteRequest,
|
||||
viewIO,
|
||||
setViewIO,
|
||||
create,
|
||||
setCreate,
|
||||
// create,
|
||||
// setCreate,
|
||||
keyMerits,
|
||||
setKeyMerits,
|
||||
iOArtifacts,
|
||||
setIOArtifacts,
|
||||
investors,
|
||||
setInvestors
|
||||
setInvestors,
|
||||
caseDetails,
|
||||
setCaseDetails,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,44 +1,104 @@
|
||||
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";
|
||||
|
||||
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: "PDF",
|
||||
fileName: "Investment Private Company",
|
||||
document: "Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private",
|
||||
document: "Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private",
|
||||
document: "Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private",
|
||||
document: "Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private",
|
||||
document: "Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private",
|
||||
document: "Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
Type: "PDF",
|
||||
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 +107,140 @@ 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"}
|
||||
as="span"
|
||||
color="teal.900"
|
||||
fontWeight="500"
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{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 +249,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,41 +265,47 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
|
||||
<Button
|
||||
leftIcon={<AddIcon />}
|
||||
onClick={onOpen}
|
||||
size={"sm"}
|
||||
// width={"44.5%"}
|
||||
fontSize={"xs"}
|
||||
rounded={"sm"}
|
||||
|
||||
size="sm"
|
||||
fontSize="xs"
|
||||
rounded="sm"
|
||||
colorScheme="green"
|
||||
>
|
||||
Add
|
||||
</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}
|
||||
/>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -20,6 +20,7 @@ const KeyMerits = ({enableNextTab, index}) => {
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
|
||||
@@ -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}>
|
||||
{getFileIcon(file.type)}
|
||||
<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?"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -257,7 +257,7 @@ const AddSponser = () => {
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
...sponser,
|
||||
]);
|
||||
]);
|
||||
navigate("/sponser");
|
||||
};
|
||||
|
||||
|
||||
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user