From ae356f2f817e7008699d0e8882c84d39e27b9410 Mon Sep 17 00:00:00 2001 From: rockyeverlast Date: Fri, 21 Jun 2024 20:32:14 +0530 Subject: [PATCH 1/4] Sponsor page and Add investment page --- src/Components/DataTable/DataTable.jsx | 46 +- src/Layout/DefaultLayout.jsx | 27 +- src/Pages/AssetClan/AssetClan.jsx | 16 + src/Pages/ExchangeRate/ExchangeRate.jsx | 16 + src/Pages/Investment/AddInvestment.jsx | 437 +++++++++++++++++++ src/Pages/Investment/Investment.jsx | 537 +++++++++++++++++++++++- src/Routes/Nav.js | 16 +- src/Routes/Routes.js | 10 + src/Validations/Validations.js | 14 + 9 files changed, 1089 insertions(+), 30 deletions(-) create mode 100644 src/Pages/AssetClan/AssetClan.jsx create mode 100644 src/Pages/ExchangeRate/ExchangeRate.jsx create mode 100644 src/Pages/Investment/AddInvestment.jsx diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx index 83a9b4e..00e7d6c 100644 --- a/src/Components/DataTable/DataTable.jsx +++ b/src/Components/DataTable/DataTable.jsx @@ -1,20 +1,34 @@ import React from "react"; -import { Table, TableContainer, Tbody, Td, Th, Thead, Tr, Skeleton, TableCaption, Tfoot } from "@chakra-ui/react"; +import { + Table, + TableContainer, + Tbody, + Td, + Th, + Thead, + Tr, + Skeleton, + TableCaption, + Tfoot, +} from "@chakra-ui/react"; import EmptySearchList from "../EmptySearchList"; const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => { - const columnWidth = data && data[0] ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` : "auto"; + const columnWidth = + data && data[0] + ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` + : "auto"; return ( {data?.length === 0 ? ( ) : ( - - Rubix v1.0.0 - +
+ Tanami v1.0.0 + {tableHeadRow.map((heading, index) => ( - @@ -26,7 +40,15 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => { ? Array.from({ length: 12 }).map((_, index) => ( {tableHeadRow.map((_, i) => ( - ))} @@ -35,7 +57,15 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => { : data?.map((item, index) => ( {tableHeadRow.map((heading, i) => ( - ))} diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx index fa15513..43783cc 100644 --- a/src/Layout/DefaultLayout.jsx +++ b/src/Layout/DefaultLayout.jsx @@ -65,8 +65,8 @@ const DashboardLayout = () => { switch (path) { case "/": return "👋🏻 Hi, Admin"; - case "/investment": - return "Investment"; + case "/investment": + return "Sponsor"; case "/blogs-articles": return "Blogs and Articles"; case "/videos": @@ -116,9 +116,6 @@ const DashboardLayout = () => { } }; - - - return ( { }} className="d-flex" pe={0.5} - >
{ {getTitle()} */} - +
diff --git a/src/Pages/AssetClan/AssetClan.jsx b/src/Pages/AssetClan/AssetClan.jsx new file mode 100644 index 0000000..b0e1c7e --- /dev/null +++ b/src/Pages/AssetClan/AssetClan.jsx @@ -0,0 +1,16 @@ +import { Box, Input } from "@chakra-ui/react"; +import React from "react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; + +const AssetClan = () => { + return ( + + ); +}; + +export default AssetClan; diff --git a/src/Pages/ExchangeRate/ExchangeRate.jsx b/src/Pages/ExchangeRate/ExchangeRate.jsx new file mode 100644 index 0000000..772137b --- /dev/null +++ b/src/Pages/ExchangeRate/ExchangeRate.jsx @@ -0,0 +1,16 @@ +import { Box, Input } from "@chakra-ui/react"; +import React from "react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; + +const ExchangeRate = () => { + return ( + + ); +}; + +export default ExchangeRate; diff --git a/src/Pages/Investment/AddInvestment.jsx b/src/Pages/Investment/AddInvestment.jsx new file mode 100644 index 0000000..4e823e3 --- /dev/null +++ b/src/Pages/Investment/AddInvestment.jsx @@ -0,0 +1,437 @@ +import { + Box, + FormControl, + FormHelperText, + FormLabel, + Input, + Text, + Stack, + Textarea, + Heading, + Button, + useToast, + Divider, + Image, + Select, +} from "@chakra-ui/react"; +import React, { useState } from "react"; +import fallbackImage from "../../assets/fallBackImage.png"; +import fallbackImageLarge from "../../assets/ultp-fallback-img.webp"; +import { TiWarning } from "react-icons/ti"; + +import { motion } from "framer-motion"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; + +import { yupResolver } from "@hookform/resolvers/yup"; +import { Controller, useForm } from "react-hook-form"; +import { investmentSchema } from "../../Validations/Validations"; +import { useCreateBlogMutation } from "../../Services/api.service"; +import { useNavigate } from "react-router-dom"; +import Loader01 from "../../Components/Loaders/Loader01"; +import ReactQuill from "react-quill"; +import "react-quill/dist/quill.snow.css"; +import ChipSelector from "../../Components/ChipSelector/ChipSelector"; +import Header from "../../Components/Header"; +import ToastBox from "../../Components/ToastBox"; + +const AddInvestment = () => { + const toast = useToast(); + const navigate = useNavigate(); + const [createBlog] = useCreateBlogMutation(); // Invoke the hook to get the mutation function + const [isLoading, setIsLoading] = useState(false); + const [selectedImage, setSelectedImage] = useState(fallbackImage); + const [selectedImageLarge, setSelectedImageLarge] = + useState(fallbackImageLarge); + const [largeImageData, setLargeImageData] = useState(null); + const [smallImageData, setSmallImageData] = useState(null); + const [chips, setChips] = useState([]); + const [value, setValue] = useState(""); + const [metaDescription, setMetaDescription] = useState(""); + const [investments, setInvestments] = useState([]); + const [status, setStatus] = useState("available"); + const [statusAr, setStatusAr] = useState("available"); + + const handleDescriptionChange = (e) => { + setMetaDescription(e.target.value); + }; + + const { + control, + register, + handleSubmit, + reset, + setValue: setYupFormValue, + formState: { errors }, + } = useForm({ + resolver: yupResolver(investmentSchema), + }); + + const handleInputChange = (e, field) => { + setYupFormValue(field, e.target.value); + setYupFormValue(`${field}_ar`, e.target.value); + }; + + const handleArabicInputChange = (e, field) => { + setYupFormValue(field, e.target.value); + setYupFormValue(field.replace("_ar", ""), e.target.value); + }; + + const handleStatusChange = (e) => { + setStatus(e.target.value); + setStatusAr(e.target.value); + }; + + const handleStatusArChange = (e) => { + setStatusAr(e.target.value); + setStatus(e.target.value); + }; + + const onSubmit = (data) => { + const newInvestment = { + name: data.name, + address: data.address, + mobile: data.mobile, + bankDetails: data.bankDetails, + bankAccount: data.bankAccount, + status: data.status, + }; + + setInvestments([...investments, newInvestment]); + reset(); + navigate("/investment"); + }; + + return ( + +
+
+ + + + + + Name + + handleInputChange(e, "name")} + /> + + Maximum characters must be 100 characters. + + + {errors.name && ( + + {" "} + {errors.name.message} + + )} + + + + + Address + +
+ {isLoading ? : heading} {/* {heading} */}
+
+ {item[heading]}