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

marged 26-07

Browse Source
This commit is contained in:
YasinShaikh123
2024-07-26 12:21:19 +05:30
parent 98ce2faaf9 ab36560498
commit f1cf1bc008
32 changed files with 2232 additions and 1294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Components/DataTable/DataTable.jsx
View File

@@ -130,6 +130,7 @@ const DataTable = ({
textOverflow: "ellipsis",
}}
className="web-text-small"
w={400}
>
<Skeleton display={'flex'} alignItems={'center'} justifyContent={tableHeadRow.length - 1 === i || centered ? "center" : "start"} h={5} fadeDuration={index / 12} isLoaded={!isLoading}>
{item[heading]}

2
src/Components/EmptySearchList.jsx
View File

@@ -9,7 +9,7 @@ const EmptySearchList = ({message}) => {
justifyContent={'center'}
alignItems={'center'}
flexDirection={'column'}
w={"100%"} h={"80vh"}
w={"100%"} h={"40vh"}
>
<Image w={200} mb={8} src={EmptySearchListImage} alt='empty list' />
<Text className=" fw-bold fs-5" >{message}</Text>

99
src/Components/FormField.jsx
View File

@@ -28,7 +28,6 @@ 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 formatDate = (dateString) => {
@@ -43,7 +42,6 @@ const defaultDate = "8/2/2024";
// Format the default date as YYYY-MM-DD
const formattedDate = formatDate(defaultDate);
console.log(formattedDate);
const FormField = ({
label,
@@ -67,6 +65,8 @@ const FormField = ({
width,
value,
handleInputChange,
align,
maxLength,
...props
}) => (
<FormControl
@@ -121,7 +121,7 @@ const FormField = ({
resize={"none"}
rows={2}
bg={"#F5F8F6"}
maxLength={150} // Set the maximum character limit
maxLength={maxLength} // Set the maximum character limit
/>
);
} else if (type === "checkbox") {
@@ -381,14 +381,35 @@ const FormField = ({
} else if (type === "table") {
return (
<Table w={"100%"} variant="simple">
<Thead >
<Tr >
{value.map((item, index) => (
<Th
border={'none'} p={2} textTransform={"none"} key={index}>
<Box as="span" display={'flex'} alignItems={'center'} gap={2} >
<Image opacity={0.9} rounded={'full'} w={5} h={5} src={item?.logo} />
{item.country}
<Thead>
<Tr>
{value?.map((item, index) => (
<Th
border={"none"}
p={2}
textTransform={"none"}
key={index}
>
<Box
as="span"
display={"flex"}
alignItems={"center"}
gap={2}
>
<Image
objectFit={"cover"}
opacity={0.9}
rounded={"full"}
w={6}
h={6}
src={
" https://admin.tanami.betadelivery.com/" +
item?.logo
}
/>
{item.country === "United Arab Emirates"
? "UAE"
: item.country}
</Box>
</Th>
))}
@@ -396,9 +417,9 @@ const FormField = ({
</Thead>
<Tbody>
<Tr>
{value.map((item, index) => (
{value?.map((item, index) => (
<Td
p={2}
p={2}
color={"gray.600"}
style={{
whiteSpace: "nowrap",
@@ -406,30 +427,34 @@ const FormField = ({
}}
className="web-text-small"
key={index}
border={'none'}
border={"none"}
>
<InputGroup size='sm'>
<Input
bg={"#F5F8F6"}
focusBorderColor="forestGreen.300"
// border="1px solid #000"
size={"sm"}
fontSize={"sm"}
rounded={"sm"}
type="number"
value={item.value}
textAlign={"right"}
placeholder={"00.00"}
onChange={(e) =>
handleInputChange(index, e.target.value)
}
border={"1px solid #e2e8f0"}
/>
<InputRightAddon fontSize={"xs"} fontWeight={600} color={"forestGreen.500"}>{item?.curr}</InputRightAddon>
</InputGroup>
<InputGroup size="sm">
<Input
isRequired={true}
bg={"#F5F8F6"}
focusBorderColor="forestGreen.300"
// border="1px solid #000"
size={"sm"}
fontSize={"sm"}
rounded={"sm"}
type="number"
value={item.value}
textAlign={"right"}
placeholder={"00.00"}
onChange={(e) =>
handleInputChange(index, e.target.value)
}
border={"1px solid #e2e8f0"}
/>
<InputRightAddon
fontSize={"xs"}
fontWeight={600}
color={"forestGreen.500"}
>
{item?.curr}
</InputRightAddon>
</InputGroup>
</Td>
))}
</Tr>
@@ -448,7 +473,7 @@ const FormField = ({
{...field}
{...props}
placeholder={placeHolder ? placeHolder : label}
textAlign={arabic || type === "number" ? "right" : "left"}
textAlign={arabic || type === "number" ? "right" : align ? align : "left"}
_placeholder={{ fontSize: "sm" }}
min={type === "date" ? today : undefined}
defaultValue={type === "date" ? new Date(value) : undefined}

7
src/Components/FormInputMain.jsx
View File

@@ -17,6 +17,7 @@ const FormInputMain = ({
w,
btnLoading,
btnhidden,
}) => {
return (
<Box mt={0} as="form" onSubmit={onSubmit}>
@@ -56,7 +57,9 @@ const FormInputMain = ({
multiple,
width,
value,
handleInputChange
handleInputChange,
align,
maxLength
},
key
) => (
@@ -82,6 +85,8 @@ const FormInputMain = ({
width={width}
value={value}
handleInputChange={handleInputChange}
align={align}
maxLength={maxLength}
/>
)
)}

124
src/Components/FormInputView.jsx
View File

@@ -1,4 +1,4 @@
import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
import { Box, Button, Divider, FormLabel, Heading, Image, Input, InputGroup, InputRightAddon, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
import React from "react";
const FormInputView = ({
@@ -9,7 +9,6 @@ const FormInputView = ({
onSubmit,
children,
}) => {
return (
<form>
{Object?.entries(groupedFields, groupedFieldsTwo).map(
@@ -19,21 +18,112 @@ const FormInputView = ({
{section}
</Heading>
{/* <Box display={"flex"} gap={0}> */}
<Box
width={"100%"}
display={"flex"}
flexWrap={"wrap"}
gap={4}
>
{fields.map(({ value, label, id, width, btn, arabic, type }, key) => (
<Box w={!width ? "49%" : width}>
<FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
{label}
</FormLabel>
<FormLabel border={'1px solid #E4EAF1'} bg={'#ccc3'} p={2} pt={1.5} pb={1.5} rounded={'xs'} textAlign={arabic? 'right':'left'} fontSize={'sm'}>{type==="number" ? value+" /-" : value }</FormLabel>
</Box>
))}
</Box>
<Box width={"100%"} display={"flex"} flexWrap={"wrap"} gap={4}>
{fields.map(
({ value, label, id, width, btn, arabic, type, align }, key) =>
type === "table" ? (
<Table w={"100%"} variant="simple">
<Thead>
<Tr>
{value?.map((item, index) => (
<Th
border={"none"}
p={2}
textTransform={"none"}
key={index}
>
<Box
as="span"
display={"flex"}
alignItems={"center"}
gap={2}
>
<Image
objectFit={"cover"}
opacity={0.9}
rounded={"full"}
w={6}
h={6}
src={
" https://admin.tanami.betadelivery.com/" +
item?.logo
}
/>
{item.country === "United Arab Emirates"
? "UAE"
: item.country}
</Box>
</Th>
))}
</Tr>
</Thead>
<Tbody>
<Tr>
{value?.map((item, index) => (
<Td
p={2}
color={"gray.600"}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
key={index}
border={"none"}
>
<InputGroup size="sm">
<Input
readOnly={true}
isRequired={true}
bg={"#F5F8F6"}
focusBorderColor="forestGreen.300"
// border="1px solid #000"
size={"sm"}
fontSize={"sm"}
rounded={"sm"}
type="number"
value={item.value}
textAlign={"right"}
placeholder={"00.00"}
// color={"#000"}
color={"#1A202C"}
fontWeight={500}
border={"1px solid #e2e8f0"}
/>
<InputRightAddon
fontSize={"xs"}
fontWeight={600}
color={"forestGreen.500"}
>
{item?.curr}
</InputRightAddon>
</InputGroup>
</Td>
))}
</Tr>
</Tbody>
</Table>
) : (
<Box w={!width ? "49%" : width}>
<FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
{label}
</FormLabel>
<FormLabel
border={"1px solid transparent"}
bg={"#ccc3"}
p={2}
pt={1.5}
pb={1.5}
rounded={"xs"}
textAlign={arabic ? "right" : align? align : "left"}
fontSize={"sm"}
>
{type === "number" ? value : value}
</FormLabel>
</Box>
)
)}
</Box>
{/* </Box> */}
{index <
Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (

4
src/Constants/Constants.js
View File

@@ -1,6 +1,6 @@
export const getFileNameFromPath = (filePath) => {
const parts = filePath.split("/");
return parts[parts.length - 1];
const parts = filePath?.split("/");
return parts?.[parts?.length - 1];
};
export function debounce(func, delay) {

420
src/Contexts/GlobalStateProvider.jsx
View File

@@ -20,12 +20,11 @@ const getRandomDate = (start, end) => {
const startDate = new Date(2020, 0, 1); // January 1, 2020
const endDate = new Date(); // Current date
export const generateUniqueId = () => {
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const digits = '0123456789';
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const digits = "0123456789";
let id = '';
let id = "";
// Generate three random uppercase letters
for (let i = 0; i < 3; i++) {
@@ -38,7 +37,7 @@ export const generateUniqueId = () => {
}
return id;
}
};
const GlobalStateProvider = ({ children }) => {
const [isAuthenticate, setIsAuthenticate] = useState(false);
@@ -47,7 +46,8 @@ const GlobalStateProvider = ({ children }) => {
const [slideFromRight, setSlideFormRight] = useState(false);
const { colorMode, toggleColorMode } = useColorMode();
const [sponser, setSponser] = useState([]);
const [ioStatus, setIoStatus] = useState([]);
const [investors, setInvestors] = useState([
{
id: 1,
@@ -523,216 +523,216 @@ const GlobalStateProvider = ({ children }) => {
const [InvestorDetails, setInvestorDetails] = useState([
{
id: 1,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Completed",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Completed",
status: "Unban",
},
{
id: 2,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Incompleted",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Incompleted",
status: "Unban",
},
{
id: 3,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Completed",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Completed",
status: "Unban",
},
{
id: 4,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Incompleted",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Incompleted",
status: "Unban",
},
{
id: 5,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Completed",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Completed",
status: "Unban",
},
{
id: 6,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Completed",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Completed",
status: "Unban",
},
{
id: 7,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Incompleted",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Incompleted",
status: "Unban",
},
{
id: 8,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Incompleted",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Incompleted",
status: "Unban",
},
{
id: 9,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Completed",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Completed",
status: "Unban",
},
{
id: 10,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
clientId: "SA00000001",
fullName: "John David",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
address:"Saudi Arabia",
address: "Saudi Arabia",
emailID: "john@gmail.com",
bankName:"Lorem Text",
branchAddress:"Hohenzollernring 58, 95444",
iban:"DE 1234 5678 9012 3456",
swiftCode:"BC12345",
referenceID:"FRYU FHDU 1234",
kycStatus:"Completed",
status:"Unban",
bankName: "Lorem Text",
branchAddress: "Hohenzollernring 58, 95444",
iban: "DE 1234 5678 9012 3456",
swiftCode: "BC12345",
referenceID: "FRYU FHDU 1234",
kycStatus: "Completed",
status: "Unban",
},
]);
const [viewInvestor, setViewInvestor] = useState([
{
id: 1,
dealId:"UWE3424992",
dealId: "UWE3424992",
dealName: "KKR Private Equity Fund",
sponsorName: "KKR",
investAmount: "$100,000",
holdingPeriod: "4-5 years",
estimatedReturn:"50-60%",
kycStatus:"Open",
estimatedReturn: "50-60%",
kycStatus: "Open",
},
{
id: 2,
dealId:"UWE3424992",
dealId: "UWE3424992",
dealName: "Blackstone Real Estate Income Trust",
sponsorName: "Blackstone",
investAmount: "$100,000",
holdingPeriod: "4-5 years",
estimatedReturn:"50-60%",
kycStatus:"Pending",
estimatedReturn: "50-60%",
kycStatus: "Pending",
},
{
id: 3,
dealId:"UWE3424992",
dealId: "UWE3424992",
dealName: "J.P. Morgan",
sponsorName: "J.P. Morgan",
investAmount: "$100,000",
holdingPeriod: "4-5 years",
estimatedReturn:"50-60%",
kycStatus:"Closed",
estimatedReturn: "50-60%",
kycStatus: "Closed",
},
]);
@@ -770,7 +770,7 @@ const GlobalStateProvider = ({ children }) => {
const [pendingRequest, setPendingRequest] = useState([
{
id: 1,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -778,11 +778,11 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "SAR",
withDrawalAmount: "$100,000",
amountcurrency:"382574.17",
amountcurrency: "382574.17",
},
{
id: 2,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
@@ -790,11 +790,11 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "KWD",
withDrawalAmount: "$200,000",
amountcurrency:"62438.98",
amountcurrency: "62438.98",
},
{
id: 3,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
@@ -802,11 +802,11 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "BHD",
withDrawalAmount: "$300,000",
amountcurrency:"115328.04",
amountcurrency: "115328.04",
},
{
id: 4,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",
@@ -814,13 +814,13 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "SAR",
withDrawalAmount: "$400,000",
amountcurrency:"1530296.67",
amountcurrency: "1530296.67",
},
]);
const [viewHistory, setViewHistory] = useState([
{
id: 1,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -828,12 +828,12 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "SAR",
withDrawalAmount: "$100,000",
amountcurrency:"382574.17",
status:"Approved",
amountcurrency: "382574.17",
status: "Approved",
},
{
id: 2,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
@@ -841,12 +841,12 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "KWD",
withDrawalAmount: "$200,000",
amountcurrency:"62438.98",
status:"Rejected",
amountcurrency: "62438.98",
status: "Rejected",
},
{
id: 3,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
@@ -854,12 +854,12 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "BHD",
withDrawalAmount: "$300,000",
amountcurrency:"115328.04",
status:"Approved",
amountcurrency: "115328.04",
status: "Approved",
},
{
id: 4,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",
@@ -867,8 +867,8 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "SAR",
withDrawalAmount: "$400,000",
amountcurrency:"1530296.67",
status:"Rejected",
amountcurrency: "1530296.67",
status: "Rejected",
},
]);
const [upgradeHistory, setUpgradeHistory] = useState([
@@ -1342,12 +1342,12 @@ const GlobalStateProvider = ({ children }) => {
},
]);
const [ IODetails, setIODetails ] = useState({})
const [IODetails, setIODetails] = useState({});
const [depositRequest, setDepositRequest] = useState([
{
id: 1,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1355,13 +1355,13 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "SAR",
depositAmount: "$100,000",
fees:"$2,000",
totalAmount:"$102,000",
amountcurrency:"382574.17",
fees: "$2,000",
totalAmount: "$102,000",
amountcurrency: "382574.17",
},
{
id: 2,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
@@ -1369,13 +1369,13 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "KWD",
depositAmount: "$200,000",
fees:"$4,000",
totalAmount:"$204,000",
amountcurrency:"62438.98",
fees: "$4,000",
totalAmount: "$204,000",
amountcurrency: "62438.98",
},
{
id: 3,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
@@ -1383,13 +1383,13 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "BHD",
depositAmount: "$300,000",
fees:"$6,000",
totalAmount:"$306,000",
amountcurrency:"115328.04",
fees: "$6,000",
totalAmount: "$306,000",
amountcurrency: "115328.04",
},
{
id: 4,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",
@@ -1397,16 +1397,16 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "SAR",
depositAmount: "$400,000",
fees:"$8,000",
totalAmount:"$408,000",
amountcurrency:"1530296.67",
fees: "$8,000",
totalAmount: "$408,000",
amountcurrency: "1530296.67",
},
]);
const [depositHistory, setDepositHistory] = useState([
{
id: 1,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1414,14 +1414,14 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "SAR",
depositAmount: "$100,000",
fees:"$2,000",
totalAmount:"$102,000",
amountcurrency:"382574.17",
status:"Approved",
fees: "$2,000",
totalAmount: "$102,000",
amountcurrency: "382574.17",
status: "Approved",
},
{
id: 2,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
@@ -1429,14 +1429,14 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "KWD",
depositAmount: "$200,000",
fees:"$4,000",
totalAmount:"$204,000",
amountcurrency:"62438.98",
status:"Rejected"
fees: "$4,000",
totalAmount: "$204,000",
amountcurrency: "62438.98",
status: "Rejected",
},
{
id: 3,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
@@ -1444,14 +1444,14 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8940035906",
currency: "BHD",
depositAmount: "$300,000",
fees:"$6,000",
totalAmount:"$306,000",
amountcurrency:"115328.04",
status:"Approved"
fees: "$6,000",
totalAmount: "$306,000",
amountcurrency: "115328.04",
status: "Approved",
},
{
id: 4,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",
@@ -1459,17 +1459,17 @@ const GlobalStateProvider = ({ children }) => {
phoneNumber: "8226278945",
currency: "SAR",
depositAmount: "$400,000",
fees:"$8,000",
totalAmount:"$408,000",
amountcurrency:"1530296.67",
status:"Rejected"
fees: "$8,000",
totalAmount: "$408,000",
amountcurrency: "1530296.67",
status: "Rejected",
},
]);
const [bankInvestor, setBankInvestor] = useState([
{
id: 1,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1480,7 +1480,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 2,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1491,7 +1491,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 3,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1502,7 +1502,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 4,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1513,7 +1513,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 5,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1524,7 +1524,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 6,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1535,7 +1535,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 7,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1546,7 +1546,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 8,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1557,7 +1557,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 9,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1568,7 +1568,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 10,
date:"02-Jan-2024",
date: "02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1579,42 +1579,42 @@ const GlobalStateProvider = ({ children }) => {
},
]);
const [manageAcademy , setManageAcademy] = useState([
const [manageAcademy, setManageAcademy] = useState([
{
id: 1,
header:"Investing in Private Equity",
header: "Investing in Private Equity",
content: "Private equity investing involve...",
bannerImage: "John",
},
{
id: 2,
header:"Investing in Private Equity",
header: "Investing in Private Equity",
content: "Private equity investing involve...",
bannerImage: "John",
},
{
id: 3,
header:"Investing in Private Equity",
header: "Investing in Private Equity",
content: "Private equity investing involve...",
bannerImage: "John",
},
])
]);
const [manageVideo , setManageVideo] = useState([
const [manageVideo, setManageVideo] = useState([
{
id: 1,
name:"Investing in Private Equity",
name: "Investing in Private Equity",
videoUploaded: "Video.mp4",
},
])
]);
const [academicDocuments , setAcademicDocuments] = useState([
const [academicDocuments, setAcademicDocuments] = useState([
{
id: 1,
fullName:"Investing in Private Equity",
fullName: "Investing in Private Equity",
document: "Video.mp4",
},
])
]);
return (
<GlobalStateContext.Provider
@@ -1661,11 +1661,11 @@ const GlobalStateProvider = ({ children }) => {
setKeyMerits,
iOArtifacts,
setIOArtifacts,
iOArtifactsTwo,
setIOArtifactsTwo,
investors,
setInvestors,IODetails, setIODetails,
navDetails,
investors,
setInvestors,
IODetails,
setIODetails,
navDetails,
setNavDetails,
caseDetails,
setCaseDetails,
@@ -1683,6 +1683,10 @@ const GlobalStateProvider = ({ children }) => {
setManageVideo,
academicDocuments,
setAcademicDocuments,
iOArtifactsTwo,
setIOArtifactsTwo,
ioStatus,
setIoStatus,
}}
>
{children}

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

@@ -14,72 +14,14 @@ import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the cor
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"),
ioNameArabic: yup.string().required("IO name arabic is required"),
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.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"),
ioStartusArabic: yup.string().required("Sponser 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"),
});
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
const CreateIO = () => {
const id = useParams()?.id;
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
});
const { data, error, isLoading } = useGetIOprepopulateDataQuery();
// console.log(data?.data);
const enableNextTab = (index) => {
setTabs((prevTabs) => {
@@ -96,55 +38,55 @@ const CreateIO = () => {
{
label: "IO Details",
Content: IODetails,
isDisabled: id ? false : false ,
isDisabled: id ? false : false,
},
{
label: "Investment documents",
Content: InvestmentDocument,
isDisabled: id ? false : true ,
isDisabled: id ? false : true,
},
{
label: "Key merits",
Content: KeyMerits,
isDisabled: id ? false : true ,
isDisabled: id ? false : true,
},
{
label: "IO artifacts",
Content: IOArtifacts,
isDisabled: id ? false : true ,
isDisabled: id ? false : true,
},
{
label: "Investors",
Content: Investors,
isDisabled: id ? false : false ,
isDisabled: id ? false : false,
},
{
label: "IO Cash Details",
Content: IOCashDetails,
isDisabled: id ? false : false ,
isDisabled: id ? false : false,
},
{
label: "IO NAV Details",
Content: IONAVDetails,
isDisabled: id ? false : false ,
isDisabled: id ? false : false,
},
];
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} w={"100%"} overflowY={"scroll"} overflowX={'hidden'} height={"100vh"} pb={10}>
<Box paddingInline={"12px"} mt={2} >
return isLoading ? (
<FullscreenLoaders />
) : (
<Box
{...OPACITY_ON_LOAD}
w={"100%"}
overflowY={"scroll"}
overflowX={"hidden"}
height={"100vh"}
pb={10}
>
<Box paddingInline={"12px"} mt={2}>
{/* <span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
@@ -177,10 +119,7 @@ const CreateIO = () => {
<TabPanels>
{tabs.map(({ Content }, index) => (
<TabPanel key={index}>
<Content
index={index}
enableNextTab={enableNextTab}
/>
<Content index={index} enableNextTab={enableNextTab} data={data?.data} />
</TabPanel>
))}
</TabPanels>

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

@@ -14,46 +14,59 @@ import DataTable from "../../../Components/DataTable/DataTable";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { debounce } from "../../Master/Sponser/AddSponser";
import { AddIcon, DeleteIcon, EditIcon, ExternalLinkIcon, ViewIcon } from "@chakra-ui/icons";
import {
AddIcon,
DeleteIcon,
EditIcon,
ExternalLinkIcon,
ViewIcon,
} from "@chakra-ui/icons";
import IOArtifactsAdd from "../IOArtifactsAdd";
import IOArtifactsVideo from "../IOArtifactsVideo";
import ArtifactsEditImage from "./ArtifactsEditImage";
import ArtifactsEditVideo from "./ArtifactsEditVideo";
import IOArtifactsVideo from "./IOArtifactsVideo";
import SetDisplayOrder from "./SetDisplayOrder";
import { useParams } from "react-router-dom";
import {
useDeleteVideoArtifactsMutation,
useGetIOByIdQuery,
} from "../../../Services/io.service";
import { getFileNameFromPath } from "../../../Constants/Constants";
const IOArtifacts = ({ enableNextTab, index, data }) => {
const params = useParams();
const id = params?.id;
const {
data: IObyID,
isLoading: IObyIDisLoading,
error: IObyIDerror,
} = useGetIOByIdQuery(id, { skip: !id });
console.log(IObyID?.data?.artifactsImage);
console.log(IObyID?.data?.artifactsVideo);
const IOArtifacts = ({ enableNextTab, index }) => {
const { iOArtifacts, setIOArtifacts, slideFromRight } =
useContext(GlobalStateContext);
const { iOArtifactsTwo, setIOArtifactsTwo } = useContext(GlobalStateContext);
const firstField = useRef();
const secondField = useRef();
const threeField = useRef();
const fourField = useRef();
const [searchTerm, setSearchTerm] = useState("");
const [searchTermTwo, setSearchTermTwo] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [isLoadingBtn, setIsLoadingBtn] = useState(false);
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 [deleteVideoArtifacts] = useDeleteVideoArtifactsMutation();
const {
isOpen: isOpenVideo,
onOpen: onOpenVideo,
onClose: onCloseVideo,
} = useDisclosure();
const {
isOpen: isOpenEditImage,
onOpen: onOpenEditImage,
onClose: onCloseEditImage,
} = useDisclosure();
const {
isOpen: isOpenEditVideo,
onOpen: onOpenEditVideo,
onClose: onCloseEditVideo,
} = useDisclosure();
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
@@ -84,30 +97,50 @@ const IOArtifacts = ({ enableNextTab, index }) => {
});
}, 300);
const filteredData = iOArtifacts?.filter((item) => {
const name = item.fileName;
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 handleDeleteVideo = async (id) => {
setIsLoadingBtn(true);
try {
const res = await deleteVideoArtifacts(id);
console.log(res?.data?.statusCode);
if (res?.data?.statusCode === 200) {
setDeleteAlert(false);
onCloseVideo();
setIsLoadingBtn(false);
}
} catch (error) {
console.log(error);
}
};
const tableHeadRow = ["Sr.no", "File Name", "Document", "Action"];
const extractedArray = filteredData?.map((item, index) => ({
const handleDeleteImage = async (id) => {
setIsLoadingBtn(true);
try {
const res = await deleteVideoArtifacts(id);
console.log(res?.data?.statusCode);
if (res?.data?.statusCode === 200) {
setDeleteAlert(false);
onCloseVideo();
setIsLoadingBtn(false);
}
} catch (error) {
console.log(error);
}
};
const tableHeadRow = [
"Sr.no",
"File Name",
// "Document",
"View image",
"Action",
];
const extractedArray = IObyID?.data?.artifactsImage?.map((item, index) => ({
"Sr.no": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
@@ -122,7 +155,7 @@ const IOArtifacts = ({ enableNextTab, index }) => {
"File Name": (
<Box isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.fileName}
{item.artifactName}
</Text>
</Box>
),
@@ -134,112 +167,10 @@ const IOArtifacts = ({ enableNextTab, index }) => {
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.document}
{getFileNameFromPath(item.artifactPathName)}
</Text>
),
Action: (
<Box display={"flex"} justifyContent={"center"} gap={3}>
<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
onClick={onOpenEditImage}
_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>
),
}));
const filteredDataTwo = iOArtifactsTwo?.filter((item) => {
const name = item.videoFileName;
const searchLower = searchTermTwo.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
});
const tableHeadRowTwo = [
"Sr.no",
"File Name",
"Video streaming uRL",
"Action",
];
const extractedArrayTwo = filteredDataTwo?.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>
),
"File Name": (
<Box isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.videoFileName}
</Text>
</Box>
),
"Video streaming uRL": (
"View image": (
<Text
color={"green.500"}
justifyContent={slideFromRight ? "right" : "left"}
@@ -247,9 +178,19 @@ const IOArtifacts = ({ enableNextTab, index }) => {
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
<Badge px={2} py={0.5} display={"flex"} alignItems={"center"} textTransform={"inherit"} fontWeight={500} colorScheme={"forestGreen"}>
<Badge
px={2}
py={0.5}
display={"flex"}
alignItems={"center"}
textTransform={"inherit"}
fontWeight={500}
colorScheme={"forestGreen"}
>
<Link
href="https://download-video.akamaized.net/v3-1/playback/cc4f87a6-7108-4fd9-9f2a-566d7a65c4fe/3477452e-ca82bc8c?__token__=st=1721904282~exp=1721918682~acl=%2Fv3-1%2Fplayback%2Fcc4f87a6-7108-4fd9-9f2a-566d7a65c4fe%2F3477452e-ca82bc8c%2A~hmac=1e161e351153d7e16b47019c9a65f684ef601b105a080707c0f0520fd0816371&r=dXMtZWFzdDE%3D"
href={
"https://admin.tanami.betadelivery.com/" + item?.artifactPathName
}
isExternal
>
<Box as="span">View</Box> <ExternalLinkIcon />
@@ -259,7 +200,7 @@ const IOArtifacts = ({ enableNextTab, index }) => {
),
Action: (
<Box display={"flex"} justifyContent={"center"} gap={3}>
<Tooltip
{/* <Tooltip
rounded={"sm"}
fontSize={"xs"}
label="View"
@@ -279,7 +220,7 @@ const IOArtifacts = ({ enableNextTab, index }) => {
>
<ViewIcon />
</Button>
</Tooltip>
</Tooltip> */}
<Tooltip
rounded={"sm"}
fontSize={"xs"}
@@ -289,7 +230,6 @@ const IOArtifacts = ({ enableNextTab, index }) => {
placement="top"
>
<Button
onClick={onOpenEditVideo}
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
@@ -325,22 +265,146 @@ const IOArtifacts = ({ enableNextTab, index }) => {
),
}));
const tableHeadRowTwo = [
"Sr.no",
"File Name",
"Video streaming uRL",
"Action",
];
const extractedArrayTwo = IObyID?.data?.artifactsVideo?.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>
),
"File Name": (
<Box isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.artifactName}
</Text>
</Box>
),
"Video streaming uRL": (
<Text
color={"green.500"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
<Badge
px={2}
py={0.5}
display={"flex"}
alignItems={"center"}
textTransform={"inherit"}
fontWeight={500}
colorScheme={"forestGreen"}
>
<Link href={item?.artifactStreamingURL} isExternal>
<Box as="span">View</Box> <ExternalLinkIcon />
</Link>
</Badge>
</Text>
),
Action: (
<Box display={"flex"} justifyContent={"center"} gap={3}>
{/* <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}>
<Box fontSize={'sm'} fontWeight={500}>
<Box fontSize={"sm"} fontWeight={500}>
Manage iO images
</Box>
<Button
leftIcon={<AddIcon />}
onClick={onOpen}
size={"sm"}
fontSize={"xs"}
rounded={"sm"}
colorScheme={"forestGreen"}
>
Add artifacts
</Button>
{/ <Box display="flex" justifyContent="end" mb={4} gap={2}> /}
<HStack>
<SetDisplayOrder data={IObyID?.data?.artifactsImage} />
<Button
leftIcon={<AddIcon />}
onClick={onOpen}
size={"sm"}
fontSize={"xs"}
rounded={"sm"}
colorScheme={"forestGreen"}
>
Add Images
</Button>
</HStack>
<IOArtifactsAdd
isOpen={isOpen}
onClose={onClose}
@@ -358,25 +422,29 @@ const IOArtifacts = ({ enableNextTab, index }) => {
setMouseEntered={setMouseEntered}
/>
<Box display={"flex"} justifyContent={"space-between"} mb={4}>
<Box fontSize={'sm'} fontWeight={500}>
<Box fontSize={"sm"} fontWeight={500}>
Manage IO videos
</Box>
<Button
leftIcon={<AddIcon />}
onClick={onOpenVideo}
size={"sm"}
fontSize={"xs"}
rounded={"sm"}
colorScheme={"forestGreen"}
>
Add artifacts
</Button>
<HStack>
<SetDisplayOrder data={IObyID?.data?.artifactsImage} />
<Button
leftIcon={<AddIcon />}
onClick={onOpenVideo}
size={"sm"}
fontSize={"xs"}
rounded={"sm"}
colorScheme={"forestGreen"}
>
Add Videos
</Button>
</HStack>
<IOArtifactsVideo
isOpen={isOpenVideo}
onClose={onCloseVideo}
secondField={secondField}
/>
</Box>
</Box>
<DataTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRowTwo}
@@ -395,19 +463,9 @@ const IOArtifacts = ({ enableNextTab, index }) => {
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
message={"Are you sure you want to delete sponers?"}
alertHandler={handleDelete}
isLoading={isLoading}
alertHandler={() => handleDeleteVideo(actionId)}
isLoading={isLoadingBtn}
/>
<ArtifactsEditImage
isOpen={isOpenEditImage}
onClose={onCloseEditImage}
threeField={threeField}
/>
<ArtifactsEditVideo
isOpen={isOpenEditVideo}
onClose={onCloseEditVideo}
fourField={fourField}
/>
</Box>
);
};

174
src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx Normal file
View File

@@ -0,0 +1,174 @@
import {
Box,
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
FormControl,
FormErrorMessage,
FormLabel,
Input,
Stack,
useToast,
} from "@chakra-ui/react";
import * as yup from "yup";
import React, { useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { v4 as uuidv4 } from "uuid";
import { useCreateVideoArtifactsMutation, useDeleteVideoArtifactsMutation } from "../../../Services/io.service";
import { useParams } from "react-router-dom";
import ToastBox from "../../../Components/ToastBox";
const investmentVideoSchema = yup.object().shape({
artifactName: yup.string().required("Artifact name is required"),
artifactStreamingURL: yup.string().required("Artifact streaming URL is required").url("Invalid URL format"),
});
const IOArtifactsAdd = ({ isOpen, onClose, firstField }) => {
const params = useParams()
const id = params?.id
const [file, setFile] = useState("");
const [fileName, setFileName] = useState("");
const [ isLoading, setIsLoading] = useState(false)
const [alert, setAlert] = useState(false);
const toast = useToast();
const [ createArtifactsVideo ] = useCreateVideoArtifactsMutation()
// const {
// data
// } = useGetArtifactsQuery(id)
const {
control,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(investmentVideoSchema),
});
const onSubmit = async (data) => {
setIsLoading(true)
try {
const res = await createArtifactsVideo({data, id})
if (res?.data?.statusCode === 200) {
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
reset()
setAlert(false);
setIsLoading(false)
onClose();
}
} catch (error) {
console.log(error);
}
};
const handleConfirm = () => {
handleSubmit(onSubmit)();
};
const handleSave = () => {
handleSubmit(onSubmit)();
};
const handleClose = () => {
onClose()
reset()
}
return (
<>
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
onClose={handleClose}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>IO Artifacts Image</DrawerHeader>
<DrawerBody>
<Stack spacing={4}>
<FormControl isInvalid={errors.artifactName}>
<FormLabel fontSize={"sm"}>Artifact Name</FormLabel>
<Controller
name="artifactName"
control={control}
render={({ field }) => (
<Input {...field} fontSize={"sm"} type="text" size={"sm"} />
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.artifactName?.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={errors.artifactStreamingURL}>
<FormLabel fontSize={"sm"}>Artifact Streaming URL</FormLabel>
<Controller
name="artifactStreamingURL"
control={control}
render={({ field }) => (
<Input {...field} fontSize={"sm"} type="url" size={"sm"} />
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.artifactStreamingURL?.message}
</FormErrorMessage>
</FormControl>
</Stack>
</DrawerBody>
<DrawerFooter>
<Button
variant="outline"
colorScheme={"green"}
rounded={"sm"}
size={"sm"}
mr={3}
onClick={handleClose}
>
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 artifact?"}
isLoading={isLoading}
/>
</>
);
};
export default IOArtifactsAdd;

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

@@ -15,15 +15,24 @@ import {
useUpdateIOMutation,
} from "../../../Services/io.service";
import ToastBox from "../../../Components/ToastBox";
import { Input, Table, Tbody, Td, Th, Thead, Tr, useToast } from "@chakra-ui/react";
import {
Input,
Table,
Tbody,
Td,
Th,
Thead,
Tr,
useToast,
} from "@chakra-ui/react";
import { formatDate } from "../../Master/Sponser/Sponsers";
import behrain from "../../../assets/bahrain_flag.png"
import kuwait from "../../../assets/kuwait_flag.png"
import oman from "../../../assets/oman_flag.png"
import qatar from "../../../assets/qatar_flag.png"
import uae from "../../../assets/uae_flag.png"
import saudi from "../../../assets/saudi_arabia_flag.png"
import behrain from "../../../assets/bahrain_flag.png";
import kuwait from "../../../assets/kuwait_flag.png";
import oman from "../../../assets/oman_flag.png";
import qatar from "../../../assets/qatar_flag.png";
import uae from "../../../assets/uae_flag.png";
import saudi from "../../../assets/saudi_arabia_flag.png";
const schema = yup.object().shape({
investmentNameEnglish: yup
@@ -42,13 +51,13 @@ const schema = yup.object().shape({
.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"),
.max(1000, "Description in English must be at most 1000 characters long"),
descriptionArabic: 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"),
.max(2000, "Description in Arabic must be at most 500 characters long"),
goalAmount: yup
.number()
@@ -61,9 +70,7 @@ const schema = yup.object().shape({
.required("Closing date is required")
.min(new Date(), "Closing date cannot be in the past"),
holdingPeriod: yup
.string()
.required("Holding period is required"),
holdingPeriod: yup.string().required("Holding period is required"),
// minInvestmentAmount: yup
// .number()
@@ -75,7 +82,9 @@ const schema = yup.object().shape({
InvestmentDetails: yup.string(),
comment: yup.string(),
comment: yup.string()
.min(10, "Comment must be at least 10 characters long")
.max(150, "Comment must be at most 150 characters long"),
expectedReturn: yup
.number()
@@ -85,52 +94,13 @@ const schema = yup.object().shape({
});
const miniValue = [
{
country: "Behrain",
value: 1220,
logo: behrain,
curr:"BHD"
},
{
country: "Kuwait",
value: 1220,
logo: kuwait,
curr:"KWD"
},
{
country: "Oman",
value: 1220,
logo: oman,
curr:"OMR"
},
{
country: "Qatar",
value: 1220,
logo: qatar,
curr:"QAR"
},
{
country: "Saudi Arabia",
value: 1220,
logo: saudi,
curr:"SAR"
},
{
country: "UAE",
value: 1220,
logo: uae,
curr:"AED"
},
]
const IODetails = ({ enableNextTab, index, data }) => {
const IODetails = ({ enableNextTab, index }) => {
const params = useParams();
const navigate = useNavigate();
const toast = useToast();
const [values, setValues] = useState(miniValue);
console.log(values);
const handleInputChange = (index, newValue) => {
const updatedValues = [...values];
@@ -149,28 +119,20 @@ const IODetails = ({ enableNextTab, index }) => {
useContext(GlobalStateContext);
// ======================[ RTK Querry Api ]
const {
data: investmentTypes,
isLoading: investmentTypesLoading,
error,
} = useGetInvestmentTypesQuery({ page: 1, size: 10 })
const {
data: activeSponsers,
isLoading: activeSponsersIsLoading,
error: activeSponsersError,
} = useGetActiveSponserMasterQuery();
const {
data: IObyID,
isLoading: IObyIDisLoading,
error: IObyIDerror,
} = useGetIOByIdQuery(id, { skip: !id });
const [creatIO] = useCreateIOMutation();
const [updateIO] = useUpdateIOMutation();
// ======================[ Selector filter ]
const investmentTypeOptions = investmentTypes?.data?.rows?.map(
const investmentTypeOptions = data?.investmentType.map(
({ investmentTypeName, id }) => {
return {
label: investmentTypeName,
@@ -179,13 +141,39 @@ const IODetails = ({ enableNextTab, index }) => {
}
);
const sponserNameOption = activeSponsers?.data?.map(({ sponsorName, id }) => {
const sponserNameOption = data?.sponsor?.map(({ sponsorName, id }) => {
return {
label: sponsorName,
value: Number(id),
};
});
const miniValue = data?.country?.map(
({ countryName, flagIcon, minInvestmentAmt, countryCode, id }, index) => {
return {
id:id,
country: countryName,
value: minInvestmentAmt,
logo: flagIcon,
curr: countryCode,
};
}
);
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, country_xid})=>{
return{
id:country_xid,
country: country?.countryName,
value: minInvestmentAmt,
logo: country?.flagIcon,
curr: country?.countryCode,
}
})
const [values, setValues] = useState(id?minInvestmentById:miniValue);
// console.log(values);
// ======================[ Validator filter ]
const {
control,
@@ -198,7 +186,6 @@ const IODetails = ({ enableNextTab, index }) => {
});
useEffect(() => {
setIODetails({
...IObyID?.data,
});
@@ -222,6 +209,10 @@ const IODetails = ({ enableNextTab, index }) => {
}
}, [id, IObyID]);
// const minInvestmentById =
//=======================[ Creator ]
const formFields = [
{
@@ -251,6 +242,7 @@ const IODetails = ({ enableNextTab, index }) => {
isRequired: true,
section: " ",
width: "49%",
maxLength:1000
},
{
label: "Description (Arabic)",
@@ -261,6 +253,7 @@ const IODetails = ({ enableNextTab, index }) => {
arabic: true,
section: " ",
width: "49%",
},
{
label: "Investment Type",
@@ -314,7 +307,7 @@ const IODetails = ({ enableNextTab, index }) => {
value: IObyID?.data?.holdingPeriod,
},
{
label: "Expected Return Estimated",
label: "Expected Return",
placeHolder: "$00.00",
name: "expectedReturn",
type: "number",
@@ -327,7 +320,8 @@ const IODetails = ({ enableNextTab, index }) => {
label: "ISIN",
placeHolder: "",
name: "ISIN",
type: "number",
type: "text",
align:"right",
section: " ",
width: "32.3%",
},
@@ -341,7 +335,6 @@ const IODetails = ({ enableNextTab, index }) => {
value: IObyID?.data?.InvestmentDetails,
},
{
label: "Minimum Investment",
placeHolder: "Enter comment here",
@@ -349,14 +342,13 @@ const IODetails = ({ enableNextTab, index }) => {
type: "table",
section: " ",
width: "100%",
isRequired:true,
isRequired: true,
options: investmentTypeOptions,
type: "table",
handleInputChange:handleInputChange,
handleInputChange: handleInputChange,
value: values,
},
{
label: "Comment",
placeHolder: "Enter comment here",
@@ -366,6 +358,7 @@ const IODetails = ({ enableNextTab, index }) => {
width: "100%",
options: investmentTypeOptions,
value: IObyID?.data?.comment,
maxLength:150
},
];
//=======================[ Editor ]
@@ -522,57 +515,68 @@ const IODetails = ({ enableNextTab, index }) => {
return groups;
}, {});
const onSubmit = async (data) => {
setIsLoading(true)
console.log(data);
delete data.table;
setIsLoading(true);
// console.log(data);
const updatedMinAmount = values?.map(({id, value})=>{
return {
country_xid:id,
minInvestmentAmt: Number(value)
}
})
const formData = {
...data,
investmentType_xid: Number(data.investmentType),
sponsor_xid: Number(data.sponserName),
minInvestmentAmt:updatedMinAmount
};
console.log(formData);
// console.log(formData);
// console.log(formData);
if (id) {
const res = await updateIO({ data : formData, id });
const res = await updateIO({ data: formData, id });
console.log(res);
if (res?.error?.status === 400 || res?.error?.status===500 ) {
setIsLoading(false)
if (res?.data?.statusCode === 200) {
setIsLoading(false);
toast({
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
render: () => <ToastBox message={res?.data?.message} />,
});
navigate(`/view-io/${id}`);
setIsLoading(false)
enableNextTab(index);
} else if(res?.error?.status === 400){
setIsLoading(false);
toast({
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
});
}
navigate(`/view-io/${id}`);
setIsLoading(false)
} else {
try {
const res = await creatIO(formData);
console.log(res);
console.log(res?.error?.status);
if (res?.data?.statusCode === 200) {
setIsLoading(false)
setIsLoading(false);
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
navigate(`/view-io/${res?.data?.data}`);
enableNextTab(index);
} else if(res?.error?.status === 400){
setIsLoading(false);
toast({
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
});
}
} catch (error) {
setIsLoading(false)
setIsLoading(false);
console.log(error);
}
}
// ==========================
// if (params?.id) {
// return enableNextTab(index);
// }
@@ -591,7 +595,6 @@ const IODetails = ({ enableNextTab, index }) => {
return IObyIDisLoading ? (
<FullscreenLoaders />
) : (
<FormInputMain
p={0.1}
w={250}
@@ -602,8 +605,7 @@ const IODetails = ({ enableNextTab, index }) => {
onSubmit={handleSubmit(onSubmit)}
btnLoading={isLoading}
submitTitle={id ? "Update" : "Submit"}
>
</FormInputMain>
></FormInputMain>
);
};

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

@@ -26,11 +26,14 @@ import { GrDocumentPdf } from "react-icons/gr";
import { AiOutlineFileGif, AiOutlineFileWord } from "react-icons/ai";
import InvestmentView from "../ViewIO/InvestmentView";
import InvestmentEdit from "../EditIO/InvestmentEdit";
import { useDeleteIODocsMutation, useGetInvestmentDocumentsQuery } from "../../../Services/io.service";
import {
useDeleteIODocsMutation,
useGetInvestmentDocumentsQuery,
} from "../../../Services/io.service";
import ToastBox from "../../../Components/ToastBox";
import { getFileNameFromPath } from "../../../Constants/Constants";
import { TbFileTypeDocx } from "react-icons/tb";
import SetDisplayOrder from "./SetDisplayOrder";
const downloadFile = (filePath, fileName) => {
console.log("https://admin.tanami.betadelivery.com/" + filePath);
@@ -69,10 +72,9 @@ const downloadFile = (filePath, fileName) => {
});
};
const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
const params = useParams()
const id = params?.id
const params = useParams();
const id = params?.id;
const { slideFromRight, create, setCreate } = useContext(GlobalStateContext);
const firstField = useRef();
const secondField = useRef();
@@ -97,32 +99,15 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
const navigate = useNavigate();
const toast = useToast();
const [ deleteIODocs] = useDeleteIODocsMutation()
console.log(id);
const [deleteIODocs] = useDeleteIODocsMutation();
const {
data,
error,
isLoading : isIODocLoading
} = useGetInvestmentDocumentsQuery(id)
console.log(error);
console.log(data?.data);
isLoading: isIODocLoading,
} = useGetInvestmentDocumentsQuery(id, {
skip: !id,
});
const tableHeadRow = ["Sr.no", "Type", "File Name", "Document", "Action"];
@@ -155,35 +140,30 @@ console.log(id);
onEditOpen();
};
const handleDelete = async () => {
setIsLoading(true)
setIsLoading(true);
try {
const res = await deleteIODocs(actionId)
if (res?.data?.statusCode === 200) {
toast({
render: () => (
<ToastBox message={res?.data?.message} />
),
});
setIsLoading(false)
setDeleteAlert(false)
}else if(res?.error) {
toast({
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
setIsLoading(false)
setDeleteAlert(false)
}
const res = await deleteIODocs(actionId);
if (res?.data?.statusCode === 200) {
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
setIsLoading(false);
setDeleteAlert(false);
} else if (res?.error) {
toast({
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
setIsLoading(false);
setDeleteAlert(false);
}
} catch (error) {
console.log(error);
}
}
};
const extractedArray = filteredData?.map((item, index) => ({
"Sr.no": (
<Text
@@ -205,7 +185,11 @@ console.log(id);
className="d-flex align-items-center"
fontSize={"xl"}
>
{item.documentType === "application/pdf" ? <GrDocumentPdf /> : <TbFileTypeDocx fontSize={21} />}
{item.documentType === "application/pdf" ? (
<GrDocumentPdf />
) : (
<TbFileTypeDocx fontSize={21} />
)}
</Text>
),
"File Name": (
@@ -223,7 +207,7 @@ console.log(id);
fontWeight="500"
className="d-flex align-items-center web-text-small"
>
{getFileNameFromPath(item?.documentType)}
{getFileNameFromPath(item?.documentPath)}
</Text>
),
Action: (
@@ -277,7 +261,7 @@ console.log(id);
color="blue.400"
rounded="sm"
size="xs"
onClick={()=>downloadFile(item?.documentPath, item?.documentName)}
onClick={() => downloadFile(item?.documentPath, item?.documentName)}
>
<DownloadIcon />
</Button>
@@ -307,32 +291,23 @@ console.log(id);
),
}));
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)}
/>
<Box display="flex" justifyContent="end" mb={4} gap={2}>
<SetDisplayOrder data={filteredData} />
<Button
leftIcon={<AddIcon />}
onClick={onOpen}
size="sm"
fontSize="xs"
rounded="sm"
colorScheme="forestGreen"
colorScheme="forestGreen"
>
Add Document
</Button>
<InvestmentDocuments
<InvestmentDocuments
create={create}
setCreate={setCreate}
isOpen={isOpen}
@@ -346,6 +321,7 @@ console.log(id);
secondField={secondField}
/>
<InvestmentEdit
data={data?.data}
id={actionId}
isOpen={isEditOpen}
onClose={onEditClose}

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

@@ -25,19 +25,25 @@ import {
} from "@chakra-ui/icons";
import KeyMeritsAdd from "../KeyMeritsAdd";
import { useParams } from "react-router-dom";
import { useDeleteKeyMeritsMutation, useGetKeyMeritsQuery } from "../../../Services/io.service";
import {
useDeleteKeyMeritsMutation,
useGetKeyMeritsQuery,
} from "../../../Services/io.service";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import ToastBox from "../../../Components/ToastBox";
import KeyMeritsEdit from "../KeyMeritsEdit";
import SetDisplayOrder from "./SetDisplayOrder";
const KeyMerits = ({ enableNextTab, index }) => {
const toast = useToast()
const KeyMerits = ({ enableNextTab, index, data:prepopData }) => {
const toast = useToast();
const params = useParams();
// =====================[ variables ]
const id = params?.id;
const { data, isLoading, error } = useGetKeyMeritsQuery(id);
const { data, isLoading, error } = useGetKeyMeritsQuery(id, {
skip: !id,
});
console.log(data?.data);
@@ -51,8 +57,12 @@ const KeyMerits = ({ enableNextTab, index }) => {
const [isBtnLoading, setIsBtnLoading] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
const { isOpen, onOpen, onClose } = useDisclosure();
const { isOpen: isEditOpen, onOpen: onEditOpen, onClose: onEditCloseOpen } = useDisclosure();
const [ deleteKeyMerits ] = useDeleteKeyMeritsMutation()
const {
isOpen: isEditOpen,
onOpen: onEditOpen,
onClose: onEditCloseOpen,
} = useDisclosure();
const [deleteKeyMerits] = useDeleteKeyMeritsMutation();
const tableHeadRow = ["Sr.no", "Title", "Sub title", "Icon", "Action"];
@@ -79,19 +89,17 @@ const KeyMerits = ({ enableNextTab, index }) => {
});
const handleDelete = async () => {
setIsBtnLoading(true)
setIsBtnLoading(true);
try {
const res = await deleteKeyMerits(actionId)
if(res?.data?.statusCode === 200){
const res = await deleteKeyMerits(actionId);
if (res?.data?.statusCode === 200) {
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
setIsBtnLoading(false)
setDeleteAlert(false)
setIsBtnLoading(false);
setDeleteAlert(false);
}
} catch (error) {
}
} catch (error) {}
};
const extractedArray = filteredData?.map((item, index) => ({
@@ -125,23 +133,21 @@ const KeyMerits = ({ enableNextTab, index }) => {
</Text>
</Box>
),
Icon: (
item.iconFilePath && <Image
rounded={'md'}
bg={"#003B14"}
display={'flex'}
p={1}
justifyContent={'center'}
alignItems={'center'}
src={" https://admin.tanami.betadelivery.com/"+item.iconFilePath}
Icon: item?.icon?.iconFilePath && (
<Image
rounded={"md"}
// bg={"#003B14"}
display={"flex"}
p={1}
justifyContent={"center"}
alignItems={"center"}
src={" https://admin.tanami.betadelivery.com/" + item?.icon?.iconFilePath}
w={8}
h={8}
/>
// https://admin.tanami.betadelivery.com/public/icons/linkedin.png
),
// https://admin.tanami.betadelivery.com/public/icons/linkedin.png
Action: (
<Box display={"flex"} justifyContent={"center"} gap={2}>
{/* <Tooltip
@@ -217,8 +223,8 @@ const KeyMerits = ({ enableNextTab, index }) => {
<FullscreenLoaders />
) : (
<Box>
<Box display={"flex"} justifyContent={"space-between"} mb={4}>
<Input
<Box display={"flex"} justifyContent={"end"} mb={4}>
{/* <Input
type="search"
width={300}
placeholder="Search..."
@@ -227,35 +233,34 @@ const KeyMerits = ({ enableNextTab, index }) => {
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
/> */}
<Box display={'flex'} gap={2} as="span">
<SetDisplayOrder data={filteredData} />
<Button
leftIcon={<AddIcon />}
onClick={onOpen}
size={"sm"}
// width={"44.5%"}
fontSize={"xs"}
rounded={"sm"}
colorScheme="forestGreen"
>
Add key merits
</Button>
<Box display={"flex"} gap={2} as="span">
<SetDisplayOrder data={filteredData} />
<Button
leftIcon={<AddIcon />}
onClick={onOpen}
size={"sm"}
// width={"44.5%"}
fontSize={"xs"}
rounded={"sm"}
colorScheme="forestGreen"
>
Add key merits
</Button>
</Box>
<KeyMeritsAdd
id={id}
icons={prepopData?.icons}
id={id}
isOpen={isOpen}
onClose={onClose}
firstField={firstField}
/>
<KeyMeritsEdit
id={id}
actionId={actionId}
<KeyMeritsEdit
icons={prepopData?.icons}
id={id}
actionId={actionId}
isOpen={isEditOpen}
onClose={onEditCloseOpen}
firstField={firstField}

7
src/Pages/IO_Management/CreateIO/SetDisplayOrder.jsx
View File

@@ -44,14 +44,14 @@ const SetDisplayOrder = ({data,}) => {
</Text></Box>
),
Icon: (
item.iconFilePath && <Image
item?.icon?.iconFilePath && <Image
rounded={'md'}
bg={"#003B14"}
// bg={"#003B14"}
display={'flex'}
p={1}
justifyContent={'center'}
alignItems={'center'}
src={" https://admin.tanami.betadelivery.com/"+item.iconFilePath}
src={" https://admin.tanami.betadelivery.com/" + item?.icon?.iconFilePath}
w={8}
h={8}
/>
@@ -62,7 +62,6 @@ const SetDisplayOrder = ({data,}) => {
),
})))
console.log(extractedArray);

411
src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
View File

@@ -1,153 +1,284 @@
import {
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
FormControl,
FormLabel,
Input,
Box,
Text,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { bytesToMB, getFileIcon, investmentDocSchema } from "../InvestmentDocuments";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
const InvestmentEdit = ({ isOpen, onClose, thirdField, id }) => {
const { create, setCreate } = useContext(GlobalStateContext);
const [file, setFile] = useState(null);
const filteredObject = create?.find((item) => item?.id === id)
const {
control,
watch,
setValue,
handleSubmit,
reset,
register,
formState: { errors },
} = useForm({
resolver: yupResolver(investmentDocSchema),
});
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
FormControl,
FormLabel,
Input,
Box,
Text,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import {
bytesToMB,
getFileIcon,
investmentDocSchema,
} from "../InvestmentDocuments";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { getFileNameFromPath } from "../../../Constants/Constants";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { useUpdateInvestmentDocumentsMutation } from "../../../Services/io.service";
import ToastBox from "../../../Components/ToastBox";
useEffect(() => {
if (filteredObject) {
reset({
fileName:filteredObject?.fileName,
document: filteredObject?.document,
Type: filteredObject?.Type
const InvestmentEdit = ({ isOpen, onClose, thirdField, id, data }) => {
const toast = useToast();
const { create, setCreate } = useContext(GlobalStateContext);
const [formData, setFormData] = useState(null);
const [alert, setAlert] = useState(false);
const [file, setFile] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const filteredObject = create?.find((item) => item?.id === id);
const [updateInvestmentDocuments] = useUpdateInvestmentDocumentsMutation();
// =====================[ variables ]
// const id = params?.id;
console.log(id);
console.log(data);
const filterObject = data?.find((item) => item?.id === id);
console.log(filterObject);
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";
}
};
const {
control,
watch,
setValue,
handleSubmit,
reset,
register,
formState: { errors },
} = useForm({
resolver: yupResolver(investmentDocSchema),
});
// useEffect to reset the form when `found` changes
useEffect(() => {
if (filterObject) {
reset({
document: filterObject?.documentPath,
fileName: filterObject?.documentName,
});
}
}, [filterObject, reset]);
useEffect(() => {
if (filteredObject) {
reset({
fileName: filteredObject?.fileName,
document: filteredObject?.document,
Type: filteredObject?.Type,
});
}
}, [id, create, reset]);
const handleConfirm = async () => {
setIsLoading(true);
try {
const res = await updateInvestmentDocuments({ data: formData, id });
console.log(res);
if (res?.error) {
toast({
render: () => (
<ToastBox
message={
res?.error?.data?.message
? res?.error?.data?.message
: "File size is too large"
}
status={"error"}
/>
),
});
setIsLoading(false);
} else if (res?.data?.statusCode === 201) {
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
onClose();
setIsLoading(false);
setFile(null);
reset();
}
}, [id, create, reset]);
} catch (error) {
console.log(error);
if (error) {
toast({
render: () => (
<ToastBox
message={"Something went wrong please try again!"}
status={"error"}
/>
),
});
onClose();
setIsLoading(false);
setFile(null);
reset();
}
}
const onSubmit = (data) => {
// setValue('Type',data.Type[0]?.type)
const updatedCreate = create.map((item) =>
item.id === id ? { ...item, ...data } : item
);
setCreate(updatedCreate);
onClose();
};
setAlert(false);
};
const onSubmit = (data) => {
console.log(data);
// setValue('Type',data.Type[0]?.type)
// const updatedCreate = create.map((item) =>
// item.id === id ? { ...item, ...data } : item
// );
// setCreate(updatedCreate);
// onClose();
console.log("sibmited");
console.log(errors);
if (Object.keys(errors).length === 0) {
const formData = new FormData();
formData.append("documentName", data.fileName);
typeof data?.document !== "string"
? formData.append("document", data?.document[0])
: null;
setFormData(formData);
setAlert(true);
}
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
return (
<Drawer isOpen={isOpen} placement="right" onClose={onClose} initialFocusRef={thirdField}>
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"md"}>Edit Document</DrawerHeader>
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<DrawerBody>
<FormControl mb={4} isInvalid={errors.fileName}>
<FormLabel fontSize="sm">File Name</FormLabel>
<Input
fontSize="sm"
type="text"
size="sm"
{...register("fileName")}
/>
{errors.fileName && (
<Text color="red.500" fontSize="sm">
{errors.fileName.message}
</Text>
)}
</FormControl>
<FormControl mb={4} isInvalid={errors.document}>
<FormLabel fontSize="sm">Document</FormLabel>
<Input
fontSize="sm"
type="text"
size="sm"
{...register("document")}
/>
{errors.document && (
<Text color="red.500" fontSize="sm">
{errors.document.message}
</Text>
)}
</FormControl>
<FormControl mb={4} isInvalid={errors.Type}>
<FormLabel fontSize="sm">Type</FormLabel>
<Input
name="Type"
{...register("Type")}
fontSize="sm"
className="form-control"
type="file"
size="sm"
onChange={handleFileChange}
/>
{errors.type && (
<Text color="red.500" fontSize="sm">
{errors.type.message}
</Text>
)}
</FormControl>
{file === null ?
<Text>{filteredObject?.Type}</Text>: (
<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="forestGreen"
rounded="sm"
console.log(filteredObject);
return (
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
onClose={onClose}
initialFocusRef={thirdField}
>
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"md"}>Edit Document</DrawerHeader>
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<DrawerBody>
<FormControl isRequired mb={4} isInvalid={errors.fileName}>
<FormLabel fontSize="sm">File Name</FormLabel>
<Input
fontSize="sm"
type="text"
size="sm"
mr={3}
onClick={onClose}
>
Cancel
</Button>
<Button colorScheme="forestGreen" rounded="sm" size="sm" type="submit">
Save
</Button>
</DrawerFooter>
</Box>
</DrawerContent>
</Drawer>
);
};
export default InvestmentEdit;
{...register("fileName")}
/>
{errors.fileName && (
<Text color="red.500" fontSize="sm">
{errors.fileName.message}
</Text>
)}
</FormControl>
<FormControl mb={4} isInvalid={errors.Type}>
<FormLabel fontSize="sm">Document</FormLabel>
<Input
name="document"
{...register("document")}
fontSize="sm"
className="form-control"
type="file"
size="sm"
onChange={handleFileChange}
/>
{errors.document && (
<Text color="red.500" fontSize="sm">
{errors.document.message}
</Text>
)}
</FormControl>
{filterObject !== null && file === null ? (
<Box mt={4}>
<Box display="flex" alignItems={"center"} mb={2}>
<Text as={"span"}>
{getFileIcon(filterObject?.documentType)}
</Text>
<Text
as={"span"}
fontSize="sm"
fontWeight={400}
ml={2}
mb={0}
>
{getFileNameFromPath(filterObject?.documentPath)}
</Text>
</Box>
{/* <Text fontSize="sm">{bytesToMB(file.size)}</Text> */}
</Box>
) : (
<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="forestGreen"
rounded="sm"
size="sm"
mr={3}
onClick={onClose}
>
Cancel
</Button>
<Button
colorScheme="forestGreen"
rounded="sm"
size="sm"
type="submit"
>
Save
</Button>
</DrawerFooter>
</Box>
</DrawerContent>
<CustomAlertDialog
isOpen={alert}
onClose={() => setAlert(false)}
alertHandler={handleConfirm}
isLoading={isLoading}
message="Are you sure you want to add this document?"
/>
</Drawer>
);
};
export default InvestmentEdit;

313
src/Pages/IO_Management/IOArtifactsAdd.jsx
View File

@@ -1,135 +1,192 @@
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"),
Box,
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
FormControl,
FormErrorMessage,
FormLabel,
Image,
Input,
Stack,
useToast,
} from "@chakra-ui/react";
import * as yup from "yup";
import React, { useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { useCreateImageArtifactsMutation } from "../../Services/io.service";
import { useParams } from "react-router-dom";
import ToastBox from "../../Components/ToastBox";
const investmentImageSchema = yup.object().shape({
artifactName: yup.string().required("Artifact image name is required"),
artifactPathName: yup.mixed().required("Artifact image is required"),
});
const IOArtifactsAdd = ({ isOpen, onClose, firstField }) => {
const params = useParams()
const id = params?.id
const [file, setFile] = useState(null);
const [preview, setPreview] = useState(null);
const [alert, setAlert] = useState(false);
const [loading, setIsLoading] = useState(false);
const toast = useToast();
const [ createImageArtifacts ] = useCreateImageArtifactsMutation()
const {
control,
handleSubmit,
reset,
setValue,
formState: { errors },
} = useForm({
resolver: yupResolver(investmentImageSchema),
});
console.log(errors);
const onSubmit = async (data) => {
setIsLoading(true)
const formData = new FormData();
formData.append('artifactName', data.artifactName);
formData.append('artifactPathName', file); // Assuming artifactPathName is an array of files
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) => {
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentDoct,
]);
};
const handleSave = () => {
setAlert(false)
onClose()
console.log('FormData:', formData);
for (let [key, value] of formData.entries()) {
console.log(`${key}:`, value);
}
try {
const res = await createImageArtifacts({data: formData, id})
if (res?.data?.statusCode === 200) {
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
reset()
setIsLoading(false)
setAlert(false);
onClose();
}
} catch (error) {
console.log(error);
}
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={"forestGreen"}
rounded={"sm"}
size={"sm"}
mr={3}
onClick={onClose}
>
Cancel
</Button>
<Button
colorScheme={"forestGreen"}
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?"}
/>
</>
);
// Close the form/modal
// onClose();
};
export default IOArtifactsAdd;
const handleFileChange = (e) => {
const file = e.target.files[0];
setFile(file);
setValue("artifactPathName", file)
const reader = new FileReader();
reader.onloadend = () => {
setPreview(reader.result);
};
reader.readAsDataURL(file);
};
const handleSave = () => {
handleSubmit(onSubmit)();
};
const handleClose = () => {
}
return (
<>
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
onClose={onClose}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>IO Artifacts Image</DrawerHeader>
<DrawerBody>
<Stack spacing={4}>
<FormControl isInvalid={errors.artifactName}>
<FormLabel fontSize={"sm"}>Artifact Name</FormLabel>
<Controller
name="artifactName"
control={control}
render={({ field }) => (
<Input {...field} fontSize={"sm"} type="text" size={"sm"} />
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.artifactName?.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={!preview && errors.artifactPathName?.message && errors.artifactPathName}>
<FormLabel fontSize={"sm"}>Artifact Image</FormLabel>
<Input
type="file"
accept="image/*"
onChange={handleFileChange}
fontSize={"sm"}
size={"sm"}
className="form-control"
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{!preview && errors.artifactPathName?.message && errors.artifactPathName?.message}
</FormErrorMessage>
{preview && <Image src={preview} alt="Image Preview" mt={2} />}
</FormControl>
</Stack>
</DrawerBody>
<DrawerFooter>
<Button
variant="outline"
colorScheme={"forestGreen"}
rounded={"sm"}
size={"sm"}
mr={3}
onClick={onClose}
>
Cancel
</Button>
<Button
colorScheme={"forestGreen"}
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 artifact?"}
isLoading={loading}
/>
</>
);
};
export default IOArtifactsAdd;

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

@@ -42,7 +42,7 @@ export const getFileIcon = (type) => {
return <GrDocumentPdf />;
case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
case "application/msword":
return <TbFileTypeDocx fontSize={"16px"} />;
return <TbFileTypeDocx fontSize={"20px"} />;
case "image/jpeg":
case "image/png":
case "image/gif":
@@ -93,8 +93,6 @@ const InvestmentDocuments = ({
resolver: yupResolver(investmentDocSchema),
});
console.log(errors);
const onSubmit = async (data) => {
console.log("sibmited");
console.log(errors);
@@ -189,6 +187,7 @@ const InvestmentDocuments = ({
return (
<>
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
@@ -256,7 +255,12 @@ const InvestmentDocuments = ({
>
Cancel
</Button>
<Button colorScheme="forestGreen" rounded="sm" size="sm" type="submit">
<Button
colorScheme="forestGreen"
rounded="sm"
size="sm"
type="submit"
>
Save
</Button>
</DrawerFooter>
@@ -265,7 +269,7 @@ const InvestmentDocuments = ({
</Drawer>
<CustomAlertDialog
isOpen={alert}
onClose={()=>setAlert(false)}
onClose={() => setAlert(false)}
alertHandler={handleConfirm}
isLoading={isLoading}
message="Are you sure you want to add this document?"

269
src/Pages/IO_Management/KeyMeritsAdd.jsx
View File

@@ -11,9 +11,16 @@ import {
FormControl,
FormErrorMessage,
FormLabel,
HStack,
Image,
Input,
Menu,
MenuButton,
MenuItem,
MenuList,
Stack,
Text,
Textarea,
useToast,
} from "@chakra-ui/react";
import React, { useRef, useState } from "react";
@@ -23,44 +30,56 @@ import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { useCreateKeyMeritsMutation } from "../../Services/io.service";
import * as yup from "yup";
import ToastBox from "../../Components/ToastBox";
import { ChevronDownIcon } from "@chakra-ui/icons"; // Import ChevronDownIcon for the dropdown button
const keyMeritsSchema = yup.object().shape({
meritsHeader: yup.string().required("Title is required"),
meritsDescription: yup.string().required("Sub title is required"),
iconImage: yup.mixed().required("Icon is required"), // Adjust based on file or string
meritsDescription: yup.string().required("Description is required"),
meritsHeaderArabic: yup.string().required("Arabic title is required"),
meritsDescriptionArabic: yup
.string()
.required("Arabic Description is required"),
icon_xid: yup.string().required("Icon is required"), // Adjust based on file or string
});
const KeyMeritsAdd = ({ isOpen, onClose, firstField, id }) => {
const toast = useToast()
const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
const toast = useToast();
const [formData, setFormData] = useState(null);
const [alert, setAlert] = useState(false);
const [createKeyMerits] = useCreateKeyMeritsMutation();
const [isLoading, setIsLoading] = useState(false);
const [file, setFile] = useState(null);
const [selectedIcon, setSelectedIcon] = useState("Select Icon");
const [selectedImageIcon, setSelectedImageIcon] = useState(null);
const {
control,
reset,
handleSubmit,
setValue, // Add setValue to programmatically set the selected icon
formState: { errors },
} = useForm({
resolver: yupResolver(keyMeritsSchema),
defaultValues: {
meritsHeader: "",
meritsDescription: "",
iconImage: null,
meritsHeaderArabic: "",
meritsDescriptionArabic: "",
icon_xid: "",
},
});
const onSubmit = async (data) => {
const onSubmit = (data) => {
if (Object.keys(errors).length === 0) {
console.log("hit");
setFormData(data);
setAlert(true);
}
};
const handleConfirm = async () => {
setIsLoading(true);
try {
const formData = new FormData();
formData.append("meritsHeader", data.meritsHeader);
formData.append("meritsDescription", data.meritsDescription);
if (data.iconImage && data.iconImage instanceof File) {
formData.append("iconImage", data.iconImage);
console.log(data.iconImage);
}
const res = await createKeyMerits({ data: formData, id });
if (res?.data?.statusCode === 201) {
toast({
@@ -69,38 +88,51 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id }) => {
setAlert(false);
onClose();
setIsLoading(false);
reset()
return
}
if(res?.error?.data?.code === 400){
reset();
return;
}
if (res?.error?.data?.code === 400) {
toast({
render: () => <ToastBox message={res?.error?.data?.message} status={'error'} />,
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
setAlert(false);
onClose();
setIsLoading(false);
reset()
return
onClose();
setAlert(false);
reset();
setFile(null);
setSelectedImageIcon(null);
setSelectedIcon("Select Icon");
return;
}
} catch (error) {
if (error) {
toast({
render: () => <ToastBox message={"Something went wrong, please try again!"} status={'error'} />,
render: () => (
<ToastBox
message={"Something went wrong, please try again!"}
status={"error"}
/>
),
});
}
setIsLoading(false);
setAlert(false);
onClose();
reset()
setAlert(false);
reset();
setFile(null);
setSelectedImageIcon(null);
setSelectedIcon("Select Icon");
}
reset()
reset();
};
const handleSave = () => {
handleSubmit(onSubmit)();
};
const handleFileChange = (e) => {
const file = e.target.files[0];
console.log(file);
@@ -109,47 +141,91 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id }) => {
}
};
console.log(file);
const handleIconSelect = (id, iconName, iconFilePath) => {
setValue("icon_xid", id);
setSelectedIcon(iconName); // Update selected icon name
setSelectedImageIcon(iconFilePath);
};
const handleClose = () => {
onClose();
setAlert(false);
reset();
setFile(null);
setSelectedImageIcon(null);
setSelectedIcon("Select Icon");
};
return (
<>
<Drawer
size={"xl"}
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
onClose={onClose}
initialFocusRef={firstField}
onClose={handleClose}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>Key Merits</DrawerHeader>
<DrawerHeader fontSize={"sm"}>Key Merits </DrawerHeader>
<DrawerBody>
<Stack spacing={2}>
<FormControl isInvalid={!!errors.meritsHeader} isRequired={true}>
<FormLabel fontSize={"sm"}>Title</FormLabel>
<HStack spacing={2} w={'100%'} flexWrap={'wrap'}>
<FormControl w={'49%'} mb={2} isInvalid={!!errors.meritsHeader} isRequired={true}>
<FormLabel fontSize={"sm"}>Title (English)</FormLabel>
<Controller
name="meritsHeader"
control={control}
render={({ field }) => (
<Input {...field} fontSize={"sm"} type="text" size={"sm"} />
)}
/>
)}/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.meritsHeader?.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={!!errors.meritsDescription} isRequired={true}>
<FormLabel fontSize={"sm"}>Sub Title</FormLabel>
<FormControl w={'49%'} mb={2}
isInvalid={!!errors.meritsHeaderArabic}
isRequired={true}
>
<FormLabel fontSize={"sm"}>Title (Arabic)</FormLabel>
<Controller
name="meritsHeaderArabic"
control={control}
render={({ field }) => (
<Input
textAlign={"right"}
{...field}
fontSize={"sm"}
type="text"
size={"sm"}
/>
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.meritsHeaderArabic?.message}
</FormErrorMessage>
</FormControl>
<FormControl w={'49%'} mb={2}
isInvalid={!!errors.meritsDescription}
isRequired={true}
>
<FormLabel fontSize={"sm"}>Description (English)</FormLabel>
<Controller
name="meritsDescription"
control={control}
render={({ field }) => (
<Input
<Textarea
{...field}
fontSize={"sm"}
type="textarea"
size={"sm"}
rows={2}
/>
)}
/>
@@ -157,33 +233,107 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id }) => {
{errors.meritsDescription?.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={!!errors.iconImage} isRequired={true}>
<FormLabel fontSize={"sm"}>Icon</FormLabel>
<FormControl w={'49%'} mb={2}
isInvalid={!!errors.meritsDescriptionArabic}
isRequired={true}
>
<FormLabel fontSize={"sm"}>Description (Arabic)</FormLabel>
<Controller
name="iconImage"
name="meritsDescriptionArabic"
control={control}
render={({ field: { onChange, onBlur, value } }) => (
<Input
type="file"
className="form-control"
onChange={(e) => {
onChange(e.target.files[0]);
handleFileChange(e);
}}
onBlur={onBlur}
render={({ field }) => (
<Textarea
{...field}
fontSize={"sm"}
type="textarea"
size={"sm"}
textAlign={"right"}
rows={2}
/>
)}
/>
{file && <Image w={8} h={8} p={1} bg={'#004118'} rounded={'md'} src={file} alt="Preview" mt={2} />}
<FormErrorMessage fontSize={"xs"} fontWeight={500} >
{errors.iconImage?.message}
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.meritsDescriptionArabic?.message}
</FormErrorMessage>
</FormControl>
</Stack>
<FormControl w={'49%'} mb={2} isInvalid={!!errors.icon_xid} isRequired={true}>
<FormLabel fontSize={"sm"}>Select Icon</FormLabel>
<Controller
name="icon_xid"
control={control}
render={({ field }) => (
<Menu>
<MenuButton
h={34}
bg={'transparent'}
className="border"
size={"sm"}
fontWeight={500}
rounded={"sm"}
w={"100%"}
textAlign={"left"}
as={Button}
rightIcon={<ChevronDownIcon />}
border={
!errors.icon_xid?.message ||
(!selectedImageIcon && "2px solid #e53e3e")
}
>
<Box display="flex" alignItems="center">
<Image
src={`https://admin.tanami.betadelivery.com/${selectedImageIcon}`}
alt={selectedImageIcon}
boxSize="1rem"
mr="12px"
/>{" "}
<Text as={"span"} fontSize={"sm"} fontWeight={500}>
{selectedIcon}
</Text>
</Box>
</MenuButton>
<MenuList minW='415px' size={"sm"} fontWeight={500}>
{icons?.map(({ iconName, id, iconFilePath }) => (
<MenuItem
key={id}
onClick={() =>
handleIconSelect(id, iconName, iconFilePath)
}
>
<Box display="flex" alignItems="center">
<Image
src={`https://admin.tanami.betadelivery.com/${iconFilePath}`}
alt={iconName}
boxSize="1rem"
mr="12px"
/>
<Text
as={"span"}
fontSize={"sm"}
fontWeight={500}
>
{iconName}
</Text>
</Box>
</MenuItem>
))}
</MenuList>
</Menu>
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{!errors.icon_xid?.message ||
(!selectedImageIcon && errors.icon_xid?.message)}
</FormErrorMessage>
</FormControl>
</HStack>
</DrawerBody>
<DrawerFooter>
<Button
variant="outline"
@@ -200,7 +350,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id }) => {
colorScheme={"forestGreen"}
rounded={"sm"}
size={"sm"}
onClick={() => setAlert(true)}
onClick={handleSave}
>
Save
</Button>
@@ -209,8 +359,9 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id }) => {
</Drawer>
<CustomAlertDialog
isOpen={alert}
onClose={() => setAlert(false)}
alertHandler={handleSave}
onClose={handleClose}
// alertHandler={handleSave}
alertHandler={handleConfirm}
message={"Are you sure you want to add this key merit?"}
isLoading={isLoading}
/>

298
src/Pages/IO_Management/KeyMeritsEdit.jsx
View File

@@ -11,8 +11,16 @@ import {
FormControl,
FormErrorMessage,
FormLabel,
HStack,
Image,
Input,
Menu,
MenuButton,
MenuItem,
MenuList,
Stack,
Text,
Textarea,
useToast,
} from "@chakra-ui/react";
import React, { useEffect, useRef, useState } from "react";
@@ -22,55 +30,54 @@ import CustomAlertDialog from "../../Components/CustomAlertDialog";
import * as yup from "yup";
import ToastBox from "../../Components/ToastBox";
import { useUpdateKeyMeritsMutation } from "../../Services/io.service";
import { ChevronDownIcon } from "@chakra-ui/icons";
const keyMeritsSchema = yup.object().shape({
meritsHeader: yup.string().required("Title is required"),
meritsDescription: yup.string().required("Sub title is required"),
iconImage: yup.mixed().required("Icon is required"), // Adjust based on file or string
meritsHeaderArabic: yup.string().required("Arabic title is required"),
meritsDescriptionArabic: yup
.string()
.required("Arabic Description is required"),
icon_xid: yup.mixed().required("Icon is required"), // Adjust based on file or string
});
const KeyMeritsEdit = ({ isOpen, onClose, firstField, id, actionId, data }) => {
console.log(actionId);
const toast = useToast()
const KeyMeritsEdit = ({ isOpen, onClose, firstField, id, actionId, data, icons }) => {
const toast = useToast();
const [alert, setAlert] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [ editKeyMerits ] = useUpdateKeyMeritsMutation()
const [editKeyMerits] = useUpdateKeyMeritsMutation();
const [selectedIcon, setSelectedIcon] = useState("Select Icon");
const [selectedImageIcon, setSelectedImageIcon] = useState(null);
const found = data?.find((item)=> item?.id === actionId)
console.log(found);
const found = data?.find((item) => item?.id === actionId);
const {
control,
reset,
reset,setValue,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(keyMeritsSchema),
});
// useEffect to reset the form when `found` changes
useEffect(() => {
if (found) {
reset({
meritsHeader: found?.meritsHeader,
meritsDescription: found?.meritsDescription,
iconImage: null,
});
}
}, [found, reset]);
// useEffect to reset the form when `found` changes
useEffect(() => {
if (found) {
reset({
meritsHeader: found?.meritsHeader,
meritsDescription: found?.meritsDescription,
meritsHeaderArabic:found?.meritsHeaderArabic,
meritsDescriptionArabic:found?.meritsDescriptionArabic,
iconImage: null,
});
}
}, [found, reset]);
const onSubmit = async (data) => {
setIsLoading(true);
try {
const formData = new FormData();
formData.append("meritsHeader", data.meritsHeader);
formData.append("meritsDescription", data.meritsDescription);
if (data.iconImage && data.iconImage instanceof File) {
formData.append("iconImage", data.iconImage);
}
const id = actionId
const res = await editKeyMerits({ data: formData, id });
const id = actionId;
const res = await editKeyMerits({ data, id });
if (res?.data?.statusCode === 201) {
toast({
render: () => <ToastBox message={res?.data?.message} />,
@@ -78,40 +85,61 @@ const KeyMeritsEdit = ({ isOpen, onClose, firstField, id, actionId, data }) => {
setAlert(false);
onClose();
setIsLoading(false);
reset()
return
}
if(res?.error?.data?.code === 400){
reset();
return;
}
if (res?.error?.data?.code === 400) {
toast({
render: () => <ToastBox message={res?.error?.data?.message} status={'error'} />,
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
setAlert(false);
onClose();
setIsLoading(false);
reset()
return
reset();
return;
}
} catch (error) {
if (error) {
console.log(error);
toast({
render: () => <ToastBox message={"Something went wrong, please try again!"} status={'error'} />,
render: () => (
<ToastBox
message={"Something went wrong, please try again!"}
status={"error"}
/>
),
});
}
setIsLoading(false);
setAlert(false);
onClose();
reset()
reset();
}
reset()
reset();
};
const handleSave = () => {
handleSubmit(onSubmit)();
};
console.log(errors);
const handleIconSelect = (id, iconName, iconFilePath) => {
setValue("icon_xid", id);
setSelectedIcon(iconName); // Update selected icon name
setSelectedImageIcon(iconFilePath);
};
return (
<>
<Drawer
size={"xl"}
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
@@ -123,9 +151,9 @@ const KeyMeritsEdit = ({ isOpen, onClose, firstField, id, actionId, data }) => {
<DrawerHeader fontSize={"sm"}>Edit Key Merits</DrawerHeader>
<DrawerBody>
<Stack spacing={2}>
<FormControl isInvalid={!!errors.meritsHeader} isRequired={true}>
<FormLabel fontSize={"sm"}>Title</FormLabel>
<HStack spacing={2} w={'100%'} flexWrap={'wrap'} >
<FormControl mb={2} w={"49%"} isInvalid={!!errors.meritsHeader} isRequired={true}>
<FormLabel fontSize={"sm"}>Title (English)</FormLabel>
<Controller
name="meritsHeader"
control={control}
@@ -137,13 +165,21 @@ const KeyMeritsEdit = ({ isOpen, onClose, firstField, id, actionId, data }) => {
{errors.meritsHeader?.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={!!errors.meritsDescription} isRequired={true}>
<FormLabel fontSize={"sm"}>Sub Title</FormLabel>
<FormControl mb={2} w={"49%"}
isInvalid={!!errors.meritsHeaderArabic}
isRequired={true}
>
<FormLabel fontSize={"sm"}>Title (Arabic)</FormLabel>
<Controller
name="meritsDescription"
name="meritsHeaderArabic"
control={control}
render={({ field }) => (
<Input
textAlign={'right'}
{...field}
fontSize={"sm"}
type="textarea"
@@ -151,34 +187,180 @@ const KeyMeritsEdit = ({ isOpen, onClose, firstField, id, actionId, data }) => {
/>
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.meritsHeaderArabic?.message}
</FormErrorMessage>
</FormControl>
<FormControl mb={2} w={"49%"}
isInvalid={!!errors.meritsDescription}
isRequired={true}
>
<FormLabel fontSize={"sm"}>Description (English)</FormLabel>
<Controller
name="meritsDescription"
control={control}
render={({ field }) => (
<Textarea
{...field}
fontSize={"sm"}
type="textarea"
size={"sm"}
rows={2}
/>
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.meritsDescription?.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={!!errors.iconImage} isRequired={true}>
<FormLabel fontSize={"sm"}>Icon</FormLabel>
<FormControl mb={2} w={"49%"}
isInvalid={!!errors.meritsDescriptionArabic}
isRequired={true}
>
<FormLabel fontSize={"sm"}>Description (Arabic)</FormLabel>
<Controller
name="iconImage"
name="meritsDescriptionArabic"
control={control}
render={({ field: { onChange, onBlur, value } }) => (
<Input
type="file"
className="form-control"
onChange={(e) => {
onChange(e.target.files[0]);
}}
onBlur={onBlur}
render={({ field }) => (
<Textarea
rows={2}
textAlign={'right'}
{...field}
fontSize={"sm"}
type="textarea"
size={"sm"}
/>
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500} >
{errors.iconImage?.message}
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.meritsDescriptionArabic?.message}
</FormErrorMessage>
</FormControl>
</Stack>
<FormControl w={"49%"} isInvalid={!!errors.icon_xid} isRequired={true}>
<FormLabel fontSize={"sm"}>Select Icon</FormLabel>
<Controller
name="icon_xid"
control={control}
render={({ field }) => (
<Menu>
<MenuButton
h={34}
className="border"
bg="transparent"
size={"sm"}
fontWeight={500}
rounded={"sm"}
w={"100%"}
textAlign={"left"}
as={Button}
rightIcon={<ChevronDownIcon />}
border={!errors.icon_xid?.message || !selectedImageIcon && "2px solid #e53e3e"}
>
<Box display="flex" alignItems="center">
<Image
src={`https://admin.tanami.betadelivery.com/${selectedImageIcon}`}
alt={selectedImageIcon}
boxSize="1rem"
mr="12px"
/>{" "}
<Text as={"span"} fontSize={"sm"} fontWeight={500}>
{selectedIcon}
</Text>
</Box>
</MenuButton>
<MenuList minW='415px' size={"sm"} fontWeight={500}>
{icons?.map(({ iconName, id, iconFilePath }) => (
<MenuItem
key={id}
onClick={() =>
handleIconSelect(id, iconName, iconFilePath)
}
>
<Box display="flex" alignItems="center">
<Image
src={`https://admin.tanami.betadelivery.com/${iconFilePath}`}
alt={iconName}
boxSize="1rem"
mr="12px"
/>
<Text
as={"span"}
fontSize={"sm"}
fontWeight={500}
>
{iconName}
</Text>
</Box>
</MenuItem>
))}
</MenuList>
</Menu>
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{!errors.icon_xid?.message || !selectedImageIcon && errors.icon_xid?.message}
{errors.icon_xid?.message && errors.icon_xid?.message}
</FormErrorMessage>
</FormControl>
</HStack>
</DrawerBody>
<DrawerFooter>
<Button
variant="outline"

70
src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
View File

@@ -16,15 +16,44 @@ import {
ModalHeader,
ModalOverlay,
} from "@chakra-ui/react";
import {
useGetIOprepopulateDataQuery,
useUpdateStatusIoMutation,
} from "../../../../Services/io.service";
import { useParams } from "react-router-dom";
const UpdateIOStatus = ({ isOpen, onClose }) => {
const params = useParams();
const id = params?.id;
const [selectedItem, setSelectedItem] = useState("Open");
const [isLoadingg, setIsLoading] = useState(false);
const { data, error, isLoading } = useGetIOprepopulateDataQuery();
const [selectedStatusId, setSelectedStatusId] = useState(data?.data?.ioStatus[0]?.id);
const handleMenuItemClick = (item) => {
const [updateStatusIo] = useUpdateStatusIoMutation();
console.log(data?.data?.ioStatus);
console.log(data?.data?.ioStatus);
const handleMenuItemClick = (item, id) => {
setSelectedItem(item);
setSelectedStatusId(id);
};
console.log(selectedItem);
const handleSubmit = async () => {
setIsLoading(true)
try {
const res = await updateStatusIo({
data: {
ioStatus_xid: selectedStatusId,
},
id,
});
console.log(res);
setIsLoading(false)
onClose()
} catch (error) {}
};
return (
<Modal isOpen={isOpen} onClose={onClose}>
@@ -48,30 +77,17 @@ const UpdateIOStatus = ({ isOpen, onClose }) => {
{selectedItem}
</MenuButton>
<MenuList w={"400px"}>
<MenuItem
fontSize={"sm"}
onClick={() => handleMenuItemClick("Processing")}
>
<Badge py={'1px'} px={"8px"}>Processing</Badge>
</MenuItem>
<MenuItem
fontSize={"sm"}
onClick={() => handleMenuItemClick("Closed")}
>
<Badge py={'1px'} px={"8px"}>Closed</Badge>
</MenuItem>
<MenuItem
fontSize={"sm"}
onClick={() => handleMenuItemClick("Exited")}
>
<Badge py={'1px'} px={"8px"}>Exited</Badge>
</MenuItem>
<MenuItem
fontSize={"sm"}
onClick={() => handleMenuItemClick("Cancelled")}
>
<Badge py={'1px'} px={"8px"}>Cancelled</Badge>
</MenuItem>
{data?.data?.ioStatus?.map(({ id, statusAdmin }) => (
<MenuItem
key={id}
fontSize={"sm"}
onClick={() => handleMenuItemClick(statusAdmin, id)}
>
<Badge py={"1px"} px={"8px"}>
{statusAdmin}
</Badge>
</MenuItem>
))}
</MenuList>
</Menu>
</ModalBody>
@@ -85,6 +101,8 @@ const UpdateIOStatus = ({ isOpen, onClose }) => {
}}
size={"sm"}
rounded={"sm"}
onClick={handleSubmit}
isLoading={isLoadingg}
>
Save
</Button>

1
src/Pages/IO_Management/ViewIO/InvestmentView.jsx
View File

@@ -20,6 +20,7 @@ const InvestmentView = ({ isOpen, onClose, secondField, id }) => {
const filteredObject = create?.find((item) => item?.id === id)
return (
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
onClose={onClose}

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

@@ -34,23 +34,26 @@ import EditIO from "../EditIO/EditIO";
import IOArtifacts from "../CreateIO/IOArtifacts";
import IOCashDetails from "../CreateIO/IOCashDetails";
import IONAVDetails from "../CreateIO/IONAVDetails";
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
const ViewIOdata = () => {
const params = useParams()
const id = params?.id
const { data, error, isLoading } = useGetIOprepopulateDataQuery();
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const [isEditing, setIsEditing] = useState(false);
const tabs = [
{ label: "IO Details", content: <ViewIOdetails /> },
{ label: "Investment documents", content: <InvestmentDocument /> },
{ label: "Key merits", content: <KeyMerits /> },
{ label: "IO artifacts", content: <IOArtifacts /> },
{ label: "Investors", content: <Investors /> },
{ label: "IO Cash Details", content: <IOCashDetails /> },
{ label: "IO NAV Details", content: <IONAVDetails /> },
{ label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
{ label: "Investment documents", content: <InvestmentDocument data={data?.data} /> },
{ label: "Key merits", content: <KeyMerits data={data?.data} /> },
{ label: "IO artifacts", content: <IOArtifacts data={data?.data} /> },
{ label: "Investors", content: <Investors data={data?.data} /> },
{ label: "IO Cash Details", content: <IOCashDetails data={data?.data} /> },
{ label: "IO NAV Details", content: <IONAVDetails data={data?.data} /> },
// { label: "Distribution", content: <ViewDistribution /> },
];

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

@@ -46,7 +46,10 @@ const ViewIOdataHeader = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = useRef();
const { IODetails } = useContext(GlobalStateContext);
console.log(IODetails);
console.log(
"=================>>>>>",
IODetails?.artifactsImage?.[0]?.artifactPathName
);
const {
isOpen: isInvestmentOpen,
@@ -89,12 +92,6 @@ const ViewIOdataHeader = () => {
onClose: onCancleClose,
} = useDisclosure();
const bg = {
bg: "#fff",
};
@@ -127,11 +124,30 @@ const ViewIOdataHeader = () => {
borderRadius={"10px"}
position={"relative"}
>
<Box h={100} w={200} p={1.5} >
{/* <Image rounded={'md'} h={"100%"} src={IODetails?.ioName} alt={IODetails?.ioName}/> */}
<Box w={'100%'} h={'100%'} display={'flex'} justifyContent={'center'} alignItems={'center'} bg={"#fff"} rounded={'md'}>
<Icon color={'gray.700'} as={GrGallery} />
</Box>
<Box h={100} w={200} p={1.5}>
{/* <Image rounded={'md'} h={"100%"} src={ " https://admin.tanami.betadelivery.com/" + IODetails?.ioName} alt={IODetails?.ioName}/> */}
{IODetails?.artifactsImage?.[0]?.artifactPathName ? (
<Image
rounded={"md"}
h={"100%"}
w={"100%"}
objectFit={'cover'}
src={" https://admin.tanami.betadelivery.com/" + IODetails?.artifactsImage?.[0]?.artifactPathName}
alt={IODetails?.ioName}
/>
) : (
<Box
w={"100%"}
h={"100%"}
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
bg={"#fff"}
rounded={"md"}
>
<Icon color={"gray.700"} as={GrGallery} />
</Box>
)}
</Box>
{/* <Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
@@ -142,7 +158,7 @@ const ViewIOdataHeader = () => {
</Text>
</Box> */}
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
IO ID
</Text>
@@ -156,7 +172,9 @@ const ViewIOdataHeader = () => {
IO Name
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{IODetails?.investmentNameEnglish ? IODetails?.investmentNameEnglish : "---"}
{IODetails?.investmentNameEnglish
? IODetails?.investmentNameEnglish
: "---"}
</Text>
</Box>
@@ -165,7 +183,9 @@ const ViewIOdataHeader = () => {
Sponsorer Name
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{IODetails?.sponsor?.sponsorName ? IODetails?.sponsor?.sponsorName : "---"}
{IODetails?.sponsor?.sponsorName
? IODetails?.sponsor?.sponsorName
: "---"}
</Text>
</Box>
@@ -180,9 +200,8 @@ const ViewIOdataHeader = () => {
ps={4}
pe={4}
textTransform={"none"}
variant={'solid'}
variant={"solid"}
color={"#fff"}
colorScheme={
IODetails?.ioStatus?.statusAdmin === "Draft"
? "blue"
@@ -191,7 +210,9 @@ const ViewIOdataHeader = () => {
: "forestGreen"
}
>
{IODetails?.ioStatus?.statusAdmin ? IODetails?.ioStatus?.statusAdmin : "---"}
{IODetails?.ioStatus?.statusAdmin
? IODetails?.ioStatus?.statusAdmin
: "---"}
</Badge>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
@@ -199,7 +220,7 @@ const ViewIOdataHeader = () => {
IO NAV
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{IODetails?.currentValuation ? IODetails?.currentValuation : "---"}
{IODetails?.currentValuation ? IODetails?.currentValuation : "00.00"}
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
@@ -207,7 +228,7 @@ const ViewIOdataHeader = () => {
IO cash
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{IODetails?.ioCash ? IODetails?.ioCash : "---"}
{IODetails?.ioCash ? IODetails?.ioCash : "00.00"}
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
@@ -215,7 +236,7 @@ const ViewIOdataHeader = () => {
IO MV NAV
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{IODetails?.marketValue ? IODetails?.marketValue: "---"}
{IODetails?.marketValue ? IODetails?.marketValue : "00.00"}
</Text>
</Box>
@@ -263,8 +284,12 @@ const ViewIOdataHeader = () => {
<MenuItem onClick={onUpdateNavOpen} className="border-bottom">
Update iO NAV
</MenuItem>
<MenuItem onClick={onExitOpen} className="border-bottom">Exit</MenuItem>
<MenuItem onClick={onCancleOpen} className="border-bottom">Cancel</MenuItem>
<MenuItem onClick={onExitOpen} className="border-bottom">
Exit
</MenuItem>
<MenuItem onClick={onCancleOpen} className="border-bottom">
Cancel
</MenuItem>
<MenuItem onClick={onUpdateStatusOpen}>Update iO status</MenuItem>
</MenuList>
</Menu>

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

@@ -119,6 +119,16 @@ const ViewIOdetails = () => {
}, [id, IObyID]);
console.log(IObyID);
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, id})=>{
return{
id:id,
country: country?.countryName,
value: minInvestmentAmt,
logo: country?.flagIcon,
curr: country?.countryCode,
}
})
//=======================[ Editor ]
const formFields = [
{
@@ -223,7 +233,7 @@ const ViewIOdetails = () => {
width: "32.3%",
},
{
label: "Expected Return Estimated",
label: "Expected Return",
placeHolder: "$00.00",
name: "expectedReturn",
type: "number",
@@ -233,19 +243,7 @@ const ViewIOdetails = () => {
: "---",
section: " ",
width: "32.3%",
},
{
label: "Minimum Investment Amount",
placeHolder: "$00.00",
name: "minInvestmentAmount",
value: IObyID?.data?.minInvestmentAmount
? IObyID?.data?.minInvestmentAmount
: "---",
type: "number",
isRequired: true,
section: " ",
width: "32.3%",
},
},
{
label: "ISIN",
placeHolder: "$00.00",
@@ -254,6 +252,7 @@ const ViewIOdetails = () => {
type: "number",
section: " ",
width: "32.3%",
align:"right"
},
{
label: "Investment Details",
@@ -266,6 +265,18 @@ const ViewIOdetails = () => {
section: " ",
width: "32.3%",
},
{
label: "Minimum Investment",
placeHolder: "Enter comment here",
name: "table",
type: "table",
section: " ",
width: "100%",
isRequired: true,
type: "table",
value: minInvestmentById,
},
{
label: "Comment",

1
src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
View File

@@ -102,6 +102,7 @@ const EditExchangeRate = ({ id, setIsLoading, updateHistory }) => {
</Button>
</Tooltip>
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
onClose={onClose}

1
src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
View File

@@ -106,6 +106,7 @@ const ExchangeHistory = ({ id, setIsLoading, history }) => {
</Button>
</Tooltip>
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
onClose={onClose}

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

@@ -18,9 +18,9 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
export const addInvestmentType = yup.object().shape({
investmentTypeName: yup.string().required("Investment name is required"),
note: yup.string().required("Description is required"),
note: yup.string(),
investmentTypeNameArabic: yup.string().required("Investment name is required"),
noteArabic: yup.string().required("Description is required"),
noteArabic: yup.string(),
});
// ==================== [debounce] ========================
@@ -46,7 +46,7 @@ const AddInvestmentType = () => {
// =====================[useState]=======================
const [isSwitchOn, setIsSwitchOn] = useState(false);
const [isSwitchOn, setIsSwitchOn] = useState(true);
const [isLoadingBtn, setIsLoadingBtn] = useState(false);
const [alert, setAlert] = useState(false);
const [form, setForm] = useState();
@@ -176,23 +176,23 @@ const AddInvestmentType = () => {
type: "text",
isRequired: true,
section: "Add Details",
isArabic: true,
arabic: true,
},
{
label: "Description (English)",
placeHolder: " ",
name: "note",
type: "text",
isRequired: true,
type: "textarea",
// isRequired: true,
section: "Add Details",
},
{
label: "Description (Arabic)",
placeHolder: " ",
name: "noteArabic",
type: "text",
isRequired: true,
isArabic: true,
type: "textarea",
// isRequired: true,
arabic: true,
section: "Add Details",
},
];
@@ -201,7 +201,7 @@ const AddInvestmentType = () => {
const formEditFields = [
{
label: "Investment Type (English) *",
label: "Investment Type (English)",
placeHolder: " ",
name: "investmentTypeName",
type: "text",
@@ -209,20 +209,20 @@ const AddInvestmentType = () => {
section: "Add Details",
},
{
label: "Investment Type (Arabic) *",
label: "Investment Type (Arabic)",
name: "investmentTypeNameArabic",
placeHolder: " ",
type: "text",
isRequired: true,
section: "Add Details",
isArabic: true,
arabic: true,
},
{
label: "Description (English)",
placeHolder: " ",
name: "note",
type: "text",
isRequired: true,
// isRequired: true,
section: "Add Details",
},
{
@@ -230,8 +230,8 @@ const AddInvestmentType = () => {
placeHolder: " ",
name: "noteArabic",
type: "text",
isRequired: true,
isArabic: true,
// isRequired: true,
arabic: true,
section: "Add Details",
},
];

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

@@ -9,7 +9,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import { debounce } from "./AddInvestmentType";
import DataTable from "../../../Components/DataTable/DataTable";
import {useDeleteInvestmentTypeMutation,useGetInvestmentTypesQuery,} from "../../../Services/investment.type.service";
import {useDeleteInvestmentTypeMutation, useGetInvestmentTypesQuery,} from "../../../Services/investment.type.service";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -94,11 +94,9 @@ const InvestmentType = () => {
</Text>
),
Description: (
<Box w={'250px'} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
<Text as={"span"} w={'400px'} isTruncated={true} color={"teal.900"} fontWeight={"500"}>
{item.note}
</Text>
</Box>
),
Status: (
<Box isTruncated={true}>

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

@@ -17,7 +17,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
export const addSponser = yup.object().shape({
sponsorName: yup.string().required("Sponser name is required"),
sponsorNameArabic: yup.string().required("Sponser name is required"),
email: yup.string().email("Must be a valid email").required("Email is required"),
// email: yup.string().email("Must be a valid email").required("Email is required"),
});
// ==================== [debounce] ========================
@@ -58,6 +58,7 @@ const AddSponser = () => {
reset,
} = useForm({
resolver: yupResolver(addSponser),
});
// ========================== [useEffect] ================================
@@ -87,6 +88,10 @@ const AddSponser = () => {
...form,
// isActive: isSwitchOn,
};
// Remove email field if it's an empty string
if (formData.email === '') {
delete formData.email;
}
await updateSponser({ data: formData, id }).then((response) => {
if (response?.data?.statusCode) {
toast({
@@ -119,6 +124,7 @@ const AddSponser = () => {
// isActive: isSwitchOn,
};
await createSponser(formData).then((response) => {
console.log(response);
if (response?.data?.statusCode) {
toast({
render: () => <ToastBox message={response?.data?.message} />,
@@ -126,10 +132,10 @@ const AddSponser = () => {
setIsLoadingBtn(false);
navigate("/sponser");
} else {
} else if(response?.error?.status === 400) {
toast({
render: () => (
<ToastBox message={"Something Went Wrong"} status={"error"} />
<ToastBox message={response?.error?.data?.message} status={"error"} />
),
});
@@ -164,7 +170,7 @@ const AddSponser = () => {
type: "text",
isRequired: true,
section: "Add Details",
isArabic: true,
arabic: true,
right: true,
},
{
@@ -172,7 +178,7 @@ const AddSponser = () => {
name: "email",
placeHolder: " ",
type: "email",
isRequired: true,
// isRequired: true,
section: "Add Details",
},
];
@@ -195,14 +201,14 @@ const AddSponser = () => {
type: "text",
isRequired: true,
section: "Add Details",
isArabic: true,
arabic: true,
},
{
label: "Email adress",
name: "email",
placeHolder: " ",
type: "email",
isRequired: true,
// isRequired: true,
section: "Add Details",
},
];

6
src/Services/investment.documents.service.js
View File

@@ -8,12 +8,18 @@ export const ioService = createApi({
reducerPath: "ioService",
baseQuery: fetchBaseQuery({ baseUrl }),
tagTypes: ["getInvestmentDocuments"],
endpoints: (builder) => ({
// =====[get]
getInvestmentDocuments: builder.query({
query: ({id}) => `/io/admin/document/${id}`,
providesTags: ["getInvestmentDocuments"],
}),

4
src/Services/investment.type.service.js
View File

@@ -23,7 +23,7 @@ export const investmentType = createApi({
getInvestmentTypeById: builder.query({
query: (id) => `/investmentType/admin/${id}`,
providesTags: ["getInvestmentType"],
invalidatesTags: ["getInvestmentType"],
}),
// ========[Create Investment]========
@@ -55,7 +55,7 @@ export const investmentType = createApi({
url: `/investmentType/admin/delete/${id}`,
method: "DELETE",
}),
invalidatesTags: ["getSponser"],
invalidatesTags: ["getInvestmentType"],
}),
}),

163
src/Services/io.service.js
View File

@@ -7,10 +7,20 @@ const baseUrl = api?.defaults.baseURL;
export const ioService = createApi({
reducerPath: "ioService",
baseQuery: fetchBaseQuery({ baseUrl }),
tagTypes: ["getIO", "getKeyMerits", "getArtifacts", "getInvestmentDocuments"],
tagTypes: [
"prePopulate",
"getIO",
"getKeyMerits",
"getArtifactsVideo",
"getInvestmentDocuments",
"getIOById",
],
endpoints: (builder) => ({
// =====[get prepopulate data]
getIOprepopulateData: builder.query({
query: () => `/io/admin/pre-populate`,
providesTags: ["prePopulate"],
}),
// =====[get]
getIOs: builder.query({
@@ -18,16 +28,11 @@ export const ioService = createApi({
providesTags: ["getIO"],
}),
getIOById: builder.query({
query: (id) => ({ url: `/io/admin/${id}` }),
providesTags: ["getIO"],
providesTags: ["getIOById"],
}),
// =====[create]
createIO: builder.mutation({
query: (data) => ({
@@ -38,36 +43,30 @@ export const ioService = createApi({
invalidatesTags: ["getIO"],
}),
updateIO: builder.mutation({
query: ({ data, id }) => ({
url: `/io/admin/${id}`,
method: "PATCH",
body: data,
}),
invalidatesTags: ["getIO"],
invalidatesTags: ["getIOById"],
}),
// =====[Key Merits]
getKeyMerits: builder.query({
query: (id) => `/io/admin/key-merits/${id}`,
providesTags: ["getKeyMerits"],
// =====[Key Merits]
getKeyMerits: builder.query({
query: (id) => `/io/admin/key-merits/${id}`,
providesTags: ["getKeyMerits"],
}),
createKeyMerits: builder.mutation({
query: ({ data, id }) => ({
url: `/io/admin/key-merits/${id}`,
method: "POST",
body: data,
// No need to manually set 'Content-Type'
}),
createKeyMerits: builder.mutation({
query: ({ data, id }) => ({
url: `/io/admin/key-merits/${id}`,
method: "POST",
body: data,
// No need to manually set 'Content-Type'
}),
invalidatesTags: ["getKeyMerits"],
}),
invalidatesTags: ["getKeyMerits"],
}),
deleteKeyMerits: builder.mutation({
query: (id) => ({
url: `/io/admin/key-merits/hard-delete/${id}`,
@@ -76,18 +75,17 @@ export const ioService = createApi({
invalidatesTags: ["getKeyMerits"],
}),
updateKeyMerits: builder.mutation({
query: ({ data, id }) => ({ url: `/io/admin/key-merits/byId/${id}` ,
query: ({ data, id }) => ({
url: `/io/admin/key-merits/byId/${id}`,
method: "PATCH",
body: data,
}),
invalidatesTags: ["getKeyMerits"],
}),
// =====[getIODocument]
createInvestmentDocuments: builder.mutation({
query: ({data, id}) => ({
createInvestmentDocuments: builder.mutation({
query: ({ data, id }) => ({
url: `/io/admin/document/${id}`,
method: "POST",
body: data,
@@ -96,6 +94,15 @@ export const ioService = createApi({
invalidatesTags: ["getInvestmentDocuments"],
}),
updateInvestmentDocuments: builder.mutation({
query: ({ data, id }) => ({
url: `/io/admin/document/byId/${id}`,
method: "PATCH",
body: data,
}),
invalidatesTags: ["getInvestmentDocuments"],
}),
getInvestmentDocuments: builder.query({
query: (id) => `/io/admin/document/${id}`,
providesTags: ["getInvestmentDocuments"],
@@ -109,19 +116,70 @@ export const ioService = createApi({
invalidatesTags: ["getInvestmentDocuments"],
}),
// =====[Artifacts]
getArtifactsVideo: builder.query({
query: (id) => `/io/artifact/artifactVideo/${id}`,
providesTags: ["getArtifactsVideo"],
}),
// =====[createImageArtifacts]
createImageArtifacts: builder.mutation({
query: ({ data, id }) => ({
url: `/io/artifact/artifactImage/${id}`,
method: "POST",
body: data,
}),
invalidatesTags: ["getIOById"],
}),
// =====[Artifacts]
getArtifacts: builder.query({
query: (id) => `/io/admin/artifact/${id}`,
providesTags: ["getArtifacts"],
// =====[createVideoArtifacts]
createVideoArtifacts: builder.mutation({
query: ({ data, id }) => ({
url: `/io/artifact/artifactVideo/${id}`,
method: "POST",
body: data,
}),
invalidatesTags: ["getIOById"],
}),
deleteVideoArtifacts: builder.mutation({
query: (id) => ({
url: `/io/artifact/video/${id}`,
method: "DELETE",
}),
invalidatesTags: ["getIOById"],
}),
updateStatusIo: builder.mutation({
query: ({ data, id }) => ({
url: `/io/admin/update-status/${id}`,
method: "PATCH",
body: data,
}),
invalidatesTags: ["getIOById"],
}),
@@ -129,14 +187,14 @@ export const ioService = createApi({
});
// Export hooks for usage in functional components
export const {
useGetIOsQuery,
useGetIOByIdQuery,
useCreateIOMutation ,
export const {
useGetIOprepopulateDataQuery,
useGetIOsQuery,
useGetIOByIdQuery,
useCreateIOMutation,
useUpdateIOMutation,
useGetKeyMeritsQuery,
useCreateKeyMeritsMutation,
useDeleteKeyMeritsMutation,
@@ -145,8 +203,15 @@ export const {
useGetInvestmentDocumentsQuery,
useCreateInvestmentDocumentsMutation,
useDeleteIODocsMutation,
useUpdateInvestmentDocumentsMutation,
useCreateImageArtifactsMutation,
useGetArtifactsVideoQuery,
useCreateVideoArtifactsMutation,
useDeleteVideoArtifactsMutation,
useGetArtifactsQuery,
} =
ioService;
useUpdateStatusIoMutation
} = ioService;