diff --git a/package-lock.json b/package-lock.json index bb6330e..9047a1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-apexcharts": "^1.4.1", "react-beautiful-dnd": "^13.1.1", "react-chartjs-2": "^5.2.0", + "react-circular-progressbar": "^2.1.0", "react-dom": "^18.2.0", "react-hook-form": "^7.51.3", "react-icons": "^5.1.0", @@ -5321,6 +5322,14 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-circular-progressbar": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz", + "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==", + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-clientside-effect": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz", diff --git a/package.json b/package.json index a1783f8..0adadbf 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react-apexcharts": "^1.4.1", "react-beautiful-dnd": "^13.1.1", "react-chartjs-2": "^5.2.0", + "react-circular-progressbar": "^2.1.0", "react-dom": "^18.2.0", "react-hook-form": "^7.51.3", "react-icons": "^5.1.0", diff --git a/src/App.css b/src/App.css index e2b0c51..caecd47 100644 --- a/src/App.css +++ b/src/App.css @@ -46,6 +46,7 @@ a.active { rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100% ); + /* background-color: #FFFFFF21; */ } /* .chakra-accordion__item.css-1t7rcca:has(.active) { background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%); @@ -535,4 +536,17 @@ a.active { } +@font-face { + font-family: 'Gilroy'; + src: url('./assets/fonts/Gilroy-Medium.ttf') format('woff2'); + /* url('./assets/fonts/MyCustomFont.woff') format('woff'), + url('./assets/fonts/MyCustomFont.ttf') format('truetype'); */ + font-weight: normal; + font-style: normal; +} + +.gilroy{ + font-family: 'Gilroy'; +} + /* Styling the scrollbar */ diff --git a/src/Components/DataTable/NormalTable.jsx b/src/Components/DataTable/NormalTable.jsx index 43843c2..bf57644 100644 --- a/src/Components/DataTable/NormalTable.jsx +++ b/src/Components/DataTable/NormalTable.jsx @@ -63,9 +63,9 @@ const NormalTable = ({ ) : ( - - {total ? total : "Tanami v1.0.0"} - + {/* + {total ? total : "Optifii v1.0.0"} + */} {showRadioButton && ( diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index e5576b7..070afc2 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -20,6 +20,7 @@ import Gift from "../assets/icons/gift.png"; import books from "../assets/icons/bookStack.png"; import telecom from "../assets/icons/telecom.png"; import gadget from "../assets/icons/gadget.png"; +import foods from "../assets/icons/foods.png"; const getRandomDate = (start, end) => { const date = new Date( start.getTime() + Math.random() * (end.getTime() - start.getTime()) @@ -58,58 +59,70 @@ const GlobalStateProvider = ({ children }) => { EmpID: "124589", Name: "Jackson", emailAddress: "in***@wdimails.com", + reportname: "Reimbursement report 2024", mobileNumber: "+91 ***8451254", Grade: "L1", Department: "Sales", Role: "Sr. Manager", status: "Active", + datetime:"10 June, 2924 10 am", + disburser:"Manav sain", subMenu: [ { wallet: "Food", walBal: "₹ 5000", - - }, { + }, + { wallet: "Travel", walBal: "₹ 7000", - - }, { + }, + { wallet: "Toor", walBal: "₹ 3000", - - },] + }, + ], + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 2, EmpID: "124589", Name: "Status", + reportname: "Reimbursement report 2024", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", Grade: "L1", + disburser:"Manav sain", Department: "Sales", Role: "Sr. Manager", status: "Active", + datetime:"10 June, 2924 10 am", subMenu: [ { wallet: "Food", walBal: "₹ 5000", - - }, { + }, + { wallet: "Travel", walBal: "₹ 7000", - - }, { + }, + { wallet: "Toor", walBal: "₹ 3000", - - },] - + }, + ], + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 3, EmpID: "124589", Name: "Status", + disburser:"Manav sain", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", + datetime:"10 June, 2924 10 am", Grade: "L1", Department: "Sales", Role: "Sr. Manager", @@ -118,24 +131,28 @@ const GlobalStateProvider = ({ children }) => { { wallet: "Food", walBal: "₹ 5000", - - }, { + }, + { wallet: "Travel", walBal: "₹ 7000", - - }, { + }, + { wallet: "Toor", walBal: "₹ 3000", - - },] - + }, + ], + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 4, EmpID: "124589", + disburser:"Manav sain", Name: "Status", emailAddress: "in***@wdimails.com", + datetime:"10 June, 2924 10 am", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", Grade: "L1", Department: "Sales", Role: "Sr. Manager", @@ -144,17 +161,18 @@ const GlobalStateProvider = ({ children }) => { { wallet: "Food", walBal: "₹ 5000", - - }, { + }, + { wallet: "Travel", walBal: "₹ 7000", - - }, { + }, + { wallet: "Toor", walBal: "₹ 3000", - - },] - + }, + ], + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 5, @@ -162,32 +180,39 @@ const GlobalStateProvider = ({ children }) => { Name: "Status", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", + datetime:"10 June, 2924 10 am", Grade: "L1", Department: "Sales", + disburser:"Manav sain", Role: "Sr. Manager", status: "Inactive", subMenu: [ { wallet: "Food", walBal: "₹ 5000", - - }, { + }, + { wallet: "Travel", walBal: "₹ 7000", - - }, { + }, + { wallet: "Toor", walBal: "₹ 3000", - - },] - + }, + ], + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 6, EmpID: "124589", + disburser:"Manav sain", Name: "Status", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", + datetime:"10 June, 2924 10 am", Grade: "L1", Department: "Sales", Role: "Sr. Manager", @@ -196,17 +221,18 @@ const GlobalStateProvider = ({ children }) => { { wallet: "Food", walBal: "₹ 5000", - - }, { + }, + { wallet: "Travel", walBal: "₹ 7000", - - }, { + }, + { wallet: "Toor", walBal: "₹ 3000", - - },] - + }, + ], + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 7, @@ -214,18 +240,24 @@ const GlobalStateProvider = ({ children }) => { Name: "Status", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + datetime:"10 June, 2924 10 am", Grade: "L1", Department: "Sales", Role: "Sr. Manager", status: "Active", - + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 8, EmpID: "124589", Name: "Status", + disburser:"Manav sain", emailAddress: "in***@wdimails.com", + reportname: "Reimbursement report 2024", mobileNumber: "+91 ***8451254", + datetime:"10 June, 2924 10 am", + reportamount: "₹ 50000", Grade: "L1", Department: "Sales", Role: "Sr. Manager", @@ -234,29 +266,33 @@ const GlobalStateProvider = ({ children }) => { { wallet: "Food", walBal: "₹ 5000", - - }, { + }, + { wallet: "Travel", walBal: "₹ 7000", - - }, { + }, + { wallet: "Toor", walBal: "₹ 3000", - - },] - + }, + ], + approver:"Reethik thota", }, { id: 9, EmpID: "124589", Name: "Status", + disburser:"Manav sain", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", + datetime:"10 June, 2924 10 am", Grade: "L1", Department: "Sales", Role: "Sr. Manager", status: "Active", - + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 10, @@ -264,36 +300,49 @@ const GlobalStateProvider = ({ children }) => { Name: "Status", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", + datetime:"10 June, 2924 10 am", Grade: "L1", + disburser:"Manav sain", Department: "Sales", Role: "Sr. Manager", status: "Inactive", + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 10, EmpID: "124589", Name: "Status", + disburser:"Manav sain", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", Grade: "L1", Department: "Sales", Role: "Sr. Manager", status: "Active", + reportamount: "₹ 50000", + approver:"Reethik thota", }, { id: 11, EmpID: "124589", + disburser:"Manav sain", Name: "Status", emailAddress: "in***@wdimails.com", mobileNumber: "+91 ***8451254", + reportname: "Reimbursement report 2024", + datetime:"10 June, 2924 10 am", Grade: "L1", Department: "Sales", Role: "Sr. Manager", status: "Active", + reportamount: "₹ 50000", + approver:"Reethik thota", }, ]); - const [reportsHistory, setReportsHistory] = useState([ { id: 1, @@ -2083,7 +2132,7 @@ const GlobalStateProvider = ({ children }) => { }, ]); - // Recent transaction + // Recent transaction const [recentTransaction, setRecentTransaction] = useState([ { @@ -2137,7 +2186,7 @@ const GlobalStateProvider = ({ children }) => { }, ]); - // Wallets EB&G + // Wallets EB&G const [walletExpense, setWalletExpense] = useState([ { wallet: "Food", @@ -2165,38 +2214,49 @@ const GlobalStateProvider = ({ children }) => { }, ]); - - // main dash + // main dash const [dash, setDash] = useState([ { id: 1, - wallet: "Employee Wallet", + wallet: "Food", walletAmount: "₹ 70,000", balanceRemaining: "₹ 20,000", status: "Approved", totalEmployees: 500, users: 5, + icon: foods, }, { id: 2, - wallet: "Travel Wallet", + wallet: "Fuel", walletAmount: "₹ 50,000", balanceRemaining: "₹ 15,000", status: "Approved", totalEmployees: 200, users: 3, + icon: Fuel, }, { id: 3, - wallet: "Food Wallet", + wallet: "Books & Periodicals", walletAmount: "₹ 100,000", balanceRemaining: "₹ 80,000", status: "Pending", totalEmployees: 300, users: 4, + icon: books, + }, + { + id: 4, + wallet: "Telecom", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", + status: "Pending", + totalEmployees: 300, + users: 4, + icon: telecom, }, - ]); @@ -2390,6 +2450,11 @@ const GlobalStateProvider = ({ children }) => { setSupportAndTicket, recentReports, setRecentReports, recentTransaction, setRecentTransaction, + + recentReports, + setRecentReports, + recentTransaction, + setRecentTransaction, walletExpense, setWalletExpense, dash, diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx index ccb6e25..d9e3c66 100644 --- a/src/Layout/DefaultLayout.jsx +++ b/src/Layout/DefaultLayout.jsx @@ -5,7 +5,10 @@ import logoMini from "../assets/logo-min.png"; import logoMiniDark from "../assets/favicon.png"; import { useDispatch } from "react-redux"; import { loginUser } from "../Redux/Slice/auth"; +import { RiNotification3Line } from "react-icons/ri"; // import Button02 from "../Components/Buttons/Button02"; +import goth from "../assets/goth.png"; +import { SlOptions } from "react-icons/sl"; import { TbArrowBadgeLeftFilled, TbListDetails, @@ -43,6 +46,10 @@ import { Breadcrumb, Divider, Button, + Flex, + HStack, + VStack, + Circle, } from "@chakra-ui/react"; import GlobalStateContext from "../Contexts/GlobalStateContext"; import Cookies from "js-cookie"; // Import the Cookies library @@ -125,13 +132,12 @@ const DashboardLayout = ({ isOnline }) => { navigate("/login"); }; - if (isSplashVisible) { return ; } return ( - + { _hover={{ bg: "#ced8e6a2" }} className={`${ true - ? "p-2 web-text-medium ps-2 justify-content-between" + ? "p-2 web-text-medium ps-2 justify-content-between" : "p-2 ps-1 web-text-xlarge justify-content-center" } link d-flex align-items-center gap-2 w-100 mb-1`} > @@ -257,7 +263,7 @@ const DashboardLayout = ({ isOnline }) => { flexDirection={"column"} gap={1} > - {submenu?.map( + {/* {submenu?.map( ( { title: subMenuTitle, @@ -292,7 +298,6 @@ const DashboardLayout = ({ isOnline }) => { )} { ) + )} */} + {submenu?.map( + ( + { + title: subMenuTitle, + path: link, + icon: SubIcon, + colorCode, + }, + i + ) => ( + + + {({ isActive }) => ( + <> + {/* {SubIcon && ( + + )} */} + {isActive && ( + + )} + + {subMenuTitle} + + + + )} + + + ) )} @@ -315,7 +385,8 @@ const DashboardLayout = ({ isOnline }) => { {title} @@ -353,6 +424,44 @@ const DashboardLayout = ({ isOnline }) => { } )} + + + + + + + + + + Jenny Wilson + + + jen.wilson@wdipl.com + + + + + diff --git a/src/Pages/Dashboard/Dashbaord.jsx b/src/Pages/Dashboard/Dashbaord.jsx index eb04751..40db544 100644 --- a/src/Pages/Dashboard/Dashbaord.jsx +++ b/src/Pages/Dashboard/Dashbaord.jsx @@ -1,37 +1,72 @@ -import { Badge, Box, Button, Checkbox, CircularProgress, CircularProgressLabel, color, Divider, Flex, Grid, GridItem, Heading, Image, Menu, MenuButton, MenuItem, MenuList, Progress, Stack, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Tag, TagLabel } from '@chakra-ui/react' -import React, { useContext, useState } from 'react' -import BlueCard from '../../Components/Cards/BlueCard' -import { OPACITY_ON_LOAD } from '../../Layout/animations' -import { HStack, Text, VStack, Icon } from '@chakra-ui/react'; -import { BsArrowsAngleExpand, BsBarChartFill, BsFillBarChartFill } from 'react-icons/bs'; -import { FiBarChart2 } from 'react-icons/fi'; -import { WiTime4 } from 'react-icons/wi'; -import { MdArrowForward, MdNoFood } from 'react-icons/md'; -import PlatiniumGift from '../../Components/PlatiniumGift'; +import { + Badge, + Box, + Button, + Checkbox, + CircularProgress, + CircularProgressLabel, + color, + Divider, + Flex, + Grid, + GridItem, + Heading, + Image, + Menu, + MenuButton, + MenuItem, + MenuList, + Progress, + Stack, + Tab, + TabIndicator, + TabList, + TabPanel, + TabPanels, + Tabs, + Tag, + TagLabel, +} from "@chakra-ui/react"; +import React, { useContext, useState } from "react"; +import BlueCard from "../../Components/Cards/BlueCard"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { HStack, Text, VStack, Icon } from "@chakra-ui/react"; + +import { + BsArrowsAngleExpand, + BsBarChartFill, + BsFillBarChartFill, +} from "react-icons/bs"; +import { FiBarChart2 } from "react-icons/fi"; +import { WiTime4 } from "react-icons/wi"; +import { MdArrowForward, MdNoFood } from "react-icons/md"; +import PlatiniumGift from "../../Components/PlatiniumGift"; import { PiUsersThreeFill } from "react-icons/pi"; -import GlobalStateContext from '../../Contexts/GlobalStateContext'; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; import blackmen from "../../assets/blackmen.png"; import koreanpfp from "../../assets/koreanboi.png"; import asian from "../../assets/asain.png"; import goth from "../../assets/goth.png"; import womenpfp from "../../assets/womenpfp1.png"; -import NormalTable from '../../Components/DataTable/NormalTable'; -import { AiOutlineCalendar } from 'react-icons/ai'; -import { IoMdAddCircleOutline, IoMdArrowDropdown } from 'react-icons/io'; -import { LuListFilter } from 'react-icons/lu'; -import { ChevronDownIcon } from '@chakra-ui/icons'; -import PrimaryButton from '../../Components/Buttons/PrimaryButton'; -import SecondaryButton from '../../Components/Buttons/SecondaryButton'; -import { GoDotFill } from 'react-icons/go'; - +import NormalTable from "../../Components/DataTable/NormalTable"; +import { AiOutlineCalendar } from "react-icons/ai"; +import { IoMdAddCircleOutline, IoMdArrowDropdown } from "react-icons/io"; +import { LuListFilter } from "react-icons/lu"; +import { ChevronDownIcon } from "@chakra-ui/icons"; +import PrimaryButton from "../../Components/Buttons/PrimaryButton"; +import SecondaryButton from "../../Components/Buttons/SecondaryButton"; +import { GoDotFill } from "react-icons/go"; +import { NavLink } from "react-router-dom"; const Dashbaord = () => { - const { dash } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [users, setusers] = useState(50); + const [scale, setScale] = useState(1); + const zoomIn = () => setScale((prev) => (prev < 2 ? prev + 0.1 : prev)); + const zoomOut = () => setScale((prev) => (prev > 0.5 ? prev - 0.1 : prev)); const blueCardData = [ { @@ -58,32 +93,7 @@ const Dashbaord = () => { badgeColor: "#3725EA", viewTextColor: "#6311CB", }, - { - backgroundColor: "#6311CB", - iconColor: "#00A438", - title: "WALLET REQUEST", - count: 100, - buttonBg: "#FCA1001A", - buttonBorder: "#FCA100", - buttonText: "View Requests", - badgeText: "20 New", - badgeColor: "#3725EA", - viewTextColor: "#6311CB", - }, - { - backgroundColor: "#C33FAD", - iconColor: "#00A438", - title: "WALLET REQUEST", - count: 100, - buttonBg: "#FCA1001A", - buttonBorder: "#FCA100", - buttonText: "View Requests", - badgeText: "20 New", - badgeColor: "#3725EA", - viewTextColor: "#6311CB", - }, - ] - + ]; const gridItemsData = [ { @@ -114,41 +124,39 @@ const Dashbaord = () => { // ===============================[ Table Header ] const dashHeadRow = [ - 'Wallet Name', + "Wallet Name", "Total employees", - 'Amount in card', - 'Pending request', - 'Pending amount', - + "Amount in card", + "Pending request", + "Pending amount", ]; const dashHeadSecRow = [ - 'Wallet Name', + "Wallet Name", "Total employees", - 'Benefit limit', - 'Remaining amount', - 'Status', - + "Benefit limit", + "Remaining amount", + "Status", ]; const dashHeadThirdRow = [ - 'Employee Name', + "Employee Name", "Email", - 'Wallet', - 'Amount', - 'Date & time', - + "Wallet", + "Amount", + "Date & time", ]; - // first + // first const dashArr = dash.map((item, index) => ({ "Wallet Name": ( - + {/* - + */} + - {item.wallet || 'Food'} + {item.wallet || "Food"} ), @@ -183,38 +191,48 @@ const Dashbaord = () => { ), - 'Amount in card': ( + "Amount in card": ( {item.walletAmount || 5000} ), - 'Pending request': ( + "Pending request": ( +4 new - + View ), - 'Pending amount': ( + "Pending amount": ( - {item.balanceRemaining || '₹ 2000'} + {item.balanceRemaining || "₹ 2000"} ), })); - // Second + // Second const dashSecArr = dash.map((item, index) => ({ "Wallet Name": ( - + {/* - + */} + - {item.wallet || 'Food'} + {item.wallet || "Food"} ), @@ -249,17 +267,17 @@ const Dashbaord = () => { ), - 'Benefit limit': ( + "Benefit limit": ( {item.walletAmount || 5000} ), - 'Remaining amount': ( + "Remaining amount": ( - {item.balanceRemaining || '₹ 2000'} + {item.balanceRemaining || "₹ 2000"} ), - 'Status': ( + Status: ( { item?.status === "Approved" ? "#00A438" : item?.status === "Pending" - ? "#EAB600" - : "red" - } - border={`1px solid ${item?.status === "Approved" - ? "#00A438" - : item?.status === "Pending" ? "#EAB600" : "red" - }`} + } + border={`1px solid ${ + item?.status === "Approved" + ? "#00A438" + : item?.status === "Pending" + ? "#EAB600" + : "red" + }`} bg={ item?.status === "Approved" ? "#ebf8ef" : item?.status === "Pending" - ? "#fdf9eb" - : "#ffe5e5" + ? "#fdf9eb" + : "#ffe5e5" } > - - {item?.status || "N/A"} - + {item?.status || "N/A"} - ), })); - // Third + // Third const dashThirdArr = dash.map((item, index) => ({ "Employee Name": ( @@ -318,22 +334,22 @@ const Dashbaord = () => { ), - 'Email': ( + Email: ( olivia@gmail.com ), - 'Wallet': ( + Wallet: ( Food ), - 'Amount': ( + Amount: ( - {item.balanceRemaining || '₹ 2000'} + {item.balanceRemaining || "₹ 2000"} ), - 'Date & time': ( + "Date & time": ( 2 June 2024, 10 am @@ -342,96 +358,128 @@ const Dashbaord = () => { return ( - + {blueCardData.map((item, index) => ( ))} {/* */} + + + Employee KYC Status + + + + + + + + Payment Status + + + + + {/* EXP card */} {gridItemsData.map((item, index) => ( - - - - - Expense card - - - - Manage expense wallets - - - - - - - - - - - - - {item.title} - - {item.count} - - - - - + )} + + View + + ))} @@ -444,49 +492,53 @@ const Dashbaord = () => { - + OptiFii Gift cards Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut - } - /> - + + } + /> + - {/* EXP overview */} - - {/* table 1 */} - + Expense Overview - navigate("")} - as={Button} - color={"#6311CB"} - size={18} - cursor={"pointer"} - /> - - - + + { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Reimbursement request { fontWeight={500} _selected={{ color: "#5E0FCD", - }}>Advance Expense request + }} + > + Advance Expense request + - + { - - - Total report amount - ₹ 50,000 - - - } - rightIcon={} - fontSize={"xs"} - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} - > - Filter - - - Ascending - Descending - Recently Viewed - Recently Added - - - - - + + + + Total report amount + + + ₹ 50,000 + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + { /> + + + + Total report amount + + + ₹ 50,000 + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + { {/* table 2 */} - + - + Benefit Overview - { - navigate("")} - as={Button} - color={"#6311CB"} - size={18} - cursor={"pointer"} - /> + + navigate("")} + as={Button} + color={"#6311CB"} + size={18} + cursor={"pointer"} + /> + + vis - Total report amount - ₹ 50,000 + + Total report amount + + + ₹ 50,000 + { isLoading={isLoading} /> - - - - - {/* box 1 */} - Your Balance + + Your Balance + - ₹ 120,435.00 - ( INR ) + + ₹ 120,435.00 + + + ( INR ) + - Last uploaded on Jan 31, 2024 + + Last uploaded on Jan 31, 2024 + } - title={"Load Money"} /> - + leftIcon={} + title={"Load Money"} + /> + {/* box 2 */} - - - Monthly Expense + + + Monthly Expense + { p={2} rounded={"md"} > - { {/* Individual items */} - Fuel + + Fuel + - ₹ 20,000 - 40% + + ₹ 20,000 + + + 40% + - Food + + Food + - ₹ 15,000 - 35% + + ₹ 15,000 + + + 35% + - Travel + + Travel + - ₹ 10,000 - 20% + + ₹ 10,000 + + + 20% + - Travel + + Travel + - ₹ 10,000 - 10% + + ₹ 10,000 + + + 10% + - Voucher + + Voucher + - ₹ 5,000 - 10% + + ₹ 5,000 + + + 10% + - Voucher + + Voucher + - ₹ 5,000 - 10% + + ₹ 5,000 + + + 10% + - {/* Total spending's */} - {/* box */} - - + - Total spending's + + Total spending's + { px={2} rounded={"md"} > - { - + Expense @@ -884,12 +1068,19 @@ const Dashbaord = () => { - - 40% + + + 40% + - + Benefit @@ -899,12 +1090,19 @@ const Dashbaord = () => { - - 60% + + + 60% + - + Gifts & voucher @@ -914,12 +1112,13 @@ const Dashbaord = () => { - - 80% + + + 80% + - {/* table */} @@ -990,8 +1189,12 @@ const Dashbaord = () => { - Total report amount - ₹ 50,000 + + Total report amount + + + ₹ 50,000 + { isLoading={isLoading} /> - - - - - - - - ) -} + ); +}; -export default Dashbaord \ No newline at end of file +export default Dashbaord; diff --git a/src/Pages/ManageHumanResource/Approvers.jsx b/src/Pages/ManageHumanResource/Approvers.jsx index e9c04b6..98afd91 100644 --- a/src/Pages/ManageHumanResource/Approvers.jsx +++ b/src/Pages/ManageHumanResource/Approvers.jsx @@ -205,12 +205,6 @@ const Approvers = () => { return ( - - {blueCardData.map((item, index) => ( diff --git a/src/Pages/Onboarding/OnboardingFrame.jsx b/src/Pages/Onboarding/OnboardingFrame.jsx index 633d6d5..61458e9 100644 --- a/src/Pages/Onboarding/OnboardingFrame.jsx +++ b/src/Pages/Onboarding/OnboardingFrame.jsx @@ -1,69 +1,115 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState } from "react"; import { - Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, - StepTitle, Divider, Button, HStack, IconButton, Flex, - useDisclosure -} from '@chakra-ui/react'; -import Header from './Header'; + Box, + Text, + Stepper, + Step, + StepIndicator, + StepStatus, + StepSeparator, + useSteps, + StepTitle, + Divider, + Button, + HStack, + IconButton, + Flex, + useDisclosure, + Image, +} from "@chakra-ui/react"; +import Header from "./Header"; import onboarding_bg from "../../assets/onboarding_bg.webp"; -import { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons'; -import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa'; -import OnboardingYourDetails from './OnboardingYourDetails'; -import OnboardingAboutCompany from './OnboardingAboutCompany'; -import OnboardingAddCompanyDetails from './OnboardingAddCompanyDetails'; -import OnboardingDirectorDetails from './OnboardingDirectorDetails'; -import OnboardingSelectPackage from './OnboardingSelectPackage'; -import OnboardingSelectPackageModal from './OnboardingSelectPackageModal'; // Import your modal component -import { OPACITY_ON_LOAD } from '../../Layout/animations'; -import { useSearchParams } from 'react-router-dom'; - +import { + ArrowBackIcon, + ArrowForwardIcon, + CheckIcon, + Icon, +} from "@chakra-ui/icons"; +import { + FaUser, + FaBuilding, + FaClipboard, + FaUserTie, + FaBoxOpen, +} from "react-icons/fa"; +import OnboardingYourDetails from "./OnboardingYourDetails"; +import OnboardingAboutCompany from "./OnboardingAboutCompany"; +import OnboardingAddCompanyDetails from "./OnboardingAddCompanyDetails"; +import OnboardingDirectorDetails from "./OnboardingDirectorDetails"; +import OnboardingSelectPackage from "./OnboardingSelectPackage"; +import OnboardingSelectPackageModal from "./OnboardingSelectPackageModal"; // Import your modal component +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { useSearchParams } from "react-router-dom"; +import company from "../../assets/company.png"; +import pfp from "../../assets/pfp.png"; // Retrieve the active step from localStorage or set it to 0 if it doesn't exist // const initialStep = parseInt(localStorage.getItem("activeStep")) || 0; const OnboardingFrame = () => { - // Create a searchParams instance const [searchParams] = useSearchParams(); - const [ corpData, setCorpData ] = useState({}) + const [corpData, setCorpData] = useState({}); useEffect(() => { // Extract specific parameters if (searchParams) { - const codeCorporate = searchParams.get("code_corporate"); - const codeCorporateId = searchParams.get("code_corporateId"); - localStorage?.setItem('codeCorporate', codeCorporate) - localStorage?.setItem('codeCorporateId', codeCorporateId) + const codeCorporate = searchParams.get("code_corporate"); + const codeCorporateId = searchParams.get("code_corporateId"); + localStorage?.setItem("codeCorporate", codeCorporate); + localStorage?.setItem("codeCorporateId", codeCorporateId); } - }, [searchParams]) + }, [searchParams]); useEffect(() => { localStorage.setItem("corpData", JSON.stringify(corpData)); console.log(corpData); - }, [corpData]) + }, [corpData]); - // Modal state and disclosure hook - const { isOpen, onOpen, onClose } = useDisclosure(); + // Modal state and disclosure hook + const { isOpen, onOpen, onClose } = useDisclosure(); + const steps = [ + { + title: "Your details", + description: "Lorem ipsum dolor sit amet dolor", + icon: FaUser, + img: company, + }, + { + title: "About Company", + description: "Lorem ipsum dolor sit amet dolor", + icon: FaBuilding, + img: company, + }, + { + title: "Company details", + description: "Lorem ipsum dolor sit amet dolor", + icon: FaClipboard, + img: company, + }, + { + title: "Director details", + description: "Lorem ipsum dolor sit amet dolor", + icon: FaUserTie, + img: pfp, + }, + { + title: "Select package", + description: "Lorem ipsum dolor sit amet dolor", + icon: FaBoxOpen, + img: company, + }, + ]; - - const steps = [ - { title: 'Your details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUser }, - { title: 'About Company', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBuilding }, - { title: 'Company details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaClipboard }, - { title: 'Director details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUserTie }, - { title: 'Select package', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBoxOpen }, - ]; - - -// Stepper configuration -const { activeStep, setActiveStep } = useSteps({ + // Stepper configuration + const { activeStep, setActiveStep } = useSteps({ index: 0, // Initialize the active step from localStorage or 0 count: steps.length, }); -// Function to handle the "Next" button click -const handleNext = () => { + // Function to handle the "Next" button click + const handleNext = () => { if (activeStep === steps.length - 1) { // If it's the last step, open the modal onOpen(); @@ -71,175 +117,216 @@ const handleNext = () => { // Otherwise, go to the next step const nextStep = activeStep + 1; setActiveStep(nextStep); - + // Store the new active step in localStorage localStorage.setItem("activeStep", nextStep); } }; - + // Array of components for each step + const stepComponents = [ + , + , + , + , + , + ]; - // Array of components for each step - const stepComponents = [ - , - , - , - , - - ]; - - - - return ( - - {/* Onboarding content */} - -
- + {/* Onboarding content */} + +
+ + {/* Stepper Box */} + + + + Lorem ipsum dolor sit amet, adipiscing elit. + + + + - {/* Stepper Box */} - - - - Lorem ipsum dolor sit amet, adipiscing elit. - - - - - {steps.map((step, index) => ( - - - } - incomplete={} - active={} - /> - - - - {step.title} - - - {step.description} - - - index ? "purple.500" : "purple.300"} - borderWidth={1} - /> - - ))} - - - - + {steps.map((step, index) => ( + + + } + incomplete={ + + } + active={ + + } + /> + + + + {step.title} + + + {step.description} + + + index ? "purple.500" : "purple.300" + } + borderWidth={1} + /> + + ))} + + + + - {/* Content Box */} - - + {/* Content Box */} + + + {/* Step Indicator (Horizontal) */} + + {steps.map((_, index) => ( + + ))} + + - {/* Step Indicator (Horizontal) */} - - {steps.map((_, index) => ( - - ))} - - + + + {/* Render the current step component */} + {stepComponents[activeStep]} - - - {/* Render the current step component */} - {stepComponents[activeStep]} - - {/* + {/* } @@ -267,16 +354,16 @@ const handleNext = () => { {activeStep === steps.length - 1 ? 'Next step' : 'Next step'} */} - - - - + - - {/* Modal for final step */} - + - ); + + + {/* Modal for final step */} + + + ); }; export default OnboardingFrame; diff --git a/src/Pages/OptiFiiExpense/AdvExpPending.jsx b/src/Pages/OptiFiiExpense/AdvExpPending.jsx new file mode 100644 index 0000000..41f4308 --- /dev/null +++ b/src/Pages/OptiFiiExpense/AdvExpPending.jsx @@ -0,0 +1,452 @@ +import { + Avatar, + Box, + Button, + Checkbox, + Divider, + Flex, + HStack, + Icon, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Radio, + Select, + Tag, + TagLabel, + Text, + VStack, + } from "@chakra-ui/react"; + import { + Tabs, + TabList, + Tab, + TabIndicator, + TabPanels, + TabPanel, + } 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 womenpfp from "../../assets/womenpfp1.png"; + import { + AddIcon, + CalendarIcon, + ChevronDownIcon, + EmailIcon, + SearchIcon, + ViewIcon, + } from "@chakra-ui/icons"; + import { + MdFilterList, + MdNotificationsNone, + MdOutlineHeadsetMic, + } from "react-icons/md"; + import { OPACITY_ON_LOAD } from "../../Layout/animations"; + import { Link, NavLink, useNavigate } from "react-router-dom"; + import { FaArrowUpFromBracket } from "react-icons/fa6"; + import { LuListFilter } from "react-icons/lu"; + import { BsFilterRight } from "react-icons/bs"; + import pdfIcon from "../../assets/pdfIcon.svg"; + import ExcelIcon from "../../assets/ExcelIcon.svg"; + + const AdvanceExpensePending = () => { + const { AdvanceExpenseRequest } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [users, setusers] = useState(50); + const navigate = useNavigate(); + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + + return () => clearTimeout(timer); + }, []); + + // ===============================[ Table Header ] + + const tableHeadRow = [ + "Sr. no", + "Report name", + "Report by", + "Report amount", + "Date & time", + "Approver", + "Disburser", + "Action", + ]; + + const pendingTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + navigate("/advance-expense-request-view")} + fontSize={"xs"} + color="#fff" + bg={"#6311CB"} + py={1.5} + px={5} + borderRadius={5} + > + {item?.Action} + + ), + })); + const completedTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + + {item?.Action} + + ), + })); + const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + + {item?.Action} + + ), + })); + + const tabsData = [ + { + label: "Pending", + num: 50, + content: ( + + ), + }, + { + label: "Completed", + content: ( + + ), + }, + { + label: "Rejected", + content: ( + + ), + }, + ]; + + return ( + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + Show + + + + entries + + + + + + {/* } + title={"Pull back funds"} + /> */} + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + ); + }; + + export default AdvanceExpensePending; + \ No newline at end of file diff --git a/src/Pages/OptiFiiExpense/AdvExpRejecte.jsx b/src/Pages/OptiFiiExpense/AdvExpRejecte.jsx new file mode 100644 index 0000000..c7e601d --- /dev/null +++ b/src/Pages/OptiFiiExpense/AdvExpRejecte.jsx @@ -0,0 +1,452 @@ +import { + Avatar, + Box, + Button, + Checkbox, + Divider, + Flex, + HStack, + Icon, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Radio, + Select, + Tag, + TagLabel, + Text, + VStack, + } from "@chakra-ui/react"; + import { + Tabs, + TabList, + Tab, + TabIndicator, + TabPanels, + TabPanel, + } 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 womenpfp from "../../assets/womenpfp1.png"; + import { + AddIcon, + CalendarIcon, + ChevronDownIcon, + EmailIcon, + SearchIcon, + ViewIcon, + } from "@chakra-ui/icons"; + import { + MdFilterList, + MdNotificationsNone, + MdOutlineHeadsetMic, + } from "react-icons/md"; + import { OPACITY_ON_LOAD } from "../../Layout/animations"; + import { Link, NavLink, useNavigate } from "react-router-dom"; + import { FaArrowUpFromBracket } from "react-icons/fa6"; + import { LuListFilter } from "react-icons/lu"; + import { BsFilterRight } from "react-icons/bs"; + import pdfIcon from "../../assets/pdfIcon.svg"; + import ExcelIcon from "../../assets/ExcelIcon.svg"; + + const AdvanceExpenseReject = () => { + const { AdvanceExpenseRequest } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [users, setusers] = useState(50); + const navigate = useNavigate(); + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + + return () => clearTimeout(timer); + }, []); + + // ===============================[ Table Header ] + + const tableHeadRow = [ + "Sr. no", + "Report name", + "Report by", + "Report amount", + "Date & time", + "Approver", + "Disburser", + "Action", + ]; + + const pendingTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + navigate("/advance-expense-request-view")} + fontSize={"xs"} + color="#fff" + bg={"#6311CB"} + py={1.5} + px={5} + borderRadius={5} + > + {item?.Action} + + ), + })); + const completedTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + + {item?.Action} + + ), + })); + const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + + {item?.Action} + + ), + })); + + const tabsData = [ + { + label: "Pending", + num: 50, + content: ( + + ), + }, + { + label: "Completed", + content: ( + + ), + }, + { + label: "Rejected", + content: ( + + ), + }, + ]; + + return ( + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + Show + + + + entries + + + + + + {/* } + title={"Pull back funds"} + /> */} + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + ); + }; + + export default AdvanceExpenseReject; + \ No newline at end of file diff --git a/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx b/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx index 446db9d..3bd2706 100644 --- a/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx +++ b/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx @@ -55,8 +55,9 @@ import { LuListFilter } from "react-icons/lu"; import { BsFilterRight } from "react-icons/bs"; import pdfIcon from "../../assets/pdfIcon.svg"; import ExcelIcon from "../../assets/ExcelIcon.svg"; - - +import AdvanceExpensePending from "./AdvExpPending"; +import AdvanceExpenseCompleted from "./AvdExpComplted"; +import AdvanceExpenseReject from "./AdvExpRejecte"; const AdvanceExpenseRequest = () => { const { AdvanceExpenseRequest } = useContext(GlobalStateContext); @@ -65,8 +66,6 @@ const AdvanceExpenseRequest = () => { const [users, setusers] = useState(50); const navigate = useNavigate(); - - useEffect(() => { // Set isLoading to true setIsLoading(true); @@ -127,25 +126,32 @@ const AdvanceExpenseRequest = () => { ), "Report by": ( - - - {item?.ReportBy?.profName} + + + {item?.ReportBy?.profName} ), "Report amount": item?.ReportAmount, "Date & time": item?.DateTime, - "Approver": item?.Approver, - "Disburser": item?.Disburser, - "Action": ( + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( navigate('/advance-expense-request-view')} + onClick={() => navigate("/advance-expense-request-view")} fontSize={"xs"} color="#fff" - bg={'#6311CB'} - py={1.5} px={5} + bg={"#6311CB"} + py={1.5} + px={5} borderRadius={5} - >{item?.Action} + > + {item?.Action} + ), })); const completedTable = AdvanceExpenseRequest.map((item, index) => ({ @@ -181,26 +187,33 @@ const AdvanceExpenseRequest = () => { > {item?.ReportName} - ), + ), "Report by": ( - - - {item?.ReportBy?.profName} + + + {item?.ReportBy?.profName} ), "Report amount": item?.ReportAmount, "Date & time": item?.DateTime, - "Approver": item?.Approver, - "Disburser": item?.Disburser, - "Action": ( + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( {item?.Action} + > + {item?.Action} + ), })); const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({ @@ -238,58 +251,50 @@ const AdvanceExpenseRequest = () => { ), "Report by": ( - - - {item?.ReportBy?.profName} + + + {item?.ReportBy?.profName} ), "Report amount": item?.ReportAmount, "Date & time": item?.DateTime, - "Approver": item?.Approver, - "Disburser": item?.Disburser, - "Action": ( + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( {item?.Action} + > + {item?.Action} + ), })); - - const tabsData = [ { - label: 'Pending', + label: "Pending", num: 50, - content: + content: , }, { - label: 'Completed', - content: + label: "Completed", + content: , }, { - label: 'Rejected', - content: - } + label: "Rejected", + content: ( + + ), + }, ]; return ( @@ -297,123 +302,12 @@ const AdvanceExpenseRequest = () => { - - - - - - - setSearchTerm(e.target.value)} - /> - - - - - - - } - rightIcon={} - fontSize={"xs"} - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} - > - Sort - - - Ascending - Descending - Recently Viewed - Recently Added - - - - Show - - entries - - - - - - - {/* } - title={"Pull back funds"} - /> */} - - - } - rightIcon={} - fontSize={"xs"} - colorScheme="gray" - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} - > - Export - - - - Export as PDF - - - Export as Excel - - - - - } - rightIcon={} - fontSize={"xs"} - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} - > - Filter - - - Ascending - Descending - Recently Viewed - Recently Added - - - - - {tabsData?.map((tab, index) => ( @@ -424,23 +318,26 @@ const AdvanceExpenseRequest = () => { color: "#6311CB", fontWeight: "medium", }} - display={'flex'} - alignItems={'center'} + display={"flex"} + alignItems={"center"} gap={2} > {tab?.label} - {tab?.label == "Pending" && + {tab?.label == "Pending" && ( {tab?.num}} + > + {tab?.num} + + )} ))} - { /> {tabsData?.map((tabCont, index) => ( - - {tabCont?.content} - + {tabCont?.content} ))} - diff --git a/src/Pages/OptiFiiExpense/AvdExpComplted.jsx b/src/Pages/OptiFiiExpense/AvdExpComplted.jsx new file mode 100644 index 0000000..3ee5ae2 --- /dev/null +++ b/src/Pages/OptiFiiExpense/AvdExpComplted.jsx @@ -0,0 +1,452 @@ +import { + Avatar, + Box, + Button, + Checkbox, + Divider, + Flex, + HStack, + Icon, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Radio, + Select, + Tag, + TagLabel, + Text, + VStack, + } from "@chakra-ui/react"; + import { + Tabs, + TabList, + Tab, + TabIndicator, + TabPanels, + TabPanel, + } 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 womenpfp from "../../assets/womenpfp1.png"; + import { + AddIcon, + CalendarIcon, + ChevronDownIcon, + EmailIcon, + SearchIcon, + ViewIcon, + } from "@chakra-ui/icons"; + import { + MdFilterList, + MdNotificationsNone, + MdOutlineHeadsetMic, + } from "react-icons/md"; + import { OPACITY_ON_LOAD } from "../../Layout/animations"; + import { Link, NavLink, useNavigate } from "react-router-dom"; + import { FaArrowUpFromBracket } from "react-icons/fa6"; + import { LuListFilter } from "react-icons/lu"; + import { BsFilterRight } from "react-icons/bs"; + import pdfIcon from "../../assets/pdfIcon.svg"; + import ExcelIcon from "../../assets/ExcelIcon.svg"; + + const AdvanceExpenseCompleted = () => { + const { AdvanceExpenseRequest } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [users, setusers] = useState(50); + const navigate = useNavigate(); + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + + return () => clearTimeout(timer); + }, []); + + // ===============================[ Table Header ] + + const tableHeadRow = [ + "Sr. no", + "Report name", + "Report by", + "Report amount", + "Date & time", + "Approver", + "Disburser", + "Action", + ]; + + const pendingTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + navigate("/advance-expense-request-view")} + fontSize={"xs"} + color="#fff" + bg={"#6311CB"} + py={1.5} + px={5} + borderRadius={5} + > + {item?.Action} + + ), + })); + const completedTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + + {item?.Action} + + ), + })); + const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({ + "Sr. no": ( + + + {/* */} + + {item?.id} + + + ), + "Report name": ( + + {item?.ReportName} + + ), + "Report by": ( + + + {item?.ReportBy?.profName} + + ), + "Report amount": item?.ReportAmount, + "Date & time": item?.DateTime, + Approver: item?.Approver, + Disburser: item?.Disburser, + Action: ( + + {item?.Action} + + ), + })); + + const tabsData = [ + { + label: "Pending", + num: 50, + content: ( + + ), + }, + { + label: "Completed", + content: ( + + ), + }, + { + label: "Rejected", + content: ( + + ), + }, + ]; + + return ( + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + Show + + + + entries + + + + + + {/* } + title={"Pull back funds"} + /> */} + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + ); + }; + + export default AdvanceExpenseCompleted; + \ No newline at end of file diff --git a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx index 22685c4..2fc435c 100644 --- a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx +++ b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx @@ -22,6 +22,9 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations"; import { useNavigate } from "react-router-dom"; + + + const ReimbursementRequest = () => { @@ -44,21 +47,20 @@ const ReimbursementRequest = () => { // ===============================[ Table Header ] const tableHeadRow = [ - // "Select", "Sr. No", - "Name", - "Status", - "Email Address", - "Mobile number", - "Grade", - "Department", - "Role", - "Action", + "Report name", + "Report by", + "Report amount", + "Date & time", + "Approver", + "Disburser", + "Action" ]; // const extractedArray = reportsHistory.map((item)=>({ })) - const extractedArray = employees.map((item, index) => ({ + const extractedArray = employees.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, - Status: ( + "Report name": ( + {item?.reportname} + ), + // "Report by": item?.emailAddress, + "Report amount": item?.reportamount, + "Date & time": item?.datetime, + "Approver": item?.approver, + "Disburser": item?.disburser, + "Report by": ( { // ===============================[ Table Header ] const tableHeadRow = [ - "Select", "Sr. No", "Name", "Email Address", diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx index 2fc0a9d..161d836 100644 --- a/src/Pages/OptiFiiExpense/WalletProgram.jsx +++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx @@ -18,7 +18,7 @@ import { Text, VStack, } from "@chakra-ui/react"; -import React, { useContext, useEffect, useState } from "react"; +import React, { useContext, useEffect, useMemo, useState } from "react"; import MiniHeader from "../../Components/MiniHeader"; import GlobalStateContext from "../../Contexts/GlobalStateContext"; import NormalTable from "../../Components/DataTable/NormalTable"; @@ -102,66 +102,35 @@ const WalletProgram = () => { // const extractedArray = reportsHistory.map((item)=>({ })) walletProgram.map((item) => console.log(item)); - const extractedArray = walletProgram.map((item, index) => ({ - ID: ( - // - - {item?.id} - - // - ), - "Wallet Name": ( - - - - {/* */} - {item?.walletName[0]?.name} - - ), - "Wallet type": item?.WalletType, - Department: item?.mobileNumber, - Grade: item?.Grade, - Department: item?.department, - Role: item?.Role, - Status: ( - - {item?.status} - - ), - "Wallet amount": item?.WalletAmount, - "Created on": item?.CreatedOn, - "Created by": item?.CreatedBy, - })); + const extractedArray = useMemo(() => { + return walletProgram.map((item) => ({ + ID: {item?.id}, + "Wallet Name": ( + + + {item?.walletName[0]?.name} + + ), + "Wallet type": item?.WalletType, + Department: item?.department, + Status: ( + + {item?.status} + + ), + "Wallet amount": item?.WalletAmount, + "Created on": item?.CreatedOn, + "Created by": item?.CreatedBy, + })); + }, [walletProgram]); + return ( diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx new file mode 100644 index 0000000..d366c2f --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx @@ -0,0 +1,78 @@ +import { Box, Button, Flex, Radio, RadioGroup, Text, useBreakpointValue, VStack } from "@chakra-ui/react"; +import React, { useState } from "react"; + +const ApplyForDigitalCard = () => { + const [step, setStep] = useState(1); + const steps = [ + { label: "Select card type", description: "Pending" }, + { label: "Select employee", description: "Pending" }, + ]; + + const handleNext = () => { + if (step < steps.length) { + setStep(step + 1); + } + }; + + const handlePrev = () => { + if (step > 1) { + setStep(step - 1); + } + }; + const currentStep = step - 1; + const isLastStep = step === steps.length; + const isFirstStep = step === 1; + const circleSize = useBreakpointValue({ base: "30px", md: "40px" }); + return ( + + + setStep(Number(val))} + > + + {steps.map((item, index) => ( + + + {/* {index + 1} */} + + + STEP {index + 1} + + + {item.label} + + + {index + 1 === step ? "In Progress" : "Pending"} + + + ))} + + + {steps[currentStep].label} + + + + + + + ); +}; + +export default ApplyForDigitalCard; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx new file mode 100644 index 0000000..efd17e7 --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx @@ -0,0 +1,110 @@ +import React, { useState } from "react"; +import { + Box, + Button, + Flex, + Radio, + RadioGroup, + Text, + VStack, + Divider, + useBreakpointValue, +} from "@chakra-ui/react"; +import { OPACITY_ON_LOAD } from "../../../Layout/animations"; +import SelectCard from "./SelectCard"; +import DigiTable from "./DigiTable"; +import WhereToShare from "./WhereToShare"; + + + + const handleNext = () => { + if (step < steps.length) { + setStep(step + 1); + } + }; + + const handlePrev = () => { + if (step > 1) { + setStep(step - 1); + } + }; + + const Stepper = () => { + const [step, setStep] = useState(1); + const steps = [ + { component: , description: "In Progress" }, + { + component: , + + label: "Where to share?", + description: "Pending", + }, + { + component: , + label: "Select employee", + description: "Pending", + }, + ]; + + const currentStep = step - 1; + const isLastStep = step === steps.length; + const isFirstStep = step === 1; + const circleSize = useBreakpointValue({ base: "30px", md: "40px" }); + + return ( + + + setStep(Number(val))} + > + + {steps.map((item, index) => ( + + + {/* {index + 1} */} + + + STEP {index + 1} + + + {item.label} + + + {index + 1 === step ? "In Progress" : "Pending"} + + + ))} + + + + {/* Stepper Content */} + {steps[currentStep].component} + + {/* Navigation Buttons */} + + + {/* */} + + + + ); +}; + +export default Stepper; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx new file mode 100644 index 0000000..797269d --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx @@ -0,0 +1,88 @@ +import { + Box, + Button, + Image, + Radio, + RadioGroup, + Stack, + Text, + Drawer, + DrawerBody, + DrawerFooter, + DrawerOverlay, + DrawerContent, + DrawerCloseButton, + useDisclosure, + } from "@chakra-ui/react"; + import React, { useState } from "react"; + import FileUploader from "../../../Components/FileUploader/FileUploader"; + import blackmen from "../../../assets/blackmen.png"; + import koreanpfp from "../../../assets/koreanboi.png"; + import asian from "../../../assets/asain.png"; + import goth from "../../../assets/goth.png"; + import womenpfp from "../../../assets/womenpfp1.png"; + import { useRef } from "react"; + import { OPACITY_ON_LOAD } from "../../../Layout/animations"; + import DigiTable from "./DigitalTable"; + + const BrandVoucherTable = () => { + const [selectedValue, setSelectedValue] = useState("1"); + const { isOpen, onOpen, onClose } = useDisclosure(); + const btnRef = useRef(); + + const renderContent = () => { + switch (selectedValue) { + case "1": + return Hii; + case "2": + return Heelo; + default: + return null; + } + }; + + return ( + + + + Select employee + + + + + + Download a{" "} + + sample spreadsheet + {" "} + to quickly start your import + + + + + + ); + }; + + export default BrandVoucherTable; + \ No newline at end of file diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx new file mode 100644 index 0000000..6b48806 --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx @@ -0,0 +1,274 @@ +import { + Box, + Button, + Checkbox, + Divider, + HStack, + IconButton, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Tag, + TagLabel, + Text, + useDisclosure, + VStack, + Drawer, + DrawerBody, + DrawerFooter, + DrawerOverlay, + DrawerContent, + DrawerCloseButton, + } from "@chakra-ui/react"; + import { + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, + } from "@chakra-ui/react"; + import React, { useContext, useEffect, useRef, useState } from "react"; + import GlobalStateContext from "../../../Contexts/GlobalStateContext"; + import NormalTable from "../../../Components/DataTable/NormalTable"; + import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons"; + import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md"; + import { FaRegUser } from "react-icons/fa"; + import { useNavigate } from "react-router-dom"; + import { LuEye, LuListFilter } from "react-icons/lu"; + import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs"; + import { useToast } from "@chakra-ui/react"; + import { OPACITY_ON_LOAD } from "../../../Layout/animations"; + import FileUploader from "../../../Components/FileUploader/FileUploader"; + + const Employees = () => { + const { employees } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const { isOpen, onOpen, onClose } = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = useState("inside"); + const [selectedRadio, setSelectedRadio] = useState([]); + const toast = useToast(); + const btnRef = useRef(); + + const { + isOpen: isModalOpen, + onOpen: onModalOpen, + onClose: onModalClose, + } = useDisclosure(); + + const { + isOpen: isPaymentOpen, + onOpen: onPaymentOpen, + onClose: onPaymentClose, + } = useDisclosure(); + + const navigate = useNavigate(); + + useEffect(() => { + setIsLoading(true); + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + return () => clearTimeout(timer); + }, []); + + useEffect(() => { + if (selectedRadio.length > 0) { + onOpen(); + } else { + onClose(); + } + }, [selectedRadio, onOpen, onClose]); + + const tableHeadRow = [ + "Emp ID", + "Name", + "Email Address", + "Department", + "Designation", + ]; + + const extractedArray = employees.map((item) => ({ + "Emp ID": ( + // + + {item?.EmpID} + + // + ), + Name: ( + + + {item?.Name} + + ), + "Email Address": item?.emailAddress, + Department: item?.Department, + Designation: item?.Role, + Status: ( + + {item?.status} + + ), + Action: ( + + + } + bg={"transparent"} + /> + + }> + Edit + + } + > + Delete + + } + onClick={() => navigate("/employees/view")} + > + View + + + + + ), + })); + + return ( + + + + + Import employee + + + + + + + + } + rightIcon={} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + } + rightIcon={} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + + ); + }; + + export default Employees; + \ No newline at end of file diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx new file mode 100644 index 0000000..feb77dd --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx @@ -0,0 +1,149 @@ +import { Box, Button, Image, Text, VStack } from "@chakra-ui/react"; +import React, { useEffect, useRef } from "react"; +import VanillaTilt from "vanilla-tilt"; // Ensure this is imported +import mobilepng from "../../../assets/mobileCard.png"; +import cardfooter from "../../../assets/cardFooter.png"; +import cardfooter2 from "../../../assets/cardFooter2.png"; +import cardfooter3 from "../../../assets/cardFooter3.png"; + +const cards = [ + { + title: "Save More", + subtitle: "Digital Gift Card", + description: + "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.", + image: mobilepng, + img: cardfooter, + link: "/dashboard/apply-for-giftcards/apply-for-digitalcard", + }, + { + title: "Save More", + subtitle: "Physical Gift Card", + description: + "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.", + img: cardfooter2, + }, + { + title: "Save More", + subtitle: "Insta Gift Card", + description: + "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.", + img: cardfooter3, + }, +]; + +const SelectCard = ({ handleNext }) => { + const tiltRefs = useRef([]); + + useEffect(() => { + tiltRefs.current.forEach((node) => { + if (node) { + VanillaTilt.init(node, { + max: 13, + speed: 700, + glare: true, + scale: 1.05, + "max-glare": 0.5, + onEnter: () => { + node.style.zIndex = 10; // Bring to top on hover + }, + onLeave: () => { + node.style.zIndex = 1; // Reset zIndex after hover + }, + }); + } + }); + + // Cleanup VanillaTilt instances on unmount + return () => { + tiltRefs.current.forEach((node) => { + if (node?.vanillaTilt) { + node.vanillaTilt.destroy(); + } + }); + }; + }, [tiltRefs]); + + return ( + + + Select card type + + + + {cards.map((card, index) => ( + (tiltRefs.current[index] = el)} + bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)" + color="white" + borderRadius="lg" + overflow="hidden" + width={{ base: "100%", md: "300px" }} + padding={6} + textAlign="center" + boxShadow="lg" + position="relative" + > + + + + + {card.title} + + + + {card.subtitle} + + + + {card.description} + + + {card.image && ( + + )} + + {card.img && ( + + )} + + + ))} + + + ); +}; + +export default SelectCard; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx new file mode 100644 index 0000000..a08ea4c --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx @@ -0,0 +1,46 @@ +import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react"; +import { Grid, GridItem } from "@chakra-ui/react"; +import React from "react"; + +const formsInfos = [ + { + label: "Address line 1", + }, + { + label: "Address line 2", + }, + { + label: "Pincode", + }, + { + label: "City", + }, + { + label: "Single Point Activation Number", + }, +]; + +const SingleAddress = () => { + return ( + + + Fill address details + + + + + {formsInfos.map((val) => ( + + {val.label} + + + ))} + + + + ); +}; + +export default SingleAddress; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx new file mode 100644 index 0000000..5bd825e --- /dev/null +++ b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx @@ -0,0 +1,52 @@ +import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react"; +import React, { useState } from "react"; +import SingleAddress from "./SingleAddress"; + +const WhereToShare = ({ register }) => { + const [selectedValue, setSelectedValue] = useState("1"); + + const renderContent = () => { + switch (selectedValue) { + case "1": + return ; + case "2": + return Add department content; + default: + return null; + } + }; + + return ( + <> + + + + + Single address + + + + + Multiple address + + + + + {renderContent()} + + ); +}; + +export default WhereToShare; \ No newline at end of file diff --git a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx index c39dbf7..9942be5 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx @@ -1,41 +1,65 @@ -import { Box, Button, Checkbox, Flex, Heading, Image, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuItem, MenuList, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Tag, TagLabel } from '@chakra-ui/react' -import React, { useContext, useEffect, useState } from 'react' -import { OPACITY_ON_LOAD } from '../../Layout/animations' -import { HStack, Text, VStack } from '@chakra-ui/react'; -import { BsArrowsAngleExpand, BsFilterRight } from 'react-icons/bs'; -import GlobalStateContext from '../../Contexts/GlobalStateContext'; +import { + Box, + Button, + Checkbox, + Flex, + Heading, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Tab, + TabIndicator, + TabList, + TabPanel, + TabPanels, + Tabs, + Tag, + TagLabel, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { HStack, Text, VStack } from "@chakra-ui/react"; +import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; import koreanpfp from "../../assets/koreanboi.png"; import asian from "../../assets/asain.png"; import womenpfp from "../../assets/womenpfp1.png"; -import NormalTable from '../../Components/DataTable/NormalTable'; -import { AiOutlineCalendar } from 'react-icons/ai'; -import { IoMdArrowDropdown } from 'react-icons/io'; -import { LuListFilter } from 'react-icons/lu'; -import { ArrowForwardIcon, ChevronDownIcon, SearchIcon } from '@chakra-ui/icons'; +import NormalTable from "../../Components/DataTable/NormalTable"; +import { AiOutlineCalendar } from "react-icons/ai"; +import { IoMdArrowDropdown } from "react-icons/io"; +import { LuListFilter } from "react-icons/lu"; +import { + ArrowForwardIcon, + ChevronDownIcon, + SearchIcon, +} from "@chakra-ui/icons"; import info from "../../assets/info.png"; import redinfo from "../../assets/redinfo.png"; -import { Link, NavLink } from 'react-router-dom'; -import { CiCalendar } from 'react-icons/ci'; -import ReactApexChart from 'react-apexcharts'; -import { GoDotFill } from 'react-icons/go'; -import GC from '../../assets/GC.svg' -import GPR from '../../assets/GPR.svg' -import BV from '../../assets/BV.svg' +import { NavLink } from "react-router-dom"; +import { CiCalendar } from "react-icons/ci"; +import ReactApexChart from "react-apexcharts"; +import { GoDotFill } from "react-icons/go"; +import GC from "../../assets/GC.svg"; +import GPR from "../../assets/GPR.svg"; +import BV from "../../assets/BV.svg"; const GiftDashboard = () => { - const { digital } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [users, setusers] = useState(50); const [searchTerm, setSearchTerm] = useState(""); - const [chartData, setChartData] = useState({ series: [78, 68, 87], // Ensure these are numeric values, not strings options: { chart: { height: 390, - type: 'radialBar', + type: "radialBar", }, plotOptions: { radialBar: { @@ -44,14 +68,14 @@ const GiftDashboard = () => { endAngle: 270, hollow: { margin: 5, - size: '50%', - background: 'transparent', + size: "50%", + background: "transparent", image: undefined, }, track: { show: true, - background: '#f2f2f2', // Light background for the track - strokeWidth: '80%', // Thinner track for the bars + background: "#f2f2f2", // Light background for the track + strokeWidth: "80%", // Thinner track for the bars }, dataLabels: { name: { @@ -65,15 +89,20 @@ const GiftDashboard = () => { enabled: true, useSeriesColors: true, offsetX: -8, - fontSize: '12px', + fontSize: "12px", formatter: function (seriesName, opts) { - return seriesName + ': ' + opts.w.globals.series[opts.seriesIndex] + '%'; + return ( + seriesName + + ": " + + opts.w.globals.series[opts.seriesIndex] + + "%" + ); }, }, }, }, - colors: ['#C33FAD', '#3725EA', '#6311CB'], - labels: ['540', '300', '230'], + colors: ["#C33FAD", "#3725EA", "#6311CB"], + labels: ["540", "300", "230"], responsive: [ { breakpoint: 480, @@ -100,8 +129,6 @@ const GiftDashboard = () => { return () => clearTimeout(timer); }, []); // Empty dependency array means this effect runs once after the component mounts - - // ===============================[ Table Header ] const tableHeadRow = [ "Order ID", @@ -132,7 +159,7 @@ const GiftDashboard = () => { "Activation Status", ]; - // Voucher tab + // Voucher tab const voucherTableHeadRow = [ "Sr. no", @@ -183,15 +210,16 @@ const GiftDashboard = () => { item?.laodStatus === "Fully Loaded" ? "#027A48" : item?.laodStatus === "Inactive" - ? "red" - : "gray" + ? "red" + : "gray" } - border={`0px solid ${item?.laodStatus === "Fully Loaded" - ? "green" - : item?.status === "Inactive" + border={`0px solid ${ + item?.laodStatus === "Fully Loaded" + ? "green" + : item?.status === "Inactive" ? "red" : "gray" // default border color if status doesn't match any condition - }`} + }`} p={1} px={3} > @@ -349,7 +377,6 @@ const GiftDashboard = () => { "Sr. no": ( // - { item?.laodStatus === "Fully Loaded" ? "#027A48" : item?.laodStatus === "Inactive" - ? "red" - : "gray" + ? "red" + : "gray" } - border={`0px solid ${item?.laodStatus === "Fully Loaded" - ? "green" - : item?.status === "Inactive" + border={`0px solid ${ + item?.laodStatus === "Fully Loaded" + ? "green" + : item?.status === "Inactive" ? "red" : "gray" // default border color if status doesn't match any condition - }`} + }`} p={1} px={3} > {item?.laodStatus} ), - "Total employees": ( + "Total employees": ( { item?.laodStatus === "Fully Loaded" ? "#027A48" : item?.laodStatus === "Inactive" - ? "red" - : "gray" + ? "red" + : "gray" } - border={`0px solid ${item?.laodStatus === "Fully Loaded" - ? "green" - : item?.status === "Inactive" + border={`0px solid ${ + item?.laodStatus === "Fully Loaded" + ? "green" + : item?.status === "Inactive" ? "red" : "gray" // default border color if status doesn't match any condition - }`} + }`} p={1} px={3} > {item?.laodStatus} ), - "Total employees": ( + "Total employees": ( { ), - "Vouchers": ( + Vouchers: ( +4 new - + View ), - "Valuation": ( - - ₹ 20,000 - - ), - "Type": ( - - Admin - - ), - "Style": ( - - Admin - - ), - "Status": ( + Valuation: ₹ 20,000, + Type: Admin, + Style: Admin, + Status: ( { item?.status === "Distributed" ? "#00A438" : item?.status === "Pending" - ? "#EAB600" - : "red" - } - border={`1px solid ${item?.status === "Distributed" - ? "#00A438" - : item?.status === "Pending" ? "#EAB600" : "red" - }`} + } + border={`1px solid ${ + item?.status === "Distributed" + ? "#00A438" + : item?.status === "Pending" + ? "#EAB600" + : "red" + }`} bg={ item?.status === "Distributed" ? "#ebf8ef" : item?.status === "Pending" - ? "#fdf9eb" - : "#ffe5e5" + ? "#fdf9eb" + : "#ffe5e5" } > - - {item?.status || "N/A"} - + {item?.status || "N/A"} ), })); - - return ( - {/* Gift Card */} @@ -746,33 +768,35 @@ const GiftDashboard = () => { > - - - - Apply for gift card - - - + + + + Apply for gift card + + + + + - { - + Apply for brand voucher @@ -823,7 +845,8 @@ const GiftDashboard = () => { - { > - + Apply for GPR card @@ -874,7 +895,8 @@ const GiftDashboard = () => { - { {/*Application status */} - - {/* table 1 */} - + - - Application status + + Application status @@ -956,8 +984,7 @@ const GiftDashboard = () => { - - + { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Digital card { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Physical card { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Insta card { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > GPR card - - + @@ -1042,24 +1077,14 @@ const GiftDashboard = () => { {/* box 2 */} - + - Card distributions + + Card distributions + - - + { - + - - Gift Cards + + + Gift Cards + - 20% + + 20% + - + - - Gift Voucher + + + Gift Voucher + - 50% + + 50% + - + - - GPR Cards + + + GPR Cards + - 30% + + 30% + - - {/* last table */} - + My vouchers @@ -1197,10 +1244,8 @@ const GiftDashboard = () => { isLoading={isLoading} /> - + ); +}; - ) -} - -export default GiftDashboard \ No newline at end of file +export default GiftDashboard; diff --git a/src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx b/src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx new file mode 100644 index 0000000..4a21a4e --- /dev/null +++ b/src/Pages/OptiFiiTaxBenefit/BeinifitOverView.jsx @@ -0,0 +1,395 @@ +import { + Avatar, + Box, + Button, + Checkbox, + Divider, + Flex, + HStack, + Icon, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Radio, + Select, + Tag, + TagLabel, + Text, + VStack, +} from "@chakra-ui/react"; +import { + Tabs, + TabList, + Tab, + TabIndicator, + TabPanels, + TabPanel, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; +import womenpfp from "../../assets/womenpfp1.png"; +import blackmen from "../../assets/blackmen.png"; +import koreanpfp from "../../assets/koreanboi.png"; +import asian from "../../assets/asain.png"; +import { GoDotFill } from "react-icons/go"; +import goth from "../../assets/goth.png"; +import MiniHeader from "../../Components/MiniHeader"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import NormalTable from "../../Components/DataTable/NormalTable"; +import Food from "../../assets/icons/Food.png"; +import Fuel from "../../assets/icons/Fuel.png"; +import Gift from "../../assets/icons/gift.png"; +import books from "../../assets/icons/bookStack.png"; +import telecom from "../../assets/icons/telecom.png"; +import gadget from "../../assets/icons/gadget.png"; +import foods from "../../assets/icons/foods.png"; +import { + AddIcon, + CalendarIcon, + ChevronDownIcon, + EmailIcon, + SearchIcon, + ViewIcon, +} from "@chakra-ui/icons"; +import { + MdFilterList, + MdNotificationsNone, + MdOutlineHeadsetMic, +} from "react-icons/md"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { Link, NavLink, useNavigate } from "react-router-dom"; +import { FaArrowUpFromBracket } from "react-icons/fa6"; +import { LuListFilter } from "react-icons/lu"; +import { BsFilterRight } from "react-icons/bs"; +import pdfIcon from "../../assets/pdfIcon.svg"; +import ExcelIcon from "../../assets/ExcelIcon.svg"; + +const BenifitOverView = () => { + const [dash, setDash] = useState([ + { + id: 1, + wallet: "Food", + walletAmount: "₹ 70,000", + balanceRemaining: "₹ 20,000", + status: "Approved", + totalEmployees: 500, + users: 5, + icon: foods, + }, + { + id: 2, + wallet: "Fuel", + walletAmount: "₹ 50,000", + balanceRemaining: "₹ 15,000", + status: "Approved", + totalEmployees: 200, + users: 3, + icon: Fuel, + }, + { + id: 3, + wallet: "Books & Periodicals", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", + status: "Pending", + totalEmployees: 300, + users: 4, + icon: books, + }, + { + id: 4, + wallet: "Telecom", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", + status: "Pending", + totalEmployees: 300, + users: 4, + icon: telecom, + }, + { + id: 5, + wallet: "Books & periodicals", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", + status: "Pending", + totalEmployees: 300, + users: 4, + icon: books, + }, + { + id: 6, + wallet: "Learning & development", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", + status: "Pending", + totalEmployees: 300, + users: 4, + icon: books, + }, + { + id: 7, + wallet: "Gadget & equipment", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", + status: "Pending", + totalEmployees: 300, + users: 4, + icon: gadget, + }, + { + id: 8, + wallet: "Telecom", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", + status: "Pending", + totalEmployees: 300, + users: 4, + icon: telecom, + }, + { + id: 1, + wallet: "Food", + walletAmount: "₹ 70,000", + balanceRemaining: "₹ 20,000", + status: "Approved", + totalEmployees: 500, + users: 5, + icon: foods, + }, + ]); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [users, setusers] = useState(50); + const navigate = useNavigate(); + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + + return () => clearTimeout(timer); + }, []); + + // ===============================[ Table Header ] + + const dashHeadSecRow = [ + "Wallet Name", + "Total employees", + "Benefit limit", + "Remaining amount", + "Pending request", + ]; + + const dashSecArr = dash.map((item, index) => ({ + "Wallet Name": ( + + {/* + + */} + + + {item.wallet || "Food"} + + + ), + "Total employees": ( + + + + + + + + + +{users} + + + + ), + "Benefit limit": ( + + {item.walletAmount || 5000} + + ), + "Remaining amount": ( + + {item.balanceRemaining || "₹ 2000"} + + ), + "Pending request": ( + <> + + + ), + })); + + return ( + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + Show + + + + entries + + + + + + {/* } + title={"Pull back funds"} + /> */} + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + ); +}; + +export default BenifitOverView; diff --git a/src/Pages/SupportAndTicket/SupportAndTicket.jsx b/src/Pages/SupportAndTicket/SupportAndTicket.jsx index b7e8d17..6d0dc84 100644 --- a/src/Pages/SupportAndTicket/SupportAndTicket.jsx +++ b/src/Pages/SupportAndTicket/SupportAndTicket.jsx @@ -27,7 +27,7 @@ import MiniHeader from "../../Components/MiniHeader"; import GlobalStateContext from "../../Contexts/GlobalStateContext"; import NormalTable from "../../Components/DataTable/NormalTable"; import { OPACITY_ON_LOAD } from "../../Layout/animations"; -import { useNavigate } from "react-router-dom"; +import { NavLink, useNavigate } from "react-router-dom"; import ExcelIcon from "../../assets/ExcelIcon.svg"; import { GoDotFill } from "react-icons/go"; import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons"; @@ -39,12 +39,11 @@ import { BsFilterRight } from "react-icons/bs"; import { LuListFilter } from "react-icons/lu"; const SupportAndTicket = () => { - const navigate = useNavigate(); const { SupportAndTicket } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); - const { isOpen, onOpen, onClose } = useDisclosure() + const { isOpen, onOpen, onClose } = useDisclosure(); useEffect(() => { // Set isLoading to true @@ -61,12 +60,12 @@ const SupportAndTicket = () => { // ===============================[ Table Header ] const tableHeadRow = [ - // "Select", "Ticket ID", "Subject", "Status", "Last update", "Support", + "Action", ]; // const extractedArray = reportsHistory.map((item)=>({ })) @@ -83,8 +82,8 @@ const SupportAndTicket = () => { {item?.TicketID} ), - "Subject": item?.Subject, - "Status": ( + Subject: item?.Subject, + Status: ( { item?.Status === "In progress" ? "#ebf8ef" : item?.Status === "On hold" - ? "#f2f9ff" - : item?.Status === "Inactive" - ? "#ffeeed" - : "#f8d7da" // Default reddish background for unknown statuses + ? "#f2f9ff" + : item?.Status === "Inactive" + ? "#ffeeed" + : "#f8d7da" // Default reddish background for unknown statuses } rounded={"full"} color={ item?.Status === "In progress" ? "#00A438" : item?.Status === "On hold" - ? "#62B2FD" - : item?.Status === "Inactive" - ? "#FF2E23" - : "#721c24" // Default red text for unknown statuses + ? "#62B2FD" + : item?.Status === "Inactive" + ? "#FF2E23" + : "#721c24" // Default red text for unknown statuses } py={1.5} px={1} @@ -117,7 +116,21 @@ const SupportAndTicket = () => { ), "Last update": item?.LastUpdate, - "Support": item?.Support, + Support: item?.Support, + Action: ( + + + + ), })); return ( @@ -177,7 +190,8 @@ const SupportAndTicket = () => { } - title={"Add new ticket"} /> + title={"Add new ticket"} + />
@@ -259,46 +273,73 @@ const SupportAndTicket = () => { Requester - + Subject - + Type - + + + Priority - + + + Description -