This commit is contained in:
rockyeverlast
2024-07-09 13:06:33 +05:30
11 changed files with 910 additions and 248 deletions

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,
@@ -1500,14 +1507,16 @@ const GlobalStateProvider = ({ children }) => {
setDeleteRequest,
viewIO,
setViewIO,
create,
setCreate,
// create,
// setCreate,
keyMerits,
setKeyMerits,
iOArtifacts,
setIOArtifacts,
investors,
setInvestors
setInvestors,
caseDetails,
setCaseDetails,
}}
>
{children}

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
</Button>
<InvestmentDocuments
<IOArtifactsAdd
isOpen={isOpen}
onClose={onClose}
firstField={firstField}

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;

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,41 +233,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}
/>

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}

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
@@ -206,7 +208,7 @@ const KeyMerits = ({enableNextTab, index}) => {
>
Add
</Button>
<InvestmentDocuments
<KeyMeritsAdd
isOpen={isOpen}
onClose={onClose}
firstField={firstField}

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;

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?"
/>
</>
);

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;

View File

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

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