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

table updated

Browse Source
This commit is contained in:
Siddhesh More
2024-08-30 12:07:10 +05:30
parent b3c0662e77
commit 60d3c7572d
15 changed files with 523 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/Components/CurrencyInput.jsx
View File

@@ -1,36 +1,32 @@
import React, { forwardRef } from 'react';
import { Input } from "@chakra-ui/react";
// export const formatCurrency = (value) => {
// if (!value) return '';
// const [integer, decimal] = value.split('.');
// const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
// };
export const formatCurrency = (value) => {
if (value === undefined || value === null) return ''; // Handle undefined or null values
const [integer, decimal] = String(value).split('.'); // Convert value to string before splitting
if (value === undefined || value === null) return '';
const [integer, decimal] = String(value).split('.');
const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
return decimal !== undefined ? `${formattedInteger}.${decimal}` : formattedInteger;
};
const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
const handleChange = (event) => {
let { value } = event?.target;
// Remove non-numeric characters except decimal point
value = value?.replace(/[^0-9.]/g, '');
value = value.replace(/[^0-9.]/g, '');
// Ensure only one decimal point
const parts = value?.split('.');
const parts = value.split('.');
if (parts.length > 2) {
value = parts[0] + '.' + parts?.slice(1)?.join('');
value = parts[0] + '.' + parts.slice(1).join('');
}
onChange(value); // Pass the raw value to parent or use it directly
// Restrict to two decimal places
if (parts[1]?.length > 2) {
value = parts[0] + '.' + parts[1].slice(0, 2);
}
onChange(value); // Pass the raw value to parent
};
return (
@@ -45,3 +41,50 @@ const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
});
export default CurrencyInput;
// import React, { forwardRef } from 'react';
// import { Input } from "@chakra-ui/react";
// export const formatCurrency = (value) => {
// if (value === undefined || value === null) return ''; // Handle undefined or null values
// const [integer, decimal] = String(value).split('.'); // Convert value to string before splitting
// const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
// };
// const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
// const handleChange = (event) => {
// let { value } = event?.target;
// // Remove non-numeric characters except decimal point
// value = value?.replace(/[^0-9.]/g, '');
// // Ensure only one decimal point and restrict to two decimal places
// const parts = value?.split('.');
// if (parts.length > 2) {
// value = parts[0] + '.' + parts?.slice(1)?.join('');
// }
// if (parts[1]?.length > 2) {
// value = parts[0] + '.' + parts[1]?.slice(0, 2);
// }
// onChange(value); // Pass the raw value to parent or use it directly
// };
// return (
// <Input
// {...props}
// ref={ref} // Forward ref here
// type="text"
// value={formatCurrency(value)}
// onChange={handleChange}
// />
// );
// });
// export default CurrencyInput;

4
src/Components/FormField.jsx
View File

@@ -477,8 +477,8 @@ const FormField = ({
placeholder={placeHolder ? placeHolder : label}
textAlign={arabic ? "right" : align ? align : "left"}
_placeholder={{ fontSize: "sm" }}
min={type === "date" ? today : undefined}
maxLength={maxLength}
// min={type === "date" ? today : undefined}
// maxLength={maxLength}
// defaultValue={type === "date" && "2023-07-26" : undefined}
// defaultValue={value}
// value={dateValue}

53
src/Constants/Constants.js
View File

@@ -1,5 +1,6 @@
import dns from "node:dns"
import * as XLSX from 'xlsx';
export const generateSerialNumber = (index, currentPage, pageSize) => {
@@ -138,4 +139,54 @@ export function formatDate(dateString) {
const options = { year: 'numeric', month: 'short', day: 'numeric' };
const date = new Date(dateString);
return date.toLocaleDateString('en-US', options);
}
}
export const exportToExcel = (data, customHeaders, fileName = 'exported-data.xlsx') => {
// Map your data to include only the fields that match your custom headers
const mappedData = data.map(item =>
customHeaders.map(header => item[header.key] || '')
);
// Prepend the headers row
const sheetData = [customHeaders.map(header => header.label), ...mappedData];
// Create a worksheet from the data array
const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
// Apply styles to header cells
customHeaders.forEach((header, index) => {
const cellAddress = XLSX.utils.encode_cell({ r: 0, c: index }); // r: row, c: column
if (!worksheet[cellAddress]) return; // Skip if cell doesn't exist
worksheet[cellAddress].s = {
fill: {
fgColor: { rgb: "FFFF00" } // Set header background color (Yellow in this case)
},
font: {
bold: true, // Make header text bold
color: { rgb: "000000" } // Set header text color (Black in this case)
}
};
});
// Create a new workbook and append the worksheet
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// Generate a buffer from the workbook
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
// Create a Blob object from the buffer
const dataBlob = new Blob([excelBuffer], { type: 'application/octet-stream' });
// Create a link element to trigger the download
const link = document.createElement('a');
link.href = URL.createObjectURL(dataBlob);
link.download = fileName;
// Append the link to the document body, trigger the download, and remove the link
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};

2
src/Pages/Deposit/DepositRequest/DepositRequest.jsx
View File

@@ -161,7 +161,7 @@ const DepositRequest = () => {
</Text>
),
"First Name": (
<Box isTruncated={true} w={"70px"}>
<Box isTruncated={true} w={"170px"}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item?.firstName}
</Text>

34
src/Pages/IO_Management/CreateIO/AddIONav.jsx
View File

@@ -11,10 +11,13 @@ import {
FormControl,
FormErrorMessage,
FormLabel,
HStack,
Input,
Select,
Stack,
Text,
Textarea,
VStack,
useToast,
} from "@chakra-ui/react";
import * as yup from "yup";
@@ -123,7 +126,15 @@ import { formatDatee } from "../../../Components/FormField";
const today = formatDatee(new Date(), 'yyyy-MM-dd');
const today = formatDatee(new Date(), 'yyyy-MM-dd');
function calculatePercentage(newNav, currNav) {
const per = (newNav - currNav) / currNav * 100
return per.toFixed(2)
}
console.log(calculatePercentage(1092500, 976070));
@@ -162,7 +173,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
<FormControl isInvalid={errors.transactionAmount} isRequired>
<FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
<FormLabel fontSize={"sm"}>New NAV</FormLabel>
<Controller
name="transactionAmount"
control={control}
@@ -174,7 +185,24 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
{errors.transactionAmount?.message}
</FormErrorMessage>
</FormControl>
<HStack justify={'start'} gap={10} bg={'green.100'} p={3} rounded={'md'} shadow={'md'}>
<VStack align={'start'}>
<Text as={'span'} fontSize={'sm'} fontWeight={500}>Current nav</Text>
<Text as={'span'} fontSize={'sm'}>{parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}</Text>
</VStack>
<VStack align={'start'}>
<Text as={'span'} fontSize={'sm'} fontWeight={500}>Live return %</Text>
<Text as={'span'} fontSize={'sm'}>{calculatePercentage(watch()?.transactionAmount||IODetails?.ioNAV,IODetails?.ioNAV)}</Text>
</VStack>
</HStack>
<FormControl isInvalid={errors.comments}>

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

@@ -69,7 +69,6 @@ const schema = yup.object().shape({
.typeError("Goal Amount is must be number")
.required('Goal amount is required')
.positive('Goal amount must be a positive number'),
closingDate: yup
.date()
.notRequired("Closing date is required")
@@ -98,6 +97,9 @@ const schema = yup.object().shape({
});
const IODetails = ({ enableNextTab, index, data }) => {
@@ -166,21 +168,90 @@ const IODetails = ({ enableNextTab, index, data }) => {
}
);
console.log(IObyID?.data?.minInvestmentAmt);
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, country_xid,id })=>{
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode, country_xid,id })=>{
console.log(currencyCode);
return{
_id:id,
id:country_xid,
country: country?.countryName,
value: removeTrailingZeros(minInvestmentAmt),
logo: country?.flagIcon,
curr: country?.countryCode,
curr: currencyCode,
}
})
const schemaEdit = yup.object().shape({
investmentNameEnglish: yup
.string()
.required("IO name in English is required")
.min(3, "IO name in English must be at least 3 characters long")
.max(150, "IO name in English must be at most 150 characters long"),
investmentNameArabic: yup
.string()
.required("IO name in Arabic is required")
.min(3, "IO name in Arabic must be at least 3 characters long")
.max(50, "IO name in Arabic must be at most 50 characters long"),
descriptionEnglish: yup
.string()
.required("Description in English is required")
.min(10, "Description in English must be at least 10 characters long")
.max(1000, "Description in English must be at most 1000 characters long"),
descriptionArabic: yup
.string()
.required("Description in Arabic is required")
.min(10, "Description in Arabic must be at least 10 characters long")
.max(2000, "Description in Arabic must be at most 500 characters long"),
expectedReturnArabic: yup
.string()
.required("Expected return in Arabic is required"),
goalAmount: yup
.number()
.typeError("Goal Amount is must be number")
.required('Goal amount is required')
.positive('Goal amount must be a positive number')
.min(IObyID?.data?.totalAmtInvestmentInUSD, `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`),
closingDate: yup
.date()
.notRequired("Closing date is required")
.min(new Date(), "Closing date cannot be in the past"),
holdingPeriod: yup.string().required("Holding period is required"),
holdingPeriodArabic: yup.string().required("Holding period is required"),
// minInvestmentAmount: yup
// .number()
// .required("Minimum investment is required")
// .positive("Minimum investment must be a positive number")
// .min(1, "Minimum investment must be at least 1"),
ISIN: yup.string().notRequired(),
InvestmentDetails: yup.string().notRequired(),
comment: yup.string().notRequired()
.min(10, "Comment must be at least 10 characters long")
.max(100, "Comment must be at most 100 characters long"),
expectedReturn: yup
.string()
.required("Expected return is required"),
});
const [values, setValues] = useState(id?minInvestmentById:miniValue);
console.log(values);
const formatNumber = (num) => {
// Remove non-numeric characters and format with commas
@@ -198,7 +269,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
resolver: yupResolver(id ? schemaEdit : schema),
});
useEffect(() => {

31
src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
View File

@@ -9,6 +9,8 @@ import { formatDatee } from '../../../Components/FormField';
import { AddIcon } from '@chakra-ui/icons';
import AddIONav from './AddIONav';
import { formatDate } from '../../Master/Sponser/Sponsers';
import { LuFileSpreadsheet } from "react-icons/lu";
import { exportToExcel } from '../../../Constants/Constants';
const IONAVDetails = () => {
const { navDetails, setNavDetails, IODetails } =
@@ -144,6 +146,27 @@ const IONAVDetails = () => {
),
}));
const customHeaders = [
{ label: 'ID', key: 'id' },
{ label: 'Valuation Date', key: 'transactionDate' },
{ label: 'NAV', key: 'transactionAmount' },
{ label: 'Last NAV update', key: 'previousNAVvalue' },
{ label: 'Investment Closed', key: 'initialNAVvalue' },
{ label: 'Comments', key: 'comments' },
{ label: 'Update by', key: 'creator' },
{ label: 'Transaction Type', key: 'transactionType' },
{ label: 'Comments', key: 'comments' },
// Add more headers as needed
];
console.log(IODetails?.ioNAVHistory);
const handleDelete = () => {
@@ -159,6 +182,9 @@ const IONAVDetails = () => {
setIsLoading(true);
};
const handleExport = () =>{
}
@@ -186,9 +212,10 @@ const IONAVDetails = () => {
</HStack> */}
{/* {IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Cash</Button>:null} */}
<HStack display={"flex"} alignItems={"center"}>
<Button onClick={()=>exportToExcel(IODetails?.ioNAVHistory, customHeaders)} leftIcon={<LuFileSpreadsheet/>} colorScheme="forestGreen" size={'sm'} variant={'outline'} rounded={'sm'} fontSize={'xs'} >Export xls</Button>
{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Nav</Button>:null}
{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Nav</Button>:null}</HStack>
</HStack>
</Box>

34
src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
View File

@@ -25,7 +25,7 @@ import {
useToast,
} from "@chakra-ui/react";
import NormalData from "../../../../Components/DataTable/NormalTable";
import { useState } from "react";
import { useContext, useState } from "react";
import { AddIcon } from "@chakra-ui/icons";
import { useGetDistributedToInvestorMutation, useGetDistributionInvestorMutation, useUpdateExitToInvestorMutation } from "../../../../Services/io.service";
import { useParams } from "react-router-dom";
@@ -37,10 +37,9 @@ import ToastBox from "../../../../Components/ToastBox";
import CurrencyInput from "../../../../Components/CurrencyInput";
import { IoCalculator } from "react-icons/io5";
import { debounce } from "../../../Master/Sponser/AddSponser";
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
export const investor = yup.object().shape({
amount: yup.string().required("Amount is required"),
});
const DistributionInvestor = ({ isOpen, onClose, exit }) => {
const params = useParams();
@@ -50,6 +49,7 @@ const DistributionInvestor = ({ isOpen, onClose, exit }) => {
const [ isFinalCalculateLoading, setIsFinalCalculateLoading ] = useState(false)
const [ calcualtedData, setCalculatedDate ] = useState(null)
const [ isCalcualtedData, setIsCalcualtedData ] = useState(false)
const { IODetails } = useContext(GlobalStateContext);
// const {
// data:IObyID,
@@ -61,13 +61,35 @@ const DistributionInvestor = ({ isOpen, onClose, exit }) => {
const [getFinalDistributionInvestment] = useGetDistributedToInvestorMutation();
const [ updateExitToInvestor ] = useUpdateExitToInvestorMutation()
const investorExit = yup.object().shape({
amount: yup
.string()
.required("Amount is required")
.test(
"max",
`Distribution amount should not be greater than IO cash amount ${IODetails?.ioCash}`,
function(value) {
const { ioCash } = IODetails || {}; // Safely get ioCash
if (value && ioCash) {
return parseFloat(value) <= parseFloat(ioCash); // Ensure both are compared as numbers
}
return true; // If ioCash is not available, skip validation
}
),
});
const investor = yup.object().shape({
amount: yup.string().required("Amount is required"),
});
const {
control,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: yupResolver(investor),
resolver: yupResolver(!exit? investorExit: investor),
});
@@ -374,7 +396,7 @@ const DistributionInvestor = ({ isOpen, onClose, exit }) => {
Calculate
</Button>
</Box>
<FormErrorMessage display={'flex'} justifyContent={'end'} pe={125} fontSize={"xs"} fontWeight={500}>
<FormErrorMessage display={'flex'} justifyContent={'end'} pe={125} fontSize={"xs"} fontWeight={600}>
{errors.amount?.message}
</FormErrorMessage>
</FormControl>

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

@@ -91,7 +91,7 @@ const ViewIOTable = () => {
"Goal Amount",
"Closing Date",
"IO Status",
"Preview",
// "Preview",
"Action",
];

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

@@ -125,7 +125,7 @@ const ViewIOdetails = () => {
country: country?.countryName,
value: removeTrailingZeros(minInvestmentAmt),
logo: country?.flagIcon,
curr: country?.countryCode,
curr: currencyCode,
}
})

192
src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
View File

@@ -23,7 +23,7 @@ import {
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DataTable from "../../../Components/DataTable/DataTable";
import NormalTable from "../../../Components/DataTable/NormalTable";
import Pagination from "../../../Components/Pagination";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
@@ -60,20 +60,7 @@ import {
year: 'numeric',
});
};
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
// "Sr N/O",
"Date",
"Transaction",
"Amount in investors currency",
// "Currency",
"TO USD",
"From USD",
"USD amount",
"IO Name",
"Payment Method",
];
console.log(transaction);
@@ -100,7 +87,20 @@ console.log(transaction);
console.log(filteredData);
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
// "Sr N/O",
"Date",
"Transaction",
"Amount in investors currency",
// "Currency",
"TO USD",
"From USD",
"USD amount",
"IO Name",
"Payment Method",
];
const extractedArray = filteredData?.map((item) => ({
id: item?.id,
"Sr N/O": (
@@ -135,8 +135,8 @@ console.log(transaction);
</Box>
),
"Amount in investors currency": (
<Box w={"120px"} isTruncated={true} display={"flex"} justifyContent={"end"}>
<Text as={"span"} color={"teal.900"}>
<Box w={100} display={'flex'} justifyContent={'end'}>
<Text as={"span"} textAlign={'end'} w={'100%'} color={"teal.900"}>
{/* {item.investorAmount} */}
{parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
@@ -144,25 +144,21 @@ console.log(transaction);
})}
<Badge ms={1} colorScheme="green">{item?.investorCurrency}</Badge>
</Text>
</Box>
</Box>
),
"From USD": (
<Box w={"80px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.USDToInvCur_Rate}
</Text>
</Box>
),
"TO USD": (
<Box w={"80px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.invCurToUSD_Rate}
</Text>
</Box>
),
"USD amount": (
<Box w={"100px"} isTruncated={true} display={"flex"} justifyContent={"end"}>
<Text as={"span"} color={"teal.900"}>
<Box w={100} display={'flex'} justifyContent={'end'}>
<Text as={"span"} textAlign={'end'} w={'100%'} color={"teal.900"}>
{/* {item.USDAmount} */}
{parseFloat(item?.USDAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
@@ -187,6 +183,43 @@ console.log(transaction);
</Box>
),
}));
const totalRow = {
// id: "total", // or any unique ID
// "Sr N/O": (
// <Text w={'100px'} color={"gray.600"} fontWeight={"bold"}>Total</Text>
// ),
"Date": <Text as={"span"} textAlign={'start'} w={'100%'} color={"teal.900"} fontWeight={"bold"}>
<Badge ms={1} colorScheme="gray">Total</Badge>
</Text>,
"Transaction": null,
// "Currency": null,
"Amount in investors currency": (
<Box w={100} display={'flex'} justifyContent={'end'}>
<Text as={"span"} textAlign={'end'} w={'100%'} color={"teal.900"}>
{parseFloat(InvestorWallet?.WalletBalance_InInvCur).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<Badge ms={1} colorScheme="green">{InvestorWallet?.currencyCode_InCur}</Badge>
</Text>
</Box>
),
"TO USD": null,
"From USD": null,
"USD amount": (
<Box w={100} display={'flex'} justifyContent={'end'}>
<Text as={"span"} textAlign={'end'} w={'100%'} color={"teal.900"}>
{parseFloat(InvestorWallet?.WalletBalance_InUSD).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<Badge ms={1} colorScheme="green">$</Badge>
</Text>
</Box>
),
"IO Name": null,
"Payment Method": null,
};
extractedArray?.push(totalRow)
const handleDelete = () => {
const updatedInvestorDetails = InvestorDetails.filter(
@@ -201,111 +234,7 @@ console.log(transaction);
setIsLoading(true);
};
const Total = () => {
return (
<Table size="sm" >
<Tbody backgroundColor="gray.50">
<Tr >
<Th
textAlign={"left"}
p={3}
width="100px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
Balance:
</Th>
<Th
textAlign={"center"}
p={3}
width="120px"
maxW={"120px"}
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{" "}
</Th>
<Th
textAlign={"right"}
p={3}
width="100px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
<Box display={"flex"} justifyContent={"end"}>
{parseFloat(InvestorWallet?.WalletBalance_InInvCur).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<Badge ms={1} colorScheme="green">{InvestorWallet?.currencyCode_InCur}</Badge>
</Box>
</Th>
<Th
textAlign={"center"}
p={3}
width="80px"
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="80px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
<Box display={"flex"} justifyContent={"end"}>
{parseFloat(InvestorWallet?.WalletBalance_InUSD).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<Badge ms={1} colorScheme="green">{InvestorWallet?.currencyCode_InCur}</Badge>
</Box>
</Th>
<Th
textAlign={"center"}
p={3}
width="130px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{" "}
</Th>
<Th
textAlign={"center"}
p={3}
width="130px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
overflowWrap="normal"
>
{" "}
</Th>
</Tr>
</Tbody>
</Table>
);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
@@ -336,7 +265,7 @@ console.log(transaction);
</HStack>
</Box>
<DataTable
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
@@ -344,7 +273,6 @@ console.log(transaction);
viewActionId={actionId}
setViewActionId={setActionId}
setMouseEnteredId={setMouseEnteredId}
caption={<Total />}
setMouseEntered={setMouseEntered}
/>

103
src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx
View File

@@ -19,7 +19,7 @@ import {
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DataTable from "../../../Components/DataTable/DataTable";
import NormalTable from "../../../Components/DataTable/NormalTable";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Navigate, Link as RouterLink } from "react-router-dom";
import {
@@ -47,7 +47,7 @@ const ViewInvestorDetails = () => {
const [actionId, setActionId] = useState(false);
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
@@ -75,8 +75,7 @@ const ViewInvestorDetails = () => {
// "Action",
];
console.log(viewInvestor);
console.log(viewInvestor);
// ====================================================[Table Filter]================================================================
const filteredData = viewInvestor?.filter((item) => {
@@ -99,10 +98,11 @@ console.log(viewInvestor);
console.log(filteredData);
const extractedArray = filteredData?.map((item,index) => ({
const extractedArray = filteredData?.map((item, index) => ({
id: item?.id,
"Sr N/O": (
<Text w={'50px'}
<Text
w={"50px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
@@ -119,7 +119,7 @@ console.log(viewInvestor);
</Box>
),
"Sponsor Name": (
<Box w={"auto"} isTruncated={true}>
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.sponsorName}
</Text>
@@ -128,15 +128,15 @@ console.log(viewInvestor);
"Investment Amount": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{/* {item.investedAmount} */}
$ {parseFloat(item?.investedAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
{/* {item.investedAmount} */}${" "}
{parseFloat(item?.investedAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
</Box>
),
"Percentage": (
Percentage: (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item?.Investor_Holidings} %
@@ -146,10 +146,11 @@ console.log(viewInvestor);
"Market Value": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
$ {parseFloat(item?.MarketValue || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
${" "}
{parseFloat(item?.MarketValue || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
</Box>
),
@@ -160,13 +161,17 @@ console.log(viewInvestor);
</Text>
</Box>
),
"Distribution": (
Distribution: (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
$ {parseFloat(item?.DistributionAmountReceived || 0).toLocaleString(undefined, {
${" "}
{parseFloat(item?.DistributionAmountReceived || 0).toLocaleString(
undefined,
{
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
}
)}
</Text>
</Box>
),
@@ -180,10 +185,11 @@ console.log(viewInvestor);
"Total return": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
$ {parseFloat(item?.TotalReturn || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
${" "}
{parseFloat(item?.TotalReturn || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
</Box>
),
@@ -195,23 +201,35 @@ console.log(viewInvestor);
</Box>
),
Status: (
<Box w={"auto"} isTruncated={true}>
<Badge
fontWeight={"500"}
textTransform={"none"}
color={
item.statusAdmin === "Open"
? "green"
: item.statusAdmin === "Pending"
? "blue"
: "red"
}
px={2}
py={0.5}
>
{item.statusAdmin}
</Badge>
</Box>
<Badge
rounded={"full"}
pt={1}
pb={1}
ps={4}
pe={4}
mt={1.5}
mb={1.5}
textTransform={"none"}
// variant={"solid"}
colorScheme={
item?.statusAdmin === "Draft"
? "gray"
: item?.statusAdmin === "Processing"
? "yellow"
: item?.statusAdmin === "Open"
? "blue"
: item?.statusAdmin === "Closed"
? "green"
: item?.statusAdmin === "Exited"
? "red"
: item?.statusAdmin === "Canclled"
? "orange"
: "purple"
}
boxShadow={"0 4px 6px rgba(0, 0, 0, 0.1)"} // Adjusted shadow
>
{item?.statusAdmin}
</Badge>
),
Action: (
<Box display={"flex"} justifyContent={"space-between"}>
@@ -279,7 +297,7 @@ console.log(viewInvestor);
</HStack>
</Box>
<DataTable
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
@@ -297,7 +315,6 @@ console.log(viewInvestor);
alertHandler={handleDelete}
isLoading={isLoading}
/>
</Box>
);
};

66
src/Services/api.service.js
View File

@@ -1,66 +0,0 @@
import axios from "axios";
// Create an Axios instance for API calls
export const api = axios.create({
// baseURL: `https://tanami.betadelivery.com/api/v1`,
baseURL: import.meta.env.VITE_BAS_URL, // Replace with your API base URL
timeout: 10000, // Adjust timeout as needed
headers: {
"Content-Type": "application/json",
},
});
// Add Axios request interceptor to refresh token if expired
api.interceptors.request.use(
(config) => {
console.log(config);
// Modify headers or add tokens as needed
// const token = localStorage.getItem("accessToken");
// if (token) {
// config.headers.Authorization = `Bearer ${token}`;
// }
return config;
},
(error) => {
return Promise.reject(error);
}
);
// // Add Axios response interceptor to handle token refreshing
api.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
const originalRequest = error.config;
// Example logic for handling token expiration and refreshing
if (
error.response.status === 401 &&
!originalRequest._retry &&
localStorage.getItem("refreshToken")
) {
originalRequest._retry = true;
try {
const response = await api.post("/refresh_token", {
refreshToken: localStorage.getItem("refreshToken"),
});
if (response.status === 200) {
// Update tokens in local storage
localStorage.setItem("accessTokenn", response.data.accessToken);
localStorage.setItem("refreshTokenn", response.data.refreshToken);
// Retry the original request with the new tokens
return api(originalRequest);
}
} catch (error) {
console.error("Failed to refresh token:", error);
// Handle token refresh failure (e.g., redirect to login)
}
}
return Promise.reject(error);
}
);