From 3d0223c73244275a0e7b9c081508ea97a1642eea Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:20:35 +0530 Subject: [PATCH] updste ysin --- src/Components/Doughnut/BarCharts.jsx | 52 ++ src/Contexts/GlobalStateProvider.jsx | 102 +++ .../OptiFiiExpenseDashboard.jsx | 779 ++++++++++++++---- 3 files changed, 751 insertions(+), 182 deletions(-) create mode 100644 src/Components/Doughnut/BarCharts.jsx diff --git a/src/Components/Doughnut/BarCharts.jsx b/src/Components/Doughnut/BarCharts.jsx new file mode 100644 index 0000000..25d9f3c --- /dev/null +++ b/src/Components/Doughnut/BarCharts.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { Bar } from 'react-chartjs-2'; +import { Chart as ChartJS, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js'; + +// Register components in Chart.js +ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend); + +const BarChart = () => { + // Data for the bar chart + const data = { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul','Aug','Sept','Oct','Nov','Dec'], + datasets: [ + { + label: 'Sales', + data: [10, 40, 20, 50, 25, 45,30, 10, 30, 50, 25, 60], + backgroundColor: '#6311CB', + borderColor: 'rgba(75, 192, 192, 1)', + borderWidth: 1, + borderRadius:8 + }, + ], + }; + + // Options for the bar chart + const options = { + scales: { + y: { + beginAtZero: true, + ticks: { + // Add 'k' to the labels + callback: function (value) { + return value + 'k'; + }, + }, + }, + }, + plugins: { + tooltip: { + callbacks: { + // Customize the tooltip label + label: function (context) { + return context.raw + 'k'; + }, + }, + }, + }, + }; + + return ; +}; + +export default BarChart; diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index fb99af6..f916e1a 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -713,6 +713,104 @@ const GlobalStateProvider = ({ children }) => { ] ) + const [ reimbursementStatus, setReimbursementStatus ] = useState([ + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Approved", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Approved", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Approved", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Fully reimbursed", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Fully reimbursed", + "approver": "Sales", + "disburser":"Sales", + }, + ] + ) + + const [ advanceStatus, setAdvanceStatus ] = useState([ + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Approved", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Approved", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Approved", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Fully reimbursed", + "approver": "Sales", + "disburser":"Sales", + }, + { + "reportName": "Jan 12, 2022", + "reportBy":"in***@wdimails.com", + "reportAmount": "+91 ***8451254", + "dateTime": "Sales", + "orderStatus": "Fully reimbursed", + "approver": "Sales", + "disburser":"Sales", + }, + ] + ) + return ( { setRoles, employeePermissions, setEmployeePermissions, + reimbursementStatus, + setReimbursementStatus, + advanceStatus, + setAdvanceStatus, }} > {children} diff --git a/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx index f2dc4a1..2057af2 100644 --- a/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx +++ b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx @@ -1,156 +1,424 @@ import { - Box, - Button, - Card, - CardBody, - CardFooter, - CardHeader, - Checkbox, - Heading, - Icon, - Input, - InputGroup, - InputLeftElement, - Menu, - MenuButton, - MenuItem, - MenuList, - Radio, - SimpleGrid, - Text, - useDisclosure, - VStack, - } from "@chakra-ui/react"; - import React, { useContext, useEffect, useState } from "react"; - import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons"; - import { LuListFilter } from "react-icons/lu"; - import NormalTable from "../../Components/DataTable/NormalTable"; - import { MdOutlineEdit } from "react-icons/md"; + Badge, + Box, + Button, + Checkbox, + Grid, + GridItem, + Heading, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Select, + Stack, + Tag, + Text, + VStack, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; +import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons"; +import { LuListFilter } from "react-icons/lu"; +import NormalTable from "../../Components/DataTable/NormalTable"; +import { MdOutlineEdit } from "react-icons/md"; import GlobalStateContext from "../../Contexts/GlobalStateContext"; import { OPACITY_ON_LOAD } from "../../Layout/animations"; - - const OptiFiiExpenseDashboard = () => { - const { employeePermissions } = useContext(GlobalStateContext); - const [isLoading, setIsLoading] = useState(false); - const [searchTerm, setSearchTerm] = useState(""); - const [isSwitchOn, setIsSwitchOn] = useState(true); - - 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 = [ - "Employee ID", - "Name", - "Email ID", - "Department", - "Role", - "Permissions", - "Action", - ]; - - // const extractedArray = reportsHistory.map((item)=>({ })) - - const extractedArray = employeePermissions.map((item, index) => ({ - "Employee ID": ( - - { + const { reimbursementStatus } = useContext(GlobalStateContext); + const { advanceStatus } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [isSwitchOn, setIsSwitchOn] = useState(true); + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); // Set isLoading to false after 3 seconds + }, 500); + + // Cleanup the timer when the component unmounts or when the useEffect re-runs + return () => clearTimeout(timer); + }, []); // Empty dependency array means this effect runs once after the component mounts + + // ===============================[ Table Header ] + const tableHeadRow = [ + "Report name", + "Report by", + "Report amount", + "Date & time", + "Order Status", + "Approver", + "Disburser", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + + const extractedArray = reimbursementStatus.map((item, index) => ({ + "Report name": item?.reportName, + "Report by": item?.reportBy, + "Report amount": item?.reportAmount, + "Date & time": item?.dateTime, + "Order Status": ( + + {item?.orderStatus} + + ), + Approver: item?.approver, + Disburser: item?.disburser, + })); + + const extractedArrayAdvance = advanceStatus.map((item, index) => ({ + "Report name": item?.reportName, + "Report by": item?.reportBy, + "Report amount": item?.reportAmount, + "Date & time": item?.dateTime, + "Order Status": ( + + {item?.orderStatus} + + ), + Approver: item?.approver, + Disburser: item?.disburser, + })); + + const requestItems = [ + { + backgroundColor: "#3725EA", + title: "REIMBURSEMENT REQUEST", + count: 200, + linkText: "View Requests", + }, + { + backgroundColor: "#C33FAD", + title: "ADVANCE EXPENSE REQUEST", + count: 200, + linkText: "View Requests", + }, + { + backgroundColor: "#3725EA", + title: "WALLET APPROVAL REQUEST", + count: 200, + linkText: "View Requests", + }, + ]; + + const gridItemsData = [ + { + backgroundColor: "#218F001A", + iconColor: "#00A438", + title: "Bills for approval", + count: 50, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "Pending requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + { + backgroundColor: "#218F001A", + iconColor: "#00A438", + title: "Bills for pending", + count: 50, + buttonBg: "#FCA1001A", + buttonBorder: "#FCA100", + buttonText: "Pending requests", + badgeText: "20 New", + badgeColor: "#3725EA", + viewTextColor: "#6311CB", + }, + { + backgroundColor: "#218F001A", + iconColor: "#00A438", + title: "Active expense wallets", + count: 50, + buttonBg: "#3725EA1A", + buttonBorder: "#3725EA", + buttonText: "View", + viewTextColor: "#6311CB", + hideBadge: true, + }, + ]; + + return ( + + + {requestItems.map((item, index) => ( + - {item?.id} - - - ), - "Name": item?.name, - "Email ID": item?.emailID, - "Department": item?.department, - "Role": item?.role, - "Permissions":( - - {item?.permissions} - - - ), - "Action": ( - - Btn - - ), - })); - - return ( - - - - - Customer dashboard - - - View a summary of all your customers over the last month. - - - View here - - - - - Customer dashboard - - - View a summary of all your customers over the last month. - - - View here - - - - - Customer dashboard - - - View a summary of all your customers over the last month. - - - View here - - - - - - + + + + + + {item.title} + + + + {item.count} + + + + + + + + {item.linkText} + + + + ))} + + + {gridItemsData.map((item, index) => ( + + + + + + + + + {item.title} + + {item.count} + + + + + + ))} + + + + + Spend by categories + + + + + + + + {/* */} + + + + + + Reimbursement status + + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + + Time Period : + + + + Feb 20 - Jan 30, 2024{" "} + + + + + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + @@ -164,40 +432,187 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations"; onChange={(e) => setSearchTerm(e.target.value)} /> - - - } - rightIcon={} - fontSize={"xs"} - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} - > - Filter - - - Ascending - Descending - Recently Viewed - Recently Added - - + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + + + + Advance expense status + + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + + Time Period : + + + + Feb 20 - Jan 30, 2024{" "} + + + - - - + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + - ); - }; - - export default OptiFiiExpenseDashboard; - \ No newline at end of file + + ); +}; + +export default OptiFiiExpenseDashboard;