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

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

Browse Source
This commit is contained in:
rockyeverlast
2024-07-09 16:17:47 +05:30
parent a57cab27ea 116e4b7057
commit b3c9643a8c
17 changed files with 726 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Components/FormField.jsx
View File

@@ -20,6 +20,7 @@ import { TiWarning } from "react-icons/ti";
import { motion } from "framer-motion";
import { AddIcon, CloseIcon } from "@chakra-ui/icons";
const today = new Date().toISOString().split('T')[0]
const FormField = ({
label,
control,
@@ -359,8 +360,9 @@ const FormField = ({
{...props}
placeholder={placeHolder ? placeHolder : label}
borderRadius={"4px"}
textAlign={arabic ? "right" : "left"}
textAlign={arabic || type === "number" ? "right" : "left"}
_placeholder={{ fontSize: "xs" }}
min={type === "date" ? today : undefined}
/>
);
}

5
src/Components/FormInputView.jsx
View File

@@ -20,10 +20,9 @@ const FormInputView = ({
<Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
{section}
</Heading>
<Box display={"flex"} gap={0}>
{/* <Box display={"flex"} gap={0}> */}
<Box
width={"100%"}
p={5}
display={"flex"}
flexWrap={"wrap"}
gap={4}
@@ -37,7 +36,7 @@ const FormInputView = ({
</Box>
))}
</Box>
</Box>
{/* </Box> */}
{index <
Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
<Divider />

124
src/Contexts/GlobalStateProvider.jsx
View File

@@ -539,42 +539,8 @@ const GlobalStateProvider = ({ children }) => {
id: 1,
investmentName: "Commercial",
description: "Investment Private Company",
status: true,
},
{
id: 2,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 3,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 4,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 5,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 6,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 7,
investmentName: "Commercial",
description: "Investment Private",
investmentNameArabic: "لعفكعلفكع كعلجلجعيجكجلدسجوي",
descriptionArabic: "لعفكعلفكع كعلجلجع",
status: true,
},
]);
@@ -1468,6 +1434,89 @@ const GlobalStateProvider = ({ children }) => {
},
]);
const [ IODetails, setIODetails ] = useState([
{
id:uuidv4(),
closingDate: "Fri Jul 26 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Animi molestias cup",
discriptionArabic: "Ut aliquam corporis",
expectedReturn: 37,
goalAmount: 40,
holdingPeriod: 47,
ioName: "Harlan Head",
ioNameArabic: "Ulric Torres",
ioStatus: "open",
maxInvestment: 80,
minInvestment: 77,
sponserName: "Ella Fitzgerald",
typeName: "Commercial"
},
{
id:uuidv4(),
closingDate: "Wed Sep 18 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Voluptas necessitatibus",
discriptionArabic: "Nemo enim ipsam",
expectedReturn: 42,
goalAmount: 55,
holdingPeriod: 30,
ioName: "John Doe",
ioNameArabic: "Ali Ahmed",
ioStatus: "closed",
maxInvestment: 95,
minInvestment: 60,
sponserName: "Louis Armstrong",
typeName: "Residential"
},
{
id:uuidv4(),
closingDate: "Mon Oct 21 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Tempora incidunt",
discriptionArabic: "Eius modi tempora",
expectedReturn: 50,
goalAmount: 75,
holdingPeriod: 60,
ioName: "Jane Smith",
ioNameArabic: "Fatima Al-Hassan",
ioStatus: "open",
maxInvestment: 100,
minInvestment: 85,
sponserName: "Duke Ellington",
typeName: "Industrial"
},
{
id:uuidv4(),
closingDate: "Fri Nov 15 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Dolor sit amet",
discriptionArabic: "Consectetur adipiscing elit",
expectedReturn: 45,
goalAmount: 60,
holdingPeriod: 90,
ioName: "Alice Johnson",
ioNameArabic: "Layla Khalid",
ioStatus: "open",
maxInvestment: 70,
minInvestment: 50,
sponserName: "Billie Holiday",
typeName: "Commercial"
},
{
id:uuidv4(),
closingDate: "Tue Dec 10 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Consectetur adipisci",
discriptionArabic: "Elit sed do eiusmod",
expectedReturn: 48,
goalAmount: 65,
holdingPeriod: 45,
ioName: "Robert Brown",
ioNameArabic: "Omar Hussain",
ioStatus: "closed",
maxInvestment: 90,
minInvestment: 70,
sponserName: "Miles Davis",
typeName: "Residential"
}
])
return (
<GlobalStateContext.Provider
value={{
@@ -1514,7 +1563,8 @@ const GlobalStateProvider = ({ children }) => {
iOArtifacts,
setIOArtifacts,
investors,
setInvestors,
setInvestors,IODetails, setIODetails,
caseDetails,
setCaseDetails,
}}

75
src/Pages/IO_Management/CreateIO/CreateIO.jsx
View File

@@ -1,13 +1,6 @@
import React, { useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import {
Box,
Tabs,
TabList,
Tab,
TabPanel,
TabPanels,
} from "@chakra-ui/react";
import { Box, Tabs, TabList, Tab, TabPanel, TabPanels } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
@@ -18,6 +11,9 @@ import Investors from "./Investors";
import IOCashDetails from "./IOCashDetails";
import IONAVDetails from "./IONAVDetails";
import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import
import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader";
import { useParams } from "react-router-dom";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
const schema = yup.object().shape({
ioName: yup.string().required("IO name english is required"),
@@ -25,17 +21,12 @@ const schema = yup.object().shape({
discription: yup.string().required("Discription in english is required"),
discriptionArabic: yup.string().required("Discription in Arabic is required"),
typeName: yup.string().required("Investment type in english is required"),
typeNameArabic: yup.string().required("Investment type in arabic is required"),
sponserName: yup.string().required("Sponser name is required"),
sponserNameArabic: yup
typeNameArabic: yup
.string()
.required("Sponser name arabic is required"),
goalAmount: yup.string().required("Goal amount is required"),
.required("Investment type in arabic is required"),
sponserName: yup.string().required("Sponser name is required"),
sponserNameArabic: yup.string().required("Sponser name arabic is required"),
goalAmount: yup.string().required("Goal amount is required"),
holdingPeriod: yup.string().required("Sponser name is required"),
ioStatus: yup.string().required("Investment Object name is required"),
@@ -81,6 +72,7 @@ const schema = yup.object().shape({
});
const CreateIO = () => {
const id = useParams()?.id;
const {
control,
handleSubmit,
@@ -104,55 +96,70 @@ const CreateIO = () => {
{
label: "IO Details",
Content: IODetails,
isDisabled: false,
isDisabled: id ? false : false ,
},
{
label: "Investment documents",
Content: InvestmentDocument,
isDisabled: true,
isDisabled: id ? false : true ,
},
{
label: "Key merits",
Content: KeyMerits,
isDisabled: true,
isDisabled: id ? false : true ,
},
{
label: "IO artifacts",
Content: IOArtifacts,
isDisabled: true,
isDisabled: id ? false : true ,
},
{
label: "Investors",
Content: Investors,
isDisabled: false,
isDisabled: id ? false : true ,
},
{
label: "IO Cash Details",
Content: IOCashDetails,
isDisabled: false,
isDisabled: id ? false : true ,
},
{
label: "IO NAV Details",
Content: IONAVDetails,
isDisabled: false,
isDisabled: id ? false : true ,
},
];
const [tabs, setTabs] = useState(initialTabsState);
const [activeIndex, setActiveIndex] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const onSubmit = (data) => {
data.preventDefault();
enableNextTab(0);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
<Tabs index={activeIndex} onChange={(index) => setActiveIndex(index)} mt={2}>
<Box paddingInline={"12px"} mt={2}>
{/* <span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span> */}
<ViewIOdataHeader />
</Box>
<Tabs
index={activeIndex}
onChange={(index) => setActiveIndex(index)}
mt={2}
>
<TabList>
{tabs.map(({ label, isDisabled }, index) => (
{tabs?.map(({ label, isDisabled }, index) => (
<Tab
isDisabled={isDisabled}
key={index}
@@ -170,7 +177,15 @@ const CreateIO = () => {
<TabPanels>
{tabs.map(({ Content }, index) => (
<TabPanel key={index}>
<Content index={index} enableNextTab={enableNextTab} control={control} errors={errors} handleSubmit={handleSubmit} />
<Content
isLoading={isLoading}
setIsLoading={setIsLoading}
index={index}
enableNextTab={enableNextTab}
control={control}
errors={errors}
handleSubmit={handleSubmit}
/>
</TabPanel>
))}
</TabPanels>

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

@@ -129,7 +129,7 @@ const IOArtifacts = ({enableNextTab, index}) => {
</Text>
),
Action: (
<Box display={"flex"} justifyContent={"space-evenly"}>
<Box display={"flex"} justifyContent={"center"} gap={3}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
@@ -214,9 +214,9 @@ const IOArtifacts = ({enableNextTab, index}) => {
size={"sm"}
fontSize={"xs"}
rounded={"sm"}
colorScheme="green"
color={'green'}
>
Add
Add artifacts
</Button>
<IOArtifactsAdd
isOpen={isOpen}

539
src/Pages/IO_Management/CreateIO/IODetails.jsx
View File

@@ -1,196 +1,490 @@
import React from "react";
import React, { useContext, useEffect, useState } from "react";
import FormInputMain from "../../../Components/FormInputMain";
import { useNavigate } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
const schema = yup.object().shape({
ioName: yup
.string()
.required("IO name in English is required")
.min(3, "IO name in English must be at least 3 characters long")
.max(50, "IO name in English must be at most 50 characters long"),
ioNameArabic: yup
.string()
.required("IO name in Arabic is required")
.min(3, "IO name in Arabic must be at least 3 characters long")
.max(50, "IO name in Arabic must be at most 50 characters long"),
discription: yup
.string()
.required("Description in English is required")
.min(10, "Description in English must be at least 10 characters long")
.max(500, "Description in English must be at most 500 characters long"),
discriptionArabic: yup
.string()
.required("Description in Arabic is required")
.min(10, "Description in Arabic must be at least 10 characters long")
.max(500, "Description in Arabic must be at most 500 characters long"),
typeName: yup
.string()
.required("Investment type in English is required")
.min(3, "Investment type in English must be at least 3 characters long")
.max(50, "Investment type in English must be at most 50 characters long"),
// typeNameArabic: yup
// .string()
// .required("Investment type in Arabic is required")
// .min(3, "Investment type in Arabic must be at least 3 characters long")
// .max(50, "Investment type in Arabic must be at most 50 characters long"),
sponserName: yup
.string()
.required("Sponsor name is required")
.min(3, "Sponsor name must be at least 3 characters long")
.max(50, "Sponsor name must be at most 50 characters long"),
// sponserNameArabic: yup
// .string()
// .required("Sponsor name in Arabic is required")
// .min(3, "Sponsor name in Arabic must be at least 3 characters long")
// .max(50, "Sponsor name in Arabic must be at most 50 characters long"),
goalAmount: yup
.number()
.required("Goal amount is required")
.positive("Goal amount must be a positive number")
.min(1, "Goal amount must be at least 1"),
minInvestment: yup
.number()
.required("Minimum investment is required")
.positive("Minimum investment must be a positive number")
.min(1, "Minimum investment must be at least 1"),
maxInvestment: yup
.number()
.required("Maximum investment is required")
.positive("Maximum investment must be a positive number")
.min(1, "Maximum investment must be at least 1")
.moreThan(
yup.ref("minInvestment"),
"Maximum investment must be greater than minimum investment"
),
holdingPeriod: yup
.number()
.required("Holding period is required")
.positive("Holding period must be a positive number")
.min(1, "Holding period must be at least 1 month"),
expectedReturn: yup
.number()
.required("Expected return is required")
.positive("Expected return must be a positive number")
.min(0.01, "Expected return must be at least 0.01"),
closingDate: yup
.date()
.required("Closing date is required")
.min(new Date(), "Closing date cannot be in the past"),
ioStatus: yup
.string()
.required("Investment Object status is required")
.oneOf(
["open", "pending", "closed"],
"Investment Object status must be one of 'open', 'pending', or 'closed'"
),
});
const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
const params = useParams();
const id = params?.id;
const navigate = useNavigate();
const { investmentType, sponser, IODetails } = useContext(GlobalStateContext);
const [foundObject, setFoundObject] = useState(null);
const investmentTypeOptions = investmentType.map(({ investmentName }) => {
return {
label: investmentName,
value: investmentName,
};
});
const investmentTypeArabicOptions = investmentType.map(
({ investmentNameArabic }) => {
return {
label: investmentNameArabic,
value: investmentNameArabic,
};
}
);
const sponserNameOption = sponser.map(({ sponserName }) => {
return {
label: sponserName,
value: sponserName,
};
});
const sponserNameArabicOption = sponser.map(({ sponserNameArabic }) => {
return {
label: sponserNameArabic,
value: sponserNameArabic,
};
});
const {
control,
reset,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
});
useEffect(() => {
const found = IODetails?.find(
(item) => item?.id.toString() === id?.toString()
);
setFoundObject(found);
if (found) {
reset({
ioName: found.ioName,
sponserName: found.sponserName,
ioNameArabic: found.ioNameArabic,
ioStatus: found.ioStatus,
discriptionArabic: found.discriptionArabic,
typeName: found.typeName,
discription: found.discription,
sponserName: found.sponserName,
goalAmount: found.goalAmount,
minInvestment: found.minInvestment,
maxInvestment: found.maxInvestment,
holdingPeriod: found.holdingPeriod,
expectedReturn: found.expectedReturn,
closingDate: found.closingDate,
ioStatus: found.ioStatus,
});
}
setIsLoading(false)
}, [id, IODetails, reset]);
const IODetails = ({ enableNextTab, control, errors, index, handleSubmit }) => {
const navigate = useNavigate()
const formFields = [
{
label: "IO Name (English)",
placeHolder: " ",
label: "IO Name",
name: "ioName",
type: "text",
section: " ",
width: "49%",
},
{
label: "IO Name (Arabic)",
placeHolder: " ",
name: "ioNameArabic",
type: "text",
arabic: true,
section: " ",
width: "49%",
},
{
label: "Description (English)",
placeHolder: " ",
label: "Description",
name: "discription",
type: "textarea",
section: " ",
width: "49%",
},
{
label: "Description (Arabic)",
placeHolder: " ",
name: "discriptionArabic",
type: "textarea",
arabic: true,
section: " ",
width: "49%",
},
{
label: "Investment Type (English)",
placeHolder: " ",
label: "Investment Type",
placeHolder: "Select option",
name: "typeName",
type: "select",
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
width: "32.3%",
options: investmentTypeOptions,
},
// {
// label: "Sponser Name (Arabic)",
// placeHolder: " ",
// name: "sponserNameArabic",
// type: "select",
// options: sponserNameArabicOption,
// arabic: true,
// section: " ",
// width: "49%",
// },
{
label: "Investment Type (Arabic)",
placeHolder: " ",
name: "typeNameArabic",
type: "select",
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
},
{
label: "Sponser Name (English)",
placeHolder: " ",
label: "Sponser Name",
placeHolder: "Select option",
name: "sponserName",
type: "text",
type: "select",
options: sponserNameOption,
section: " ",
width: "49%",
width: "32.3%",
},
// {
// label: "Investment Type (Arabic)",
// placeHolder: " ",
// name: "typeNameArabic",
// type: "select",
// arabic: true,
// section: " ",
// width: "32.3%",
// options: investmentTypeArabicOptions,
// },
{
label: "Sponser Name (Arabic)",
placeHolder: " ",
name: "sponserNameArabic",
type: "text",
section: " ",
width: "49%",
},
{
label: "Goal Amount (English)",
placeHolder: " ",
label: "Goal Amount",
placeHolder: "$00.00",
name: "goalAmount",
type: "Number",
type: "number",
section: " ",
width: "49%",
width: "32.3%",
},
{
label: "Minimum Investment Amount (English)",
placeHolder: " ",
label: "Minimum Investment Amount",
placeHolder: "$00.00",
name: "minInvestment",
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Maximum Investment Amount (English)",
placeHolder: " ",
label: "Maximum Investment Amount",
placeHolder: "$00.00",
name: "maxInvestment",
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Holding Period (English)",
placeHolder: " ",
label: "Holding Period",
name: "holdingPeriod",
type: "number",
placeHolder: "1Y",
section: " ",
width: "32.3%",
},
{
label: "Expected Return Estimated (English)",
placeHolder: " ",
label: "Expected Return Estimated",
placeHolder: "$00.00",
name: "expectedReturn",
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Closing Date (English)",
placeHolder: " ",
label: "Closing Date",
name: "closingDate",
type: "date",
section: " ",
width: "32.3%",
},
},
{
label: "IO status",
placeHolder: " ",
placeHolder: "Select option",
name: "ioStatus",
type: "select",
section: " ",
width: "32.3%",
options: [
{
label: "option 1",
value: "option 1",
label: "Open",
value: "open",
},
{
label: "option 2",
value: "option 2",
label: "Pending",
value: "pending",
},
{
label: "option 3",
value: "option 3",
label: "Closed",
value: "closed",
},
],
},
];
const formEditFields = [
{
label: "IO Name",
value: foundObject?.ioName,
name: "ioName",
type: "text",
section: " ",
width: "49%",
},
{
label: "IO Name (Arabic)",
name: "ioNameArabic",
type: "text",
value: foundObject?.sponserName,
arabic: true,
section: " ",
width: "49%",
},
{
label: "Description",
name: "discription",
value: foundObject?.ioStatus,
type: "textarea",
section: " ",
width: "49%",
},
{
label: "Description (Arabic)",
name: "discriptionArabic",
value: foundObject?.discriptionArabic,
type: "textarea",
arabic: true,
section: " ",
width: "49%",
},
{
label: "Investment Type",
placeHolder: "Select option",
value: foundObject?.typeName,
name: "typeName",
type: "select",
section: " ",
width: "32.3%",
options: investmentTypeOptions,
},
// {
// label: "Sponser Name (Arabic)",
// placeHolder: " ",
// name: "sponserNameArabic",
// type: "select",
// options: sponserNameArabicOption,
// arabic: true,
// section: " ",
// width: "49%",
// },
{
label: "Sponser Name",
placeHolder: "Select option",
name: "sponserName",
type: "select",
options: sponserNameOption,
value: foundObject?.sponserName,
section: " ",
width: "32.3%",
},
// {
// label: "Investment Type (Arabic)",
// placeHolder: " ",
// name: "typeNameArabic",
// type: "select",
// arabic: true,
// section: " ",
// width: "32.3%",
// options: investmentTypeArabicOptions,
// },
{
label: "Goal Amount",
placeHolder: "$00.00",
value: foundObject?.goalAmount,
name: "goalAmount",
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Minimum Investment Amount",
placeHolder: "$00.00",
name: "minInvestment",
value: foundObject?.minInvestment,
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Maximum Investment Amount",
placeHolder: "$00.00",
name: "maxInvestment",
type: "number",
value: foundObject?.maxInvestment,
section: " ",
width: "32.3%",
},
{
label: "Holding Period",
name: "holdingPeriod",
value: foundObject?.holdingPeriod,
type: "number",
placeHolder: "1Y",
section: " ",
width: "32.3%",
},
{
label: "Expected Return Estimated",
placeHolder: "$00.00",
name: "expectedReturn",
type: "number",
value: foundObject?.expectedReturn,
section: " ",
width: "32.3%",
},
{
label: "Closing Date",
name: "closingDate",
type: "date",
value: foundObject?.closingDate,
section: " ",
width: "32.3%",
},
{
label: "IO status",
placeHolder: foundObject?.ioStatus,
name: "ioStatus",
type: "select",
section: " ",
width: "32.3%",
options: [
{
label: "Open",
value: "open",
},
{
label: "option 4",
value: "option 4",
label: "Pending",
value: "pending",
},
{
label: "Closed",
value: "closed",
},
],
},
@@ -205,25 +499,34 @@ const IODetails = ({ enableNextTab, control, errors, index, handleSubmit }) => {
return groups;
}, {});
const groupedEditFields = formEditFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const onSubmit = (e) =>{
e.preventDefault();
enableNextTab(index)
}
const onSubmit = (data) => {
console.log(data);
enableNextTab(index);
};
console.log(id);
if (isLoading) return <FullscreenLoaders/>;
return (
<FormInputMain
p={0.1}
w={'auto'}
w={250}
width={"23.8%"}
groupedFields={groupedFields}
groupedFields={id ? groupedEditFields : groupedFields}
control={control}
errors={errors}
// onSubmit={handleSubmit(onSubmit)}
onSubmit={onSubmit}
submitTitle={"Next"}
onSubmit={handleSubmit(onSubmit)}
// onSubmit={onSubmit}
submitTitle={id ? "Update":"Submit"}
/>
);
};

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

@@ -238,7 +238,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
rounded="sm"
colorScheme="green"
>
Add
Add document
</Button>
<InvestmentDocuments
create={create}

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

@@ -204,9 +204,10 @@ const KeyMerits = ({enableNextTab, index}) => {
fontSize={"xs"}
rounded={"sm"}
colorScheme="green"
// colorScheme="green"
color={'green'}
>
Add
Add key merits
</Button>
<KeyMeritsAdd
isOpen={isOpen}

68
src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
View File

@@ -42,7 +42,7 @@ const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date
const ViewIOTable = () => {
const navigate = useNavigate();
const toast = useToast();
const { viewIO, setViewIO, slideFromRight } = useContext(GlobalStateContext);
const { IODetails, setIODetails, slideFromRight } = useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [deleteAlert, setDeleteAlert] = useState(false);
@@ -51,7 +51,6 @@ const ViewIOTable = () => {
const [mouseEnteredId, setMouseEnteredId] = useState("");
console.log(viewIO);
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
@@ -66,8 +65,8 @@ const ViewIOTable = () => {
const tableHeadRow = [
"Sr.no",
"Deal ID",
"Deal Name",
"Sponsor Name",
"Sponser Name",
"Investment Type",
"IO status",
"Action",
];
@@ -86,9 +85,9 @@ const ViewIOTable = () => {
// }, 300);
// ====================================================[Table Filter]================================================================
const filteredData = viewIO.filter((item) => {
const filteredData = IODetails.filter((item) => {
// Filter by name (case insensitive)
const name = item.DealName;
const name = item.ioName;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
@@ -124,20 +123,20 @@ const ViewIOTable = () => {
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.DealID}
{item.id}
</Text>
),
"Deal Name": (
"Sponser Name": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.DealName}
{item.sponserName}
</Text>
</Box>
),
"Sponsor Name": (
"Investment Type": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.SponsorName}
{item.typeName}
</Text>
</Box>
),
@@ -145,21 +144,21 @@ const ViewIOTable = () => {
<Box w={"auto"} isTruncated={true}>
<Badge
color={
item.IOstatus === "Open"
item.ioStatus === "open"
? "#00B69B"
: item.IOstatus === "Pending"
: item.ioStatus === "pending"
? "#6226EF"
: "#EF3826"
}
colorScheme={
item.IOstatus === "Open"
item.ioStatus === "open"
? "green"
: item.IOstatus === "Pending"
: item.ioStatus === "pending"
? "purple"
: "red"
}
>
{item.IOstatus}
{item.ioStatus}
</Badge>
</Box>
),
@@ -188,6 +187,30 @@ const ViewIOTable = () => {
</Button>
</Tooltip>
<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(`/create-io/${item.id}`);
}}
color="green.300"
rounded={"sm"}
size={"xs"}
>
<EditIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
@@ -215,10 +238,10 @@ const ViewIOTable = () => {
}));
const handleDelete = () => {
const viewIO = viewIO.filter((viewIO) => viewIO.id !== actionId);
const upDatedIO = IODetails.filter((viewIO) => viewIO.id !== actionId);
setTimeout(() => {
setViewIO(viewIO);
setIODetails(upDatedIO);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
@@ -251,16 +274,19 @@ const ViewIOTable = () => {
<HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
{/* <Link to={"/investment-type/add-investment"}>
<Link to={"/create-io"}>
<Button
ps={4}
pe={4}
leftIcon={<AddIcon />}
colorScheme={"green"}
rounded={"sm"}
size={"sm"}
fontSize={'sm'}
>
Add Investment
Create IO
</Button>
</Link> */}
</Link>
</HStack>
</HStack>
</Box>

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

@@ -27,37 +27,47 @@ import ViewInvestors from "./ViewInvestors";
import ViewIOcash from "./ViewIOcash";
import ViewIOnav from "./ViewIOnav";
import ViewDistribution from "./ViewDistribution";
import InvestmentDocument from "../CreateIO/InvestmentDocument";
import KeyMerits from "../CreateIO/KeyMerits";
import IOArtifacts from "../CreateIO/IOArtifacts";
import Investors from "../CreateIO/Investors"
import EditIO from "../EditIO/EditIO";
const ViewIOdata = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const params = useParams()
console.log(params?.id);
const [isEditing, setIsEditing] = useState(false);
const tabs = [
{ label: "IO Details", content: <ViewIOdetails /> },
{ label: "Investment documents", content: <ViewIOdocs /> },
{ label: "Key merits", content: <ViewKeyMerits /> },
{ label: "IO artifacts", content: <ViewIOartifacts /> },
{ label: "Investors", content: <ViewInvestors /> },
{ label: "Investment documents", content: <InvestmentDocument /> },
{ label: "Key merits", content: <KeyMerits /> },
{ label: "IO artifacts", content: <IOArtifacts /> },
{ label: "Investors", content: <Investors /> },
{ label: "IO Cash Details", content: <ViewIOcash /> },
{ label: "IO NAV Details", content: <ViewIOnav /> },
{ label: "Distribution", content: <ViewDistribution /> },
// { label: "Distribution", content: <ViewDistribution /> },
];
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Box paddingInline={"12px"}>
<span
<Box paddingInline={"12px"} mt={2}>
{/* <span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span>
</span> */}
<ViewIOdataHeader />
</Box>
<Tabs mt={4}>
<TabList>
<TabList justifyContent={'space-between'} pe={4} alignItems={'center'}>
<Box display={'flex'} >
{tabs.map(({ label }, index) => (
<Tab
disabled={true}
@@ -71,6 +81,8 @@ const ViewIOdata = () => {
{label}
</Tab>
))}
</Box>
<Button onClick={()=> navigate(`/create-io/${params?.id}`)} ps={4} pe={4} colorScheme="green" rounded={"sm"} size={'xs'}>Edit</Button>
</TabList>
<Box p={3} width={"100%"} textAlign={"right"}>
<Button

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

@@ -1,5 +1,4 @@
import {
Box,
Button,
Divider,
Image,
@@ -17,12 +16,10 @@ import {
Portal,
Text,
useDisclosure,
} from "@chakra-ui/react";
import {
MenuItemOption,
MenuGroup,
MenuOptionGroup,
MenuDivider,
MenuDivider,Badge, Box
} from "@chakra-ui/react";
import header from "../../../assets/IOheader.png";
import { HiDotsVertical } from "react-icons/hi";
@@ -87,33 +84,47 @@ const ViewIOdataHeader = () => {
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
justifyContent={"start"}
gap={14}
bg={"#caf5d8"}
rounded={"md"}
// bgGradient='linear(to-r, #caf5d8, #f5e8ca)'
// bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
// bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
// bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
// bgGradient='linear(to-r, #ffd54f, #caf5d8)'
// bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
boxShadow={'md'}
paddingRight={"10px"}
borderRadius={"10px"}
>
<Box>
<Image src={header} />
<Box p={1}>
<Image h={82} src={header} />
</Box>
<Box fontSize={"sm"} fontWeight={"500"}>
<Text>KKR Private Equity Fund (K-Prime)</Text>
<Text>sponsor name: KKR</Text>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>KKR Private Equity Fund (K-Prime)</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>sponsor name: KKR</Text>
</Box>
<Box fontSize={"sm"}>
<Text>IO Status</Text>
<Text fontWeight={"500"}>Open</Text>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO Status</Text>
<Badge variant='subtle' w={"auto"} color='green'>Open</Badge>
</Box>
<Box fontSize={"sm"}>
<Text>IO MV NAV</Text>
<Text fontWeight={"500"}>$1,092,500</Text>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO MV NAV</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>$1,092,500</Text>
</Box>
<Box fontSize={"sm"}>
<Text>IO cash</Text>
<Text fontWeight={"500"}>$48,000</Text>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO cash</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>$48,000</Text>
</Box>
<Box fontSize={"sm"}>
<Text>IO NAV</Text>
<Text fontWeight={"500"}>$1,140,500</Text>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO NAV</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>$1,140,500</Text>
</Box>
<Box display={"flex"} alignItems={"start"} height={"95px"}>

45
src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
View File

@@ -9,97 +9,98 @@ import FormInputView from "../../../Components/FormInputView";
const ViewIOdetails = () => {
const params = useParams();
const { viewIO } = useContext(GlobalStateContext);
console.log(viewIO);
const { IODetails } = useContext(GlobalStateContext);
console.log(IODetails);
const { reset } = useForm(); // assuming react-hook-form
const id = params?.id;
const foundObject = viewIO?.find(
console.log(id);
const foundObject = IODetails?.find(
(item) => item?.id.toString() === id.toString()
);
const formFields = [
{
label: "IO Name (English)",
value: foundObject.DealName,
value: foundObject?.ioName,
width: "49%",
section: "",
},
{
label: "IO Name (Arabic)",
value: foundObject.SponsorName,
value: foundObject?.ioNameArabic,
width: "49%",
section: "",
},
{
label: "Description (English)",
value: foundObject.IOstatus,
value: foundObject?.discription,
width: "49%",
section: "",
},
{
label: "Description (Arabic)",
value: foundObject.IOstatus,
value: foundObject?.discriptionArabic,
width: "49%",
section: "",
},
{
label: "Investment Type (English)",
value: foundObject.DealName,
width: "49%",
section: "",
},
{
label: "Investment Type (Arabic)",
value: foundObject.DealID,
value: foundObject?.typeName,
width: "49%",
section: "",
},
// {
// label: "Investment Type (Arabic)",
// value: foundObject?.typeName,
// width: "49%",
// section: "",
// },
{
label: "Sponser Name (English)",
value: foundObject.IOstatus,
value: foundObject?.sponserName,
width: "49%",
section: "",
},
{
label: "Goal Amount (English)",
value: foundObject.IOstatus,
value: foundObject?.goalAmount,
width: "49%",
section: "",
},
{
label: "Minimum Investment Amount (English)",
value: foundObject.IOstatus,
value: foundObject?.minInvestment,
width: "32.3%",
section: "",
},
{
label: "Maximum Investment Amount (English)",
value: foundObject.IOstatus,
value: foundObject?.maxInvestment,
width: "32.3%",
section: "",
},
{
label: "Holding Period (English)",
value: foundObject.IOstatus,
value: foundObject?.holdingPeriod,
width: "32.3%",
section: "",
},
{
label: "Expected Return Estimated (English)",
value: foundObject.IOstatus,
value: foundObject?.expectedReturn,
width: "32.3%",
section: "",
},
{
label: "Closing Date (English)",
value: foundObject.IOstatus,
value: foundObject?.closingDate,
width: "32.3%",
section: "",
},
{
label: "IO Status (English)",
value: foundObject.IOstatus,
value: foundObject?.ioStatus,
width: "32.3%",
section: "",
},

21
src/Pages/Master/InvestmentType/AddInvestmentType.jsx
View File

@@ -14,24 +14,9 @@ import FormInputMain from "../../../Components/FormInputMain";
export const addInvestmentType = yup.object().shape({
investmentName: yup.string().required("Investment name is required"),
// investmentNameArabic: yup.string().required("Investment name is required"),
// mobileNo: yup.string().required("Mobile no is required"),
description: yup.string().required("Description is required"),
// descriptionArabic: yup.string().required("Description address is required"),
// bankName: yup.string().required("Bank Name is required"),
// accountNumber: yup.string().required("Account Number is required"),
// swiftCode: yup.string().required("SWIFT/BIC Code is required"),
// bankEmail: yup.string().email("Invalid email format"),
// routingNumber: yup.string().required("Routing Number is required"),
// iban: yup.string().required("IBAN is required"),
// accountType: yup.string().required("Account Type is required"),
// bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
// bankBranch: yup.string().required("Bank Branch is required"),
// branchAddress: yup.string().required("Branch Address is required"),
// ifscCode: yup.string().required("IFSC Code is required"),
// accountHolderName: yup.string().required("Account Holder's Name is required"),
investmentNameArabic: yup.string().required("Investment name is required"),
descriptionArabic: yup.string().required("Description is required"),
});
export function debounce(func, delay) {
@@ -202,6 +187,8 @@ const AddInvestmentType = () => {
...investmentType,
]);
navigate("/investment-type");
console.log(investmentType);
};
return (

82
src/Pages/Master/InvestmentType/EditInvestmentType.jsx
View File

@@ -1,16 +1,20 @@
import { Box, Button, Divider, Heading } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { v4 as uuidv4 } from "uuid";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import FormInputMain from "../../../Components/FormInputMain";
import { addInvestmentType } from "./AddInvestmentType";
import { ArrowBackIcon } from "@chakra-ui/icons";
import FormInputView from "../../../Components/FormInputView";
const EditInvestmentType = () => {
const navigate = useNavigate()
const params = useParams();
const { investmentType } = useContext(GlobalStateContext);
const { investmentType, setInvestmentType } = useContext(GlobalStateContext);
const [foundObject, setFoundObject] = useState(null);
const {
control,
@@ -35,13 +39,9 @@ const EditInvestmentType = () => {
if (found) {
reset({
investmentName: found.investmentName,
sponserNameArabic: found.sponserNameArabic,
mobileNo: found.mobileNo,
investmentAddress: found.investmentAddress,
bankName: found.bankName,
swiftCode: found.swiftCode,
accountNumber: found.accountNumber,
bankEmail: found.bankEmail,
investmentNameArabic: found.investmentNameArabic,
description: found.description,
descriptionArabic: found.descriptionArabic,
});
}
}, [params, investmentType, reset]);
@@ -54,9 +54,11 @@ const EditInvestmentType = () => {
return <Box>Loading...</Box>; // or any loading indicator
}
const formFields = [
{
label: "Investment name",
value: foundObject.investmentName,
name: "investmentName",
type: "text",
isRequired: true,
@@ -64,6 +66,7 @@ const EditInvestmentType = () => {
},
{
label: "Investment Name (Arabic)",
value: foundObject.investmentNameArabic,
name: "investmentNameArabic",
type: "text",
isRequired: true,
@@ -71,57 +74,25 @@ const EditInvestmentType = () => {
section: "Personal Details",
},
{
label: "Mobile no",
name: "mobileNo",
type: "number",
isRequired: true,
section: "Personal Details",
},
{
label: "Investment address",
name: "investmentAddress",
label: "Description",
value: foundObject.description,
name: "description",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Bank name",
name: "bankName",
label: "Description Arabic",
value: foundObject.descriptionArabic,
name: "descriptionArabic",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Name",
name: "accountNumber",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "SWIFT/BIC Code",
name: "swiftCode",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
arabic: true,
section: "Personal Details",
},
];
const groupedFields = formFields.reduce((groups, field) => {
const groupedFields = formFields?.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
@@ -134,8 +105,6 @@ const EditInvestmentType = () => {
setInvestmentType([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentType,
@@ -144,8 +113,15 @@ const EditInvestmentType = () => {
}
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<FormInputMain
<span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}

4
src/Pages/Master/InvestmentType/InvestmentType.jsx
View File

@@ -207,7 +207,7 @@ const InvestmentType = () => {
</Button>
</Tooltip>
{/* <Tooltip
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
@@ -227,7 +227,7 @@ const InvestmentType = () => {
>
<EditIcon />
</Button>
</Tooltip> */}
</Tooltip>
<Tooltip
rounded={"sm"}

28
src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
View File

@@ -53,34 +53,6 @@ const ViewInvestmentType = () => {
isRequired: true,
section: "Personal Details",
},
// {
// label: "Bank name",
// value: foundObject.bankName,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
// {
// label: "Account Name",
// value: foundObject.accountNumber,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
// {
// label: "SWIFT/BIC Code",
// value: foundObject.swiftCode,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
// {
// label: "Account Email",
// value: foundObject.bankEmail,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
];
const groupedFields = formFields.reduce((groups, field) => {

3
src/Routes/Routes.js
View File

@@ -50,7 +50,8 @@ export const RouteLink = [
{ path: "/investment-type/edit-investment/:id", Component: EditInvestmentType },
// ===============[ IO Management]===============
{ path: "/create-io", Component: CreateIO },
{ path: "/create-io/:id", Component: CreateIO },
{ path: "/create-io/", Component: CreateIO },
{ path: "/view-io", Component: ViewIOTable },
{ path: "/view-io/:id", Component: ViewIOdata },