diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx index 3fc03d0..3fb0e31 100644 --- a/src/Components/DataTable/DataTable.jsx +++ b/src/Components/DataTable/DataTable.jsx @@ -130,6 +130,7 @@ const DataTable = ({ textOverflow: "ellipsis", }} className="web-text-small" + w={400} > {item[heading]} diff --git a/src/Components/EmptySearchList.jsx b/src/Components/EmptySearchList.jsx index e7d5dfb..2354f62 100644 --- a/src/Components/EmptySearchList.jsx +++ b/src/Components/EmptySearchList.jsx @@ -9,7 +9,7 @@ const EmptySearchList = ({message}) => { justifyContent={'center'} alignItems={'center'} flexDirection={'column'} - w={"100%"} h={"80vh"} + w={"100%"} h={"40vh"} > empty list {message} diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx index 54a79b2..ff0be2f 100644 --- a/src/Components/FormField.jsx +++ b/src/Components/FormField.jsx @@ -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 }) => ( ); } else if (type === "checkbox") { @@ -381,14 +381,35 @@ const FormField = ({ } else if (type === "table") { return ( - - - {value.map((item, index) => ( - + + {value?.map((item, index) => ( + ))} @@ -396,9 +417,9 @@ const FormField = ({ - {value.map((item, index) => ( + {value?.map((item, index) => ( ))} @@ -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} diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx index ad1bd11..ed5b377 100644 --- a/src/Components/FormInputMain.jsx +++ b/src/Components/FormInputMain.jsx @@ -17,6 +17,7 @@ const FormInputMain = ({ w, btnLoading, btnhidden, + }) => { return ( @@ -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} /> ) )} diff --git a/src/Components/FormInputView.jsx b/src/Components/FormInputView.jsx index 380227b..cf27df1 100644 --- a/src/Components/FormInputView.jsx +++ b/src/Components/FormInputView.jsx @@ -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 (
{Object?.entries(groupedFields, groupedFieldsTwo).map( @@ -19,21 +18,112 @@ const FormInputView = ({ {section} {/* */} - - {fields.map(({ value, label, id, width, btn, arabic, type }, key) => ( - - - {label} - - {type==="number" ? value+" /-" : value } - - ))} - + + {fields.map( + ({ value, label, id, width, btn, arabic, type, align }, key) => + type === "table" ? ( +
- - - {item.country} +
+ + + {item.country === "United Arab Emirates" + ? "UAE" + : item.country}
- - - - - - handleInputChange(index, e.target.value) - } - border={"1px solid #e2e8f0"} - /> - {item?.curr} - + + + handleInputChange(index, e.target.value) + } + border={"1px solid #e2e8f0"} + /> + + {item?.curr} + +
+ + + {value?.map((item, index) => ( + + ))} + + + + + {value?.map((item, index) => ( + + ))} + + +
+ + + {item.country === "United Arab Emirates" + ? "UAE" + : item.country} + +
+ + + + {item?.curr} + + +
+ ) : ( + + + {label} + + + {type === "number" ? value : value} + + + ) + )} + {/* */} {index < Object.entries(groupedFields, groupedFieldsTwo).length - 1 && ( diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js index 931a3a2..ead0967 100644 --- a/src/Constants/Constants.js +++ b/src/Constants/Constants.js @@ -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) { diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index ae41ec6..30ca43c 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -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 ( { 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} diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx index ff77d8a..eb0e8ce 100644 --- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx +++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx @@ -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 ( - - + return isLoading ? ( + + ) : ( + + {/* navigate(-1)} style={{ fontSize: "15px", cursor: "pointer" }} @@ -177,10 +119,7 @@ const CreateIO = () => { {tabs.map(({ Content }, index) => ( - + ))} diff --git a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx index fcfa5ab..c58f682 100644 --- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx +++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx @@ -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": ( { "File Name": ( - {item.fileName} + {item.artifactName} ), @@ -134,112 +167,10 @@ const IOArtifacts = ({ enableNextTab, index }) => { fontWeight={"500"} className="d-flex align-items-center web-text-small" > - {item.document} + {getFileNameFromPath(item.artifactPathName)} ), - Action: ( - - - - - - - - - - - - ), - })); - - 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": ( - - {index + 1} - - ), - "File Name": ( - - - {item.videoFileName} - - - ), - "Video streaming uRL": ( + "View image": ( { fontWeight={"500"} className="d-flex align-items-center web-text-small" > - + View @@ -259,7 +200,7 @@ const IOArtifacts = ({ enableNextTab, index }) => { ), Action: ( - { > - + */} { placement="top" > + */} + + + + + + + + ), + }) + ); + return ( - + Manage iO images - + + {/ /} + + + + + { setMouseEntered={setMouseEntered} /> - + Manage IO videos - + + + + + - + { onClose={() => setDeleteAlert(false)} isOpen={deleteAlert} message={"Are you sure you want to delete sponers?"} - alertHandler={handleDelete} - isLoading={isLoading} + alertHandler={() => handleDeleteVideo(actionId)} + isLoading={isLoadingBtn} /> - - ); }; diff --git a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx new file mode 100644 index 0000000..a047950 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx @@ -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: () => , + }); + reset() + setAlert(false); + setIsLoading(false) + onClose(); + } + + + } catch (error) { + console.log(error); + + } + + }; + + + + const handleConfirm = () => { + handleSubmit(onSubmit)(); + }; + + const handleSave = () => { + handleSubmit(onSubmit)(); + }; + + const handleClose = () => { + onClose() + reset() + } + + return ( + <> + + + + + IO Artifacts Image + + + + + Artifact Name + ( + + )} + /> + + {errors.artifactName?.message} + + + + + Artifact Streaming URL + ( + + )} + /> + + {errors.artifactStreamingURL?.message} + + + + + + + + + + + + + setAlert(false)} + alertHandler={handleSave} + message={"Are you sure you want to add this artifact?"} + isLoading={isLoading} + /> + + ); +}; + +export default IOArtifactsAdd; diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx index ffa9ead..ea01028 100644 --- a/src/Pages/IO_Management/CreateIO/IODetails.jsx +++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx @@ -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: () => ( - - ), + render: () => , }); - navigate(`/view-io/${id}`); - setIsLoading(false) + enableNextTab(index); + } else if(res?.error?.status === 400){ + setIsLoading(false); + toast({ + render: () => , + }); } - - 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: () => , }); navigate(`/view-io/${res?.data?.data}`); enableNextTab(index); + } else if(res?.error?.status === 400){ + setIsLoading(false); + toast({ + render: () => , + }); } } 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 ? ( ) : ( - { onSubmit={handleSubmit(onSubmit)} btnLoading={isLoading} submitTitle={id ? "Update" : "Submit"} - > - + > ); }; diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx index 5dc8f76..a30ffd7 100644 --- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx +++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx @@ -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: () => ( - - ), - }); - setIsLoading(false) - setDeleteAlert(false) - }else if(res?.error) { - - toast({ - render: () => ( - - ), - }); - setIsLoading(false) - setDeleteAlert(false) - } + const res = await deleteIODocs(actionId); + if (res?.data?.statusCode === 200) { + toast({ + render: () => , + }); + setIsLoading(false); + setDeleteAlert(false); + } else if (res?.error) { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + setDeleteAlert(false); + } } catch (error) { console.log(error); - } - } - + }; + const extractedArray = filteredData?.map((item, index) => ({ "Sr.no": ( - {item.documentType === "application/pdf" ? : } + {item.documentType === "application/pdf" ? ( + + ) : ( + + )} ), "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)} ), 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)} > @@ -307,32 +291,23 @@ console.log(id); ), })); - - return ( - - setSearchTerm(e.target.value)} - /> + + + + - { - 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: () => , }); - 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 }) => { ), - Icon: ( - item.iconFilePath && - - - - // https://admin.tanami.betadelivery.com/public/icons/linkedin.png ), + + // https://admin.tanami.betadelivery.com/public/icons/linkedin.png Action: ( {/* { ) : ( - - + {/* { focusBorderColor="green.500" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} - /> + /> */} - - - - + + + - - - { ), Icon: ( - item.iconFilePath && @@ -62,7 +62,6 @@ const SetDisplayOrder = ({data,}) => { ), }))) - console.log(extractedArray); diff --git a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx index 863b7e6..aeb40ad 100644 --- a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx +++ b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx @@ -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: () => ( + + ), + }); + setIsLoading(false); + } else if (res?.data?.statusCode === 201) { + toast({ + render: () => , }); + onClose(); + setIsLoading(false); + setFile(null); + reset(); } - }, [id, create, reset]); + } catch (error) { + console.log(error); + if (error) { + toast({ + render: () => ( + + ), + }); + 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 ( - - - - Edit Document - - - - File Name - - {errors.fileName && ( - - {errors.fileName.message} - - )} - - - Document - - {errors.document && ( - - {errors.document.message} - - )} - - - Type - - {errors.type && ( - - {errors.type.message} - - )} - - {file === null ? - {filteredObject?.Type}: ( - - - {getFileIcon(file.type)} - - {file.name} - - - {bytesToMB(file.size)} - - )} - - - - - - - - - ); - }; - - export default InvestmentEdit; - \ No newline at end of file + {...register("fileName")} + /> + {errors.fileName && ( + + {errors.fileName.message} + + )} + + + Document + + {errors.document && ( + + {errors.document.message} + + )} + + {filterObject !== null && file === null ? ( + + + + {getFileIcon(filterObject?.documentType)} + + + {getFileNameFromPath(filterObject?.documentPath)} + + + {/* {bytesToMB(file.size)} */} + + ) : ( + + + {getFileIcon(file.type)} + + {file.name} + + + {bytesToMB(file.size)} + + )} + + + + + + + + + setAlert(false)} + alertHandler={handleConfirm} + isLoading={isLoading} + message="Are you sure you want to add this document?" + /> + + ); +}; + +export default InvestmentEdit; diff --git a/src/Pages/IO_Management/IOArtifactsAdd.jsx b/src/Pages/IO_Management/IOArtifactsAdd.jsx index 58b4a8e..35f2eb9 100644 --- a/src/Pages/IO_Management/IOArtifactsAdd.jsx +++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx @@ -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: () => , + }); + reset() + setIsLoading(false) + setAlert(false); + onClose(); + } + + } catch (error) { + console.log(error); + } + + + - return ( - <> - - - - - IO Artifacts - - - - - File Name - setFileName(e.target.value)} - fontSize={"sm"} - type="text" - size={"sm"} - /> - - - Document - setFile(e.target.value)} - fontSize={"sm"} - type="file" - className="form-control" - size={"sm"} - /> - - - - - - - - - - - setAlert(false)} - alertHandler={handleSave} - message={"Are you sure you want to add this document?"} - /> - - ); + // Close the form/modal + // onClose(); }; - export default IOArtifactsAdd; - \ No newline at end of file + + 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 ( + <> + + + + + IO Artifacts Image + + + + + Artifact Name + ( + + )} + /> + + {errors.artifactName?.message} + + + + + Artifact Image + + + {!preview && errors.artifactPathName?.message && errors.artifactPathName?.message} + + {preview && Image Preview} + + + + + + + + + + + + setAlert(false)} + alertHandler={handleSave} + message={"Are you sure you want to add this artifact?"} + isLoading={loading} + /> + + ); +}; + +export default IOArtifactsAdd; diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx index e68b29b..3a37bb5 100644 --- a/src/Pages/IO_Management/InvestmentDocuments.jsx +++ b/src/Pages/IO_Management/InvestmentDocuments.jsx @@ -42,7 +42,7 @@ export const getFileIcon = (type) => { return ; case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": case "application/msword": - return ; + return ; 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 ( <> Cancel - @@ -265,7 +269,7 @@ const InvestmentDocuments = ({ setAlert(false)} + onClose={() => setAlert(false)} alertHandler={handleConfirm} isLoading={isLoading} message="Are you sure you want to add this document?" diff --git a/src/Pages/IO_Management/KeyMeritsAdd.jsx b/src/Pages/IO_Management/KeyMeritsAdd.jsx index 3bf0b2c..c2d0f2a 100644 --- a/src/Pages/IO_Management/KeyMeritsAdd.jsx +++ b/src/Pages/IO_Management/KeyMeritsAdd.jsx @@ -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: () => , + render: () => ( + + ), }); - 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: () => , + render: () => ( + + ), }); } 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 ( <> - Key Merits + Key Merits - - - Title + + + + + Title (English) ( - )} - /> + )}/> {errors.meritsHeader?.message} - - Sub Title + + + + Title (Arabic) + ( + + )} + /> + + {errors.meritsHeaderArabic?.message} + + + + + Description (English) ( - )} /> @@ -157,33 +233,107 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id }) => { {errors.meritsDescription?.message} - - Icon + + + + Description (Arabic) ( - { - onChange(e.target.files[0]); - handleFileChange(e); - }} - onBlur={onBlur} + render={({ field }) => ( +