artifacts tabs
This commit is contained in:
YasinShaikh123
779
src/Components/CreateIOld.jsx
Normal file
779
src/Components/CreateIOld.jsx
Normal file
@@ -0,0 +1,779 @@
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import {
|
||||
Box,
|
||||
Divider,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Heading,
|
||||
Input,
|
||||
Select,
|
||||
Textarea,
|
||||
Button,
|
||||
Text,
|
||||
Image,
|
||||
Tabs,
|
||||
TabList,
|
||||
Tab,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tooltip,
|
||||
Switch,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import * as yup from "yup";
|
||||
import {
|
||||
AddIcon,
|
||||
CloseIcon,
|
||||
DeleteIcon,
|
||||
EditIcon,
|
||||
ViewIcon,
|
||||
WarningTwoIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { TiWarning } from "react-icons/ti";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import FormField from "../../Components/FormField";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import AddIOCharges from "./AddIOCharges";
|
||||
import FormInputMain from "../../Components/FormInputMain";
|
||||
import DataTable from "../../Components/DataTable/DataTable";
|
||||
import { debounce } from "../Master/Sponser/AddSponser";
|
||||
import CustomAlertDialog from "../../Components/CustomAlertDialog";
|
||||
import { formatDate } from "../../Components/Functions/UTCConvertor";
|
||||
import InvestmentDocuments from "./InvestmentDocuments";
|
||||
|
||||
const schema = yup.object().shape({
|
||||
ioName: yup.string().required("Arabic name is required"),
|
||||
ioNameArabic: yup.string().required("Investment Object name is required"),
|
||||
discription: yup.string().required("Sponser name is required"),
|
||||
discriptionArabic: yup.string().required("Arabic name is required"),
|
||||
typeName: yup.string().required("Investment Object name is required"),
|
||||
typeNameArabic: yup.string().required("Sponser name is required"),
|
||||
sponserName: yup.string().required("Arabic name is required"),
|
||||
sponserNameArabic: yup
|
||||
.string()
|
||||
.required("Investment Object name is required"),
|
||||
holdingPeriod: yup.string().required("Sponser name is required"),
|
||||
ioStartus: yup.string().required("Investment Object name is required"),
|
||||
ioStartusArabic: yup.string().required("Sponser name is required"),
|
||||
goalAmount: yup.string().required("Arabic name is required"),
|
||||
closingDate: yup.string().required("Investment Object name is required"),
|
||||
minInvestment: yup.string().required("Sponser name is required"),
|
||||
maxInvestment: yup.string().required("Arabic name is required"),
|
||||
expectedReturn: yup.string().required("Investment Object name is required"),
|
||||
originalValue: yup.string().required("Sponser name is required"),
|
||||
keyname: yup.string().required("Arabic name is required"),
|
||||
keyNameArabic: yup.string().required("Investment Object name is required"),
|
||||
keyDescription: yup.string().required("Sponser name is required"),
|
||||
keyDescriptionArabic: yup.string().required("Sponser name is required"),
|
||||
docType: yup.string().required("Sponser name is required"),
|
||||
|
||||
destributedAmount: yup
|
||||
.number()
|
||||
.required("Distributed Amount is required")
|
||||
.positive("Must be a positive number"),
|
||||
year: yup.string().required("Year is required"),
|
||||
tenure: yup
|
||||
.number()
|
||||
.required("Tenure is required")
|
||||
.positive("Must be a positive number"),
|
||||
annualReturn: yup
|
||||
.number()
|
||||
.required("Annual Return is required")
|
||||
.positive("Must be a positive number"),
|
||||
miniInvest: yup
|
||||
.number()
|
||||
.required("Minimum Invest is required")
|
||||
.positive("Must be a positive number"),
|
||||
quaterly: yup.string().required("Quaterly is required"),
|
||||
targetClose: yup.date().required("Target close date is required"),
|
||||
annualyield: yup
|
||||
.number()
|
||||
.required("Annual Yield is required")
|
||||
.positive("Must be a positive number"),
|
||||
iconUpload: yup.mixed().required("Profile image is required"),
|
||||
bannerImages: yup.mixed().required("Profile image is required"),
|
||||
otherImage: yup.mixed().required("Profile image is required"),
|
||||
docAttach: yup.mixed().required("Profile image is required"),
|
||||
videos: yup.mixed().required("Profile image is required"),
|
||||
});
|
||||
|
||||
const startYear = 2024;
|
||||
const endYear = 2124;
|
||||
const years = Array.from(
|
||||
{ length: endYear - startYear + 1 },
|
||||
(_, i) => startYear + i
|
||||
).map((year) => ({ value: year, label: year }));
|
||||
|
||||
const CreateIO = () => {
|
||||
const navigate = useNavigate();
|
||||
const { create, setCreate, sponser, setSponser, investment, setInvestment } =
|
||||
useContext(GlobalStateContext);
|
||||
const [bannerImageData, setBannerImageData] = useState(null);
|
||||
const [otherImageData, setOtherImageData] = useState(null);
|
||||
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
|
||||
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
|
||||
const [charges, setCharges] = useState([]);
|
||||
const [totalCharge, setTotalCharge] = useState(0.0);
|
||||
const [totalAmount, setTotalAmount] = useState(0.0);
|
||||
|
||||
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 {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
watch,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(schema),
|
||||
});
|
||||
|
||||
console.log(errors);
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sponser name",
|
||||
"Address",
|
||||
"Mobile no",
|
||||
"Created At",
|
||||
"Action",
|
||||
];
|
||||
|
||||
const handleUpdateStatus = debounce((id) => {
|
||||
setCreate((prevCreate) =>
|
||||
prevCreate.map((create) =>
|
||||
create.id === id ? { ...create, status: !create.status } : create
|
||||
)
|
||||
);
|
||||
toast({
|
||||
render: () => <ToastBox message={"Status changed succesfully.!"} />,
|
||||
});
|
||||
}, 300);
|
||||
|
||||
const filteredData = create?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.sponserName;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedCreate = create.filter((create) => create.id !== actionId);
|
||||
|
||||
setTimeout(() => {
|
||||
setSponser(updatedCreate);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const extractedArray = filteredData?.map((item) => ({
|
||||
id: item?.id,
|
||||
"Sponser name": (
|
||||
<Text
|
||||
justifyContent={"left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
"{item.sponserName}"
|
||||
</Text>
|
||||
),
|
||||
Address: (
|
||||
<Box w={350} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
" {item.sponserAddress}"
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Mobile no": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
"{item.mobileNo}"
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
|
||||
"Created At": (
|
||||
<span className="d-flex justify-content-between align-items-center">
|
||||
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
||||
{formatDate(item.createdAt)}
|
||||
</Text>
|
||||
</span>
|
||||
),
|
||||
Action: <Box display={"flex"} justifyContent={"space-between"}></Box>,
|
||||
}));
|
||||
|
||||
console.log(extractedArray);
|
||||
|
||||
const destributedAmount = Number(watch().destributedAmount) || 0;
|
||||
|
||||
useEffect(() => {
|
||||
const calculateTotalCharge = () => {
|
||||
const totalChargeValue = charges.reduce(
|
||||
(acc, { value }) => acc + Number(value),
|
||||
0
|
||||
);
|
||||
setTotalCharge(totalChargeValue);
|
||||
};
|
||||
|
||||
const calculateTotalAmount = () => {
|
||||
const totalChargeValue = charges.reduce(
|
||||
(acc, { value }) => acc + Number(value),
|
||||
0
|
||||
);
|
||||
setTotalAmount(destributedAmount + totalChargeValue);
|
||||
};
|
||||
|
||||
calculateTotalCharge();
|
||||
calculateTotalAmount();
|
||||
}, [charges, destributedAmount]);
|
||||
|
||||
const onSubmit = (data) => {
|
||||
// setValue("banner_image", selectedBannerImageData);
|
||||
data.banner_image = selectedBannerImageData;
|
||||
const updatedData = { ...data, status: "Available" };
|
||||
console.log(selectedBannerImageData);
|
||||
setInvestment([...investment, updatedData]);
|
||||
navigate("/view-io");
|
||||
reset();
|
||||
};
|
||||
|
||||
// Extract options for the select input
|
||||
const createOptions = create.map((item) => ({
|
||||
value: item.sponserName,
|
||||
label: item.sponserName,
|
||||
}));
|
||||
|
||||
const handleBannerImageChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
setBannerImageData(file);
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setSelectedBannerImageData(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const firstField = React.useRef();
|
||||
|
||||
// Handler for file input
|
||||
const handleOtherImageChange = (e) => {
|
||||
const files = Array.from(e.target.files);
|
||||
const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
|
||||
|
||||
setOtherImageData(newImageData);
|
||||
|
||||
const readers = files.map((file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
resolve(reader.result);
|
||||
};
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all(readers)
|
||||
.then((results) => {
|
||||
setSelectedOtherImageData([
|
||||
...(selectedOtherImageData || []),
|
||||
...results,
|
||||
]); // Ensure selectedOtherImageData is an array
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error reading files:", error);
|
||||
});
|
||||
};
|
||||
// Function to remove a specific image
|
||||
const removeOtherImage = (index) => {
|
||||
const newImageData = otherImageData.filter((_, i) => i !== index);
|
||||
const newSelectedImageData = selectedOtherImageData.filter(
|
||||
(_, i) => i !== index
|
||||
);
|
||||
|
||||
setOtherImageData(newImageData);
|
||||
setSelectedOtherImageData(newSelectedImageData);
|
||||
};
|
||||
|
||||
const formFields = [
|
||||
{
|
||||
label: "IO Name (English)",
|
||||
placeHolder: " ",
|
||||
name: "ioName",
|
||||
type: "text",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "IO Name (Arabic)",
|
||||
placeHolder: " ",
|
||||
name: "ioNameArabic",
|
||||
type: "text",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Description (English)",
|
||||
placeHolder: " ",
|
||||
name: "discription",
|
||||
type: "textarea",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Description (Arabic)",
|
||||
placeHolder: " ",
|
||||
name: "discriptionArabic",
|
||||
type: "textarea",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Investment Type (English)",
|
||||
placeHolder: " ",
|
||||
name: "typeName",
|
||||
type: "select",
|
||||
isRequired: true,
|
||||
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",
|
||||
isRequired: true,
|
||||
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",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Goal Amount (English)",
|
||||
placeHolder: " ",
|
||||
name: "goalAmount",
|
||||
type: "Number",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "49%",
|
||||
},
|
||||
{
|
||||
label: "Minimum Investment Amount (English)",
|
||||
placeHolder: " ",
|
||||
name: "minInvestment",
|
||||
type: "number",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Maximum Investment Amount (English)",
|
||||
placeHolder: " ",
|
||||
name: "maxInvestment",
|
||||
type: "number",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Holding Period (English)",
|
||||
placeHolder: " ",
|
||||
name: "holdingPeriod",
|
||||
type: "number",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Expected Return Estimated (English)",
|
||||
placeHolder: " ",
|
||||
name: "expectedReturn",
|
||||
type: "number",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Closing Date (English)",
|
||||
placeHolder: " ",
|
||||
name: "closingDate",
|
||||
type: "date",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "IO Status (English)",
|
||||
placeHolder: " ",
|
||||
name: "minInvestment",
|
||||
type: "text",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
];
|
||||
|
||||
const keyMerits = [
|
||||
{
|
||||
label: "Name (English)",
|
||||
placeHolder: " ",
|
||||
name: "keyname",
|
||||
type: "text",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Name (Arabic)",
|
||||
placeHolder: " ",
|
||||
name: "keyNameArabic",
|
||||
type: "text",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Icon",
|
||||
placeHolder: " ",
|
||||
name: "iconUpload",
|
||||
type: "fileNormal",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Description (English)",
|
||||
placeHolder: " ",
|
||||
name: "keyDescription",
|
||||
type: "textarea",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Description (Arabic)",
|
||||
placeHolder: " ",
|
||||
name: "keyDescriptionArabic",
|
||||
type: "textarea",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
];
|
||||
|
||||
const images = [
|
||||
{
|
||||
label: "Banner Images ",
|
||||
placeHolder: " ",
|
||||
name: "bannerImages",
|
||||
type: "fileNormal",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
|
||||
{
|
||||
label: "Other Images",
|
||||
placeHolder: " ",
|
||||
name: "otherImage",
|
||||
type: "fileNormal",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
];
|
||||
|
||||
const documents = [
|
||||
{
|
||||
label: "Type",
|
||||
placeHolder: " ",
|
||||
name: "docType",
|
||||
type: "text",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
{
|
||||
label: "Attachment",
|
||||
placeHolder: " ",
|
||||
name: "type",
|
||||
type: "docAttach",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
];
|
||||
|
||||
const Videos = [
|
||||
{
|
||||
label: "Videos",
|
||||
placeHolder: " ",
|
||||
name: "videos",
|
||||
type: "fileNormal",
|
||||
isRequired: true,
|
||||
section: " ",
|
||||
width: "32.3%",
|
||||
},
|
||||
];
|
||||
|
||||
const groupedFields = formFields.reduce((groups, field) => {
|
||||
const { section } = field;
|
||||
if (!groups[section]) {
|
||||
groups[section] = [];
|
||||
}
|
||||
groups[section].push(field);
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
const groupedFieldsTwo = keyMerits.reduce((groups, field) => {
|
||||
const { section } = field;
|
||||
if (!groups[section]) {
|
||||
groups[section] = [];
|
||||
}
|
||||
groups[section].push(field);
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
const groupedFieldsThree = images.reduce((groups, field) => {
|
||||
const { section } = field;
|
||||
if (!groups[section]) {
|
||||
groups[section] = [];
|
||||
}
|
||||
groups[section].push(field);
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
const groupedFieldsFour = documents.reduce((groups, field) => {
|
||||
const { section } = field;
|
||||
if (!groups[section]) {
|
||||
groups[section] = [];
|
||||
}
|
||||
groups[section].push(field);
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
const groupedFieldsFive = Videos.reduce((groups, field) => {
|
||||
const { section } = field;
|
||||
if (!groups[section]) {
|
||||
groups[section] = [];
|
||||
}
|
||||
groups[section].push(field);
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
|
||||
<Tabs mt={4}>
|
||||
<TabList>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
IO Details
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
Investment Documents
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
Key Merits
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
IO artifacts
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
Investors
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
IO Cash detail
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
IO NAV detail
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
|
||||
>
|
||||
Distribution
|
||||
</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<FormInputMain
|
||||
width={"23.8%"}
|
||||
groupedFields={groupedFields}
|
||||
control={control}
|
||||
errors={errors}
|
||||
></FormInputMain>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Box display={'flex'} justifyContent={'space-between'} mb={4}>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<Button leftIcon={<AddIcon />} onClick={onOpen}
|
||||
size={"sm"}
|
||||
// width={"44.5%"}
|
||||
fontSize={'xs'}
|
||||
rounded={"sm"}
|
||||
colorScheme='green'
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
<InvestmentDocuments isOpen={isOpen} onClose={onClose} firstField={firstField} />
|
||||
</Box>
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
// totalPages={10}
|
||||
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<FormInputMain
|
||||
width={"23.8%"}
|
||||
groupedFields={groupedFieldsThree}
|
||||
control={control}
|
||||
errors={errors}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
></FormInputMain>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<FormInputMain
|
||||
width={"23.8%"}
|
||||
groupedFields={groupedFieldsFour}
|
||||
control={control}
|
||||
errors={errors}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
></FormInputMain>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<FormInputMain
|
||||
width={"23.8%"}
|
||||
groupedFields={groupedFieldsFive}
|
||||
control={control}
|
||||
errors={errors}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
></FormInputMain>
|
||||
</TabPanel>
|
||||
<TabPanel></TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateIO;
|
||||
@@ -3,6 +3,12 @@ import React, { useState } from "react";
|
||||
import GlobalStateContext from "./GlobalStateContext";
|
||||
import { effect, useColorMode } from "@chakra-ui/react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { TbClock2 } from "react-icons/tb";
|
||||
import { CiWallet } from "react-icons/ci";
|
||||
import { HiOutlineReceiptPercent } from "react-icons/hi2";
|
||||
import { IoMdQrScanner } from "react-icons/io";
|
||||
|
||||
|
||||
|
||||
const getRandomDate = (start, end) => {
|
||||
const date = new Date(
|
||||
@@ -280,51 +286,118 @@ const GlobalStateProvider = ({ children }) => {
|
||||
const [create, setCreate] = useState([
|
||||
{
|
||||
id: 1,
|
||||
sponserName: "Commercial",
|
||||
description: "Investment Private Company",
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private Company",
|
||||
document:"Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
sponserName: "Commercial",
|
||||
description: "Investment Private",
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private",
|
||||
document:"Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
sponserName: "Commercial",
|
||||
description: "Investment Private",
|
||||
Type: "PDF",
|
||||
fileName: "Investment Private",
|
||||
document:"Investment.pdf",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
sponserName: "Commercial",
|
||||
description: "Investment Private",
|
||||
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,
|
||||
},
|
||||
]);
|
||||
|
||||
const [keyMerits, setKeyMerits] = useState([
|
||||
{
|
||||
id: 1,
|
||||
title: "Diversified Holdings",
|
||||
subTitle: "Private equity portfolio of over 60 companies in various sectors and different countries around the world",
|
||||
icon:<TbClock2 fontSize={'18px'} />,
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Top-Tier Manager",
|
||||
subTitle: "KKR is a world-class global PE manager with over $570bn in assets under management",
|
||||
icon:<CiWallet fontSize={'18px'} />,
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Strong performance",
|
||||
subTitle: "Direct exposure to the KKR’s best performing Buyout and Growth funds",
|
||||
icon:<HiOutlineReceiptPercent fontSize={'18px'} />,
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Leading Track Record",
|
||||
subTitle: "Almost 50 year track record since 1977 of consistent, double-digit annual returns",
|
||||
icon:<IoMdQrScanner fontSize={'18px'} />,
|
||||
status: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const [iOArtifacts, setIOArtifacts] = useState([
|
||||
{
|
||||
id: 1,
|
||||
type: "JPG",
|
||||
fileName: "Banner image",
|
||||
document:"Banner.jpg",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "JPG",
|
||||
fileName: "Banner image",
|
||||
document:"Banner.jpg",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "JPG",
|
||||
fileName: "Banner image",
|
||||
document:"Banner.jpg",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: "JPG",
|
||||
fileName: "Banner image",
|
||||
document:"Banner.jpg",
|
||||
status: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const [investmentType, setInvestmentType] = useState([
|
||||
// {
|
||||
// id: 1,
|
||||
// investmentName: "Commercial",
|
||||
// mobileNo: "0987654321",
|
||||
// investmentAddress: "1725 Slough Ave, Scranton, USA",
|
||||
// accountHolderName: "Michael Scott",
|
||||
// bankName: "Dunder Mifflin Bank",
|
||||
// accountNumber: "1111222233",
|
||||
// bankBranch: "Scranton Branch",
|
||||
// branchAddress: "101 Paper St, Scranton, USA",
|
||||
// ifscCode: "IFSC11111",
|
||||
// swiftCode: "SWIFT12345",
|
||||
// routingNumber: "123450987",
|
||||
// iban: "IBAN1111222233",
|
||||
// accountType: "checking",
|
||||
// bankPhoneNumber: "0987654321",
|
||||
// bankEmail: "michael.scott@example.com",
|
||||
// status: true,
|
||||
// createdAt: "45",
|
||||
// },
|
||||
{
|
||||
id: 1,
|
||||
investmentName: "Commercial",
|
||||
@@ -1311,6 +1384,10 @@ const GlobalStateProvider = ({ children }) => {
|
||||
setViewIO,
|
||||
create,
|
||||
setCreate,
|
||||
keyMerits,
|
||||
setKeyMerits,
|
||||
iOArtifacts,
|
||||
setIOArtifacts
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -160,12 +160,12 @@ const CreateIO = () => {
|
||||
{
|
||||
label: "Key merits",
|
||||
content: <KeyMerits control={control} errors={errors} />,
|
||||
isDisabled: true,
|
||||
isDisabled: false,
|
||||
},
|
||||
{
|
||||
label: "IO artifacts",
|
||||
content: <IOArtifacts control={control} errors={errors} />,
|
||||
isDisabled: true,
|
||||
isDisabled: false,
|
||||
},
|
||||
{
|
||||
label: "Investors",
|
||||
|
||||
@@ -1,9 +1,252 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
Text,
|
||||
Tooltip,
|
||||
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";
|
||||
import { debounce } from "../../Master/Sponser/AddSponser";
|
||||
import { formatDate } from "../../../Components/Functions/UTCConvertor";
|
||||
import {
|
||||
AddIcon,
|
||||
DeleteIcon,
|
||||
DownloadIcon,
|
||||
EditIcon,
|
||||
ViewIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
|
||||
const IOArtifacts = () => {
|
||||
return (
|
||||
<div>IOArtifacts</div>
|
||||
)
|
||||
}
|
||||
const { iOArtifacts, setIOArtifacts, 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();
|
||||
|
||||
export default IOArtifacts
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr.no",
|
||||
"Type",
|
||||
"File Name",
|
||||
"Document",
|
||||
"Action"
|
||||
];
|
||||
|
||||
const handleUpdateStatus = debounce((id) => {
|
||||
setIOArtifacts((prevIOArtifacts) =>
|
||||
prevIOArtifacts.map((iOArtifacts) =>
|
||||
iOArtifacts.id === id
|
||||
? { ...iOArtifacts, status: !iOArtifacts.status }
|
||||
: iOArtifacts
|
||||
)
|
||||
);
|
||||
toast({
|
||||
render: () => <ToastBox message={"Status changed succesfully.!"} />,
|
||||
});
|
||||
}, 300);
|
||||
|
||||
const filteredData = iOArtifacts?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.type;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedIOArtifacts = iOArtifacts.filter(
|
||||
(iOArtifacts) => iOArtifacts.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setSponser(updatedIOArtifacts);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
"Sr.no": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
Type: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.type}
|
||||
</Text>
|
||||
),
|
||||
"File Name": (
|
||||
<Box isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
{item.fileName}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Document": (
|
||||
<Text
|
||||
color={"green.500"}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.document}
|
||||
</Text>
|
||||
),
|
||||
Action: (
|
||||
<Box display={"flex"} justifyContent={"space-evenly"}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="View"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "green.500" }}
|
||||
// transition={"0.5s all"}
|
||||
onClick={() => {
|
||||
navigate(`view-investment/${item.id}`);
|
||||
}}
|
||||
color="green.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<ViewIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Edit"
|
||||
bg="#fff"
|
||||
color={"blue.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "blue.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="blue.400"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Delete"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setActionId(item?.id);
|
||||
setDeleteAlert(true);
|
||||
}}
|
||||
_hover={{ color: "red.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="red.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box display={"flex"} justifyContent={"space-between"} mb={4}>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
leftIcon={<AddIcon />}
|
||||
onClick={onOpen}
|
||||
size={"xs"}
|
||||
// width={"44.5%"}
|
||||
fontSize={"xs"}
|
||||
rounded={"sm"}
|
||||
ps={3}
|
||||
pe={4}
|
||||
colorScheme="green"
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
<InvestmentDocuments
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
firstField={firstField}
|
||||
/>
|
||||
</Box>
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
// totalPages={10}
|
||||
|
||||
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 IOArtifacts;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Button, Input, Text, useDisclosure } from "@chakra-ui/react";
|
||||
import { Box, Button, Input, Text, Tooltip, useDisclosure } from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import InvestmentDocuments from "../InvestmentDocuments";
|
||||
import DataTable from "../../../Components/DataTable/DataTable";
|
||||
@@ -6,10 +6,10 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import { debounce } from "../../Master/Sponser/AddSponser";
|
||||
import { formatDate } from "../../../Components/Functions/UTCConvertor";
|
||||
import { AddIcon } from "@chakra-ui/icons";
|
||||
import { AddIcon, DeleteIcon, DownloadIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
|
||||
|
||||
const InvestmentDocument = ({ control, errors }) => {
|
||||
const { create, setCreate, sponser, setSponser, investment, setInvestment } =
|
||||
const { create, setCreate, sponser, setSponser,slideFromRight} =
|
||||
useContext(GlobalStateContext);
|
||||
const firstField = useRef();
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
@@ -33,10 +33,10 @@ const InvestmentDocument = ({ control, errors }) => {
|
||||
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sponser name",
|
||||
"Address",
|
||||
"Mobile no",
|
||||
"Created At",
|
||||
"Sr.no",
|
||||
"Type",
|
||||
"File Name",
|
||||
"Document",
|
||||
"Action",
|
||||
];
|
||||
|
||||
@@ -53,7 +53,7 @@ const InvestmentDocument = ({ control, errors }) => {
|
||||
|
||||
const filteredData = create?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.sponserName;
|
||||
const name = item.Type;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
|
||||
@@ -71,43 +71,130 @@ const InvestmentDocument = ({ control, errors }) => {
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const extractedArray = filteredData?.map((item) => ({
|
||||
id: item?.id,
|
||||
"Sponser name": (
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
"Sr.no": (
|
||||
<Text
|
||||
justifyContent={"left"}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
h={7}
|
||||
>
|
||||
"{item.sponserName}"
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
Address: (
|
||||
<Box w={350} isTruncated={true}>
|
||||
"Type": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
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"}>
|
||||
" {item.sponserAddress}"
|
||||
{item.fileName}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Mobile no": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
"{item.mobileNo}"
|
||||
</Text>
|
||||
"Document": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
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"}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="View"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "green.500" }}
|
||||
// transition={"0.5s all"}
|
||||
onClick={() => {
|
||||
navigate(`view-investment/${item.id}`);
|
||||
}}
|
||||
color="green.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<ViewIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Edit"
|
||||
bg="#fff"
|
||||
color={"blue.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "blue.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="blue.400"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Edit"
|
||||
bg="#fff"
|
||||
color={"blue.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "blue.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="blue.400"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<DownloadIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Delete"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setActionId(item?.id);
|
||||
setDeleteAlert(true);
|
||||
}}
|
||||
_hover={{ color: "red.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="red.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
|
||||
"Created At": (
|
||||
<span className="d-flex justify-content-between align-items-center">
|
||||
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
||||
{formatDate(item.createdAt)}
|
||||
</Text>
|
||||
</span>
|
||||
),
|
||||
Action: <Box display={"flex"} justifyContent={"space-between"}></Box>,
|
||||
}));
|
||||
|
||||
|
||||
|
||||
@@ -1,9 +1,239 @@
|
||||
import React from 'react'
|
||||
import { Box, Button, Input, Text, Tooltip, 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";
|
||||
import { debounce } from "../../Master/Sponser/AddSponser";
|
||||
import { formatDate } from "../../../Components/Functions/UTCConvertor";
|
||||
import { AddIcon, DeleteIcon, DownloadIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
|
||||
|
||||
const KeyMerits = () => {
|
||||
return (
|
||||
<div>KeyMerits</div>
|
||||
)
|
||||
}
|
||||
const { keyMerits, setKeyMerits,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();
|
||||
|
||||
export default KeyMerits
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr.no",
|
||||
"Title",
|
||||
"Sub title",
|
||||
"Icon",
|
||||
"Action",
|
||||
];
|
||||
|
||||
const handleUpdateStatus = debounce((id) => {
|
||||
setKeyMerits((prevKeyMerits) =>
|
||||
prevKeyMerits.map((keyMerits) =>
|
||||
keyMerits.id === id ? { ...keyMerits, status: !keyMerits.status } : keyMerits
|
||||
)
|
||||
);
|
||||
toast({
|
||||
render: () => <ToastBox message={"Status changed succesfully.!"} />,
|
||||
});
|
||||
}, 300);
|
||||
|
||||
const filteredData = keyMerits?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.title;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedKeyMerits = keyMerits.filter((keyMerits) => keyMerits.id !== actionId);
|
||||
|
||||
setTimeout(() => {
|
||||
setSponser(updatedKeyMerits);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
"Sr.no": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
"Title": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
),
|
||||
"Sub title": (
|
||||
<Box w={"300px"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
{item.subTitle}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Icon": (
|
||||
<Text
|
||||
color={'green.500'}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.icon}
|
||||
</Text>
|
||||
),
|
||||
Action: (
|
||||
<Box display={"flex"} justifyContent={"space-evenly"}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="View"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "green.500" }}
|
||||
// transition={"0.5s all"}
|
||||
onClick={() => {
|
||||
navigate(`view-investment/${item.id}`);
|
||||
}}
|
||||
color="green.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<ViewIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Edit"
|
||||
bg="#fff"
|
||||
color={"blue.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "blue.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="blue.400"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Delete"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setActionId(item?.id);
|
||||
setDeleteAlert(true);
|
||||
}}
|
||||
_hover={{ color: "red.500" }}
|
||||
// transition={"0.5s all"}
|
||||
color="red.300"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box display={"flex"} justifyContent={"space-between"} mb={4}>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
leftIcon={<AddIcon />}
|
||||
onClick={onOpen}
|
||||
size={"xs"}
|
||||
// width={"44.5%"}
|
||||
fontSize={"xs"}
|
||||
rounded={"sm"}
|
||||
ps={3}
|
||||
pe={4}
|
||||
|
||||
colorScheme="green"
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
<InvestmentDocuments
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
firstField={firstField}
|
||||
/>
|
||||
</Box>
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
// totalPages={10}
|
||||
|
||||
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 KeyMerits;
|
||||
|
||||
Reference in New Issue
Block a user