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

Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

Browse Source
This commit is contained in:
YasinShaikh123
2024-07-01 12:51:27 +05:30
parent d9c428a4a4 43480f41fe
commit dfe123c7df
10 changed files with 1108 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,6 +23,7 @@ import { useNavigate } from "react-router-dom";
import FormField from "../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
import AddIOCharges from "./AddIOCharges";
import FormInputMain from "../../Components/FormInputMain";
const schema = yup.object().shape({
ioNameArabic: yup.string().required("Arabic name is required"),
@@ -64,7 +65,8 @@ const years = Array.from(
const CreateIO = () => {
const navigate = useNavigate();
const { sponser, setSponser,investment, setInvestment } = useContext(GlobalStateContext);
const { sponser, setSponser, investment, setInvestment } =
useContext(GlobalStateContext);
const [bannerImageData, setBannerImageData] = useState(null);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
@@ -73,7 +75,6 @@ const CreateIO = () => {
const [totalCharge, setTotalCharge] = useState(0.0);
const [totalAmount, setTotalAmount] = useState(0.0);
const {
control,
handleSubmit,
@@ -111,12 +112,11 @@ const CreateIO = () => {
}, [charges, destributedAmount]);
const onSubmit = (data) => {
// setValue("banner_image", selectedBannerImageData);
data.banner_image = selectedBannerImageData;
const updatedData = { ...data, status: "Available"}
const updatedData = { ...data, status: "Available" };
console.log(selectedBannerImageData);
setInvestment([...investment,updatedData])
setInvestment([...investment, updatedData]);
navigate("/view-io");
reset();
};
@@ -270,187 +270,147 @@ const CreateIO = () => {
setSelectedOtherImageData(newSelectedImageData);
};
const formFields = [
{
label: "Investment object name",
name: "ioName",
type: "text",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Investment object (Arabic)",
name: "ioNameArabic",
placeHolder: "الرجاء إدخال القيمة",
type: "text",
isRequired: true,
arabic: true,
section: "Investment Object Details",
},
{
label: "Destributed Amount",
name: "destributedAmount",
type: "number",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Min Invest",
name: "miniInvest",
type: "number",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Sponsers name",
name: "sponserName",
type: "text",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Year",
name: "accountNumber",
type: "select",
options: years,
isRequired: true,
section: "Investment Object Details",
},
{
label: "Annual return",
name: "annualReturn",
type: "number",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Annual yeild",
name: "annualyield",
type: "number",
helperText: "Please enter value in percentage",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Quaterly",
name: "quaterly",
type: "select",
options: [
{
label: "Q1",
value: "Q1",
},
{
label: "Q2",
value: "Q2",
},
{
label: "Q3",
value: "Q3",
},
{
label: "Q4",
value: "Q4",
},
],
isRequired: true,
section: "Investment Object Details",
},
{
label: "Target close",
name: "targetClose",
type: "date",
isRequired: true,
section: "Investment Object Details",
},
{
label: "Banner image",
name: "banner_image",
id: "banner_image",
type: "fileNormal",
isRequired: true,
section: "Uplaod Banner Images",
multiple: false,
selectedImageData: selectedBannerImageData,
setSelectedImageData: setSelectedBannerImageData,
imageData: bannerImageData,
handleImageChange: handleBannerImageChange,
},
{
label: "Multi Image",
name: "OtherImage",
id: "OtherImage",
type: "fileNormal",
isRequired: true,
section: "Uplaod Banner Images",
multiple: true,
selectedImageData: selectedOtherImageData,
setSelectedImageData: setSelectedOtherImageData,
imageData: otherImageData,
handleImageChange: handleOtherImageChange,
removeImage: removeOtherImage,
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Heading as="h6" size="xs" mt={4}>
Investment Object Details
</Heading>
<Box w={'100%'} display={'flex'} flexWrap={'wrap'} gap={5} p={2}>
{investForm.map((field, index) => (
<FormField
key={index}
label={field.label}
name={field.name}
type={field.type}
placeHolder={field.placeHolder}
helperText={field.helperText}
options={field.options}
control={control}
errors={errors}
isRequired={true}
/>
))}
</Box>
<Divider />
<Heading w={"100%"} as="h6" size="xs" mb={5}>
Uplaod Banner Images
</Heading>
<Box
width={"100%"}
p={5}
pt={0}
display={"flex"}
flexWrap={"wrap"}
gap={4}
>
<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
/>
<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
/>
{selectedBannerImageData && (
<Box width={"49%"}>
<Image
rounded={"md"}
objectFit={"cover"}
src={selectedBannerImageData}
alt="profile"
width={100}
height={100}
/>
<Box
w={"30%"}
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={"70%"}
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>
)}
{selectedOtherImageData?.length > 0 && (
<Box width={"49.5%"} 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>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
>
<Divider />
<Heading
w={"100%"}
@@ -534,28 +494,27 @@ const CreateIO = () => {
""
)}
<Box display={"flex"}>
<Text
fontSize={"sm"}
fontWeight={"500"}
as={"span"}
w={"70%"}
bg={""}
>
Total distributed amount
</Text>
<Text
as={"span"}
fontSize={"sm"}
fontWeight={"600"}
w={"30%"}
bg={""}
>
$ {destributedAmount.toFixed(4)}
</Text>
</Box>
<Box display={"flex"}>
<Text
fontSize={"sm"}
fontWeight={"500"}
as={"span"}
w={"70%"}
bg={""}
>
Total distributed amount
</Text>
<Text
as={"span"}
fontSize={"sm"}
fontWeight={"600"}
w={"30%"}
bg={""}
>
$ {destributedAmount.toFixed(4)}
</Text>
</Box>
<Box pt={2} borderTop={"1px solid #fff"} as="span" display={"flex"}>
<Text
fontSize={"sm"}
@@ -576,25 +535,9 @@ const CreateIO = () => {
$ {totalAmount.toFixed(4)}
</Text>
</Box>
</Box>
</Box>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"50%"}
rounded={"sm"}
type="submit"
colorScheme="green"
mt={4}
>
Submit
</Button>
</Box>
</form>
</FormInputMain>
</Box>
);
};

322
src/Pages/Master/Sponser/AddSponser.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,
@@ -19,11 +19,12 @@ 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";
import FormInputMain from "../../../Components/FormInputMain";
const schema = yup.object().shape({
export const addSponser = yup.object().shape({
sponserName: yup.string().required("Sponser name is required"),
sponserNameArabic: yup.string().required("Sponser name is required"),
mobileNo: yup.string().required("Mobile no is required"),
sponserAddress: yup.string().required("Sponser address is required"),
@@ -52,16 +53,158 @@ export function debounce(func, delay) {
const AddSponser = () => {
const navigate = useNavigate();
const [bannerImageData, setBannerImageData] = useState(null);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
const { sponser, setSponser } = useContext(GlobalStateContext);
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
resolver: yupResolver(addSponser),
});
console.log(errors);
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);
};
console.log(selectedBannerImageData);
const formFields = [
{
label: "Sponser name",
name: "sponserName",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser Name (Arabic)",
name: "sponserNameArabic",
type: "text",
isRequired: true,
arabic: true,
section: "Personal Details",
},
{
label: "Mobile no",
name: "mobileNo",
type: "number",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser address",
name: "sponserAddress",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Bank name",
name: "bankName",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Name",
name: "accountNumber",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "SWIFT/BIC Code",
name: "swiftCode",
type: "number",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Annual yeild",
name: "annualyield",
type: "number",
helperText: "Please enter value in percentage",
isRequired: true,
section: "Investment Object Details",
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const onSubmit = (data) => {
setSponser([
@@ -78,171 +221,14 @@ const AddSponser = () => {
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form onSubmit={handleSubmit(onSubmit)}>
<Heading as="h6" size="xs" mt={4}>
Personal Details
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
label="Sponser name"
name="sponserName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
placeHolder={"الرجاء إدخال القيمة"}
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
<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>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}
<Divider />
onSubmit={handleSubmit(onSubmit)}
<Heading as="h6" size="xs" mt={4}>
Bank Details
</Heading>
<Box display={"flex"} gap={0}>
{Array(1).fill(
<Box
width={"100%"}
p={5}
display={"flex"}
flexWrap={"wrap"}
gap={4}
>
{/* <FormField
label="Account Holder's Name"
name="accountHolderName"
control={control}
errors={errors}
isRequired={true}
/> */}
<FormField
label="Bank Name"
name="bankName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Account Number"
name="accountNumber"
control={control}
errors={errors}
isRequired={true}
/>
{/* <FormField
label="Bank Branch"
name="bankBranch"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="Branch Address"
name="branchAddress"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="IFSC Code"
name="ifscCode"
control={control}
errors={errors}
isRequired={true}
/> */}
<FormField
label="SWIFT/BIC Code"
name="swiftCode"
control={control}
errors={errors}
isRequired={true}
/>
{/* <FormField
label="Routing Number"
name="routingNumber"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="IBAN"
name="iban"
control={control}
errors={errors}
isRequired={true}
/> */}
{/* <FormField
label="Type of Account"
name="accountType"
control={control}
errors={errors}
isRequired={true}
component={
<Select size={"sm"}>
<option value="savings">Savings</option>
<option value="checking">Checking</option>
<option value="business">Business</option>
</Select>
}
/> */}
{/* <FormField
label="Bank Phone Number"
name="bankPhoneNumber"
control={control}
errors={errors}
isRequired={true}
/> */}
<FormField
label="Bank Email (optional)"
name="bankEmail"
control={control}
errors={errors}
/>
{/* <Button size={"sm"} rounded={"sm"} type="submit" colorScheme="green">
Submit
</Button> */}
</Box>
)}
</Box>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"49.5%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
</Box>
/></Box>
);
};

198
src/Pages/Master/Sponser/EditSponser.jsx
View File

@@ -3,33 +3,23 @@ import { useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import FormField from "../../../Components/FormField";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { addSponser } from "./AddSponser";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import AddSponser from "./AddSponser";
import FormInputMain from "../../../Components/FormInputMain";
const EditSponser = () => {
const params = useParams();
const { sponser } = useContext(GlobalStateContext);
const [foundObject, setFoundObject] = useState(null);
const {
control,
handleSubmit,
reset,
getValues,
formState: { errors },
} = useForm({
resolver: yupResolver(AddSponser),
defaultValues: {
sponserName: foundObject?.sponserName,
mobileNo: foundObject?.mobileNo,
sponserAddress: foundObject?.sponserAddress,
bankName: foundObject?.bankName,
accountNumber: foundObject?.accountNumber,
swiftCode: foundObject?.swiftCode,
bankEmail: foundObject?.bankEmail,
},
resolver: yupResolver(addSponser),
});
useEffect(() => {
@@ -39,114 +29,120 @@ const EditSponser = () => {
// Ensure id is compared correctly
const found = sponser.find((item) => item?.id.toString() === id.toString());
console.log(found);
console.log(found?.swiftCode);
setFoundObject(found);
if (found) {
reset({
sponserName: found.sponserName,
sponserNameArabic: found.sponserNameArabic,
mobileNo: found.mobileNo,
sponserAddress: found.sponserAddress,
bankName: found.bankName,
accountNumber: found.accountNumber,
swiftCode: found.swiftCode,
accountNumber: found.accountNumber,
bankEmail: found.bankEmail,
});
}
}, [params, sponser, reset]);
if (!foundObject) {
return <Box>Loading...</Box>; // or any loading indicator
}
const formFields = [
{
label: "Sponser name",
name: "sponserName",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser Name (Arabic)",
name: "sponserNameArabic",
type: "text",
isRequired: true,
arabic: true,
section: "Personal Details",
},
{
label: "Mobile no",
name: "mobileNo",
type: "number",
isRequired: true,
section: "Personal Details",
},
{
label: "Sponser address",
name: "sponserAddress",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Bank name",
name: "bankName",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Name",
name: "accountNumber",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "SWIFT/BIC Code",
name: "swiftCode",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
];
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const onSubmit = (data) => {
console.log(data);
}
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<form>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
label="Sponser name"
name="sponserName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
placeHolder={"الرجاء إدخال القيمة"}
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
<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>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}
<Divider />
<Heading as="h6" size="xs" mt={4}>
Bank Details
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormField
label="Bank Name"
name="bankName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Account Number"
name="accountNumber"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="SWIFT/BIC Code"
name="swiftCode"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Bank Email (optional)"
name="bankEmail"
control={control}
errors={errors}
/>
</Box>
</Box>
<Box display={"flex"} justifyContent={"flex-end"} p={4}>
<Button
size={"sm"}
width={"49.5%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
onSubmit={handleSubmit(onSubmit)}
/>
</Box>
);
};

113
src/Pages/Master/Sponser/ViewSponser.jsx
View File

@@ -1,47 +1,102 @@
import { Box, FormControl, FormLabel, Image, Text } from "@chakra-ui/react"
import {
Box,
Button,
Divider,
FormControl,
FormLabel,
Heading,
Image,
Text,
} from "@chakra-ui/react";
// import error from "../assets/Error.svg"
import robot from "../../../assets/robot.png"
import robot from "../../../assets/robot.png";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { useParams } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext } from "react";
// import robot from "../assets/robot.png"
const ViewSponser = () => {
const params = useParams();
const navigate = useNavigate()
const { sponser } = useContext(GlobalStateContext);
const id = params?.id;
const found = sponser.find((item) => item?.id.toString() === id.toString());
const personalDetails = [
{
title: "Sponser Name",
value: found?.sponserName,
},
{
title: "Sponser Name (Arabic)",
value: found?.sponserNameArabic,
},
{
title: "Mobile no",
value: found?.mobileNo,
},
{
title: "Sponser address",
value: found?.sponserAddress,
},
];
const bankDetails = [
{
title: "Bank Name",
value: found?.bankName,
},
{
title: "Account number",
value: found?.accountNumber,
},
{
title: "SWIFT/BIC Code",
value: found?.swiftCode,
},
{
title: "Account Email",
value: found?.bankEmail,
},
];
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Box display={"flex"} gap={0}>
<Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
<FormControl w={'49%'} mb={3} >
<FormLabel color={'gray.500'} fontSize={"sm"}>Sponser name</FormLabel>
<FormLabel fontSize={"sm"}>{found?.sponserName}</FormLabel>
</FormControl>
<FormControl w={'49%'} mb={3} >
<FormLabel color={'gray.500'} fontSize={"sm"}>Sponser name ( Arabic )</FormLabel>
<FormLabel fontSize={"sm"}>{found?.sponserName}</FormLabel>
</FormControl>
<FormControl w={'49%'} mb={3} >
<FormLabel color={'gray.500'} fontSize={"sm"}>Moobile no</FormLabel>
<FormLabel fontSize={"md"}>{found?.mobileNo}</FormLabel>
</FormControl>
<Heading display={'flex'} justifyContent={'space-between'} pe={4} as="h6" size="xs" mt={3}>
Personal Details <Button colorScheme="green" size={'xs'} rounded={'sm'} onClick={() => navigate(`/sponser/edit-sponser/${id}`)} >Edit sponsers</Button>
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} pt={5} mb={5} display={"flex"} flexWrap={"wrap"} gap={4}>
{personalDetails?.map(({ title, value }, index) => (
<FormControl className="border-end" key={index} w={"49%"} mb={0}>
<FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"} color={"gray.500"} fontSize={"xs"}>
{title}
</FormLabel>
<FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"} fontSize={"sm"}>{value}</FormLabel>
</FormControl>
))}
</Box>
</Box>
<Divider />
<Heading as="h6" size="xs" mt={0}>
Bank Details
</Heading>
<Box display={"flex"} gap={0}>
<Box width={"100%"} pt={5} display={"flex"} flexWrap={"wrap"} gap={4}>
{bankDetails?.map(({ title, value }, index) => (
<FormControl className="border-end" key={index} w={"49%"} mb={0}>
<FormLabel color={"gray.500"} fontSize={"xs"}>
{title}
</FormLabel>
<FormLabel fontSize={"sm"}>{value}</FormLabel>
</FormControl>
))}
</Box>
</Box>
</Box>
)
}
);
};
export default ViewSponser
export default ViewSponser;

20
src/Pages/WithDrawal/ViewHistory.jsx
View File

@@ -6,6 +6,7 @@ import {
HStack,
Input,
Text,
Tooltip,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
@@ -15,6 +16,7 @@ import Pagination from "../../Components/Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
// import { formatDate } from "../../Components/Functions/UTCConvertor";
const ViewHistory = () => {
@@ -137,17 +139,15 @@ const ViewHistory = () => {
{item.quarter}
</Text>
),
Action: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.amount}
</Text>
<Box display={'flex'} justifyContent={'space-around'}>
<Tooltip rounded={'sm'} fontSize={'xs'} label='Accept' bg='#fff' color={'green.500'} placement="left-start">
<Button color="green.500" rounded={'sm'} size={'xs'}>
<CheckIcon /></Button></Tooltip>
<Tooltip rounded={'sm'} fontSize={'xs'} label='Reject' bg='#fff' color={'red.500'} placement="left-start">
<Button color="red.500" rounded={'sm'} size={'xs'}>
<CloseIcon /></Button></Tooltip>
</Box>
),
}));