From 4de632dac9c199315df03e5b6816167da9414999 Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Mon, 30 Sep 2024 17:06:22 +0530 Subject: [PATCH] support page complete --- src/Components/Cards/BlueCard.jsx | 22 +- src/Contexts/GlobalStateProvider.jsx | 324 ++++++----- src/Pages/ManageHumanResource/Approvers.jsx | 536 +++++++++++++++++- .../OptiFiiExpenseDashboard.jsx | 76 +-- .../OptiFiiExpense/ReimbursementRequest.jsx | 2 + .../SupportAndTicket/SupportAndTicket.jsx | 239 +++++++- src/Routes/Nav.js | 20 +- src/Routes/Routes.js | 2 - 8 files changed, 1024 insertions(+), 197 deletions(-) diff --git a/src/Components/Cards/BlueCard.jsx b/src/Components/Cards/BlueCard.jsx index 2e300bd..c5e06be 100644 --- a/src/Components/Cards/BlueCard.jsx +++ b/src/Components/Cards/BlueCard.jsx @@ -1,24 +1,24 @@ -import { Box, Stack, Text, } from '@chakra-ui/react' -import React from 'react' -import { MdGroups } from 'react-icons/md' +import { Box, Stack, Text, Link, Badge } from '@chakra-ui/react'; +import React from 'react'; +import { MdGroups } from 'react-icons/md'; -function BlueCard() { +function BlueCard({blueCardData}) { return ( - + - {item.title} + {blueCardData.title} - {item.count} + {blueCardData.count} - {item.linkText} + {blueCardData.buttonText} - ) + ); } -export default BlueCard \ No newline at end of file +export default BlueCard; diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 2f62224..45ff9ab 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -12,7 +12,7 @@ import { AiOutlineFileGif } from "react-icons/ai"; import { MdOutlineNoFood } from "react-icons/md"; import { LuFuel } from "react-icons/lu"; import { GoGift } from "react-icons/go"; -import { FaWifi } from "react-icons/fa"; +import { FaWifi } from "react-icons/fa"; import { SiBookstack } from "react-icons/si"; import Food from "../assets/icons/Food.png"; import Fuel from "../assets/icons/Fuel.png"; @@ -1563,7 +1563,73 @@ const GlobalStateProvider = ({ children }) => { }, ]) - +// supprt and ticket + + const [SupportAndTicket, setSupportAndTicket] = useState([ + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "On hold", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "On hold", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "On hold", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "On hold", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "Inactive", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "Inactive", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "In progress", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "In progress", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + { + TicketID: 124589, + Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.", + Status: "In progress", + LastUpdate: "Jun 10, 2024", + Support: "Reethik thota", + }, + ]); const [AdvanceExpenseRequest, setAdvanceExpenseRequest] = useState([ { @@ -1676,7 +1742,6 @@ const GlobalStateProvider = ({ children }) => { }, ]) - const [ApplicationStatus, setApplicationStatus] = useState([ { EmpID: 124589, @@ -1789,132 +1854,135 @@ const GlobalStateProvider = ({ children }) => { ]); const [walletProgram, setWalletProgram] = useState( - [ - { - id: 1, - walletName: [{ name: "Food", icon: Food }], - WalletType : "Prefilled", - department :"sales", - status :"Active", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 2, - walletName: [{ name: "Fuel", icon: Fuel }], - WalletType : "Prefilled", - department :"sales", - status :"Active", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 3, - walletName: [{ name: "Gift", icon: Gift }], - WalletType : "Prefilled", - department :"sales", - status :"Active", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 4, - walletName: [{ name: "Telecom", icon: telecom }], - WalletType : "Prefilled", - department :"sales", - status :"Saved as draft", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 5, - walletName: [{ name: "Books & periodicals", icon: books }], - WalletType : "Prefilled", - department :"sales", - status :"Active", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 6, - walletName: [{ name: "Learning & development", icon: books }], - WalletType : "Prefilled", - department :"sales", - status :"Active", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 7, - walletName: [{ name: "Gadget & equipment", icon: gadget }], - WalletType : "Prefilled", - department :"sales", - status :"Active", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 8, - walletName: [{ name: "Telecom", icon: telecom }], - WalletType : "Prefilled", - department :"sales", - status :"Pending", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - { - id: 9, - walletName: [{ name: "Food", icon: Food }], - WalletType : "Prefilled", - department :"sales", - status :"Pending", - WalletAmount :"₹ 50,000", - CreatedOn :"Jan 12, 2022", - CreatedBy:"Jenny wilson" - }, - ] + [ + { + id: 1, + walletName: [{ name: "Food", icon: Food }], + WalletType: "Prefilled", + department: "sales", + status: "Active", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 2, + walletName: [{ name: "Fuel", icon: Fuel }], + WalletType: "Prefilled", + department: "sales", + status: "Active", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 3, + walletName: [{ name: "Gift", icon: Gift }], + WalletType: "Prefilled", + department: "sales", + status: "Active", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 4, + walletName: [{ name: "Telecom", icon: telecom }], + WalletType: "Prefilled", + department: "sales", + status: "Saved as draft", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 5, + walletName: [{ name: "Books & periodicals", icon: books }], + WalletType: "Prefilled", + department: "sales", + status: "Active", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 6, + walletName: [{ name: "Learning & development", icon: books }], + WalletType: "Prefilled", + department: "sales", + status: "Active", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 7, + walletName: [{ name: "Gadget & equipment", icon: gadget }], + WalletType: "Prefilled", + department: "sales", + status: "Active", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 8, + walletName: [{ name: "Telecom", icon: telecom }], + WalletType: "Prefilled", + department: "sales", + status: "Pending", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + { + id: 9, + walletName: [{ name: "Food", icon: Food }], + WalletType: "Prefilled", + department: "sales", + status: "Pending", + WalletAmount: "₹ 50,000", + CreatedOn: "Jan 12, 2022", + CreatedBy: "Jenny wilson" + }, + ] + ); - return ( - - {children} - - ); +return ( + + {children} + +); }; export default GlobalStateProvider; diff --git a/src/Pages/ManageHumanResource/Approvers.jsx b/src/Pages/ManageHumanResource/Approvers.jsx index 2491bf2..6421477 100644 --- a/src/Pages/ManageHumanResource/Approvers.jsx +++ b/src/Pages/ManageHumanResource/Approvers.jsx @@ -1,15 +1,543 @@ -import { Box } from "@chakra-ui/react"; -import React from "react"; +import { + Box, Grid, Heading, Menu, MenuButton, MenuItem, MenuList, VStack, + Button, + Image, + Input, + InputGroup, + InputLeftElement, + Text, + Tag, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; import MiniHeader from "../../Components/MiniHeader"; +import BlueCard from "../../Components/Cards/BlueCard"; + +import { LuListFilter } from "react-icons/lu"; +import NormalTable from "../../Components/DataTable/NormalTable"; +import { FaArrowUpFromBracket } from "react-icons/fa6"; +import pdfIcon from "../../assets/pdfIcon.svg"; +import ExcelIcon from "../../assets/ExcelIcon.svg"; +import { AiOutlineCalendar } from "react-icons/ai"; +import { IoMdArrowDropdown } from "react-icons/io"; +import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs"; +import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { useNavigate } from "react-router-dom"; const Approvers = () => { + + const { reimbursementStatus } = useContext(GlobalStateContext); + const { advanceStatus } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const navigate = useNavigate(); + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); // Set isLoading to false after 3 seconds + }, 500); + + // Cleanup the timer when the component unmounts or when the useEffect re-runs + return () => clearTimeout(timer); + }, []); // Empty dependency array means this effect runs once after the component mounts + + // ===============================[ Table Header ] + const tableHeadRow = [ + "Report name", + "Report by", + "Report amount", + "Date & time", + "Order Status", + "Approver", + "Disburser", + ]; + + const tableHeadRowAdvance = [ + "Report name", + "Report by", + "Report amount", + "Date & time", + "Order Status", + "Approver", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + + const extractedArray = reimbursementStatus.map((item, index) => ({ + "Report name": item?.reportName, + "Report by": item?.reportBy, + "Report amount": item?.reportAmount, + "Date & time": item?.dateTime, + "Order Status": ( + + {item?.orderStatus} + + ), + Approver: item?.approver, + Disburser: item?.disburser, + })); + + const extractedArrayAdvance = advanceStatus.map((item, index) => ({ + "Report name": item?.reportName, + "Report by": item?.reportBy, + "Report amount": item?.reportAmount, + "Date & time": item?.dateTime, + "Order Status": ( + + {item?.orderStatus} + + ), + Approver: item?.approver, + })); + + const requestItems = [ + { + backgroundColor: "#3725EA", + title: "REIMBURSEMENT REQUEST", + count: 200, + linkText: "View Requests", + }, + { + backgroundColor: "#C33FAD", + title: "ADVANCE EXPENSE REQUEST", + count: 200, + linkText: "View Requests", + }, + { + backgroundColor: "#3725EA", + title: "WALLET APPROVAL REQUEST", + count: 200, + linkText: "View Requests", + }, + ]; + + const gridItemsData = [ + { + backgroundColor: "#218F001A", + iconColor: "#00A438", + title: "Bills for approval", + count: 50, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "Pending requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + { + backgroundColor: "#218F001A", + iconColor: "#00A438", + title: "Bills for pending", + count: 50, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "Pending requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + { + backgroundColor: "#218F001A", + iconColor: "#00A438", + title: "Active expense wallets", + count: 50, + buttonBg: "#3725EA1A", + buttonBorder: "#3725EA", + buttonText: "View", + viewTextColor: "#6311CB", + hideBadge: true, + }, + ]; + + const blueCardData = [ + { + backgroundColor: "#6311CB", + iconColor: "#00A438", + title: "Pending reimbursement request", + count: 200, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "View requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + { + backgroundColor: "#C33FAD", + iconColor: "#00A438", + title: "Pending wallet requests ", + count: 50, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "View requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + ] + return ( - + + + + + {blueCardData.map((item, index) => ( + + ))} + + + + {/* dhbfdbf */} + + + + + + Reimbursement status + + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + + Time Period : + + + + Feb 20 - Jan 30, 2024{" "} + + + + + + + +
+ + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + navigate("/reimbursement-request")} + as={Button} + color={"#6311CB"} + size={18} + cursor={"pointer"} + /> + + + + + + + + + + + Advance expense status + + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + + Time Period : + + + + Feb 20 - Jan 30, 2024{" "} + + + + + + + +
+ + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + navigate("/reimbursement-request")} + as={Button} + color={"#6311CB"} + size={18} + cursor={"pointer"} + /> + + + + + ); }; diff --git a/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx index c677e92..93a35a6 100644 --- a/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx +++ b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx @@ -39,6 +39,7 @@ import ExcelIcon from "../../assets/ExcelIcon.svg"; import { AiOutlineCalendar } from "react-icons/ai"; import { IoMdArrowDropdown } from "react-icons/io"; import { BsFilterRight } from "react-icons/bs"; +import BlueCard from "../../Components/Cards/BlueCard"; const OptiFiiExpenseDashboard = () => { const { reimbursementStatus } = useContext(GlobalStateContext); @@ -96,8 +97,8 @@ const OptiFiiExpenseDashboard = () => { item?.orderStatus === "Approved" ? "#027A48" : item?.orderStatus === "Fully reimbursed" - ? "#3725EA" - : "red" + ? "#3725EA" + : "red" } > {item?.orderStatus} @@ -121,8 +122,8 @@ const OptiFiiExpenseDashboard = () => { item?.orderStatus === "Approved" ? "#027A48" : item?.orderStatus === "Fully reimbursed" - ? "#3725EA" - : "red" + ? "#3725EA" + : "red" } > {item?.orderStatus} @@ -190,46 +191,44 @@ const OptiFiiExpenseDashboard = () => { }, ]; + + const blueCardData = [ + { + backgroundColor: "#6311CB", + iconColor: "#00A438", + title: "Bills for pending", + count: 50, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "Pending requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + { + backgroundColor: "#C33FAD", + iconColor: "#00A438", + title: "Bills for pending", + count: 50, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "Pending requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + ] + + return ( - {requestItems.map((item, index) => ( - - - - - - - - {item.title} - - - - {item.count} - - - - - - - - {item.linkText} - - - + {blueCardData.map((item, index) => ( + ))} - + {gridItemsData.map((item, index) => ( @@ -473,6 +472,7 @@ const OptiFiiExpenseDashboard = () => { isLoading={isLoading} /> + { + + { + + const navigate = useNavigate(); + const { SupportAndTicket } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const { isOpen, onOpen, onClose } = useDisclosure() + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); // Set isLoading to false after 3 seconds + }, 500); + + // Cleanup the timer when the component unmounts or when the useEffect re-runs + return () => clearTimeout(timer); + }, []); // Empty dependency array means this effect runs once after the component mounts + + // ===============================[ Table Header ] + const tableHeadRow = [ + "Select", + "Ticket ID", + "Subject", + "Status", + "Last update", + "Support", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + + const extractedArray = SupportAndTicket.map((item, index) => ({ + "Ticket ID": ( + + {item?.TicketID} + + ), + "Subject": item?.Subject, + "Status": ( + + + {item?.Status} + + ), + "Last update": item?.LastUpdate, + "Support": item?.Support, + })); + return ( - + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + } + title={"Add new ticket"} /> + + +
+ + + + {/* modal */} + + + + Add New ticket + + + + + Requester + + + + + + Subject + + + + + + Type + + + + + + Priority + + + + + + Description + +