Siddhesh.More/optifii-corporate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updste ysin

Browse Source
This commit is contained in:
YasinShaikh123
2024-09-18 13:20:35 +05:30
parent 6c7c19a826
commit 3d0223c732
3 changed files with 751 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/Components/Doughnut/BarCharts.jsx Normal file
View File

@@ -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 <Bar data={data} options={options} />;
};
export default BarChart;

102
src/Contexts/GlobalStateProvider.jsx
View File

@@ -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 (
<GlobalStateContext.Provider
value={{
@@ -728,6 +826,10 @@ const GlobalStateProvider = ({ children }) => {
setRoles,
employeePermissions,
setEmployeePermissions,
reimbursementStatus,
setReimbursementStatus,
advanceStatus,
setAdvanceStatus,
}}
>
{children}

779
src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx
View File

@@ -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": (
<Checkbox colorScheme="purple" value="1">
<Text
as={"span"}
display={"flex"}
gap={2}
alignItems={"center"}
fontSize={"xs"}
import { MdGroups } from "react-icons/md";
import { Link } from "react-router-dom";
import { FiBarChart2 } from "react-icons/fi";
import { WiTime4 } from "react-icons/wi";
import { MdArrowForward } from "react-icons/md";
import BarChart from "../../Components/Doughnut/BarCharts";
import { FaArrowUpFromBracket } from "react-icons/fa6";
import pdfIcon from "../../assets/pdfIcon.svg";
import ExcelIcon from "../../assets/ExcelIcon.svg";
import { AiOutlineCalendar } from "react-icons/ai";
import { IoMdArrowDropdown } from "react-icons/io";
import { BsFilterRight } from "react-icons/bs";
const OptiFiiExpenseDashboard = () => {
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": (
<Tag
my={1}
size={"sm"}
borderRadius="full"
color={
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
? "#3725EA"
: "red"
}
>
{item?.orderStatus}
</Tag>
),
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": (
<Tag
my={1}
size={"sm"}
borderRadius="full"
color={
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
? "#3725EA"
: "red"
}
>
{item?.orderStatus}
</Tag>
),
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 (
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
<Grid templateColumns="repeat(4, 1fr)" gap={6} mb={4}>
{requestItems.map((item, index) => (
<GridItem
key={index}
backgroundColor={item.backgroundColor}
borderRadius="xl"
>
{item?.id}
</Text>
</Checkbox>
),
"Name": item?.name,
"Email ID": item?.emailID,
"Department": item?.department,
"Role": item?.role,
"Permissions":(
<Box display={"flex"} alignItems={"center"}>
<Text color={"#6311CB"} bg='#dfdfdf' p={1} rounded={"md"} as={"span"} me={1}>{item?.permissions}</Text>
<Text as={"span"}><MdOutlineEdit color={"#6311CB"} fontSize={"18px"} /></Text>
</Box>
),
"Action": (
<Box
display={"flex"}
gap={1}
alignItems={"center"}
justifyContent={"center"}
>
Btn
</Box>
),
}));
return (
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
<SimpleGrid spacing={4} templateColumns='repeat(auto-fill, minmax(200px, 1fr))'>
<Card>
<CardHeader>
<Heading size='md'> Customer dashboard</Heading>
</CardHeader>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter>
<Text>View here</Text>
</CardFooter>
</Card>
<Card>
<CardHeader>
<Heading size='md'> Customer dashboard</Heading>
</CardHeader>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter>
<Text>View here</Text>
</CardFooter>
</Card>
<Card>
<CardHeader>
<Heading size='md'> Customer dashboard</Heading>
</CardHeader>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter>
<Text>View here</Text>
</CardFooter>
</Card>
</SimpleGrid>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
<Box bg="#fff" borderRadius="xl" p={4} h="115px">
<Stack direction={["column", "row"]} color={item.backgroundColor}>
<Text as="span">
<MdGroups />
</Text>
<Text fontSize="xs" mb={0} fontWeight={500}>
{item.title}
</Text>
</Stack>
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
{item.count}
</Text>
</Box>
<Stack
direction={["column", "row"]}
color="#fff"
justifyContent="center"
alignItems="center"
>
<Text as="span">
<MdGroups />
</Text>
<Text fontSize="sm" m={0} py={2}>
<Link mb={0}>{item.linkText}</Link>
</Text>
</Stack>
</GridItem>
))}
</Grid>
<Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
{gridItemsData.map((item, index) => (
<GridItem key={index} backgroundColor="#fff" borderRadius="xl">
<Box bg="#fff" borderRadius="xl" p={4}>
<Stack direction={["column", "row"]}>
<Box
backgroundColor={item.backgroundColor}
h="50px"
w="50px"
rounded="50px"
display="flex"
justifyContent="center"
alignItems="center"
>
<FiBarChart2 color={item.iconColor} fontSize="25px" />
</Box>
<Box fontSize="sm" mb={0} fontWeight={500}>
<Text mb={0} color="#A3AED0">
{item.title}
</Text>
<Text fontSize="xl">{item.count}</Text>
</Box>
</Stack>
<Button
fontSize="xl"
fontWeight={500}
mt={2}
w="100%"
display="flex"
justifyContent="space-between"
backgroundColor={item.buttonBg}
border={`1px solid ${item.buttonBorder}`}
>
{!item.hideBadge && (
<Text
display="flex"
alignItems="center"
color="#FCA100"
mb={0}
>
<WiTime4 />
<Text fontSize="xs" as="span" mx={2}>
{item.buttonText}
</Text>
<Badge
bg={item.badgeColor}
fontSize="8px"
color="white"
fontWeight={400}
p={1}
rounded="5px"
>
{item.badgeText}
</Badge>
</Text>
)}
<Text
as="span"
display="flex"
alignItems="center"
color={item.viewTextColor}
fontSize="sm"
gap={1}
>
View <MdArrowForward />
</Text>
</Button>
</Box>
</GridItem>
))}
</Grid>
<Box w={"100%"} rounded={"xl"} mb={4} pt={1} bg={"#fff"}>
<Box display={"flex"} justifyContent={"space-between"} px={4} pt={4}>
<Text as={"span"} fontSize={"sm"} color={"#474279"} fontWeight={500}>
Spend by categories
</Text>
<Box display={"flex"} gap={3}>
<Select placeholder="Travel" size={"sm"} rounded={"md"}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Select>
<Select placeholder="Monthly" size={"sm"} rounded={"md"}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Select>
</Box>
</Box>
<BarChart />
{/* </Box> */}
</Box>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
mb={5}
>
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<Heading fontSize={"md"} fontWeight={500}>
Reimbursement status
</Heading>
<Box display={"flex"} alignItems={"center"}>
<Menu>
<MenuButton
as={Button}
leftIcon={<FaArrowUpFromBracket />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
colorScheme="gray"
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Export
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>
<Image src={pdfIcon} me={2} /> Export as PDF
</MenuItem>
<MenuItem fontSize={"sm"}>
<Image src={ExcelIcon} me={2} /> Export as Excel
</MenuItem>
</MenuList>
</Menu>
<Box
fontSize={"sm"}
display={"flex"}
alignItems={"center"}
bg={"#F2EEF8"}
p={"6px 10px"}
rounded={"md"}
>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
gap={1}
>
<AiOutlineCalendar fontSize={"16px"} /> Time Period :
</Text>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
color={"#6311CB"}
fontWeight={500}
mx={2}
>
<Text as={"span"} me={5}>
Feb 20 - Jan 30, 2024{" "}
</Text>
<IoMdArrowDropdown />
</Text>
</Box>
</Box>
</Box>
</VStack>
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<Menu>
<MenuButton
as={Button}
leftIcon={<BsFilterRight fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Sort
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Descending</MenuItem>
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
<Box display={"flex"} gap={2}>
<InputGroup width={300} size="sm" ml={5}>
<InputLeftElement pointerEvents="none">
<SearchIcon color="gray.300" />
@@ -164,40 +432,187 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations";
onChange={(e) => setSearchTerm(e.target.value)}
/>
</InputGroup>
<Box>
<Menu>
<MenuButton
as={Button}
leftIcon={<LuListFilter fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Filter
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Descending</MenuItem>
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
<Menu>
<MenuButton
as={Button}
leftIcon={<LuListFilter fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Filter
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Descending</MenuItem>
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
</Box>
</Box>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<Heading fontSize={"md"} fontWeight={500}>
Advance expense status
</Heading>
<Box display={"flex"} alignItems={"center"}>
<Menu>
<MenuButton
as={Button}
leftIcon={<FaArrowUpFromBracket />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
colorScheme="gray"
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Export
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>
<Image src={pdfIcon} me={2} /> Export as PDF
</MenuItem>
<MenuItem fontSize={"sm"}>
<Image src={ExcelIcon} me={2} /> Export as Excel
</MenuItem>
</MenuList>
</Menu>
<Box
fontSize={"sm"}
display={"flex"}
alignItems={"center"}
bg={"#F2EEF8"}
p={"6px 10px"}
rounded={"md"}
>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
gap={1}
>
<AiOutlineCalendar fontSize={"16px"} /> Time Period :
</Text>
<Text
as={"span"}
display={"flex"}
alignItems={"center"}
color={"#6311CB"}
fontWeight={500}
mx={2}
>
<Text as={"span"} me={5}>
Feb 20 - Jan 30, 2024{" "}
</Text>
<IoMdArrowDropdown />
</Text>
</Box>
</Box>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
</Box>
</VStack>
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
w={"100%"}
>
<Menu>
<MenuButton
as={Button}
leftIcon={<BsFilterRight fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Sort
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Descending</MenuItem>
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
<Box display={"flex"} gap={2}>
<InputGroup width={300} size="sm" ml={5}>
<InputLeftElement pointerEvents="none">
<SearchIcon color="gray.300" />
</InputLeftElement>
<Input
type="search"
placeholder="Search"
rounded="md"
focusBorderColor="#3725EA"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</InputGroup>
<Menu>
<MenuButton
as={Button}
leftIcon={<LuListFilter fontSize={"16px"} />}
rightIcon={<ChevronDownIcon />}
fontSize={"xs"}
color={"gray.700"}
variant="outline"
size={"sm"}
me={2}
>
Filter
</MenuButton>
<MenuList>
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
<MenuItem fontSize={"sm"}>Descending</MenuItem>
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
</MenuList>
</Menu>
</Box>
</Box>
</VStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArrayAdvance}
isLoading={isLoading}
/>
</Box>
);
};
export default OptiFiiExpenseDashboard;
</Box>
);
};
export default OptiFiiExpenseDashboard;