update tabs
This commit is contained in:
YasinShaikh123
@@ -1557,6 +1557,123 @@ const GlobalStateProvider = ({ children }) => {
|
||||
},
|
||||
]);
|
||||
|
||||
const [approved, setApproved] = useState([
|
||||
{
|
||||
id: 1,
|
||||
transactionDate: "02-Jan-24",
|
||||
particulars: "Cash Reserve- Initated",
|
||||
amount: "50,000.00",
|
||||
Comments: "",
|
||||
user: "Faisal",
|
||||
entryDate: "02-Jan-24",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
transactionDate: "12-Feb-24",
|
||||
particulars: "Fees & Expense",
|
||||
amount: "-22,000.00",
|
||||
Comments: "",
|
||||
user: "Faisal",
|
||||
entryDate: "13-Feb-24",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
transactionDate: "12-Feb-24",
|
||||
particulars: "Distribution Received From Sponsor",
|
||||
amount: "50,000.00",
|
||||
Comments: "",
|
||||
user: "Nawab",
|
||||
entryDate: "24-Mar-24",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
transactionDate: "28-Mar-24",
|
||||
particulars: "Distribution Paid To Investors",
|
||||
amount: "-40,000.00",
|
||||
Comments: "",
|
||||
user: "Faisal",
|
||||
entryDate: "28-Mar-24",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
transactionDate: "26-Jun-24",
|
||||
particulars: "Distribution Received From Sponsor",
|
||||
amount: "70,000.00",
|
||||
Comments: "",
|
||||
user: "Faisal",
|
||||
entryDate: "27-Jun-24",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
transactionDate: "28-Jun-24",
|
||||
particulars: "Distribution Paid To Investors",
|
||||
amount: "-60,000.00",
|
||||
Comments: "",
|
||||
user: "Nawab",
|
||||
entryDate: "28-Jun-24",
|
||||
},
|
||||
]);
|
||||
|
||||
const [iONAVDetail, setIONAVDetail] = useState([
|
||||
{
|
||||
id: 1,
|
||||
valuationDate: "01-Jul-24",
|
||||
nav: "1,229,750.00 ",
|
||||
lastUpdate: "12.56",
|
||||
investmentClose: "29.45",
|
||||
updatedBy: "Nawab",
|
||||
updatedOn: "01-Jul-24",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
valuationDate: "25-Apr-24",
|
||||
nav: "1,092,500.00",
|
||||
lastUpdate: "15.00",
|
||||
investmentClose: "15.00",
|
||||
updatedBy: "Faisal",
|
||||
updatedOn: "25-Apr-24",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
valuationDate: "02-Jan-24",
|
||||
nav: "950,000.00",
|
||||
lastUpdate: "",
|
||||
investmentClose: "",
|
||||
updatedBy: "Faisal",
|
||||
updatedOn: "02-Jan-24",
|
||||
},
|
||||
]);
|
||||
|
||||
const [iOTransaction, setIOTransaction] = useState([
|
||||
{
|
||||
id: 1,
|
||||
transactionName: "Amount Invested",
|
||||
amount: "995,000",
|
||||
createdBy: "Faisal",
|
||||
createdOn: "27-Oct-24",
|
||||
approvedBy: "Nawab",
|
||||
approvedOn: "28-Oct-24",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
transactionName: "Distribution To Sponser",
|
||||
amount: "40,000",
|
||||
createdBy: "Faisal",
|
||||
createdOn: "30-Oct-24",
|
||||
approvedBy: "Nawab",
|
||||
approvedOn: "31-Oct-24",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
transactionName: "Amount Invested",
|
||||
amount: "995,000",
|
||||
createdBy: "Faisal",
|
||||
createdOn: "27-Oct-24",
|
||||
approvedBy: "Nawab",
|
||||
approvedOn: "28-Oct-24",
|
||||
},
|
||||
]);
|
||||
|
||||
const [InvestorWallet, setInvestorWallet] = useState(null);
|
||||
|
||||
// ==============[ prod state ]===============================
|
||||
@@ -1643,7 +1760,13 @@ const GlobalStateProvider = ({ children }) => {
|
||||
fawateerRequest,
|
||||
setFawateerRequest,
|
||||
approveHistory,
|
||||
setApproveHistory
|
||||
setApproveHistory,
|
||||
approved,
|
||||
setApproved,
|
||||
iONAVDetail,
|
||||
setIONAVDetail,
|
||||
iOTransaction,
|
||||
setIOTransaction,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -56,7 +56,7 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
|
||||
const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
|
||||
// const {
|
||||
// data
|
||||
// } = useGetArtifactsQuery(id)
|
||||
// } = useGetArtifactsQuery(id)
|
||||
|
||||
const {
|
||||
control,
|
||||
|
||||
@@ -8,8 +8,8 @@ import IODetails from "./IODetails";
|
||||
import KeyMerits from "./KeyMerits";
|
||||
import IOArtifacts from "./IOArtifacts";
|
||||
import Investors from "./Investors";
|
||||
import IOCashDetails from "./IOCashDetails";
|
||||
import IONAVDetails from "./IONAVDetails";
|
||||
// import IOCashDetails from "./IOCashDetailsold";
|
||||
// import IONAVDetails from "./IONAVDetailsOld";
|
||||
import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import
|
||||
import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader";
|
||||
import { useParams } from "react-router-dom";
|
||||
@@ -17,6 +17,9 @@ import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
|
||||
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
|
||||
import UnderConstruction from "../../UnderConstruction";
|
||||
import Destribution from "./Destribution";
|
||||
import IOCashDetails from "./IOCashDetails/IOCashDetails";
|
||||
import IONAVDetails from "./IONAVDetails/IONAVDetails";
|
||||
import IOTransaction from "./IOTransaction/IOTransaction";
|
||||
|
||||
const CreateIO = () => {
|
||||
const id = useParams()?.id;
|
||||
@@ -75,6 +78,11 @@ const CreateIO = () => {
|
||||
Content: Destribution,
|
||||
isDisabled: id ? true : true,
|
||||
},
|
||||
{
|
||||
label: "IO Transaction",
|
||||
Content: IOTransaction,
|
||||
isDisabled: id ? true : true,
|
||||
},
|
||||
];
|
||||
|
||||
const [tabs, setTabs] = useState(initialTabsState);
|
||||
@@ -114,7 +122,8 @@ const CreateIO = () => {
|
||||
<Tab
|
||||
isDisabled={isDisabled}
|
||||
key={index}
|
||||
fontSize={"sm"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
|
||||
254
src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
Normal file
254
src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
Normal file
@@ -0,0 +1,254 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerOverlay,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Select,
|
||||
Stack,
|
||||
Textarea,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import * as yup from "yup";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
// import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
|
||||
import { useParams } from "react-router-dom";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CurrencyInput from "../../../../Components/CurrencyInput";
|
||||
|
||||
const cashDetails = yup.object().shape({
|
||||
transactionDate: yup.string().required("Date is required"),
|
||||
ioTransType_xid: yup.number().required("Cash transaction is required"),
|
||||
transactionAmount: yup.number().required("Transaction Amount is required"),
|
||||
comments: yup.string().notRequired(),
|
||||
});
|
||||
|
||||
const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
|
||||
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();
|
||||
|
||||
|
||||
|
||||
// ======================[ Cotext Api ]
|
||||
const { IODetails } = useContext(GlobalStateContext);
|
||||
const found = data?.find((item) => item?.id === actionId);
|
||||
|
||||
|
||||
// const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
|
||||
// const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
|
||||
// const {
|
||||
// data
|
||||
// } = useGetArtifactsQuery(id)
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(cashDetails),
|
||||
});
|
||||
|
||||
|
||||
// const [createIoCash] = useCreateIoCashMutation()
|
||||
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
|
||||
const res = await createIoCash({ data, id })
|
||||
if (res?.data?.statusCode === 200) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
render: () => <ToastBox message={res?.data?.message} />,
|
||||
});
|
||||
handleClose()
|
||||
}else if(res?.error?.status === 400){
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleConfirm = () => {
|
||||
handleSubmit(onSubmit)();
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
handleSubmit(onSubmit)();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAlert(false)
|
||||
onClose()
|
||||
reset({
|
||||
transactionAmount:""
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
size={"md"}
|
||||
isOpen={isOpen}
|
||||
placement="right"
|
||||
initialFocusRef={firstField}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent>
|
||||
<DrawerCloseButton />
|
||||
<DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
<Stack spacing={4}>
|
||||
<FormControl isInvalid={errors.transactionDate} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Date Selection</FormLabel>
|
||||
<Controller
|
||||
name="transactionDate"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.transactionDate?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<FormControl isInvalid={errors.ioTransType_xid} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
|
||||
<Controller
|
||||
name="ioTransType_xid"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
{...field}
|
||||
placeholder="Select an option"
|
||||
fontSize={"sm"}
|
||||
size={"sm"}
|
||||
focusBorderColor="forestGreen.300"
|
||||
>
|
||||
{IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
|
||||
<option key={id} value={id}>
|
||||
{transactionName}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.ioTransType_xid?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
|
||||
<FormControl isInvalid={errors.transactionAmount} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Amount</FormLabel>
|
||||
<Controller
|
||||
name="transactionAmount"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.transactionAmount?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
<FormControl isInvalid={errors.comments}>
|
||||
<FormLabel fontSize={"sm"}>Comments</FormLabel>
|
||||
<Controller
|
||||
name="comments"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea {...field} textAlign={'left'}
|
||||
focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.comments?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
</Stack>
|
||||
</DrawerBody>
|
||||
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme={"forestGreen"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
mr={3}
|
||||
onClick={handleClose}
|
||||
>
|
||||
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 cash details?"}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddApproved;
|
||||
|
||||
254
src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
Normal file
254
src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
Normal file
@@ -0,0 +1,254 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerOverlay,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Select,
|
||||
Stack,
|
||||
Textarea,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import * as yup from "yup";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
// import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
|
||||
import { useParams } from "react-router-dom";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CurrencyInput from "../../../../Components/CurrencyInput";
|
||||
|
||||
const cashDetails = yup.object().shape({
|
||||
transactionDate: yup.string().required("Date is required"),
|
||||
ioTransType_xid: yup.number().required("Cash transaction is required"),
|
||||
transactionAmount: yup.number().required("Transaction Amount is required"),
|
||||
comments: yup.string().notRequired(),
|
||||
});
|
||||
|
||||
const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
|
||||
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();
|
||||
|
||||
|
||||
|
||||
// ======================[ Cotext Api ]
|
||||
const { IODetails } = useContext(GlobalStateContext);
|
||||
const found = data?.find((item) => item?.id === actionId);
|
||||
|
||||
|
||||
// const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
|
||||
// const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
|
||||
// const {
|
||||
// data
|
||||
// } = useGetArtifactsQuery(id)
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(cashDetails),
|
||||
});
|
||||
|
||||
|
||||
// const [createIoCash] = useCreateIoCashMutation()
|
||||
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
|
||||
const res = await createIoCash({ data, id })
|
||||
if (res?.data?.statusCode === 200) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
render: () => <ToastBox message={res?.data?.message} />,
|
||||
});
|
||||
handleClose()
|
||||
}else if(res?.error?.status === 400){
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleConfirm = () => {
|
||||
handleSubmit(onSubmit)();
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
handleSubmit(onSubmit)();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAlert(false)
|
||||
onClose()
|
||||
reset({
|
||||
transactionAmount:""
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
size={"md"}
|
||||
isOpen={isOpen}
|
||||
placement="right"
|
||||
initialFocusRef={firstField}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent>
|
||||
<DrawerCloseButton />
|
||||
<DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
<Stack spacing={4}>
|
||||
<FormControl isInvalid={errors.transactionDate} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Date Selection</FormLabel>
|
||||
<Controller
|
||||
name="transactionDate"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.transactionDate?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<FormControl isInvalid={errors.ioTransType_xid} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
|
||||
<Controller
|
||||
name="ioTransType_xid"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
{...field}
|
||||
placeholder="Select an option"
|
||||
fontSize={"sm"}
|
||||
size={"sm"}
|
||||
focusBorderColor="forestGreen.300"
|
||||
>
|
||||
{IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
|
||||
<option key={id} value={id}>
|
||||
{transactionName}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.ioTransType_xid?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
|
||||
<FormControl isInvalid={errors.transactionAmount} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Amount</FormLabel>
|
||||
<Controller
|
||||
name="transactionAmount"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.transactionAmount?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
<FormControl isInvalid={errors.comments}>
|
||||
<FormLabel fontSize={"sm"}>Comments</FormLabel>
|
||||
<Controller
|
||||
name="comments"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea {...field} textAlign={'left'}
|
||||
focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.comments?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
</Stack>
|
||||
</DrawerBody>
|
||||
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme={"forestGreen"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
mr={3}
|
||||
onClick={handleClose}
|
||||
>
|
||||
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 cash details?"}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddPending;
|
||||
|
||||
249
src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
Normal file
249
src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerOverlay,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Select,
|
||||
Stack,
|
||||
Textarea,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import * as yup from "yup";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
// import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
|
||||
import { useParams } from "react-router-dom";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CurrencyInput from "../../../../Components/CurrencyInput";
|
||||
|
||||
const cashDetails = yup.object().shape({
|
||||
transactionDate: yup.string().required("Date is required"),
|
||||
ioTransType_xid: yup.number().required("Cash transaction is required"),
|
||||
transactionAmount: yup.number().required("Transaction Amount is required"),
|
||||
comments: yup.string().notRequired(),
|
||||
});
|
||||
|
||||
const AddRejected = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
|
||||
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();
|
||||
|
||||
|
||||
|
||||
// ======================[ Cotext Api ]
|
||||
const { IODetails } = useContext(GlobalStateContext);
|
||||
const found = data?.find((item) => item?.id === actionId);
|
||||
|
||||
|
||||
// const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
|
||||
// const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
|
||||
// const {
|
||||
// data
|
||||
// } = useGetArtifactsQuery(id)
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(cashDetails),
|
||||
});
|
||||
|
||||
|
||||
// const [createIoCash] = useCreateIoCashMutation()
|
||||
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
|
||||
const res = await createIoCash({ data, id })
|
||||
if (res?.data?.statusCode === 200) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
render: () => <ToastBox message={res?.data?.message} />,
|
||||
});
|
||||
handleClose()
|
||||
}else if(res?.error?.status === 400){
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleConfirm = () => {
|
||||
handleSubmit(onSubmit)();
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
handleSubmit(onSubmit)();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAlert(false)
|
||||
onClose()
|
||||
reset({
|
||||
transactionAmount:""
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
size={"md"}
|
||||
isOpen={isOpen}
|
||||
placement="right"
|
||||
initialFocusRef={firstField}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent>
|
||||
<DrawerCloseButton />
|
||||
<DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
<Stack spacing={4}>
|
||||
<FormControl isInvalid={errors.transactionDate} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Date Selection</FormLabel>
|
||||
<Controller
|
||||
name="transactionDate"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.transactionDate?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<FormControl isInvalid={errors.ioTransType_xid} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
|
||||
<Controller
|
||||
name="ioTransType_xid"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
{...field}
|
||||
placeholder="Select an option"
|
||||
fontSize={"sm"}
|
||||
size={"sm"}
|
||||
focusBorderColor="forestGreen.300"
|
||||
>
|
||||
{IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
|
||||
<option key={id} value={id}>
|
||||
{transactionName}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.ioTransType_xid?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
<FormControl isInvalid={errors.transactionAmount} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Amount</FormLabel>
|
||||
<Controller
|
||||
name="transactionAmount"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.transactionAmount?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
<FormControl isInvalid={errors.comments}>
|
||||
<FormLabel fontSize={"sm"}>Comments</FormLabel>
|
||||
<Controller
|
||||
name="comments"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea {...field} textAlign={'left'}
|
||||
focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
|
||||
{errors.comments?.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
</Stack>
|
||||
</DrawerBody>
|
||||
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme={"forestGreen"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
mr={3}
|
||||
onClick={handleClose}
|
||||
>
|
||||
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 cash details?"}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddRejected;
|
||||
|
||||
361
src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
Normal file
361
src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
Normal file
@@ -0,0 +1,361 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
|
||||
import { LuFileSpreadsheet } from "react-icons/lu";
|
||||
import * as XLSX from "xlsx";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import AddCashDetails from "../AddCashDetails";
|
||||
import { debounce } from "../../../Admin/Contact";
|
||||
import AddApproved from "./addApproved";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Approved = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, approved, setApproved } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
console.log("==============",IODetails?.ioCashStatusHistory?.Approved);
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioCashStatusHistory?.Approved?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionDate;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Transaction date",
|
||||
"Amount",
|
||||
"Comments",
|
||||
"Update by",
|
||||
"Update On",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Transaction date": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.transactionDate)}
|
||||
</Text>
|
||||
),
|
||||
"Amount": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Comments": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.comments ? item?.comments : "---" }
|
||||
</Text>
|
||||
),
|
||||
"Update by": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Avatar
|
||||
mr={2}
|
||||
size="sm"
|
||||
name={item.creator?.firstName}
|
||||
src={item.creator?.profilePhoto}
|
||||
/>
|
||||
{item?.creator?.firstName}
|
||||
</Text>
|
||||
),
|
||||
"Update On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item.updatedAt)}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map((item, index) => ({
|
||||
"Transaction date": item?.transactionDate,
|
||||
"Transaction type": item?.transactionType,
|
||||
Amount: parseFloat(item?.transactionAmount) || 0,
|
||||
Comments: item?.comments,
|
||||
}));
|
||||
|
||||
const exportToExcelNew = (data, fileName) => {
|
||||
const worksheet = XLSX.utils.json_to_sheet(data);
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
|
||||
|
||||
// Export file
|
||||
XLSX.writeFile(workbook, `${fileName}.xlsx`);
|
||||
};
|
||||
|
||||
const Total = () => {
|
||||
return (
|
||||
<Table size="sm">
|
||||
<Tbody backgroundColor="gray.50">
|
||||
<Tr>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="140px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
Balance in IO Cash
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="120px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{"48,000.00"}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="150px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
></Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
></Th>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<Button
|
||||
onClick={() =>
|
||||
exportToExcelNew(ioCashExporteDetails, "IO Cash History")
|
||||
}
|
||||
leftIcon={<LuFileSpreadsheet />}
|
||||
colorScheme="forestGreen"
|
||||
size={"sm"}
|
||||
variant={"outline"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
isDisabled={ioCashExporteDetails?.length === 0}
|
||||
>
|
||||
Export xls
|
||||
</Button>
|
||||
{/* <Button
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme={"forestGreen"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
size={"sm"}
|
||||
fontWeight={500}
|
||||
>
|
||||
Add
|
||||
</Button> */}
|
||||
{IODetails?.isInvestedAmount ? (
|
||||
<Button
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="forestGreen"
|
||||
size={"sm"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
) : null}
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
total={<Total/>}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<AddApproved
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
firstField={firstField}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Approved;
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import Approved from "./Approved";
|
||||
import Pending from "./Pending";
|
||||
import Rejected from "./Rejected";
|
||||
|
||||
const IOCashDetails = () => {
|
||||
return (
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Approved
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Rejected
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<Approved />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Pending />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Rejected />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default IOCashDetails;
|
||||
364
src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
Normal file
364
src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
Normal file
@@ -0,0 +1,364 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
AddIcon,
|
||||
CheckIcon,
|
||||
CloseIcon,
|
||||
DeleteIcon,
|
||||
EditIcon,
|
||||
ViewIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { LuFileSpreadsheet } from "react-icons/lu";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import AddCashDetails from "../AddCashDetails";
|
||||
import { debounce } from "../../../Admin/Contact";
|
||||
import AddPending from "./AddPending";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Pending = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, approved, setApproved } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioCashStatusHistory?.Pending?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionDate;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Transaction date",
|
||||
"Amount",
|
||||
"Comments",
|
||||
"Update by",
|
||||
"Update On",
|
||||
"Status",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text as={"span"} color={"gray.800"} fontWeight={"500"}>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Transaction date": (
|
||||
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
|
||||
{formatDate(item?.transactionDate)}
|
||||
</Text>
|
||||
),
|
||||
Amount: (
|
||||
<Text as={"span"} color={"gray.800"} fontWeight={"500"}>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
Comments: (
|
||||
<Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
|
||||
{item?.comments}
|
||||
</Text>
|
||||
),
|
||||
"Update by": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Avatar
|
||||
mr={2}
|
||||
size="sm"
|
||||
name={item.creator?.firstName}
|
||||
src={item.creator?.profilePhoto}
|
||||
/>
|
||||
{item?.creator?.firstName}
|
||||
</Text>
|
||||
),
|
||||
"Update On": (
|
||||
<Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
|
||||
{formatDate(item.updatedAt)}
|
||||
</Text>
|
||||
),
|
||||
Status: (
|
||||
<Box display={"flex"} justifyContent={"center"} gap={2}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Approve"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="left-start"
|
||||
>
|
||||
<Button
|
||||
// colorScheme="forestGreen"
|
||||
// color="green.500"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
textTransform={"inherit"}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
py={1}
|
||||
onClick={() => {
|
||||
setActionId(item.id);
|
||||
onConfirmOpen();
|
||||
}}
|
||||
colorScheme="green"
|
||||
variant={"solid"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<CheckIcon fontSize={"12px"} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Reject"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="left-start"
|
||||
>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
// color="red.500"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
textTransform={"inherit"}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
onClick={() => {
|
||||
setActionId(item.id);
|
||||
onRejectOpen();
|
||||
}}
|
||||
py={1}
|
||||
// variant={"solid"}
|
||||
>
|
||||
<CloseIcon fontSize={"10px"} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const Total = () => {
|
||||
return (
|
||||
<Table size="sm">
|
||||
<Tbody backgroundColor="gray.50">
|
||||
<Tr>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="130px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
Balance in IO Cash
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="150px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="150px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{"48,000.00"}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
></Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="80px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
></Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="50px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
></Th>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<Button
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme={"forestGreen"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
size={"sm"}
|
||||
fontWeight={500}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
total={<Total />}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<AddPending isOpen={isOpen} onClose={onClose} firstField={firstField} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pending;
|
||||
314
src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
Normal file
314
src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
Normal file
@@ -0,0 +1,314 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { AddIcon} from "@chakra-ui/icons";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import AddCashDetails from "../AddCashDetails";
|
||||
import AddRejected from "./AddRejected";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Rejected = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, approved, setApproved } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioCashStatusHistory?.Reject?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionDate;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Transaction date",
|
||||
"Amount",
|
||||
"Comments",
|
||||
"Update by",
|
||||
"Update On",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Transaction date": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.transactionDate)}
|
||||
</Text>
|
||||
),
|
||||
"Amount": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Comments": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.comments}
|
||||
</Text>
|
||||
),
|
||||
"Update by": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Avatar
|
||||
mr={2}
|
||||
size="sm"
|
||||
name={item.creator?.firstName}
|
||||
src={item.creator?.profilePhoto}
|
||||
/>
|
||||
{item?.creator?.firstName}
|
||||
</Text>
|
||||
),
|
||||
"Update On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item.updatedAt)}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const Total = () => {
|
||||
return (
|
||||
<Table size="sm">
|
||||
<Tbody backgroundColor="gray.50">
|
||||
<Tr>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="130px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
Balance in IO Cash
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="150px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="150px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{"48,000.00"}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
></Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="100px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
></Th>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<Button
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme={"forestGreen"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
size={"sm"}
|
||||
fontWeight={500}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
total={<Total/>}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<AddRejected
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
firstField={firstField}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Rejected;
|
||||
|
||||
@@ -29,7 +29,7 @@ import { exportToExcel, exportToExcelNew } from "../../../Constants/Constants";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
|
||||
|
||||
const IOCashDetails = () => {
|
||||
const IOCashDetailsOld = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
@@ -75,7 +75,7 @@ const IOCashDetails = () => {
|
||||
"Update by ",
|
||||
"Update On",
|
||||
];
|
||||
|
||||
|
||||
const handleUpdateStatus = debounce((id) => {
|
||||
setCaseDetails((prevSponser) =>
|
||||
prevSponser.map((sponsor) =>
|
||||
@@ -134,9 +134,9 @@ const IOCashDetails = () => {
|
||||
</Badge>
|
||||
{/* {parseFloat(item.transactionAmount || 0).toLocaleString()} */}
|
||||
{`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}`}
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}`}
|
||||
</Text>
|
||||
),
|
||||
Comments: (
|
||||
@@ -180,8 +180,6 @@ const IOCashDetails = () => {
|
||||
),
|
||||
}));
|
||||
|
||||
|
||||
|
||||
const customHeaders = [
|
||||
{ label: "Date", key: "transactionDate" },
|
||||
{ label: "Transaction type", key: "transactionType" },
|
||||
@@ -192,12 +190,12 @@ const IOCashDetails = () => {
|
||||
// Add more headers as needed
|
||||
];
|
||||
|
||||
const ioCashExporteDetails = IODetails?.ioCashHistory?.map((item, index) =>({
|
||||
"Date": item?.transactionDate,
|
||||
const ioCashExporteDetails = IODetails?.ioCashHistory?.map((item, index) => ({
|
||||
Date: item?.transactionDate,
|
||||
"Transaction type": item?.transactionType,
|
||||
"Amount":parseFloat(item?.transactionAmount) || 0,
|
||||
"Comments": item?.comments
|
||||
}))
|
||||
Amount: parseFloat(item?.transactionAmount) || 0,
|
||||
Comments: item?.comments,
|
||||
}));
|
||||
|
||||
console.log(ioCashExporteDetails);
|
||||
|
||||
@@ -312,8 +310,7 @@ const IOCashDetails = () => {
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<Button
|
||||
onClick={() =>
|
||||
exportToExcelNew(ioCashExporteDetails, "IO Cash History")
|
||||
@@ -324,25 +321,24 @@ const IOCashDetails = () => {
|
||||
variant={"outline"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
|
||||
isDisabled={ioCashExporteDetails?.length === 0}
|
||||
>
|
||||
Export xls
|
||||
</Button>
|
||||
|
||||
{IODetails?.isInvestedAmount ? (
|
||||
<Button
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="forestGreen"
|
||||
size={"sm"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Add IO Cash
|
||||
</Button>
|
||||
) : null}
|
||||
</HStack>
|
||||
{IODetails?.isInvestedAmount ? (
|
||||
<Button
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="forestGreen"
|
||||
size={"sm"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Add IO Cash
|
||||
</Button>
|
||||
) : null}
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
@@ -376,4 +372,4 @@ const IOCashDetails = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default IOCashDetails;
|
||||
export default IOCashDetailsOld;
|
||||
260
src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
Normal file
260
src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
|
||||
import { LuFileSpreadsheet } from "react-icons/lu";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import * as XLSX from "xlsx";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import AddCashDetails from "../AddCashDetails";
|
||||
import { debounce } from "../../../Admin/Contact";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Approved = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, iONAVDetail, setIONAVDetail } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioNAVStatusHistory?.Approved?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionAmount;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Valuation date",
|
||||
"NAV",
|
||||
"Last Nav Update",
|
||||
"Investment Closed",
|
||||
"Comments",
|
||||
"Updated By",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Valuation date": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.transactionDate)}
|
||||
</Text>
|
||||
),
|
||||
"NAV": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Last Nav Update": (
|
||||
<Text
|
||||
justifyContent={"center"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.previousNAVvalue && `${item.previousNAVvalue}`}
|
||||
</Text>
|
||||
),
|
||||
"Investment Closed": (
|
||||
<Text
|
||||
justifyContent={"center"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item?.initialNAVvalue && `${item?.initialNAVvalue}`}
|
||||
</Text>
|
||||
),
|
||||
"Comments": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.comments ? item?.comments : "---" }
|
||||
</Text>
|
||||
),
|
||||
"Updated By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Avatar
|
||||
mr={2}
|
||||
size="sm"
|
||||
name={item.creator?.firstName}
|
||||
src={item.creator?.profilePhoto}
|
||||
/>
|
||||
{item?.creator?.firstName}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const exportToExcelNew = (data, fileName) => {
|
||||
const worksheet = XLSX.utils.json_to_sheet(data);
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
|
||||
|
||||
// Export file
|
||||
XLSX.writeFile(workbook, `${fileName}.xlsx`);
|
||||
};
|
||||
|
||||
const ioNavExport = IODetails?.ioNAVStatusHistory?.Approved?.map((item, index) => ({
|
||||
"ID": item?.id, // Keep as integer if it's already a number
|
||||
"Valuation date": formatDate(item?.transactionDate), // Assuming this is a date, no conversion needed
|
||||
"NAV": parseFloat(item?.transactionAmount) || 0, // Convert to float
|
||||
"Last Nav Update": parseFloat(item?.previousNAVvalue) || 0, // Convert to float
|
||||
"Investment Closed": parseFloat(item?.initialNAVvalue) || 0, // Convert to float
|
||||
"Comments": item?.comments, // Keep as string
|
||||
// "Transaction Type": item?.transactionType,
|
||||
"Updated By": item?.creator?.firstName, // Keep as string
|
||||
// "Update On": formatDate(item?.updatedAt) // Assuming this is a date, no conversion needed
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
onClick={() =>
|
||||
exportToExcelNew(ioNavExport, "Io Nav details")
|
||||
}
|
||||
leftIcon={<LuFileSpreadsheet />}
|
||||
colorScheme="forestGreen"
|
||||
size={"sm"}
|
||||
variant={"outline"}
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
isDisabled={ioNavExport?.length === 0}
|
||||
>
|
||||
Export xls
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Approved;
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import Approved from "./Approved";
|
||||
import Pending from "./Pending";
|
||||
import Rejected from "./Rejected";
|
||||
|
||||
const IONAVDetails = () => {
|
||||
return (
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Approved
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Rejected
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<Approved />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Pending />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Rejected />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default IONAVDetails;
|
||||
273
src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
Normal file
273
src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Text,
|
||||
Tooltip,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Pending = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, iONAVDetail, setIONAVDetail } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioNAVStatusHistory?.Pending?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionDate;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Valuation date",
|
||||
"NAV",
|
||||
"Last Nav Update",
|
||||
"Investment Closed",
|
||||
"Comments",
|
||||
"Updated By",
|
||||
"Status",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Valuation date": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.transactionDate)}
|
||||
</Text>
|
||||
),
|
||||
"NAV": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Last Nav Update": (
|
||||
<Text
|
||||
justifyContent={"center"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.previousNAVvalue && `${item.previousNAVvalue}`}
|
||||
</Text>
|
||||
),
|
||||
"Investment Closed": (
|
||||
<Text
|
||||
justifyContent={"center"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item?.initialNAVvalue && `${item?.initialNAVvalue}`}
|
||||
</Text>
|
||||
),
|
||||
"Comments": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.comments ? item?.comments : "---" }
|
||||
</Text>
|
||||
),
|
||||
"Updated By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Avatar
|
||||
mr={2}
|
||||
size="sm"
|
||||
name={item.creator?.firstName}
|
||||
src={item.creator?.profilePhoto}
|
||||
/>
|
||||
{item?.creator?.firstName}
|
||||
</Text>
|
||||
),
|
||||
"Status": (
|
||||
<Box display={"flex"} justifyContent={"center"} gap={2}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Approve"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="left-start"
|
||||
>
|
||||
<Button
|
||||
// colorScheme="forestGreen"
|
||||
// color="green.500"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
textTransform={"inherit"}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
py={1}
|
||||
onClick={() => {
|
||||
setActionId(item.id);
|
||||
onConfirmOpen();
|
||||
}}
|
||||
colorScheme="green"
|
||||
variant={"solid"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<CheckIcon fontSize={"12px"} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Reject"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="left-start"
|
||||
>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
// color="red.500"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
textTransform={"inherit"}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
onClick={() => {
|
||||
setActionId(item.id);
|
||||
onRejectOpen();
|
||||
}}
|
||||
py={1}
|
||||
// variant={"solid"}
|
||||
>
|
||||
<CloseIcon fontSize={"10px"} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pending;
|
||||
|
||||
224
src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
Normal file
224
src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
|
||||
import { LuFileSpreadsheet } from "react-icons/lu";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import AddCashDetails from "../AddCashDetails";
|
||||
import { debounce } from "../../../Admin/Contact";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Rejected = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, iONAVDetail, setIONAVDetail } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioNAVStatusHistory?.Reject?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionAmount;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Valuation date",
|
||||
"NAV",
|
||||
"Last Nav Update",
|
||||
"Investment Closed",
|
||||
"Comments",
|
||||
"Updated By",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Valuation date": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.transactionDate)}
|
||||
</Text>
|
||||
),
|
||||
"NAV": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Last Nav Update": (
|
||||
<Text
|
||||
justifyContent={"center"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item.previousNAVvalue && `${item.previousNAVvalue}`}
|
||||
</Text>
|
||||
),
|
||||
"Investment Closed": (
|
||||
<Text
|
||||
justifyContent={"center"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item?.initialNAVvalue && `${item?.initialNAVvalue}`}
|
||||
</Text>
|
||||
),
|
||||
"Comments": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.comments ? item?.comments : "---" }
|
||||
</Text>
|
||||
),
|
||||
"Updated By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Avatar
|
||||
mr={2}
|
||||
size="sm"
|
||||
name={item.creator?.firstName}
|
||||
src={item.creator?.profilePhoto}
|
||||
/>
|
||||
{item?.creator?.firstName}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Rejected;
|
||||
|
||||
215
src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
Normal file
215
src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
|
||||
import { LuFileSpreadsheet } from "react-icons/lu";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import AddCashDetails from "../AddCashDetails";
|
||||
import { debounce } from "../../../Admin/Contact";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Approved = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, iOTransaction, setIOTransaction } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioTransactionRecords?.Approved?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionAmount;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Transaction Name",
|
||||
"Amount",
|
||||
"Created By",
|
||||
"Created On",
|
||||
"Approved By",
|
||||
"Approved On",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Transaction Name": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.transactionType}
|
||||
</Text>
|
||||
),
|
||||
"Amount": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Created By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.createdBy}
|
||||
</Text>
|
||||
),
|
||||
"Created On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.createdAt)}
|
||||
</Text>
|
||||
),
|
||||
"Approved By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.modifier ? item?.modifier : "---" }
|
||||
</Text>
|
||||
),
|
||||
"Approved On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.modifier ? formatDate(item?.updatedAt) : "---" }
|
||||
{}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Approved;
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import Approved from "./Approved";
|
||||
import Pending from "./Pending";
|
||||
import Rejected from "./Rejected";
|
||||
|
||||
const IOTransaction = () => {
|
||||
return (
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Approved
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Rejected
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<Approved />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Pending />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Rejected />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default IOTransaction;
|
||||
269
src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
Normal file
269
src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
Normal file
@@ -0,0 +1,269 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Pending = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, iOTransaction, setIOTransaction } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioTransactionRecords?.Pending?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionName;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Transaction Name",
|
||||
"Amount",
|
||||
"Created By",
|
||||
"Created On",
|
||||
"Approved By",
|
||||
"Approved On",
|
||||
"Status"
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Transaction Name": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.transactionType}
|
||||
</Text>
|
||||
),
|
||||
"Amount": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Created By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.createdBy}
|
||||
</Text>
|
||||
),
|
||||
"Created On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.createdAt)}
|
||||
</Text>
|
||||
),
|
||||
"Approved By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.modifier ? item?.modifier : "---" }
|
||||
</Text>
|
||||
),
|
||||
"Approved On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.updatedAt)}
|
||||
</Text>
|
||||
),
|
||||
"Status": (
|
||||
<Box display={"flex"} justifyContent={"center"} gap={2}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Approve"
|
||||
bg="#fff"
|
||||
color={"green.500"}
|
||||
placement="left-start"
|
||||
>
|
||||
<Button
|
||||
// colorScheme="forestGreen"
|
||||
// color="green.500"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
textTransform={"inherit"}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
py={1}
|
||||
onClick={() => {
|
||||
setActionId(item.id);
|
||||
onConfirmOpen();
|
||||
}}
|
||||
colorScheme="green"
|
||||
variant={"solid"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<CheckIcon fontSize={"12px"} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Reject"
|
||||
bg="#fff"
|
||||
color={"red.500"}
|
||||
placement="left-start"
|
||||
>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
// color="red.500"
|
||||
rounded={"sm"}
|
||||
size={"xs"}
|
||||
textTransform={"inherit"}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
onClick={() => {
|
||||
setActionId(item.id);
|
||||
onRejectOpen();
|
||||
}}
|
||||
py={1}
|
||||
// variant={"solid"}
|
||||
>
|
||||
<CloseIcon fontSize={"10px"} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pending;
|
||||
|
||||
214
src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
Normal file
214
src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
|
||||
import { LuFileSpreadsheet } from "react-icons/lu";
|
||||
import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
|
||||
import NormalTable from "../../../../Components/DataTable/NormalTable";
|
||||
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
|
||||
import ToastBox from "../../../../Components/ToastBox";
|
||||
import AddCashDetails from "../AddCashDetails";
|
||||
import { debounce } from "../../../Admin/Contact";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString();
|
||||
|
||||
const Rejected = () => {
|
||||
const toast = useToast();
|
||||
const firstField = useRef();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { IODetails, iOTransaction, setIOTransaction } =
|
||||
useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [deleteAlert, setDeleteAlert] = useState(false);
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
|
||||
// Cleanup the timer on component unmount
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Table filter
|
||||
const filteredData = IODetails?.ioTransactionRecords?.Reject?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.transactionName;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name.toLowerCase().includes(searchLower);
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr No.",
|
||||
"Transaction Name",
|
||||
"Amount",
|
||||
"Created By",
|
||||
"Created On",
|
||||
"Approved By",
|
||||
"Approved On",
|
||||
];
|
||||
|
||||
const extractedArray = filteredData?.map((item, index) => ({
|
||||
id: item?.id,
|
||||
"Sr No.": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Transaction Name": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.transactionType}
|
||||
</Text>
|
||||
),
|
||||
"Amount": (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
<Badge ms={1} colorScheme="green" me={1}>
|
||||
$
|
||||
</Badge>
|
||||
{item?.transactionAmount}
|
||||
</Text>
|
||||
),
|
||||
"Created By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.createdBy}
|
||||
</Text>
|
||||
),
|
||||
"Created On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.createdAt)}
|
||||
</Text>
|
||||
),
|
||||
"Approved By": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item?.modifier ? item?.modifier : "---" }
|
||||
</Text>
|
||||
),
|
||||
"Approved On": (
|
||||
<Text
|
||||
w={"100px"}
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item?.updatedAt)}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setCaseDetails(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} pb={0}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
pb={3}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Rejected;
|
||||
|
||||
@@ -32,11 +32,14 @@ import KeyMerits from "../CreateIO/KeyMerits";
|
||||
import Investors from "../CreateIO/Investors";
|
||||
import EditIO from "../EditIO/EditIO";
|
||||
import IOArtifacts from "../CreateIO/IOArtifacts";
|
||||
import IOCashDetails from "../CreateIO/IOCashDetails";
|
||||
import IONAVDetails from "../CreateIO/IONAVDetails";
|
||||
// import IOCashDetails from "../CreateIO/IOCashDetailsold";
|
||||
// import IONAVDetails from "../CreateIO/IONAVDetailsOld";
|
||||
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
|
||||
import UnderConstruction from "../../UnderConstruction";
|
||||
import Destribution from "../CreateIO/Destribution";
|
||||
import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
|
||||
import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
|
||||
import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
|
||||
|
||||
const ViewIOdata = () => {
|
||||
const params = useParams();
|
||||
@@ -64,6 +67,10 @@ const ViewIOdata = () => {
|
||||
label: "Distribution to Investors",
|
||||
content: <Destribution data={data?.data} />,
|
||||
},
|
||||
{
|
||||
label: "IO Transaction",
|
||||
content: <IOTransaction data={data?.data} />,
|
||||
},
|
||||
// { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'} /> },
|
||||
];
|
||||
|
||||
@@ -101,11 +108,12 @@ const ViewIOdata = () => {
|
||||
: !IODetails?.isInvestedAmount
|
||||
}
|
||||
key={index}
|
||||
fontSize={"sm"}
|
||||
fontSize={"xs"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
fontWeight={500}
|
||||
>
|
||||
{label}
|
||||
</Tab>
|
||||
|
||||
@@ -6,8 +6,6 @@ import {
|
||||
HStack,
|
||||
Input,
|
||||
Select,
|
||||
Switch,
|
||||
Tag,
|
||||
Text,
|
||||
Tooltip,
|
||||
useDisclosure,
|
||||
@@ -103,7 +101,6 @@ const InvestorDetails = () => {
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sr No",
|
||||
|
||||
"Client ID",
|
||||
"First Name",
|
||||
"Last Name",
|
||||
|
||||
@@ -431,11 +431,17 @@ export const ioService = createApi({
|
||||
}),
|
||||
|
||||
|
||||
// ========Add Io Details========
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
updateIOCase: builder.mutation({
|
||||
query: ({ data, id }) => ({
|
||||
url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
|
||||
method: "POST",
|
||||
body: data,
|
||||
}),
|
||||
|
||||
invalidatesTags: ["getIOById"],
|
||||
}),
|
||||
|
||||
|
||||
}),
|
||||
@@ -509,6 +515,11 @@ export const {
|
||||
useCreateInvestmentTypeMutation,
|
||||
useUpdateInvestmentTypeMutation,
|
||||
useDeleteInvestmentTypeMutation,
|
||||
useProfileQuery
|
||||
useProfileQuery,
|
||||
|
||||
|
||||
// ========[ Add Io Details ]========
|
||||
|
||||
useUpdateIOCaseMutation
|
||||
|
||||
} = ioService;
|
||||
|
||||
Reference in New Issue
Block a user