diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index f36a74b..5cedcb2 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -1294,7 +1294,7 @@ const GlobalStateProvider = ({ children }) => { reportBy: "in***@wdimails.com", reportAmount: "+91 ***8451254", dateTime: "Sales", - orderStatus: "Approved", + orderStatus: "Fully reimbursed", approver: "Sales", disburser: "Sales", }, @@ -1304,7 +1304,7 @@ const GlobalStateProvider = ({ children }) => { reportBy: "in***@wdimails.com", reportAmount: "+91 ***8451254", dateTime: "Sales", - orderStatus: "Approved", + orderStatus: "Fully reimbursed", approver: "Sales", disburser: "Sales", }, @@ -1324,7 +1324,7 @@ const GlobalStateProvider = ({ children }) => { reportBy: "in***@wdimails.com", reportAmount: "+91 ***8451254", dateTime: "Sales", - orderStatus: "Fully reimbursed", + orderStatus: "Approved", approver: "Sales", disburser: "Sales", }, diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx index d9e3c66..9ed4aa8 100644 --- a/src/Layout/DefaultLayout.jsx +++ b/src/Layout/DefaultLayout.jsx @@ -137,7 +137,7 @@ const DashboardLayout = ({ isOnline }) => { } return ( - + { const { employees } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); + const [selectedRadio, setSelectedRadio] = useState([]); const navigate = useNavigate(); const { @@ -101,26 +98,19 @@ const Employees = () => { const extractedArray = employees.map((item, index) => ({ "Emp ID": ( - - - {item?.EmpID} - - + + {item?.EmpID} + ), - "Name": ( + Name: ( Dan Abramov - - {item?.Name} - + {item?.Name} ), "Email Address": item?.emailAddress, @@ -137,15 +127,16 @@ const Employees = () => { item?.status === "Active" ? "green" : item?.status === "Inactive" - ? "red" - : "gray" + ? "red" + : "gray" } - border={`1px solid ${item?.status === "Active" - ? "green" - : item?.status === "Inactive" + border={`1px solid ${ + item?.status === "Active" + ? "green" + : item?.status === "Inactive" ? "red" : "gray" // default border color if status doesn't match any condition - }`} + }`} p={1} px={3} > @@ -157,7 +148,7 @@ const Employees = () => { } bg={"transparent"} /> @@ -183,7 +174,7 @@ const Employees = () => { fontSize={"sm"} fontWeight={500} color={"#4D4D4D"} - onClick={()=>navigate("/employees/view")} + onClick={() => navigate("/employees/view")} > View @@ -241,12 +232,35 @@ const Employees = () => { Export - Export as PDF - Export as Excel + + Export as PDF + + + Export as Excel + - } title={"Add Employee"} /> + {selectedRadio.length > 2 ? ( + + ) : ( + } + title={"Add Employee"} + /> + )} + } @@ -328,6 +342,9 @@ const Employees = () => { tableHeadRow={tableHeadRow} data={extractedArray} isLoading={isLoading} + selectedRadio={selectedRadio} + setSelectedRadio={setSelectedRadio} + showRadioButton={true} /> {/* Call EmployeesAddModal */} @@ -337,8 +354,10 @@ const Employees = () => { {/* Call EmployeesEditModal */} - - + ); }; diff --git a/src/Pages/ManageHumanResource/EmployeesView.jsx b/src/Pages/ManageHumanResource/EmployeesView.jsx index b193911..2729663 100644 --- a/src/Pages/ManageHumanResource/EmployeesView.jsx +++ b/src/Pages/ManageHumanResource/EmployeesView.jsx @@ -94,7 +94,7 @@ const EmployeesView = () => { {item.date || 'Jun 10, 2024'} ), - 'Order Status': ( + 'Status': ( { /> - + @@ -340,6 +341,7 @@ const EmployeesView = () => { color={"#313039"} fontSize={"sm"} fontWeight={500} + mr={6} _selected={{ color: "#5E0FCD", }}>Benefit @@ -347,9 +349,10 @@ const EmployeesView = () => { color={"#313039"} fontSize={"sm"} fontWeight={500} + mr={6} _selected={{ color: "#5E0FCD", - }}>Gifts + }}>Gift & reward @@ -471,7 +474,7 @@ const EmployeesView = () => { { - + Food @@ -128,8 +128,8 @@ const ReimbursementRequest = () => { - - Created by - Reethik Thota + + Wallet Amount ₹ 50,000 diff --git a/src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx b/src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx index 7c460b5..4e258a8 100644 --- a/src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx +++ b/src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx @@ -31,9 +31,53 @@ import SecondaryButton from "../../Components/Buttons/SecondaryButton"; import { TiTick } from "react-icons/ti"; import { ImCancelCircle } from "react-icons/im"; +const tableData = [ + { + id:1, + datetime:"Jan 12, 2022, 10 am", + merchant:"Dine in", + category :"Food", + paymentmethod :"Expense card", + reimburseAmount :"₹ 5000", + }, + { + id:2, + datetime:"Jan 12, 2022, 10 am", + merchant:"Airtel postpaid", + category :"telecom", + paymentmethod :"Expense card", + reimburseAmount :"₹ 5000", + }, + { + id:3, + datetime:"Jan 12, 2022, 10 am", + merchant:"Lorem ipsum dolor adipiscing elit.", + category :"Fuel", + paymentmethod :"Expense card", + reimburseAmount :"₹ 5000", + }, + { + id:4, + datetime:"Jan 12, 2022, 10 am", + merchant:"Airtel postpaid", + category :"Telecom", + paymentmethod :"Cash", + reimburseAmount :"₹ 5000", + }, + { + id:3, + datetime:"Jan 12, 2022, 10 am", + merchant:"Lorem ipsum dolor adipiscing elit.", + category :"Fuel", + paymentmethod :"Cash", + reimburseAmount :"₹ 5000", + }, +] + const ReimbursementRequestView = () => { const [alertStatus, setAlertStatus] = useState(null); + const handleApprove = () => { setAlertStatus("success"); }; @@ -61,19 +105,17 @@ const ReimbursementRequestView = () => { // ===============================[ Table Header ] const tableHeadRow = [ "Sr. No", - "Name", - "Email Address", - "Mobile number", - "Grade", - "Department", - "Role", + "Date & time", + "Merchant", + "Category", + "Payment mode", + "Reimburse Amount", "Bills", - "Action", ]; // const extractedArray = reportsHistory.map((item)=>({ })) - const extractedArray = employees.map((item, index) => ({ + const extractedArray = tableData.map((item, index) => ({ "Sr. No": ( { {index + 1} ), - Name: item?.Name, - "Email Address": item?.emailAddress, - "Mobile number": item?.mobileNumber, - Grade: item?.Grade, - Department: item?.Department, - Role: item?.Role, + "Date & time": item?.datetime, + "Merchant": item?.merchant, + "Category": item?.category, + "Payment mode": item?.paymentmethod, + "Reimburse Amount": item?.reimburseAmount, Bills: ( diff --git a/src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx b/src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx index 7023365..ade6d24 100644 --- a/src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx +++ b/src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx @@ -176,8 +176,8 @@ const BenifitOverView = () => { "Sr No", "Wallet Name", "Total employees", - "Benefit limit", - "Remaining amount", + "Amount in card", + "Pending amount ", "Pending request", ]; @@ -225,18 +225,19 @@ const BenifitOverView = () => { ), - "Benefit limit": ( + "Amount in card": ( {item.walletAmount || 5000} ), - "Remaining amount": ( + "Pending amount ": ( {item.balanceRemaining || "₹ 2000"} ), "Pending request": ( <> + + ), })); diff --git a/src/Pages/OptiFiiTaxBenefit/BenefitOverviewView.jsx b/src/Pages/OptiFiiTaxBenefit/BenefitOverviewView.jsx new file mode 100644 index 0000000..b4a8f2c --- /dev/null +++ b/src/Pages/OptiFiiTaxBenefit/BenefitOverviewView.jsx @@ -0,0 +1,386 @@ +import { + Box, + Button, + HStack, + VStack, + Icon, + Checkbox, + Tag, + TagLabel, + Text, + Image, + useDisclosure, + Alert, + CloseButton, + AlertDescription, + } from "@chakra-ui/react"; + import React, { useContext, useEffect, useState } from "react"; + import MiniHeader from "../../Components/MiniHeader"; + import GlobalStateContext from "../../Contexts/GlobalStateContext"; + import NormalTable from "../../Components/DataTable/NormalTable"; + import { RiDeleteBin5Line } from "react-icons/ri"; + import { AiOutlineEdit } from "react-icons/ai"; + import { LiaFileInvoiceSolid } from "react-icons/lia"; + import { PiReceipt } from "react-icons/pi"; + import { MdOutlineNoFood } from "react-icons/md"; + import { OPACITY_ON_LOAD } from "../../Layout/animations"; + import { IoMdCheckmark } from "react-icons/io"; + import { RxCross2 } from "react-icons/rx"; + import PrimaryButton from "../../Components/Buttons/PrimaryButton"; + import SecondaryButton from "../../Components/Buttons/SecondaryButton"; + import { TiTick } from "react-icons/ti"; + import { ImCancelCircle } from "react-icons/im"; + + const tableData = [ + { + id:1, + datetime:"Jan 12, 2022, 10 am", + merchant:"Dine in", + category :"Food", + paymentmethod :"Expense card", + reimburseAmount :"₹ 5000", + }, + { + id:2, + datetime:"Jan 12, 2022, 10 am", + merchant:"Airtel postpaid", + category :"telecom", + paymentmethod :"Expense card", + reimburseAmount :"₹ 5000", + }, + { + id:3, + datetime:"Jan 12, 2022, 10 am", + merchant:"Lorem ipsum dolor adipiscing elit.", + category :"Fuel", + paymentmethod :"Expense card", + reimburseAmount :"₹ 5000", + }, + { + id:4, + datetime:"Jan 12, 2022, 10 am", + merchant:"Airtel postpaid", + category :"Telecom", + paymentmethod :"Cash", + reimburseAmount :"₹ 5000", + }, + { + id:3, + datetime:"Jan 12, 2022, 10 am", + merchant:"Lorem ipsum dolor adipiscing elit.", + category :"Fuel", + paymentmethod :"Cash", + reimburseAmount :"₹ 5000", + }, + ] + + const ReimbursementRequestView = () => { + const [alertStatus, setAlertStatus] = useState(null); + + + const handleApprove = () => { + setAlertStatus("success"); + }; + + const handleReject = () => { + setAlertStatus("error"); + }; + + const { employees } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + + 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 = [ + "Sr. No", + "Date & time", + "Merchant", + "Category", + "Payment mode", + "Reimburse Amount", + "Bills", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + + const extractedArray = tableData.map((item, index) => ({ + "Sr. No": ( + + {index + 1} + + ), + "Date & time": item?.datetime, + "Merchant": item?.merchant, + "Category": item?.category, + "Payment mode": item?.paymentmethod, + "Reimburse Amount": item?.reimburseAmount, + Bills: ( + + + + + + Invoice243 + + + ), + Action: ( + + + + + ), + })); + + return ( + + {/* */} + {alertStatus === "success" && ( + + + + + + Approved by giftryt + + + + + )} + + {alertStatus === "error" && ( + + + + + + Rejected by giftryt + + + + + )} + + + + + + + Approved + + + + By Sr. Manager + + + + + In progress + + + + + Pending + + + By Sr. Manager + + + + + Pending + + + By Sr. Manager + + + + + Pending + + + By Sr. Manager + + + + + + + + Report number : 1254587841 + + + Reimbursement report 2024 + + + + + Amount to be reimbursed + + + ₹ 50,000 + + + + + + + + Submitted by + + + Dan Abramov + + + Pooja Shah + + + poojashah @wdipl.com + + + + + + Duration - 10 June - 28 June + + + + + Pending approval + + + + + Manav sain + + + manavsain@wdipl.com + + + Dan Abramov + + + + + + + + + + + + + ); + }; + + export default ReimbursementRequestView; + \ No newline at end of file diff --git a/src/Pages/OptiFiiTaxBenefit/BenefitViewFood.jsx b/src/Pages/OptiFiiTaxBenefit/BenefitViewFood.jsx new file mode 100644 index 0000000..345b6b5 --- /dev/null +++ b/src/Pages/OptiFiiTaxBenefit/BenefitViewFood.jsx @@ -0,0 +1,157 @@ +import { + Box, + Button, + HStack, + Icon, + Checkbox, + Tag, + TagLabel, + Text, + Image, + } from "@chakra-ui/react"; + import React, { useContext, useEffect, useState } from "react"; + import MiniHeader from "../../Components/MiniHeader"; + import GlobalStateContext from "../../Contexts/GlobalStateContext"; + import NormalTable from "../../Components/DataTable/NormalTable"; + import { MdOutlineNoFood } from "react-icons/md"; + import { OPACITY_ON_LOAD } from "../../Layout/animations"; + import { NavLink, useNavigate } from "react-router-dom"; + + + const ReimbursementRequest = () => { + + + const navigate = useNavigate(); + const { employees } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + + 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 = [ + "Sr. No", + "Report name", + "Report by", + "Report amount", + "Date & time", + "Approver", + "Disburser", + "Action" + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + + const extractedArray = employees.map((item, index) => + ({ + "Sr. No": ( + + {index + 1} + + ), + "Report name": ( + {item?.reportname} + ), + // "Report by": item?.emailAddress, + "Report amount": item?.reportamount, + "Date & time": item?.datetime, + "Approver": item?.approver, + "Disburser": item?.disburser, + "Report by": ( + + Dan Abramov + + Pooja Shah + + + ), + Action: ( + + + + ), + })); + + return ( + + {/* */} + + + + + + + + + + Food + + + Created by - Reethik Thota + + + + + + Wallet Amount + + + ₹ 50,000 + + + + + + + + + + + ); + }; + + export default ReimbursementRequest; + \ No newline at end of file diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index c3e2e7e..7fd0a46 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -46,6 +46,8 @@ import ViewTicket from "../Pages/SupportAndTicket/ViewTicket"; import Notification from "../Pages/Notification/Notification"; import WalletRequest from "../Pages/OptiFiiExpense/WalletRequest" import OnboardingDirectorDetails from "../Pages/Onboarding/OnboardingDirectorDetails"; +import BenifitOverViewView from "../Pages/OptiFiiTaxBenefit/BenefitOverviewView"; +import BenefitViewFood from "../Pages/OptiFiiTaxBenefit/BenefitViewFood" export const RouteLink = [ @@ -120,10 +122,18 @@ export const RouteLink = [ path: "/dashboard/beinefit-overview", Component: BenifitOverView, }, + { + path:"/dashboard/beinefit-overview/benefit-request/beinefit-overview-view", + Component :BenifitOverViewView + }, { path: "/gift-card/digital-application-status", Component: DigitalApplicationStatus, }, + { + path: "/dashboard/beinefit-overview/benefit-request", + Component: BenefitViewFood + }, { path: "/wallet-program/create-wallet", Component: CreateWallet }, { path: "/dashboard/apply-for-giftcards", Component: ApplyForGiftCard }, {path :"dashboard/wallet-request",Component : WalletRequest},