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

create io updated

Browse Source
This commit is contained in:
Siddhesh More
2024-06-27 11:50:59 +05:30
parent 4a78f9374c
commit a3aabc6252
4 changed files with 623 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/Components/FormField.jsx
View File

@@ -1,97 +1,219 @@
import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack } from '@chakra-ui/react';
import React from 'react';
import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack, Box, Heading, FormHelperText, Kbd } from '@chakra-ui/react';
import { Controller } from 'react-hook-form';
import { TiWarning } from 'react-icons/ti';
import { motion } from 'framer-motion';
const FormField = ({
label,
control,
name,
type = "text",
options = [],
errors,
isRequired,
arabic,
...props
}) => (
<FormControl isInvalid={errors[name]}>
<FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
<Controller
control={control}
name={name}
defaultValue=""
render={({ field }) => {
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"}
label,
control,
name,
type = "text",
options = [],
errors,
isRequired,
rules,
arabic,
placeHolder,
helperText,
multiple,
handleImageChange,
...props
}) => (
<FormControl isInvalid={errors[name]} isRequired={isRequired} className="mb-3">
<FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
<Controller
control={control}
name={name}
defaultValue=""
rules={rules}
render={({ field }) => {
if (type === 'select') {
return (
<Select
focusBorderColor="forestGreen.300"
size={"sm"}
{...field}
{...props}
cursor={'pointer'}
placeholder={placeHolder? placeHolder : label}
textAlign={arabic ? "right" : "left"}
>
{options.map((option, index) => (
<option key={index} value={option.value}>{option.label}</option>
))}
</Select>
);
} else if (type === 'textarea') {
return (
<Textarea
focusBorderColor="forestGreen.400"
size={"sm"}
{...field}
{...props}
placeholder={placeHolder? placeHolder : label}
textAlign={arabic ? "right" : "left"}
/>
);
} else if (type === 'checkbox') {
return (
<Checkbox
size={"sm"}
{...field}
{...props}
textAlign={arabic ? "right" : "left"}
>
{label}
</Checkbox>
);
} else if (type === 'radio') {
return (
<RadioGroup {...field} {...props}>
<Stack direction="row">
{options.map((option, index) => (
<Radio key={index} value={option.value}>
{option.label}
</Radio>
))}
</Stack>
</RadioGroup>
);
} else if (type === 'file') {
return (
<Box
borderColor="gray.300"
borderStyle="dashed"
borderWidth="2px"
rounded="md"
shadow="sm"
role="group"
transition="all 150ms ease-in-out"
_hover={{
shadow: "md",
}}
as={motion.div}
initial="rest"
animate="rest"
whileHover="hover"
height={"105px"}
className="pointer"
>
<Box position="relative" height="100%" width="100%">
<Box
position="absolute"
top="0"
left="0"
height="100%"
width="100%"
display="flex"
flexDirection="column"
>
{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
height="100%"
width="100%"
display="flex"
alignItems="center"
justify="center"
>
<span
className="d-flex flex-column align-items-center pointer"
spacing="1"
>
<Heading
fontSize="lg"
color="gray.700"
fontWeight="bold"
cursor={"pointer"}
>
Drop images here
</Heading>
<span
fontWeight="light"
className="web-text-large text-secondary text-center pointer"
>
or click to upload
</span>
</span>
</Stack>
</RadioGroup>
);
default:
return (
</Box>
<Input
focusBorderColor="forestGreen.300"
size={"sm"}
type={type}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
type="file"
height="100%"
width="100%"
position="absolute"
top="0"
left="0"
opacity="0"
aria-hidden="true"
accept="image/*"
onChange={(e) => {
field.onChange(e);
handleImageChange(e);
}}
onDrop={(e) => {
field.onChange(e);
handleImageChange(e);
}}
/>
);
}
}}
/>
{errors[name] && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors[name].message}
</span>
)}
</FormControl>
);
</Box>
</Box>
);
}else if (type === 'fileNormal') {
return (
<>
<Input
{...field}
{...props}
multiple={multiple} // Support for multiple file uploads
accept="image/*"
type="file"
className="web-text-medium form-control rounded-1"
size="sm"
onChange={(e) => {
field.onChange(e);
handleImageChange(e);
}}
/>
{multiple && (
<FormHelperText className="web-text-small">
You can select multiple images using{" "}
<span className="text-dark">
<Kbd size={'sm'} className="text-dark">ctrl</Kbd> + <Kbd className="text-dark">select</Kbd>
</span>.
</FormHelperText>
)}
</>
);
} else {
return (
<Input
focusBorderColor="forestGreen.300"
size={"sm"}
type={type}
{...field}
{...props}
placeholder={placeHolder? placeHolder : label}
textAlign={arabic ? "right" : "left"}
/>
);
}
}}
/>
{errors[name] && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors[name].message}
</span>
)}
{helperText &&<FormHelperText className="web-text-small">
{helperText}
</FormHelperText>}
{type === 'file' && (
<FormHelperText className="web-text-small">
Maximum limit of image is 10MB.
</FormHelperText>
)}
</FormControl>
);
export default FormField;

3
src/Components/Pagination.jsx
View File

@@ -36,6 +36,7 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
<HStack>
<Select
className="pointer web-text-small"
width={"90px"}
rounded="sm"
@@ -50,6 +51,7 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
))}
</Select>
<IconButton
mt={1}
size={'sm'}
rounded="sm"
icon={<ChevronLeftIcon />}
@@ -61,6 +63,7 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
{displayRange.start} - {displayRange.end} of {totalItems}
</Text>
<IconButton
mt={1}
icon={<ChevronRightIcon />}
size={'sm'}
rounded="sm"

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

@@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React, { useContext, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import {
Box,
@@ -11,11 +11,12 @@ import {
Textarea,
Button,
Text,
Image,
} 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 { AddIcon, CloseIcon, WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
@@ -23,30 +24,66 @@ import FormField from "../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
const schema = yup.object().shape({
ioNameArabic: yup.string().required("Arabic name is required"),
ioName: yup.string().required("Investment Object name is required"),
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"),
destributedAmount: yup
.number()
.required("Distributed Amount is required")
.positive("Must be a positive number"),
year: yup.string().required("Year is required"),
tenure: yup
.number()
.required("Tenure is required")
.positive("Must be a positive number"),
annualReturn: yup
.number()
.required("Annual Return is required")
.positive("Must be a positive number"),
miniInvest: yup
.number()
.required("Minimum Invest is required")
.positive("Must be a positive number"),
quaterly: yup.string().required("Quaterly is required"),
targetClose: yup.date().required("Target close date is required"),
annualyield: yup
.number()
.required("Annual Yield is required")
.positive("Must be a positive number"),
banner_image: yup.mixed().required("Profile image is required"),
// .test(
// 'fileSize',
// 'File size is too large',
// value => value && value.size <= 10485760 // 10MB
// )
// .test(
// 'fileType',
// 'Unsupported file format',
// value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
// ),
other_image: yup.mixed().required("Profile image is required"),
// .test(
// 'fileSize',
// 'File size is too large',
// value => value && value.size <= 10485760 // 10MB
// )
// .test(
// 'fileType',
// 'Unsupported file format',
// value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
// ),
});
const startYear = 2024;
const endYear = 2124;
// const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
const years = Array.from({ length: 2124 - 2024 + 1 }, (_, i) => 2024 + i).map(
(year) => ({ value: year, label: year })
);
export function debounce(func, delay) {
let debounceTimer;
return function(...args) {
return function (...args) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(this, args), delay);
};
@@ -54,41 +91,92 @@ export function debounce(func, delay) {
const CreateIO = () => {
const navigate = useNavigate();
const { sponser, setSponser } = useContext(GlobalStateContext);
const [bannerImageData, setBannerImageData] = useState(null);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
const {
control,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
// defaultValues: {
// destributedAmount: 0,
// tenure: 0,
// annualReturn: 0,
// miniInvest: 0,
// annualyield: 0,
// },
});
console.log(errors);
const onSubmit = (data) => {
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...sponser,
]);
navigate("/sponser");
console.log(data?.targetClose);
navigate("/view-io");
reset();
};
// Extract options for the select input
const sponserOptions = sponser.map((item) => ({
value: item.sponserName,
label: item.sponserName,
}));
// Extract options for the select input
const sponserOptions = sponser.map(item => ({
value: item.id,
label: item.sponserName
}));
const handleBannerImageChange = (e) => {
const file = e.target.files[0];
setBannerImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedBannerImageData(reader.result);
};
reader.readAsDataURL(file);
}
};
// Handler for file input
const handleOtherImageChange = (e) => {
const files = Array.from(e.target.files);
const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
setOtherImageData(newImageData);
const readers = files.map(file => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
});
Promise.all(readers).then(results => {
setSelectedOtherImageData([...(selectedOtherImageData || []), ...results]); // Ensure selectedOtherImageData is an array
}).catch(error => {
console.error("Error reading files:", error);
});
};
// Function to remove a specific image
const removeOtherImage = (index) => {
const newImageData = otherImageData.filter((_, i) => i !== index);
const newSelectedImageData = selectedOtherImageData.filter((_, i) => i !== index);
setOtherImageData(newImageData);
setSelectedOtherImageData(newSelectedImageData);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Heading as="h6" size="xs" mt={4}>
IO Details
Investment Object Details
</Heading>
<Box display={"flex"} gap={0}>
<Box
@@ -99,39 +187,125 @@ const CreateIO = () => {
gap={4}
>
<FormField
label="IO name"
name="IO name"
label="Investment object name"
name="ioName"
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"
label="Destributed Amount"
placeHolder={"$00.0"}
helperText={"Please enter value in $"}
name="destributedAmount"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
{/* <FormField
label="Year"
control={control}
name="year"
type="select"
options={years}
errors={errors}
isRequired={true}
/> */}
<FormField
label="Sponser address"
name="sponserAddress"
type="textarea"
label="Sponsers Name"
control={control}
name="sponserName"
type="select"
options={sponserOptions}
errors={errors}
isRequired={true}
/>
<FormField
label="Tenure"
// helperText={"Please enter value in Dollar"}
name="tenure"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Annual return"
placeHolder={"00.00%"}
helperText={"Please enter value in percentage"}
name="annualReturn"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Banner image"
control={control}
name="banner_image"
type="fileNormal"
helperText={"You can select only one image for banner."}
errors={errors}
multiple={false}
handleImageChange={handleBannerImageChange}
isRequired={true}
rules={{
required: "Profile image is required",
}}
// register={register} // Pass register function to FormField
/>
{selectedBannerImageData && (
<Box width={"20%"}>
<Image
rounded={"md"}
objectFit={"cover"}
src={selectedBannerImageData}
alt="profile"
width={100}
height={100}
/>
<Box
w={"100%"}
display={"flex"}
flexDirection={"column"}
position={"relative"}
>
<CloseIcon
onClick={() => setSelectedBannerImageData(null)}
className="link pointer"
p={1}
fontSize={"lg"}
color={"red"}
fontWeight={"500"}
rounded={"md"}
position={"absolute"}
top={1}
right={0}
/>
<Text
as={"span"}
fontSize={"xs"}
w={"80%"}
fontWeight={"500"}
mt={1}
isTruncated={true}
>
{bannerImageData?.name}
</Text>
<Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
{(bannerImageData?.size / (1024 * 1024)).toFixed(2)} mb
</Text>
</Box>
</Box>
)}
</Box>
<Box
@@ -142,30 +316,174 @@ const CreateIO = () => {
gap={4}
>
<FormField
label="اسم الراعي"
name="اسم الراعي"
label="Investment object"
name="ioNameArabic"
placeHolder={"الرجاء إدخال القيمة"}
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
<FormField
label="Min Invest"
placeHolder={"$00.00"}
helperText={"Please enter value in $"}
name="miniInvest"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Quaterly"
control={control}
name="quaterly"
type="select"
options={[
{
label: "Q1",
value: "Q1",
},
{
label: "Q2",
value: "Q2",
},
{
label: "Q3",
value: "Q3",
},
{
label: "Q4",
value: "Q4",
},
]}
errors={errors}
isRequired={true}
/>
<FormField
label="Target close"
name="targetClose"
type="date"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Annual yeild"
placeHolder={"00.00%"}
helperText={"Please enter value in percentage"}
name="annualyield"
type="number"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
id="otherImageInput"
label="Other images"
control={control}
name="other_image"
type="fileNormal"
multiple={true}
errors={errors}
handleImageChange={handleOtherImageChange}
isRequired={true}
rules={{
required: "Profile image is required",
}}
// register={register} // Pass register function to FormField
/>
{selectedOtherImageData?.length > 0 && (
<Box width={"100%"} display="flex" flexWrap="wrap" gap={4}>
{selectedOtherImageData.map((imageData, index) => (
<Box key={index} width={"100px"}>
<Image
rounded={"md"}
objectFit={"cover"}
src={imageData}
alt={`profile-${index}`}
width={100}
height={100}
/>
<Box
display={"flex"}
flexDirection={"column"}
position={"relative"}
>
<CloseIcon
onClick={() => removeOtherImage(index)}
bg={"#fff"}
className="link pointer"
p={1}
fontSize={"lg"}
color={"red"}
fontWeight={"500"}
rounded={"md"}
position={"absolute"}
bottom={0}
right={0}
/>
<Text
as={"span"}
fontSize={"xs"}
fontWeight={"500"}
mt={1}
isTruncated={true}
>
{otherImageData[index]?.name}
</Text>
<Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
{(otherImageData[index]?.size / (1024 * 1024)).toFixed(
2
)}{" "}
mb
</Text>
</Box>
</Box>
))}
{/* <Box width={"100px"} display={'flex'} alignItems={'center'}> */}
<AddIcon
onClick={() => document.getElementById('otherImageInput').click()}
rounded={"md"}
width={50}
height={50}
mt={26}
p={4}
cursor={"pointer"}
// rounded={'md'}
className="link"
/>
{/* </Box> */}
</Box>
)}
</Box>
</Box>
<Box display={"flex"} justifyContent={"flex-start"} p={4}>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"50%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
size={"sm"}
width={"50%"}
rounded={"sm"}
type="submit"
colorScheme="green"
mt={4}
>
Submit
</Button>
</Box>
</form>
<Divider />
{/* <Divider /> */}
</Box>
);
};

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

@@ -2,6 +2,7 @@ import {
Box,
Image,
Input,
Select,
Skeleton,
Tab,
TabIndicator,
@@ -24,6 +25,7 @@ const ExchangeRate = () => {
const [searchTerm, setSearchTerm] = useState("");
const { investment, setInvestment } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(true);
const [statusFilter, setStatusFilter] = useState("all");
useEffect(() => {
// Simulate loading
@@ -42,15 +44,16 @@ const ExchangeRate = () => {
const nameMatches = name.toLowerCase().includes(searchLower);
// Filter by status
// const status = item.status;
const status = item.status;
// const statusLower = status ? "active" : "inactive";
// const statusMatches =
// statusFilter === "all" ||
// (statusFilter === "active" && status === true) ||
// (statusFilter === "inactive" && status === false);
const statusMatches =
statusFilter === "all" ||
(statusFilter === "Available" && status === "Available") ||
(statusFilter === "Upcomming" && status === "Upcomming") ||
(statusFilter === "Closed" && status === "Closed");
return nameMatches;
return nameMatches && statusMatches;
});
const availableInvestments = filteredData.filter(
@@ -91,7 +94,22 @@ const ExchangeRate = () => {
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Box display={"flex"} gap={2} >
<Select pb={1}
className="pointer web-text-small"
width={"100px"}
rounded="sm"
size="sm"
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
>
<option value="all">All</option>
<option value="Available">Available</option>
<option value="Upcomming">Upcomming</option>
<option value="Closed">Closed</option>
</Select>
<Pagination pageCount={false} totalItems={50} />
</Box>
</Box>
{filteredData?.length === 0 ? (
<EmptySearchList message="We have no IO with this name" />
@@ -166,7 +184,11 @@ const ExchangeRate = () => {
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" />