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

investment table

Browse Source
This commit is contained in:
YasinShaikh123
2024-07-23 16:31:45 +05:30
parent 79044fd011
commit f46722cd92
9 changed files with 285 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
src/Pages/Master/InvestmentType/AddInvestmentType.jsx
View File

@@ -1,23 +1,26 @@
import React, { useContext, useState } from "react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { Box } from "@chakra-ui/react";
import { Box, useToast } 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";
import { useNavigate, useParams } from "react-router-dom";
import FormInputMain from "../../../Components/FormInputMain";
import SwitchButton from "../../../Components/SwitchButton";
import {
useCreateInvestmentTypeMutation,
useGetInvestmentTypeByIdQuery,
useUpdateInvestmentTypeMutation,
} from "../../../Services/investment.type.service";
import ToastBox from "../../../Components/ToastBox";
export const addInvestmentType = yup.object().shape({
investmentName: yup.string().required("Investment name is required"),
description: yup.string().required("Description is required"),
investmentNameArabic: yup.string().required("Investment name is required"),
descriptionArabic: yup.string().required("Description is required"),
investmentTypeName: yup.string().required("Investment name is required"),
note: yup.string().required("Description is required"),
investmentTypeNameArabic: yup
.string()
.required("Investment name is required"),
noteArabic: yup.string().required("Description is required"),
});
export function debounce(func, delay) {
@@ -29,109 +32,142 @@ export function debounce(func, delay) {
}
const AddInvestmentType = () => {
const navigate = useNavigate();
const [bannerImageData, setBannerImageData] = useState(null);
const { investmentType, setInvestmentType } = useContext(GlobalStateContext);
const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
const toast = useToast();
const params = useParams();
const [isSwitchOn, setIsSwitchOn] = useState(false);
const [isLoadingBtn, setIsLoadingBtn] = useState(false);
const [otherImageData, setOtherImageData] = useState(null);
const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
const [createInvestmentType] = useCreateInvestmentTypeMutation();
const [updateInvestmentType] = useUpdateInvestmentTypeMutation();
const {
control,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: yupResolver(addInvestmentType),
});
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);
const id = params?.id;
const {
data: investmentTypeByIdData,
error,
isLoading,
} = useGetInvestmentTypeByIdQuery(id, {
skip: !id,
});
console.log(investmentTypeByIdData);
console.log(id);
useEffect(() => {
if (investmentTypeByIdData?.data) {
reset({
investmentTypeName: investmentTypeByIdData?.data?.investmentTypeName,
investmentTypeNameArabic: investmentTypeByIdData?.data?.investmentTypeNameArabic,
note: investmentTypeByIdData?.data?.note,
noteArabic: investmentTypeByIdData?.data?.noteArabic,
// email: investmentTypeByIdData?.data?.email,
});
}
};
// 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);
};
}, [investmentTypeByIdData, reset]);
if (false) {
return <FullscreenLoaders />;
}
console.log("hit");
const formFields = [
{
label: "Investment name",
name: "investmentName",
label: "Investment Type (English)",
placeHolder: " ",
name: "investmentTypeName",
type: "text",
isRequired: true,
section: "Add Details",
},
{
label: "Investment Name (Arabic)",
name: "investmentNameArabic",
label: "Investment Type (Arabic) ",
name: "investmentTypeNameArabic",
placeHolder: " ",
type: "text",
isRequired: true,
arabic: true,
section: "Add Details",
isArabic: true,
},
{
label: "Description Name",
name: "description",
label: "Description (English)",
placeHolder: " ",
name: "note",
type: "text",
isRequired: true,
section: "Add Details",
},
{
label: "Description Name (Arabic)",
name: "descriptionArabic",
label: "Description (Arabic)",
placeHolder: " ",
name: "noteArabic",
type: "text",
isRequired: true,
arabic: true,
isArabic: true,
section: "Add Details",
},
];
const formEditFields = [
{
label: "Investment Type (English) *",
placeHolder: " ",
name: "investmentTypeName",
type: "text",
isRequired: true,
section: "Add Details",
},
{
label: "Investment Type (Arabic) *",
name: "investmentTypeNameArabic",
placeHolder: " ",
type: "text",
isRequired: true,
section: "Add Details",
isArabic: true,
},
{
label: "Description (English)",
placeHolder: " ",
name: "note",
type: "text",
isRequired: true,
section: "Add Details",
},
{
label: "Description (Arabic)",
placeHolder: " ",
name: "noteArabic",
type: "text",
isRequired: true,
isArabic: true,
section: "Add Details",
},
];
const groupedEditFields = formEditFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
}
groups[section].push(field);
return groups;
}, {});
const groupedFields = formFields.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
@@ -141,30 +177,78 @@ const AddInvestmentType = () => {
return groups;
}, {});
const onSubmit = (data) => {
setInvestmentType([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentType,
]);
navigate("/investment-type");
const onSubmit = async (data) => {
setIsLoadingBtn(true);
console.log(data);
const id = params?.id;
if (id) {
try {
await updateInvestmentType({ data, id }).then((response) => {
if (response?.data?.statusCode === 200) {
toast({
render: () => <ToastBox message={response?.data?.message} />,
});
setIsLoadingBtn(false);
navigate("/investment-type");
} else {
toast({
render: () => (
<ToastBox message={"Something Went Wrong"} status={"error"} />
),
});
setIsLoadingBtn(false);
navigate("/investment-type");
}
});
} catch (error) {
console.log(error);
setIsLoadingBtn(false);
navigate("/investment-type");
}
} else {
try {
await createInvestmentType(data).then((response) => {
if (response?.data?.statusCode === 201) {
toast({
render: () => <ToastBox message={response?.data?.message} />,
});
setIsLoadingBtn(false);
navigate("/investment-type");
} else {
toast({
render: () => (
<ToastBox message={"Something Went Wrong"} status={"error"} />
),
});
setIsLoadingBtn(false);
navigate("/investment-type");
}
});
} catch (error) {
console.log(error);
setIsLoadingBtn(false);
navigate("/investment-type");
}
}
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Box mt={5} display={'flex'} justifyContent={'right'} mr={5}>
<Box mt={5} display={"flex"} justifyContent={"right"} mr={5}>
<SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
</Box>
<FormInputMain
groupedFields={groupedFields}
groupedFields={params?.id ? groupedEditFields : groupedFields}
control={control}
errors={errors}
onSubmit={handleSubmit(onSubmit)}
submitTitle={params?.id ? "Update" : "Submit"}
btnLoading={isLoadingBtn}
/>
</Box>
);

18
src/Pages/Master/InvestmentType/InvestmentType.jsx
View File

@@ -106,8 +106,8 @@ const InvestmentType = () => {
return nameMatches;
});
const [extractedArray, setExtractedArray] = useState(
filteredData?.map((item, index) => ({
const extractedArray=filteredData?.map((item, index) => ({
// id: item?.id,
"Sr.no": (
<Text
@@ -157,7 +157,7 @@ const InvestmentType = () => {
>
<Button
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
transition={"0.5s all"}
onClick={() => {
navigate(`view-investment/${item.id}`);
}}
@@ -178,9 +178,10 @@ const InvestmentType = () => {
placement="top"
>
<Button
onClick={() => {
navigate(`edit-investment/${item.id}`);
}}
// onClick={() => {
// navigate(`edit-investment/${item.id}`);
// }}
onClick={() => navigate(`/investment-type/add-investment/${item.id}`)}
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
@@ -216,7 +217,8 @@ const InvestmentType = () => {
</Box>
),
}))
);
console.log(extractedArray);
const handleDelete = () => {
const IOtype = investmentType.filter(
@@ -274,7 +276,7 @@ const InvestmentType = () => {
<DataTable
emptyMessage={`We don't have any Investment type `}
tableHeadRow={tableHeadRow}
setData={setExtractedArray}
// setData={setExtractedArray}
data={extractedArray}
isLoading={isLoading}
viewActionId={actionId}

90
src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
View File

@@ -6,52 +6,78 @@ import FormInputView from "../../../Components/FormInputView";
import { useForm } from "react-hook-form"; // assuming react-hook-form is used
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { ArrowBackIcon } from "@chakra-ui/icons";
import { useGetInvestmentTypeByIdQuery } from "../../../Services/investment.type.service";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
const ViewInvestmentType = () => {
const navigate = useNavigate();
const params = useParams();
const { investmentType } = useContext(GlobalStateContext);
const { reset } = useForm(); // assuming react-hook-form
const { data, error, isLoading } = useGetInvestmentTypeByIdQuery(params?.id);
const id = params?.id;
const foundObject = investmentType.find(
(item) => item?.id.toString() === id.toString()
);
// const foundObject = investmentType.find(
// (item) => item?.id.toString() === id.toString()
// );
if (!foundObject) {
return <Box>Loading...</Box>;
if (!data?.data) {
return <FullscreenLoaders />;
}
// const formFields = [
// {
// label: "Investment name",
// value: foundObject.investmentName,
// type: "text",
// isRequired: true,
// section: "Personal Details",
// },
// {
// label: "Investment Name (Arabic)",
// value: foundObject.investmentNameArabic,
// type: "text",
// isRequired: true,
// arabic: true,
// section: "Personal Details",
// },
// {
// label: "Description",
// value: foundObject.description,
// type: "text",
// isRequired: true,
// arabic: true,
// section: "Personal Details",
// },
// {
// label: "Description Arabic",
// value: foundObject.descriptionArabic,
// type: "text",
// isRequired: true,
// section: "Personal Details",
// },
// ];
const formFields = [
{
label: "Investment name",
value: foundObject.investmentName,
type: "text",
isRequired: true,
section: "Personal Details",
label: "Investment Type (English)",
value:data?.data?.investmentTypeName,
section: "",
},
{
label: "Investment Name (Arabic)",
value: foundObject.investmentNameArabic,
type: "text",
isRequired: true,
arabic: true,
section: "Personal Details",
label: "Investment Type (Arabic)",
value:data?.data?.investmentTypeNameArabic,
section: "",
},
{
label: "Description",
value: foundObject.description,
type: "text",
isRequired: true,
arabic: true,
section: "Personal Details",
label: "Description (English)",
value:data?.data?.note,
section: "",
},
{
label: "Description Arabic",
value: foundObject.descriptionArabic,
type: "text",
isRequired: true,
section: "Personal Details",
label: "Description (Arabic)",
value:data?.data?.noteArabic,
section: "",
},
];
@@ -66,14 +92,8 @@ const ViewInvestmentType = () => {
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span>
<FormInputView groupedFields={groupedFields} />
</Box>
<FormInputView groupedFields={groupedFields} />
</Box>
);
};

5
src/Pages/Master/Sponser/AddSponser.jsx
View File

@@ -83,7 +83,7 @@ const AddSponser = () => {
}
}, [sponserByIdData, reset]);
if (false) {
if (false) {
return <FullscreenLoaders />;
}
@@ -104,6 +104,7 @@ const AddSponser = () => {
isRequired: true,
section: "Add Details",
isArabic: true,
right:true
},
{
label: "Email address",
@@ -119,7 +120,7 @@ const AddSponser = () => {
{
label: "Sponser name",
placeHolder: " ",
name: "sponsorName",
name: "sponsorName",
type: "text",
isRequired: true,
section: "Add Details",

87
src/Pages/Master/Sponser/Sponsers.jsx
View File

@@ -68,36 +68,24 @@ const Sponser = () => {
const [toggleStatus] = useToggleStatusMutation();
const [deleteSponser] = useDeleteSponserMutation();
// useEffect(() => {
// setSponser(sponsors)
// }, [])
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 1500);
// Cleanup the timer on component unmount
return () => clearTimeout(timer);
}, []);
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sponsor name",
// "Sponsor name (Arabic)",
"Email address",
"Status",
"Created At",
// "Created At",
"Action",
];
const handleUpdateStatus = debounce(async (id) => {
// setSponser((prevSponser) =>
// prevSponser.map((sponsor) =>
// sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
// )
// );
try {
await toggleStatus({ id }).then((response) => {
@@ -117,27 +105,7 @@ const Sponser = () => {
} catch (error) {}
}, 300);
// // ====================================================[Table Filter]================================================================
// const filteredData = sponsors?.data?.rows?.filter((item) => {
// // Filter by name (case insensitive)
// const name = item.sponserName;
// 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 filteredData = sponsors?.data?.rows?.filter((item) => {
// Filter by name (case insensitive)
const name = item.sponsorName;
const searchLower = searchTerm?.toLowerCase();
const nameMatches = name?.toLowerCase().includes(searchLower);
@@ -159,15 +127,6 @@ const Sponser = () => {
</Text>
),
// "Sponsor name (Arabic)":(<Text
// justifyContent={slideFromRight ? "right" : "left"}
// as={"span"}
// color={"teal.900"}
// fontWeight={"500"}
// className="d-flex align-items-center web-text-small"
// >
// {item.sponsorNameArabic}
// </Text>),
"Email address": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
@@ -189,47 +148,15 @@ const Sponser = () => {
</Box>
),
// item?.status ? (
// <Badge bg={'transparent'} color={"#05c46b"}>
// Passed
// </Badge>
// ) : (
// <Badge bg={'transparent'} color={"#f53b57"}>
// Not passes
// </Badge>
// "Created At": (
// <Box className="d-flex justify-content-between align-items-center">
// <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
// {formatDate(item.createdAt)}
// </Text>
// </Box>
// ),
"Created At": (
<Box className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
{formatDate(item.createdAt)}
</Text>
</Box>
),
Action: (
<Box display={"flex"} justifyContent={"center"} gap={2}>
{/* <Tooltip
rounded={"sm"}
fontSize={"xs"}
label="View"
bg="#fff"
color={"green.500"}
placement="top"
>
<Button
// onClick={() => navigate(`/view-sponser/${item.id}`) }
onClick={() => {
navigate(`/sponser/view-sponser/${item.id}`);
}}
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
color="green.300"
rounded={"sm"}
size={"xs"}
>
<ViewIcon />
</Button>
</Tooltip> */}
<Tooltip
rounded={"sm"}

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

@@ -16,7 +16,7 @@ const ViewSponser = () => {
console.log(data?.data);
if (!data) {
if (!data) {
return <Box>Loading...</Box>;
}

8
src/Routes/Routes.js
View File

@@ -40,6 +40,7 @@ import InvestmentType from "../Pages/Master/InvestmentType/InvestmentType";
export const RouteLink = [
// =============[ Tanami ]================
// ===============[ Management]===============
{ path: "/", Component: Sponser },
{ path: "/sponser", Component: Sponser },
{ path: "/sponser/add-sponser/:id", Component: AddSponser },
@@ -52,13 +53,8 @@ export const RouteLink = [
{ path: "/exchange-rate", Component: ExchangeRate },
{ path: "/investment-type", Component: InvestmentType },
{ path: "/investment-type/add-investment/:id", Component: AddInvestmentType },
{ path: "/investment-type/add-investment", Component: AddInvestmentType },
{ path: "/investment-type/view-investment/:id", Component: ViewInvestmentType },
{ path: "/investment-type/edit-investment/:id", Component: EditInvestmentType },

35
src/Services/investment.type.service.js
View File

@@ -8,16 +8,45 @@ const baseUrl = api?.defaults.baseURL;
export const investmentType = createApi({
reducerPath: "investmentType",
baseQuery: fetchBaseQuery({ baseUrl }),
tagTypes: [],
tagTypes: ["getInvestmentType"],
endpoints: (builder) => ({
getInvestmentTypes: builder.query({
query: ({ page, size }) => `/investmentType/admin?page=${page}&size=${size}`,
query: ({ page, size }) =>
`/investmentType/admin?page=${page}&size=${size}`,
providesTags: ["getInvestmentType"],
}),
getInvestmentTypeById: builder.query({
query: (id) => `/investmentType/admin/${id}`,
providesTags: ["getInvestmentType"],
}),
createInvestmentType: builder.mutation({
query: (data) => ({
url: `/investmentType/admin/`,
method: "POST",
body: data,
}),
invalidatesTags: ["getInvestmentType"],
}),
updateInvestmentType: builder.mutation({
query: ({ data, id }) => ({
url: `/investmentType/admin/${id}`,
method: "PATCH",
body: data,
}),
invalidatesTags: ["getInvestmentType"],
}),
}),
});
// Export hooks for usage in functional components
export const { useGetInvestmentTypesQuery, useGetInvestmentTypeByIdQuery } = investmentType;
export const {
useGetInvestmentTypesQuery,
useGetInvestmentTypeByIdQuery,
useCreateInvestmentTypeMutation,
useUpdateInvestmentTypeMutation,
} = investmentType;

20
src/Services/sponser.service.js
View File

@@ -25,18 +25,10 @@ export const sponserMaster = createApi({
providesTags: ["getSponser"],
}),
getSponserMasterActive: builder.query({
query: () => "/sponsor/admin/active",
})
}),
,
getSponserById: builder.query({
query: (id) => `/sponsor/admin/${id}`,
providesTags: ["getSponser"],
@@ -45,16 +37,6 @@ export const sponserMaster = createApi({
toggleStatus: builder.mutation({
query: ({ id }) => ({
url: `/sponsor/admin/toggle-status/${id}`,