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

updated

Browse Source
This commit is contained in:
Siddhesh More
2024-06-26 17:45:13 +05:30
parent 3012f2297b
commit 4a78f9374c
7 changed files with 496 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/EmptySearchList.jsx
View File

@@ -13,7 +13,7 @@ const EmptySearchList = ({message}) => {
>
<Image w={200} mb={8} h={200} src={EmptySearchListImage} alt='Dan Abramov' />
<Text className=" fw-bold fs-5" >{message}</Text>
<Text as={'p'} className="web-text-medium">Posts of rubix will appear here.</Text>
<Text as={'p'} className="web-text-medium">Posts of tanami will appear here.</Text>
</Box>
)

94
src/Components/FormField.jsx
View File

@@ -1,5 +1,5 @@
import { FormControl, FormLabel, Input, Textarea } from '@chakra-ui/react';
import React from 'react'
import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack } from '@chakra-ui/react';
import React from 'react';
import { Controller } from 'react-hook-form';
import { TiWarning } from 'react-icons/ti';
@@ -8,40 +8,82 @@ const FormField = ({
control,
name,
type = "text",
options = [],
errors,
isRequired,
arabic,
...props
}) => (
// <FormControl isInvalid={errors[name]}>
// <FormControl isRequired={isRequired}>
<FormControl >
<FormControl isInvalid={errors[name]}>
<FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
<Controller
control={control}
name={name}
defaultValue=""
render={({ field }) => {
return type === "textarea" ? (
<Textarea
focusBorderColor="forestGreen.400"
size={"sm"}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
/>
) : (
<Input
focusBorderColor="forestGreen.300"
size={"sm"}
type={type}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
/>
);
switch (type) {
case 'textarea':
return (
<Textarea
focusBorderColor="forestGreen.400"
size={"sm"}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
/>
);
case 'select':
return (
<Select
focusBorderColor="forestGreen.300"
size={"sm"}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
>
{options.map((option, index) => (
<option key={index} value={option.value}>{option.label}</option>
))}
</Select>
);
case 'checkbox':
return (
<Checkbox
size={"sm"}
{...field}
{...props}
textAlign={arabic ? "right" : "left"}
>
{label}
</Checkbox>
);
case 'radio':
return (
<RadioGroup {...field} {...props}>
<Stack direction="row">
{options.map((option, index) => (
<Radio key={index} value={option.value}>
{option.label}
</Radio>
))}
</Stack>
</RadioGroup>
);
default:
return (
<Input
focusBorderColor="forestGreen.300"
size={"sm"}
type={type}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
/>
);
}
}}
/>
{errors[name] && (
@@ -52,4 +94,4 @@ const FormField = ({
</FormControl>
);
export default FormField
export default FormField;

219
src/Components/InvestmentCard/InvestmentCard.jsx
View File

@@ -1,4 +1,5 @@
import {
Badge,
Box,
Button,
Card,
@@ -10,101 +11,135 @@ import {
Text,
Tooltip,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
const InvestmentCard = ({investment}) => {
const InvestmentCard = ({ investment }) => {
return (
<Card
direction={{ base: "column", sm: "row" }}
overflow="scroll"
variant="outline"
display={"flex"}
alignItems={"center"}
mb={'20px'}
boxShadow={'md'}
border={'none'}
>
<Image
p={"15px"}
rounded={"24px"}
objectFit="cover"
w={"200px"}
h={"160px"}
src={investment?.imgSrc}
alt={investment?.title}
/>
<Card
{...OPACITY_ON_LOAD}
direction={{ base: "column", sm: "row" }}
variant="outline"
display={"flex"}
alignItems={"center"}
mb={"20px"}
boxShadow={"md"}
border={"none"}
mt={2}
>
<Image
p={"14px"}
rounded={"24px"}
objectFit="cover"
w={"200px"}
h={"140px"}
src={investment?.imgSrc}
alt={investment?.title}
/>
<Stack>
<CardBody>
<Heading size="sm" fontWeight={"500"}>
{investment?.title}
</Heading>
<Text fontSize="sm" mb={"4px"}>
Sponsor:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.sponsor}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann return:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.annReturn}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann Yield:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.annYield}
</Text>{" "}
</Text>
</CardBody>
</Stack>
<Stack borderLeft={"1px solid #ccc"}>
<CardBody>
<Text fontSize="sm" mb={"4px"}>
Min.Invests:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.minInvests}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Targ Close:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.targClose}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Holding per:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.holdingPer}
</Text>{" "}
</Text>
</CardBody>
</Stack>
<Stack>
<CardBody>
<Tooltip hasArrow placement='top-start' label={investment?.progressValue} bg='white' color='#000'>
<Progress
width={"200px"}
value={investment?.progressValue}
rounded={"10px"}
colorScheme={"green"}
size={'sm'}
/>
</Tooltip>
<Button
// variant='ghost'
w={"100%"}
colorScheme={"gray"}
rounded={"sm"}
size={"sm"}
mt={"20px"}
>
View
</Button>
</CardBody>
</Stack>
</Card>
<Stack w={"38%"}>
<CardBody>
<Heading size="sm" fontWeight={"500"}>
{investment?.title}
<Badge
colorScheme={
investment?.status === "Available"
? "teal"
: investment?.status === "Upcomming"
? "green"
: "red"
}
ps={2} pe={2} pt={0.5} pb={0.5}
fontSize={"xs"}
ms={3}
>
{investment?.status === "Available"
? "Available"
: investment?.status === "Upcomming"
? "Upcomming"
: "Closed"}
</Badge>
</Heading>
<Text fontSize="sm" mb={"4px"}>
Sponsor:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.sponsor}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann return:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.annReturn}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann Yield:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.annYield}
</Text>{" "}
</Text>
</CardBody>
</Stack>
<Stack borderLeft={"1px solid #ccc"}>
<CardBody>
<Text fontSize="sm" mb={"4px"}>
Min.Invests:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.minInvests}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Targ Close:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.targClose}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Holding per:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment?.holdingPer}
</Text>{" "}
</Text>
</CardBody>
</Stack>
<Stack>
<CardBody>
<Box as="span" display={'flex'} justifyContent={'space-between'} mb={1}>
<Text fontSize={'xs'} fontWeight={500} as={'span'}>$ 500,000.450</Text>
<Text fontSize={'xs'} fontWeight={500} as={'span'}>{investment?.progressValue} % Funded</Text>
</Box>
{/* <Tooltip
hasArrow
placement="top-start"
label={`${investment?.progressValue}%`}
bg="white"
color="#000"
fontSize={'xs'}
> */}
<Progress
width={"200px"}
value={investment?.progressValue}
rounded={"10px"}
colorScheme={"green"}
size={"sm"}
/>
{/* </Tooltip> */}
<Button
// variant='ghost'
w={"100%"}
colorScheme={"gray"}
rounded={"sm"}
size={"sm"}
mt={"20px"}
>
View
</Button>
</CardBody>
</Stack>
</Card>
);
};

3
src/Contexts/GlobalStateProvider.jsx
View File

@@ -276,6 +276,7 @@ const GlobalStateProvider = ({ children }) => {
targClose: "24 December",
holdingPer: "5-7 years",
progressValue: 80,
status: "Available"
},
{
imgSrc:
@@ -288,6 +289,7 @@ const GlobalStateProvider = ({ children }) => {
targClose: "24 December",
holdingPer: "5-7 years",
progressValue: 80,
status: "Upcomming"
},
{
imgSrc:
@@ -300,6 +302,7 @@ const GlobalStateProvider = ({ children }) => {
targClose: "24 December",
holdingPer: "5-7 years",
progressValue: 80,
status: "Closed"
},
]);

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

@@ -1,22 +1,173 @@
import { Box, Image, Text } from "@chakra-ui/react"
// import error from "../assets/Error.svg"
import robot from "../../assets/robot.png"
// import robot from "../assets/robot.png"
const CreateIO = () => {
return (
<Box
h={'100vh'}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}
flexDirection={'column'}
gap={8}
>
<Image src={robot} w={"171px"} />
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
</Box>
)
}
import React, { useContext } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import {
Box,
Divider,
FormControl,
FormLabel,
Heading,
Input,
Select,
Textarea,
Button,
Text,
} from "@chakra-ui/react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
import FormField from "../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
export default CreateIO
const schema = yup.object().shape({
sponserName: yup.string().required("Sponser name is required"),
mobileNo: yup.string().required("Mobile no is required"),
sponserAddress: yup.string().required("Sponser address is required"),
bankName: yup.string().required("Bank Name is required"),
accountNumber: yup.string().required("Account Number is required"),
swiftCode: yup.string().required("SWIFT/BIC Code is required"),
bankEmail: yup.string().email("Invalid email format"),
// routingNumber: yup.string().required("Routing Number is required"),
// iban: yup.string().required("IBAN is required"),
// accountType: yup.string().required("Account Type is required"),
// bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
// bankBranch: yup.string().required("Bank Branch is required"),
// branchAddress: yup.string().required("Branch Address is required"),
// ifscCode: yup.string().required("IFSC Code is required"),
// accountHolderName: yup.string().required("Account Holder's Name is required"),
});
export function debounce(func, delay) {
let debounceTimer;
return function(...args) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(this, args), delay);
};
}
const CreateIO = () => {
const navigate = useNavigate();
const { sponser, setSponser } = useContext(GlobalStateContext);
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
});
console.log(errors);
const onSubmit = (data) => {
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...sponser,
]);
navigate("/sponser");
};
// Extract options for the select input
const sponserOptions = sponser.map(item => ({
value: item.id,
label: item.sponserName
}));
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Heading as="h6" size="xs" mt={4}>
IO Details
</Heading>
<Box display={"flex"} gap={0}>
<Box
width={"50%"}
p={5}
display={"flex"}
flexDirection={"column"}
gap={4}
>
<FormField
label="IO name"
name="IO name"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Select Option"
control={control}
name="selectOption"
type="select"
options={sponserOptions}
errors={errors}
/>
<FormField
label="Mobile no"
name="mobileNo"
type="tel"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Sponser address"
name="sponserAddress"
type="textarea"
control={control}
errors={errors}
isRequired={true}
/>
</Box>
<Box
width={"50%"}
p={5}
display={"flex"}
flexDirection={"column"}
gap={4}
>
<FormField
label="اسم الراعي"
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
</Box>
</Box>
<Box display={"flex"} justifyContent={"flex-start"} p={4}>
<Button
size={"sm"}
width={"50%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
<Divider />
</Box>
);
};
export default CreateIO;

133
src/Pages/IO_Management/ViewIO.jsx
View File

@@ -1,6 +1,7 @@
import {
Box,
Image,
Input,
Skeleton,
Tab,
TabIndicator,
@@ -16,26 +17,51 @@ import { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import InvestmentCard from "../../Components/InvestmentCard/InvestmentCard";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
// import robot from "../assets/robot.png"
import Pagination from "../../Components/Pagination";
import EmptySearchList from "../../Components/EmptySearchList";
const ExchangeRate = () => {
const [searchTerm, setSearchTerm] = useState("");
const { investment, setInvestment } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 1500);
// Cleanup the timer on component unmount
return () => clearTimeout(timer);
}, []);
// ====================================================[Table Filter]================================================================
const filteredData = investment.filter((item) => {
// Filter by name (case insensitive)
const name = item.title;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
// Filter by status
// const status = item.status;
// const statusLower = status ? "active" : "inactive";
// const statusMatches =
// statusFilter === "all" ||
// (statusFilter === "active" && status === true) ||
// (statusFilter === "inactive" && status === false);
return nameMatches;
});
const availableInvestments = filteredData.filter(
(item) => item.status === "Available"
);
const upcomingInvestments = filteredData.filter(
(item) => item.status === "Upcomming"
);
const closedInvestments = filteredData.filter(
(item) => item.status === "Closed"
);
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
@@ -54,18 +80,103 @@ const ExchangeRate = () => {
/>
<TabPanels>
<TabPanel>
{investment?.map((investmentDetails, index) => (
<Skeleton key={index} isLoaded={!isLoading}><InvestmentCard investment={investmentDetails} /></Skeleton>
))}
<Box display={"flex"} justifyContent={"space-between"}>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Pagination pageCount={false} totalItems={50} />
</Box>
{filteredData?.length === 0 ? (
<EmptySearchList message="We have no IO with this name" />
) : (
filteredData?.map((investmentDetails, index) => (
<Skeleton key={index} isLoaded={!isLoading}>
<InvestmentCard investment={investmentDetails} />
</Skeleton>
))
)}
</TabPanel>
<TabPanel>
<p>two!</p>
<Box display={"flex"} justifyContent={"space-between"}>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Pagination pageCount={false} totalItems={50} />
</Box>
{availableInvestments?.length === 0 ? (
<EmptySearchList message="We have no IO with this name" />
) : (
availableInvestments?.map((investmentDetails, index) => (
<Skeleton key={index} isLoaded={!isLoading}>
<InvestmentCard investment={investmentDetails} />
</Skeleton>
))
)}
</TabPanel>
<TabPanel>
<p>three!</p>
<Box display={"flex"} justifyContent={"space-between"}>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Pagination pageCount={false} totalItems={50} />
</Box>
{upcomingInvestments?.length === 0 ? (
<EmptySearchList message="We have no IO with this name" />
) : (
upcomingInvestments?.map((investmentDetails, index) => (
<Skeleton key={index} isLoaded={!isLoading}>
<InvestmentCard investment={investmentDetails} />
</Skeleton>
))
)}
</TabPanel>
<TabPanel>
<p>three!</p>
<Box display={"flex"} justifyContent={"space-between"}>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Pagination pageCount={false} totalItems={50} />
</Box>
{closedInvestments?.length === 0 ? (
<EmptySearchList message="We have no IO with this name" />
) : (
closedInvestments?.map((investmentDetails, index) => (
<Skeleton key={index} isLoaded={!isLoading}>
<InvestmentCard investment={investmentDetails} />
</Skeleton>
))
)}
</TabPanel>
</TabPanels>
</Tabs>

35
src/Pages/Investor_Management/InvestorDetails.jsx
View File

@@ -141,38 +141,9 @@ const InvestorDetails = () => {
// ),
Action: (
<Box w={"auto"} isTruncated={true}>
<span className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} className=" fw-bold">
{/* {formatDate(item.createdAt)} */}
{item.Action}
</Text>
<Menu>
<MenuButton className="link p-1 rounded-1">
<HiDotsVertical className="rubix-text-dark fs-6" />
</MenuButton>
<Portal>
<MenuList minWidth="80px">
<RouterLink to={`edit-sponser/${item.id}`}>
<MenuItem className="web-text-medium">Edit</MenuItem>
</RouterLink>
<RouterLink to={`view-sponser/${item.id}`}>
<MenuItem className="web-text-medium">View</MenuItem>
</RouterLink>
<MenuItem
onClick={() => {
setActionId(item?.id);
setDeleteAlert(true);
}}
className="web-text-medium"
>
Delete
</MenuItem>
</MenuList>
</Portal>
</Menu>
</span>
</Box>
<Button colorScheme="green" size={"xs"} variant={"ghost"}>
Distribute
</Button>
),
}));