diff --git a/src/Pages/User/AddUser.jsx b/src/Pages/User/AddUser.jsx new file mode 100644 index 0000000..c05ad2f --- /dev/null +++ b/src/Pages/User/AddUser.jsx @@ -0,0 +1,13 @@ +import { Box } from '@chakra-ui/react' +import React from 'react' +import { OPACITY_ON_LOAD } from '../../Layout/animations' + +const AddUser = () => { + return ( + + + + ) +} + +export default AddUser \ No newline at end of file diff --git a/src/Pages/User/User.jsx b/src/Pages/User/User.jsx new file mode 100644 index 0000000..1406542 --- /dev/null +++ b/src/Pages/User/User.jsx @@ -0,0 +1,286 @@ +import {Badge, Box,Button,HStack,Input,Text,Tooltip,useToast,} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import NormalTable from '../../Components/DataTable/NormalTable' +import { Link, Link as RouterLink } from "react-router-dom"; +import {AddIcon,DeleteIcon,EditIcon,} from "@chakra-ui/icons"; +import Pagination from "../../Components/Pagination"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import CustomAlertDialog from "../../Components/CustomAlertDialog"; +import { useNavigate } from "react-router-dom"; +import ToastBox from "../../Components/ToastBox"; +// import { debounce } from "./AddSponser"; +import { TABLE_PAGINATION } from "../../Constants/Paginations"; +import { useDeleteSponserMutation, useGetSponserMasterQuery } from "../../Services/io.service"; +import { generateSerialNumber } from "../../Constants/Constants"; + +export const formatDate = (date) => { + const d = new Date(date); + const year = d.getFullYear(); + const month = String(d.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed + const day = String(d.getDate()).padStart(2, '0'); + + return `${day}/${month}/${year}`; +}; + +const User = () => { + + const navigate = useNavigate(); + const toast = useToast(); + const [isLoading, setIsLoading] = useState(false); + const [deleteAlert, setDeleteAlert] = useState(false); + const [actionId, setActionId] = useState(false); + const [mouseEntered, setMouseEntered] = useState(false); + const [mouseEnteredId, setMouseEnteredId] = useState(""); + const [deleteSponser] = useDeleteSponserMutation(); + const { sponser, setSponser, slideFromRight } = useContext(GlobalStateContext); + + // =========================== [Use State] ============================= + const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size); + const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page); + const [searchTerm, setSearchTerm] = useState(""); + const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(""); + + // Debounce the search term to avoid making a request on every keystroke + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedSearchTerm(searchTerm); + }, 500); // Adjust delay as needed + return () => { + clearTimeout(handler); + }; + }, [searchTerm]); + const { data: sponsors, error, isLoading: isSponserLoading } = useGetSponserMasterQuery( + { + page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search + size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search + searchTerm: debouncedSearchTerm, + }, + { + skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request + } + ); + console.log(sponsors?.data?.rows); + + // ==============================[Table Filter]======================== + + const filteredData = sponsors?.data?.rows?.filter((item) => { + const name = item.sponsorName; + const searchLower = searchTerm?.toLowerCase(); + const nameMatches = name?.toLowerCase().includes(searchLower); + return nameMatches; + }); + + // ====================================================[Table Setup]================================================================ + + const tableHeadRow = [ + "Sr No", + "First Name", + "Last Name", + "Email Address", + "Action", + ]; + + const extractedArray = sponsors?.data?.rows?.map((item, index) => ({ + "Sr No": ( + + {/* {item.id} */} + {generateSerialNumber(index,currentPage, pageSize )} + + ), + "First Name": ( + + {item.sponsorName} + + ), + + "Last Name": ( + + {item.sponsorName} + + ), + + "Email Address": ( + + + {item.email ? item.email : "---" } + + + ), + Action: ( + + + + + + + + + + ), + })); + + // =========================== [Delete Function] ================================= + + const handleDelete = async () => { + console.log(actionId); + setIsLoading(true); + try { + const response = await deleteSponser(actionId); + console.log(response?.data); + if(response?.error?.data?.code === 400){ + toast({ + render: () => , + }); + setIsLoading(false); + setDeleteAlert(false); + } else if(response?.data?.statusCode === 201 || response?.data?.statusCode === 200){ + toast({ + render: () => , + }); + setIsLoading(false); + setDeleteAlert(false); + + } + } catch (error) {} + }; + + + + return ( + + + + + {/* =======================[Search Input]======================== */} + + setSearchTerm(e.target.value)} + /> + + + + {/* ====================[Pagination]===================== */} + + + + {/* =====================[Add Button]===================== */} + + + + + + + + + {/* =================== [Data Table] ===================== */} + + + + {/* ======================== [Modal] ======================== */} + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + ); +}; + +export default User; diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 56dff41..dce9d96 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -43,6 +43,8 @@ import ApproveRequest from "../Pages/FawateerChecker/ApproveRequest/ApproveReque import ApproveHistory from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker"; import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker"; import EmailNotification from "../Pages/EmailNotification/EmailNotification"; +import User from "../Pages/User/User"; +import AddUser from "../Pages/User/AddUser"; export const RouteLink = [ // =============[ Tanami ]================ @@ -114,7 +116,8 @@ export const RouteLink = [ // { path: "/contact", Component: UnderConstruction }, // { path: "/users", Component: Users }, { path: "/email", Component: EmailNotification }, - { path: "/users", Component: UnderConstruction }, + { path: "/users", Component: User }, + { path: "/users/add-user", Component: AddUser }, { path: "/bank-details", Component: BankDetails }, // { path: "/bank-details", Component: UnderConstruction }, { path: "/bank-details/edit-bank-details/:id", Component: EditBankDetails },