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

dashboard graph

Browse Source
This commit is contained in:
YasinShaikh123
2024-08-13 13:47:25 +05:30
parent 7de0a679e0 8cc16ddc8a
commit 78d573037d
12 changed files with 429 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Contexts/GlobalStateProvider.jsx
View File

@@ -1731,7 +1731,7 @@ const GlobalStateProvider = ({ children }) => {
// ==============[ prod state ]===============================
const [IODetails, setIODetails] = useState(null);
const [ IOStatus, setIoStatus ] = useState(null)
const [ isIOloading, setIOloading ] = useState(false)
return (
<GlobalStateContext.Provider
@@ -1806,10 +1806,8 @@ const GlobalStateProvider = ({ children }) => {
setIOArtifactsTwo,
IOStatus,
setIoStatus
isIOloading,
setIOloading
}}
>
{children}

4
src/Layout/DefaultLayout.jsx
View File

@@ -391,7 +391,7 @@ const DashboardLayout = ({ isOnline }) => {
// onMouseOver={() => setIsDrawerOpen(true)}
// onMouseLeave={() => setIsDrawerOpen(false)}
style={{
width: isDrawerOpen || openDrawerClick ? 255 : 74,
width: isDrawerOpen || openDrawerClick ? 230 : 74,
transition: "width 0.3s ease-in-out", // Smooth transition for width change
// overflow: "hidden",
backgroundColor: "#0041180A",
@@ -631,7 +631,7 @@ const DashboardLayout = ({ isOnline }) => {
<main
className={`h-100 ${slideFromRight ? "pe-3" : "ps-3"} d-flex flex-column gap-0`}
style={{
width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 255 : 74}px)`,
width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 230 : 74}px)`,
transition: "width 0.3s ease-in-out",
}}

234
src/Pages/IO_Management/CreateIO/AddIONav.jsx Normal file
View File

@@ -0,0 +1,234 @@
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 CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { v4 as uuidv4 } from "uuid";
import { useCreateIoCashMutation, useCreateIoNavMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
import { useParams } from "react-router-dom";
import ToastBox from "../../../Components/ToastBox";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CurrencyInput from "../../../Components/CurrencyInput";
import { formatDatee } from "../../../Components/FormField";
const ioNav = yup.object().shape({
transactionDate: yup.string().required("Artifact name is required"),
transactionAmount: yup.number().required("Artifact name is required"),
comments: yup.string().notRequired(),
});
const AddIONav = ({ 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 [createIoNav] = useCreateIoNavMutation()
// const {
// data
// } = useGetArtifactsQuery(id)
const {
control,
handleSubmit,
watch,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(ioNav),
});
const [createIoCash] = useCreateIoCashMutation()
const onSubmit = async (data) => {
setIsLoading(true)
try {
const res = await createIoNav({ data, id })
if (res?.data?.statusCode === 201) {
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({
transactionDate:"",
transactionAmount:"",
comments:""
})
}
const today = formatDatee(new Date(), 'yyyy-MM-dd');
return (
<>
<Drawer
size={"md"}
isOpen={isOpen}
placement="right"
initialFocusRef={firstField}
onClose={handleClose}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader fontSize={"sm"}>IO Nav 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 {...field}
max={today} // Set max attribute to today’s date
fontSize={"sm"} type="date" size={"sm"} />
)}
/>
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.transactionDate?.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={errors.transactionAmount} isRequired>
<FormLabel fontSize={"sm"}>Transaction 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} 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 NAV details?"}
isLoading={isLoading}
/>
</>
);
};
export default AddIONav;

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

@@ -58,22 +58,22 @@ const CreateIO = () => {
{
label: "Investors",
Content: Investors,
isDisabled: id ? false : false,
isDisabled: id ? false : true,
},
{
label: "IO Cash Detail",
Content: IOCashDetails,
isDisabled: id ? false : false,
isDisabled: id ? false : true,
},
{
label: "IO NAV Details",
Content: IONAVDetails,
isDisabled: id ? false : false,
isDisabled: id ? false : true,
},
{
label: "Distribution to Investors",
Content: IONAVDetails,
isDisabled: id ? false : false,
isDisabled: id ? false : true,
},
];
@@ -98,7 +98,7 @@ const CreateIO = () => {
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span> */}
<ViewIOdataHeader data={data?.data} />
<ViewIOdataHeader isLoading={isLoading} data={data?.data} />
</Box>}
<Tabs
index={activeIndex}

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

@@ -123,7 +123,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
const id = params?.id;
// ======================[ Cotext Api ]
const { investmentType, sponser, setIOStatus, setIODetails } =
const { investmentType, sponser, setIOStatus, setIODetails, setIOloading } =
useContext(GlobalStateContext);
// ======================[ RTK Querry Api ]
@@ -134,9 +134,6 @@ const IODetails = ({ enableNextTab, index, data }) => {
error: IObyIDerror,
} = useGetIOByIdQuery(id, { skip: !id });
const [creatIO] = useCreateIOMutation();
const [updateIO] = useUpdateIOMutation();
@@ -200,6 +197,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
});
useEffect(() => {
setIOloading(IObyIDisLoading)
setIODetails({
...IObyID?.data,
});
@@ -222,6 +220,9 @@ const IODetails = ({ enableNextTab, index, data }) => {
expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
});
}
}, [id, IObyID]);

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

@@ -1,14 +1,19 @@
import React, { useContext, useEffect, useState } from 'react'
import React, { useContext, useEffect, useRef, useState } from 'react'
import GlobalStateContext from '../../../Contexts/GlobalStateContext';
import { Box, HStack, Input,Text, Table, Tbody, Th, Tr } from '@chakra-ui/react';
import { Box, HStack, Input,Text, Table, Tbody, Th, Tr, Avatar, useDisclosure,Button } from '@chakra-ui/react';
import { OPACITY_ON_LOAD } from '../../../Layout/animations';
import Pagination from '../../../Components/Pagination';
import DataTable from '../../../Components/DataTable/DataTable';
import NormalTable from '../../../Components/DataTable/NormalTable';
import CustomAlertDialog from '../../../Components/CustomAlertDialog';
import { formatDatee } from '../../../Components/FormField';
import { AddIcon } from '@chakra-ui/icons';
import AddIONav from './AddIONav';
const IONAVDetails = () => {
const { navDetails, setNavDetails, slideFromRight } =
const { navDetails, setNavDetails, IODetails } =
useContext(GlobalStateContext);
const firstField = useRef();
const { isOpen, onOpen, onClose } = useDisclosure();
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [deleteAlert, setDeleteAlert] = useState(false);
@@ -16,6 +21,10 @@ const IONAVDetails = () => {
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
console.log(IODetails?.ioNAVHistory);
useEffect(() => {
// Simulate loading
@@ -29,50 +38,74 @@ const IONAVDetails = () => {
// Table setup
const tableHeadRow = [
"Sr.No",
"As On Date",
"IO NAV Value",
// "Sr.No",
"Valuation Date",
"NAV",
"Last NAV update",
"Investment Closed",
"Comments",
"Update by ",
"Update On",
// "Update On",
];
// Table filter
const filteredData = navDetails?.filter((item) => {
const name = item.updateBy;
const filteredData = IODetails?.ioNAVHistory?.filter((item) => {
const name = item.transactionType;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
});
const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
const extractedArray=filteredData?.map((item, index) => ({
id: item?.id,
"Sr.No": index +1,
"As On Date": (
"Valuation Date": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.date}
{formatDatee(item.transactionDate)}
</Text>
),
"IO NAV Value": (
"NAV": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{`$${item.IONavValue}`}
{`$ ${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
justifyContent={slideFromRight ? "right" : "center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
@@ -83,18 +116,20 @@ const IONAVDetails = () => {
),
"Update by ": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
justifyContent ={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
gap={2}
className="d-flex align-items-center web-text-small"
>
{item.updateBy}
<Avatar size='sm' name={"faisal"} src={null} />Faisal
</Text>
),
"Update On": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
@@ -103,7 +138,7 @@ const IONAVDetails = () => {
{item.updateOn}
</Text>
),
})));
}));
@@ -145,15 +180,18 @@ const IONAVDetails = () => {
{/* <HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack> */}
{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO NAV</Button>:null}
</HStack>
</Box>
<DataTable
<NormalTable
centered={true}
emptyMessage={`We don't have any Sponers`}
tableHeadRow={tableHeadRow}
data={extractedArray}
setData={setExtractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
@@ -169,6 +207,15 @@ const IONAVDetails = () => {
alertHandler={handleDelete}
isLoading={isLoading}
/>
<AddIONav
isOpen={isOpen}
onClose={onClose}
firstField={firstField} />
</Box>
)
}

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

@@ -116,7 +116,10 @@ const IOArtifactsAdd = ({
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
reset();
reset({
artifactName: "",
artifactPathName: "",
});
setFile(null);
setIsLoading(false);
setAlert(false);

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

@@ -305,7 +305,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
</Text>
</Box>
</MenuButton>
<MenuList minW="415px" size={"sm"} fontWeight={500}>
<MenuList overflow={'scroll'} minW="415px" size={"sm"} fontWeight={500}>
{icons?.map(({ iconName, id, iconFilePath }) => (
<MenuItem
key={id}

6
src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
View File

@@ -31,7 +31,7 @@ import { formatDatee } from "../../../../Components/FormField";
const ioNav = yup.object().shape({
transactionDate: yup.string().required("Artifact name is required"),
ioTransType_xid: yup.number().required("Artifact name is required"),
// ioTransType_xid: yup.number().required("Artifact name is required"),
transactionAmount: yup.number().required("Artifact name is required"),
comments: yup.string().notRequired(),
});
@@ -116,7 +116,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
</FormControl>
<FormControl isInvalid={errors.ioTransType_xid} isRequired>
{/* <FormControl isInvalid={errors.ioTransType_xid} isRequired>
<FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
<Controller
name="ioTransType_xid"
@@ -139,7 +139,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
<FormErrorMessage fontSize={"xs"} fontWeight={500}>
{errors.ioTransType_xid?.message}
</FormErrorMessage>
</FormControl>
</FormControl> */}

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

@@ -82,18 +82,30 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
textAlign={"left"}
>
<Badge
rounded={"full"}
pt={1.5}
pb={1.5}
ps={4}
pe={4}
mt={1.5}
mb={1.5}
textTransform={"none"}
variant={"subtle"}
colorScheme={
selectedItem === "Draft"
? "blue"
? "gray"
: selectedItem === "Processing"
? "yellow"
: selectedItem === "Open"
? "forestGreen"
? "blue"
: selectedItem === "Closed"
? "red":null
} py={"3px"} px={"8px"}>
? "green"
: selectedItem === "Exited"
? "red"
: selectedItem === "Canclled"
? "orange"
: "purple"
}
py={"3px"} px={"8px"}>
{selectedItem ? selectedItem: "No action"}
</Badge>
</MenuButton>
@@ -106,17 +118,32 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
onClick={() => handleMenuItemClick(statusAdmin, id)}
>
<Badge
rounded={"full"}
pt={1.5}
pb={1.5}
ps={4}
pe={4}
mt={1.5}
mb={1.5}
textTransform={"none"}
variant={"subtle"}
// variant={"solid"}
colorScheme={
statusAdmin === "Draft"
? "blue"
? "gray"
: statusAdmin === "Processing"
? "yellow"
: statusAdmin === "Open"
? "forestGreen"
: "red"
} py={"1px"} px={"8px"}>
? "blue"
: statusAdmin === "Closed"
? "green"
: statusAdmin === "Exited"
? "red"
: statusAdmin === "Canclled"
? "orange"
: "purple"
}
py={"1px"} px={"8px"}>
{statusAdmin}
</Badge>
</MenuItem>

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

@@ -144,21 +144,30 @@ const ViewIOTable = () => {
"IO Status": (
<Box w={"auto"} isTruncated={true}>
<Badge
rounded={"sm"}
pt={0.5}
pb={0.5}
rounded={"full"}
pt={1}
pb={1}
ps={4}
pe={4}
// textTransform={"none"}
variant={"subtle"}
mt={1.5}
mb={1.5}
textTransform={"none"}
// variant={"solid"}
colorScheme={
item?.ioStatus?.statusAdmin === "Draft"
? "blue"
? "gray"
: item?.ioStatus?.statusAdmin === "Processing"
? "orange"
? "yellow"
: item?.ioStatus?.statusAdmin === "Open"
? "blue"
: item?.ioStatus?.statusAdmin === "Closed"
? "green"
: "red"
: item?.ioStatus?.statusAdmin === "Exited"
? "red"
: item?.ioStatus?.statusAdmin === "Canclled"
? "orange"
: "purple"
}
boxShadow={'0 4px 6px rgba(0, 0, 0, 0.1)'} // Adjusted shadow

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

@@ -40,12 +40,12 @@ import Cancle from "./HeaderModal/Cancle";
import { AddIcon } from "@chakra-ui/icons";
import { GrGallery } from "react-icons/gr";
const ViewIOdataHeader = ({data}) => {
const ViewIOdataHeader = ({data, isLoading}) => {
const params = useParams();
const id = params?.id;
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = useRef();
const { IODetails } = useContext(GlobalStateContext);
const { IODetails, isIOloading } = useContext(GlobalStateContext);
const {
isOpen: isInvestmentOpen,
@@ -122,11 +122,11 @@ const ViewIOdataHeader = ({data}) => {
title:"Distribution To Investors",
onClickFunction:onDistInvestorOpen
},
// {
// id:5,
// title:"Update IO NAV",
// onClickFunction:onUpdateNavOpen
// },
{
id:5,
title:"Update IO NAV",
onClickFunction:onUpdateNavOpen
},
{
id:8,
title:"Exit",
@@ -155,29 +155,51 @@ console.log(filteredMenu);
console.log(isLoading);
return (
isLoading ?"":
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"start"}
gap={8}
bg={"#caf5d8"}
bg={
IODetails?.ioStatus?.statusAdmin === "Draft"
? "#EDF2F7"
: IODetails?.ioStatus?.statusAdmin === "Processing"
? "#FEFBBF"
: IODetails?.ioStatus?.statusAdmin === "Open"
? "#BEE2F8"
: IODetails?.ioStatus?.statusAdmin === "Closed"
? "#C6F6D5"
: IODetails?.ioStatus?.statusAdmin === "Exited"
? "red.500"
: IODetails?.ioStatus?.statusAdmin === "Canclled"
? "orange.500"
: IODetails?.ioStatus?.statusAdmin === "DeActivate"
? "#E9D8FD"
: null
}
rounded={"md"}
// bgGradient='linear(to-r, #caf5d8, #f5e8ca)'
// bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
// bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
// bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
// bgGradient='linear(to-r, #ffd54f, #caf5d8)'
bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
// bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
boxShadow={"md"}
paddingRight={"10px"}
borderRadius={"10px"}
position={"relative"}
>
<Box h={100} w={200} p={1.5}>
{/* <Image rounded={'md'} h={"100%"} src={ " https://tanami.betadelivery.com/" + IODetails?.ioName} alt={IODetails?.ioName}/> */}
{IODetails?.artifactsImage?.[0]?.artifactPathName ? (
@@ -234,23 +256,30 @@ console.log(filteredMenu);
IO Status
</Text>
<Badge
rounded={"sm"}
pt={0.5}
pb={0.5}
rounded={"full"}
pt={1}
pb={1}
ps={4}
pe={4}
// textTransform={"none"}
variant={"subtle"}
mt={1.5}
mb={1.5}
textTransform={"none"}
// variant={"solid"}
colorScheme={
IODetails?.ioStatus?.statusAdmin === "Draft"
? "blue"
? "gray"
: IODetails?.ioStatus?.statusAdmin === "Processing"
? "orange"
? "yellow"
: IODetails?.ioStatus?.statusAdmin === "Open"
? "green"
? "blue"
: IODetails?.ioStatus?.statusAdmin === "Closed"
? "green"
: IODetails?.ioStatus?.statusAdmin === "Exited"
? "red"
: "gray"
: IODetails?.ioStatus?.statusAdmin === "Canclled"
? "orange"
: "purple"
}
>
{IODetails?.ioStatus?.statusAdmin