Benefit OverView
This commit is contained in:
npcdazai
@@ -1294,7 +1294,7 @@ const GlobalStateProvider = ({ children }) => {
|
||||
reportBy: "in***@wdimails.com",
|
||||
reportAmount: "+91 ***8451254",
|
||||
dateTime: "Sales",
|
||||
orderStatus: "Approved",
|
||||
orderStatus: "Fully reimbursed",
|
||||
approver: "Sales",
|
||||
disburser: "Sales",
|
||||
},
|
||||
@@ -1304,7 +1304,7 @@ const GlobalStateProvider = ({ children }) => {
|
||||
reportBy: "in***@wdimails.com",
|
||||
reportAmount: "+91 ***8451254",
|
||||
dateTime: "Sales",
|
||||
orderStatus: "Approved",
|
||||
orderStatus: "Fully reimbursed",
|
||||
approver: "Sales",
|
||||
disburser: "Sales",
|
||||
},
|
||||
@@ -1324,7 +1324,7 @@ const GlobalStateProvider = ({ children }) => {
|
||||
reportBy: "in***@wdimails.com",
|
||||
reportAmount: "+91 ***8451254",
|
||||
dateTime: "Sales",
|
||||
orderStatus: "Fully reimbursed",
|
||||
orderStatus: "Approved",
|
||||
approver: "Sales",
|
||||
disburser: "Sales",
|
||||
},
|
||||
|
||||
@@ -137,7 +137,7 @@ const DashboardLayout = ({ isOnline }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box height={"100vh"} className="gilroy">
|
||||
<Box height={"100vh"} overflow="hidden" className="gilroy">
|
||||
<HeaderMain
|
||||
isDrawerOpen={isDrawerOpen}
|
||||
logOutHandler={logOutHandler}
|
||||
|
||||
@@ -25,11 +25,7 @@ import React, { useContext, useEffect, useState } from "react";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import {
|
||||
AddIcon,
|
||||
ChevronDownIcon,
|
||||
SearchIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
|
||||
import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
|
||||
import { FaRegUser } from "react-icons/fa";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
@@ -41,7 +37,7 @@ import SecondaryButton from "../../Components/Buttons/SecondaryButton";
|
||||
import { LuEye, LuListFilter } from "react-icons/lu";
|
||||
import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
|
||||
import pdfIcon from "../../assets/pdfIcon.svg";
|
||||
import ExcelIcon from "../../assets/ExcelIcon.svg"
|
||||
import ExcelIcon from "../../assets/ExcelIcon.svg";
|
||||
import { HiOutlineUserGroup } from "react-icons/hi";
|
||||
import EmployeesAddModal from "./EmployeesAddModal";
|
||||
import EmployeesEditModal from "./EmployeesEditModal";
|
||||
@@ -51,6 +47,7 @@ const Employees = () => {
|
||||
const { employees } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedRadio, setSelectedRadio] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {
|
||||
@@ -101,26 +98,19 @@ const Employees = () => {
|
||||
|
||||
const extractedArray = employees.map((item, index) => ({
|
||||
"Emp ID": (
|
||||
<Checkbox colorScheme="purple" value="1">
|
||||
<Text
|
||||
as={"span"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item?.EmpID}
|
||||
</Text>
|
||||
</Checkbox>
|
||||
<Text as={"span"} fontSize={"xs"}>
|
||||
{item?.EmpID}
|
||||
</Text>
|
||||
),
|
||||
"Name": (
|
||||
Name: (
|
||||
<HStack>
|
||||
<Image
|
||||
borderRadius='full'
|
||||
boxSize='40px'
|
||||
src='https://bit.ly/dan-abramov'
|
||||
alt='Dan Abramov'
|
||||
borderRadius="full"
|
||||
boxSize="40px"
|
||||
src="https://bit.ly/dan-abramov"
|
||||
alt="Dan Abramov"
|
||||
/>
|
||||
<Text mb={0}>
|
||||
{item?.Name}
|
||||
</Text>
|
||||
<Text mb={0}>{item?.Name}</Text>
|
||||
</HStack>
|
||||
),
|
||||
"Email Address": item?.emailAddress,
|
||||
@@ -137,15 +127,16 @@ const Employees = () => {
|
||||
item?.status === "Active"
|
||||
? "green"
|
||||
: item?.status === "Inactive"
|
||||
? "red"
|
||||
: "gray"
|
||||
? "red"
|
||||
: "gray"
|
||||
}
|
||||
border={`1px solid ${item?.status === "Active"
|
||||
? "green"
|
||||
: item?.status === "Inactive"
|
||||
border={`1px solid ${
|
||||
item?.status === "Active"
|
||||
? "green"
|
||||
: item?.status === "Inactive"
|
||||
? "red"
|
||||
: "gray" // default border color if status doesn't match any condition
|
||||
}`}
|
||||
}`}
|
||||
p={1}
|
||||
px={3}
|
||||
>
|
||||
@@ -157,7 +148,7 @@ const Employees = () => {
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
aria-label='Options'
|
||||
aria-label="Options"
|
||||
icon={<BsThreeDotsVertical />}
|
||||
bg={"transparent"}
|
||||
/>
|
||||
@@ -183,7 +174,7 @@ const Employees = () => {
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
color={"#4D4D4D"}
|
||||
onClick={()=>navigate("/employees/view")}
|
||||
onClick={() => navigate("/employees/view")}
|
||||
>
|
||||
View
|
||||
</MenuItem>
|
||||
@@ -241,12 +232,35 @@ const Employees = () => {
|
||||
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>
|
||||
<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>
|
||||
<Menu>
|
||||
<PrimaryButton as={MenuButton} leftIcon={<AddIcon />} title={"Add Employee"} />
|
||||
{selectedRadio.length > 2 ? (
|
||||
<Button
|
||||
border={"1px solid #EE1B24"}
|
||||
bgColor="#ffff"
|
||||
fontSize="x-small"
|
||||
py={0}
|
||||
color="#EE1B24"
|
||||
h="30px"
|
||||
_hover={{bgColor:"#ffff"}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
) : (
|
||||
<PrimaryButton
|
||||
as={MenuButton}
|
||||
leftIcon={<AddIcon />}
|
||||
title={"Add Employee"}
|
||||
/>
|
||||
)}
|
||||
|
||||
<MenuList>
|
||||
<MenuItem
|
||||
icon={<FaRegUser size={14} />}
|
||||
@@ -328,6 +342,9 @@ const Employees = () => {
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
selectedRadio={selectedRadio}
|
||||
setSelectedRadio={setSelectedRadio}
|
||||
showRadioButton={true}
|
||||
/>
|
||||
</Box>
|
||||
{/* Call EmployeesAddModal */}
|
||||
@@ -337,8 +354,10 @@ const Employees = () => {
|
||||
<EmployeesEditModal isOpen={isEditOpen} onClose={onEditClose} />
|
||||
|
||||
{/* Call EmployeesEditModal */}
|
||||
<EmployeesAddMultipleModal isOpen={isMultipleOpen} onClose={onMultipleClose} />
|
||||
|
||||
<EmployeesAddMultipleModal
|
||||
isOpen={isMultipleOpen}
|
||||
onClose={onMultipleClose}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -94,7 +94,7 @@ const EmployeesView = () => {
|
||||
{item.date || 'Jun 10, 2024'}
|
||||
</Text>
|
||||
),
|
||||
'Order Status': (
|
||||
'Status': (
|
||||
<Tag
|
||||
my={1}
|
||||
size="sm"
|
||||
@@ -325,12 +325,13 @@ const EmployeesView = () => {
|
||||
/>
|
||||
</HStack>
|
||||
<Box>
|
||||
<Tabs position='relative' variant='unstyled'>
|
||||
<Tabs position='relative' variant='unstyled'>
|
||||
<TabList>
|
||||
<Tab
|
||||
color={"#313039"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
mr={6}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}>
|
||||
@@ -340,6 +341,7 @@ const EmployeesView = () => {
|
||||
color={"#313039"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
mr={6}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}>Benefit</Tab>
|
||||
@@ -347,9 +349,10 @@ const EmployeesView = () => {
|
||||
color={"#313039"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
mr={6}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}>Gifts</Tab>
|
||||
}}>Gift & reward</Tab>
|
||||
</TabList>
|
||||
<TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
|
||||
<TabPanels>
|
||||
@@ -471,7 +474,7 @@ const EmployeesView = () => {
|
||||
</VStack>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
emptyMessage={`We don't have any reports `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
|
||||
@@ -119,7 +119,7 @@ const ReimbursementRequest = () => {
|
||||
<MdOutlineNoFood color="#3725EA" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"sm"} mb={1}>
|
||||
<Text color={"#667085"} fontWeight={600} fontSize={"sm"} mb={1}>
|
||||
Food
|
||||
</Text>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={0}>
|
||||
@@ -128,8 +128,8 @@ const ReimbursementRequest = () => {
|
||||
</Box>
|
||||
</HStack>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Created by - Reethik Thota
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={600} mb={1}>
|
||||
Wallet Amount
|
||||
</Text>
|
||||
<Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
|
||||
₹ 50,000
|
||||
|
||||
@@ -31,9 +31,53 @@ import SecondaryButton from "../../Components/Buttons/SecondaryButton";
|
||||
import { TiTick } from "react-icons/ti";
|
||||
import { ImCancelCircle } from "react-icons/im";
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
id:1,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Dine in",
|
||||
category :"Food",
|
||||
paymentmethod :"Expense card",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Airtel postpaid",
|
||||
category :"telecom",
|
||||
paymentmethod :"Expense card",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Lorem ipsum dolor adipiscing elit.",
|
||||
category :"Fuel",
|
||||
paymentmethod :"Expense card",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Airtel postpaid",
|
||||
category :"Telecom",
|
||||
paymentmethod :"Cash",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Lorem ipsum dolor adipiscing elit.",
|
||||
category :"Fuel",
|
||||
paymentmethod :"Cash",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
]
|
||||
|
||||
const ReimbursementRequestView = () => {
|
||||
const [alertStatus, setAlertStatus] = useState(null);
|
||||
|
||||
|
||||
const handleApprove = () => {
|
||||
setAlertStatus("success");
|
||||
};
|
||||
@@ -61,19 +105,17 @@ const ReimbursementRequestView = () => {
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = [
|
||||
"Sr. No",
|
||||
"Name",
|
||||
"Email Address",
|
||||
"Mobile number",
|
||||
"Grade",
|
||||
"Department",
|
||||
"Role",
|
||||
"Date & time",
|
||||
"Merchant",
|
||||
"Category",
|
||||
"Payment mode",
|
||||
"Reimburse Amount",
|
||||
"Bills",
|
||||
"Action",
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
const extractedArray = employees.map((item, index) => ({
|
||||
const extractedArray = tableData.map((item, index) => ({
|
||||
"Sr. No": (
|
||||
<Text
|
||||
as={"span"}
|
||||
@@ -85,12 +127,11 @@ const ReimbursementRequestView = () => {
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
Name: item?.Name,
|
||||
"Email Address": item?.emailAddress,
|
||||
"Mobile number": item?.mobileNumber,
|
||||
Grade: item?.Grade,
|
||||
Department: item?.Department,
|
||||
Role: item?.Role,
|
||||
"Date & time": item?.datetime,
|
||||
"Merchant": item?.merchant,
|
||||
"Category": item?.category,
|
||||
"Payment mode": item?.paymentmethod,
|
||||
"Reimburse Amount": item?.reimburseAmount,
|
||||
Bills: (
|
||||
<HStack>
|
||||
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
|
||||
|
||||
@@ -176,8 +176,8 @@ const BenifitOverView = () => {
|
||||
"Sr No",
|
||||
"Wallet Name",
|
||||
"Total employees",
|
||||
"Benefit limit",
|
||||
"Remaining amount",
|
||||
"Amount in card",
|
||||
"Pending amount ",
|
||||
"Pending request",
|
||||
];
|
||||
|
||||
@@ -225,18 +225,19 @@ const BenifitOverView = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
"Benefit limit": (
|
||||
"Amount in card": (
|
||||
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
|
||||
{item.walletAmount || 5000}
|
||||
</Text>
|
||||
),
|
||||
"Remaining amount": (
|
||||
"Pending amount ": (
|
||||
<Text key={`balance-${index}`} mb={0} fontSize="xs">
|
||||
{item.balanceRemaining || "₹ 2000"}
|
||||
</Text>
|
||||
),
|
||||
"Pending request": (
|
||||
<>
|
||||
<NavLink to="/dashboard/beinefit-overview/benefit-request">
|
||||
<Button
|
||||
bgColor="#6311CB"
|
||||
color="#fff"
|
||||
@@ -247,6 +248,7 @@ const BenifitOverView = () => {
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</NavLink>
|
||||
</>
|
||||
),
|
||||
}));
|
||||
|
||||
386
src/Pages/OptiFiiTaxBenefit/BenefitOverviewView.jsx
Normal file
386
src/Pages/OptiFiiTaxBenefit/BenefitOverviewView.jsx
Normal file
@@ -0,0 +1,386 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
VStack,
|
||||
Icon,
|
||||
Checkbox,
|
||||
Tag,
|
||||
TagLabel,
|
||||
Text,
|
||||
Image,
|
||||
useDisclosure,
|
||||
Alert,
|
||||
CloseButton,
|
||||
AlertDescription,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import { RiDeleteBin5Line } from "react-icons/ri";
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { LiaFileInvoiceSolid } from "react-icons/lia";
|
||||
import { PiReceipt } from "react-icons/pi";
|
||||
import { MdOutlineNoFood } from "react-icons/md";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import { IoMdCheckmark } from "react-icons/io";
|
||||
import { RxCross2 } from "react-icons/rx";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
|
||||
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
|
||||
import { TiTick } from "react-icons/ti";
|
||||
import { ImCancelCircle } from "react-icons/im";
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
id:1,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Dine in",
|
||||
category :"Food",
|
||||
paymentmethod :"Expense card",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Airtel postpaid",
|
||||
category :"telecom",
|
||||
paymentmethod :"Expense card",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Lorem ipsum dolor adipiscing elit.",
|
||||
category :"Fuel",
|
||||
paymentmethod :"Expense card",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Airtel postpaid",
|
||||
category :"Telecom",
|
||||
paymentmethod :"Cash",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
datetime:"Jan 12, 2022, 10 am",
|
||||
merchant:"Lorem ipsum dolor adipiscing elit.",
|
||||
category :"Fuel",
|
||||
paymentmethod :"Cash",
|
||||
reimburseAmount :"₹ 5000",
|
||||
},
|
||||
]
|
||||
|
||||
const ReimbursementRequestView = () => {
|
||||
const [alertStatus, setAlertStatus] = useState(null);
|
||||
|
||||
|
||||
const handleApprove = () => {
|
||||
setAlertStatus("success");
|
||||
};
|
||||
|
||||
const handleReject = () => {
|
||||
setAlertStatus("error");
|
||||
};
|
||||
|
||||
const { employees } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Set isLoading to true
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate a 3-second delay
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false); // Set isLoading to false after 3 seconds
|
||||
}, 500);
|
||||
|
||||
// Cleanup the timer when the component unmounts or when the useEffect re-runs
|
||||
return () => clearTimeout(timer);
|
||||
}, []); // Empty dependency array means this effect runs once after the component mounts
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = [
|
||||
"Sr. No",
|
||||
"Date & time",
|
||||
"Merchant",
|
||||
"Category",
|
||||
"Payment mode",
|
||||
"Reimburse Amount",
|
||||
"Bills",
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
const extractedArray = tableData.map((item, index) => ({
|
||||
"Sr. No": (
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
"Date & time": item?.datetime,
|
||||
"Merchant": item?.merchant,
|
||||
"Category": item?.category,
|
||||
"Payment mode": item?.paymentmethod,
|
||||
"Reimburse Amount": item?.reimburseAmount,
|
||||
Bills: (
|
||||
<HStack>
|
||||
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
|
||||
<LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
|
||||
</Box>
|
||||
<Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
|
||||
Invoice243
|
||||
</Text>
|
||||
</HStack>
|
||||
),
|
||||
Action: (
|
||||
<HStack>
|
||||
<Button
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
fontSize="small"
|
||||
fontWeight={400}
|
||||
p={2}
|
||||
bg={"#00A43824"}
|
||||
rounded={"medium"}
|
||||
borderRadius="7.25px"
|
||||
border="1px solid #00A438"
|
||||
color="#00A438"
|
||||
>
|
||||
<TiTick color="#00A438" />
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
fontSize="small"
|
||||
fontWeight={400}
|
||||
p={2}
|
||||
bg={"#EE1B241A"}
|
||||
border="1px solid #EE1B24"
|
||||
borderRadius="7.25px"
|
||||
color="#EE1B24"
|
||||
gap={1}
|
||||
>
|
||||
<ImCancelCircle color="red" />
|
||||
Reject
|
||||
</Button>
|
||||
</HStack>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
|
||||
{/* <MiniHeader
|
||||
title={"My Requests"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
backButton={true}
|
||||
/> */}
|
||||
{alertStatus === "success" && (
|
||||
<Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
|
||||
<Box>
|
||||
<HStack>
|
||||
<IoMdCheckmark size={16} />
|
||||
<Text fontSize="xs" mb={0} fontWeight={500}>
|
||||
Approved by giftryt
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{alertStatus === "error" && (
|
||||
<Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
|
||||
<Box>
|
||||
<HStack>
|
||||
<RxCross2 size={16} />
|
||||
<Text fontSize="xs" mb={0} fontWeight={500}>
|
||||
Rejected by giftryt
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
|
||||
<HStack width={"100%"} mb={8}>
|
||||
<Box
|
||||
bg={"#e5f6eb"}
|
||||
border={"1px solid #00A438"}
|
||||
px={4}
|
||||
py={1}
|
||||
rounded={"md"}
|
||||
h={14}
|
||||
flex={1}
|
||||
>
|
||||
<HStack>
|
||||
<IoMdCheckmark color="#00A438" />
|
||||
<Text color={"#00A438"} fontSize={"sm"} mb={1} fontWeight={500}>
|
||||
Approved
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={400} mb={0}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</Box>
|
||||
<HStack
|
||||
bg={"#00A438"}
|
||||
px={4}
|
||||
py={1}
|
||||
rounded={"md"}
|
||||
h={14}
|
||||
justifyContent={"start"}
|
||||
flex={1}
|
||||
>
|
||||
<Text color={"#fff"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
In progress
|
||||
</Text>
|
||||
</HStack>
|
||||
<VStack
|
||||
bg={"#f9f9f9"}
|
||||
px={4}
|
||||
py={1}
|
||||
rounded={"md"}
|
||||
h={14}
|
||||
spacing={1}
|
||||
alignItems={"start"}
|
||||
flex={1}
|
||||
>
|
||||
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
Pending
|
||||
</Text>
|
||||
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</VStack>
|
||||
<VStack
|
||||
bg={"#f9f9f9"}
|
||||
px={4}
|
||||
py={1}
|
||||
rounded={"md"}
|
||||
h={14}
|
||||
spacing={1}
|
||||
alignItems={"start"}
|
||||
flex={1}
|
||||
>
|
||||
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
Pending
|
||||
</Text>
|
||||
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</VStack>
|
||||
<VStack
|
||||
bg={"#f9f9f9"}
|
||||
px={4}
|
||||
py={1}
|
||||
rounded={"md"}
|
||||
h={14}
|
||||
spacing={1}
|
||||
alignItems={"start"}
|
||||
flex={1}
|
||||
>
|
||||
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
Pending
|
||||
</Text>
|
||||
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
<HStack justifyContent={"space-between"} mb={6}>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Report number : 1254587841
|
||||
</Text>
|
||||
<Text color={"#252C32"} fontSize={"sm"} mb={0} fontWeight={500}>
|
||||
Reimbursement report 2024
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Amount to be reimbursed
|
||||
</Text>
|
||||
<Text color={"#252C32"} fontSize={"sm"} fontWeight={500} mb={0}>
|
||||
₹ 50,000
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<HStack justifyContent={"space-between"} mb={6}>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
|
||||
Submitted by
|
||||
</Text>
|
||||
<HStack mb={4} alignItems={"start"}>
|
||||
<Image
|
||||
borderRadius="full"
|
||||
boxSize="40px"
|
||||
src="https://bit.ly/dan-abramov"
|
||||
alt="Dan Abramov"
|
||||
/>
|
||||
<Box>
|
||||
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
|
||||
Pooja Shah
|
||||
</Text>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
poojashah @wdipl.com
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<Text color={"#252C32"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
Duration - 10 June - 28 June
|
||||
</Text>
|
||||
</Box>
|
||||
<Box textAlign={"end"}>
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
|
||||
Pending approval
|
||||
</Text>
|
||||
<HStack mb={4} alignItems={"start"}>
|
||||
<Box>
|
||||
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
|
||||
Manav sain
|
||||
</Text>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
manavsain@wdipl.com
|
||||
</Text>
|
||||
</Box>
|
||||
<Image
|
||||
borderRadius="full"
|
||||
boxSize="40px"
|
||||
src="https://bit.ly/dan-abramov"
|
||||
alt="Dan Abramov"
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
showRadioButton={true}
|
||||
/>
|
||||
|
||||
<HStack justifyContent={"end"} my={4} spacing={4}>
|
||||
<SecondaryButton title="Reject" onClick={handleReject} />
|
||||
<PrimaryButton title="Approve" onClick={handleApprove} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReimbursementRequestView;
|
||||
|
||||
157
src/Pages/OptiFiiTaxBenefit/BenefitViewFood.jsx
Normal file
157
src/Pages/OptiFiiTaxBenefit/BenefitViewFood.jsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Icon,
|
||||
Checkbox,
|
||||
Tag,
|
||||
TagLabel,
|
||||
Text,
|
||||
Image,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import { MdOutlineNoFood } from "react-icons/md";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
|
||||
|
||||
const ReimbursementRequest = () => {
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { employees } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Set isLoading to true
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate a 3-second delay
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false); // Set isLoading to false after 3 seconds
|
||||
}, 500);
|
||||
|
||||
// Cleanup the timer when the component unmounts or when the useEffect re-runs
|
||||
return () => clearTimeout(timer);
|
||||
}, []); // Empty dependency array means this effect runs once after the component mounts
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = [
|
||||
"Sr. No",
|
||||
"Report name",
|
||||
"Report by",
|
||||
"Report amount",
|
||||
"Date & time",
|
||||
"Approver",
|
||||
"Disburser",
|
||||
"Action"
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
const extractedArray = employees.map((item, index) =>
|
||||
({
|
||||
"Sr. No": (
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
"Report name": (
|
||||
<Text color="#3725EA" fontSize="small" fontWeight={400}>{item?.reportname}</Text>
|
||||
),
|
||||
// "Report by": item?.emailAddress,
|
||||
"Report amount": item?.reportamount,
|
||||
"Date & time": item?.datetime,
|
||||
"Approver": item?.approver,
|
||||
"Disburser": item?.disburser,
|
||||
"Report by": (
|
||||
<HStack>
|
||||
<Image
|
||||
borderRadius='full'
|
||||
boxSize='40px'
|
||||
src='https://bit.ly/dan-abramov'
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Pooja Shah
|
||||
</Text>
|
||||
</HStack>
|
||||
),
|
||||
Action: (
|
||||
<NavLink to="/dashboard/beinefit-overview/benefit-request/beinefit-overview-view">
|
||||
<Button
|
||||
_hover={{ color: "gray.900", bg: "gray.300" }}
|
||||
transition={"0.3s"}
|
||||
onClick={() => navigate("/reimbursement-request-view")}
|
||||
size={"xs"}
|
||||
bg={"#6311CB"}
|
||||
py={1}
|
||||
fontWeight={400}
|
||||
px={3}
|
||||
color="#fff"
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</NavLink>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
|
||||
{/* <MiniHeader
|
||||
title={"My Requests"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
backButton={true}
|
||||
/> */}
|
||||
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={4}>
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<HStack alignItems={"start"} spacing={4}>
|
||||
<Box bg={"#d7d3fb"} p={2} rounded={"full"}>
|
||||
<MdOutlineNoFood color="#3725EA" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontWeight={600} fontSize={"sm"} mb={1}>
|
||||
Food
|
||||
</Text>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={0}>
|
||||
Created by - Reethik Thota
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={600} mb={1}>
|
||||
Wallet Amount
|
||||
</Text>
|
||||
<Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
|
||||
₹ 50,000
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
<Box>
|
||||
</Box>
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
showRadioButton={true}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReimbursementRequest;
|
||||
|
||||
@@ -46,6 +46,8 @@ import ViewTicket from "../Pages/SupportAndTicket/ViewTicket";
|
||||
import Notification from "../Pages/Notification/Notification";
|
||||
import WalletRequest from "../Pages/OptiFiiExpense/WalletRequest"
|
||||
import OnboardingDirectorDetails from "../Pages/Onboarding/OnboardingDirectorDetails";
|
||||
import BenifitOverViewView from "../Pages/OptiFiiTaxBenefit/BenefitOverviewView";
|
||||
import BenefitViewFood from "../Pages/OptiFiiTaxBenefit/BenefitViewFood"
|
||||
|
||||
|
||||
export const RouteLink = [
|
||||
@@ -120,10 +122,18 @@ export const RouteLink = [
|
||||
path: "/dashboard/beinefit-overview",
|
||||
Component: BenifitOverView,
|
||||
},
|
||||
{
|
||||
path:"/dashboard/beinefit-overview/benefit-request/beinefit-overview-view",
|
||||
Component :BenifitOverViewView
|
||||
},
|
||||
{
|
||||
path: "/gift-card/digital-application-status",
|
||||
Component: DigitalApplicationStatus,
|
||||
},
|
||||
{
|
||||
path: "/dashboard/beinefit-overview/benefit-request",
|
||||
Component: BenefitViewFood
|
||||
},
|
||||
{ path: "/wallet-program/create-wallet", Component: CreateWallet },
|
||||
{ path: "/dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
|
||||
{path :"dashboard/wallet-request",Component : WalletRequest},
|
||||
|
||||
Reference in New Issue
Block a user