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

table pending

Browse Source
This commit is contained in:
priyanshuvish
2024-09-27 13:23:46 +05:30
parent 9e1ce95e07
commit 995f4a443c
3 changed files with 172 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
View File

@@ -1,15 +1,42 @@
import { Box } from "@chakra-ui/react";
import { Box, HStack, Text, VStack } from "@chakra-ui/react";
import React from "react";
import MiniHeader from "../../Components/MiniHeader";
import { MdOutlineNoFood } from "react-icons/md";
const ReimbursementRequest = () => {
return (
<Box h={"100%"} p={6}>
<MiniHeader
{/* <MiniHeader
title={"My Requests"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/>
/> */}
<Box bg={"#fff"} p={4} rounded={"md"}>
<HStack justifyContent={"space-between"}>
<HStack alignItems={"start"} spacing={4}>
<Box bg={"#d7d3fb"} p={2} rounded={"full"}>
<MdOutlineNoFood color="#3725EA" />
</Box>
<Box>
<Text color={"#667085"} 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"} mb={1}>
Created by - Reethik Thota
</Text>
<Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
₹ 50,000
</Text>
</Box>
</HStack>
</Box>
</Box>
);
};

140
src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx Normal file
View File

@@ -0,0 +1,140 @@
import { Badge, Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
import React from "react";
import MiniHeader from "../../Components/MiniHeader";
import { MdOutlineNoFood } from "react-icons/md";
import { IoMdCheckmark } from "react-icons/io";
const ReimbursementRequestView = () => {
return (
<Box h={"100%"} p={6}>
{/* <MiniHeader
title={"My Requests"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/> */}
<Box bg={"#fff"} p={4} rounded={"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"}>
<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>
</Box>
</Box>
);
};
export default ReimbursementRequestView;

2
src/Routes/Routes.js
View File

@@ -20,6 +20,7 @@ import GiftCard from "../Pages/OptiFiiGifsAndVouchers/GiftCard";
import ApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus";
import DigitalApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/DigitalApplication";
import GiftDashboard from "../Pages/OptiFiiGifsAndVouchers/GiftDashboard";
import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
export const RouteLink = [
{ path: "/", Component: Dashbaord },
{ path: "/expenses", Component: Expenses },
@@ -30,6 +31,7 @@ export const RouteLink = [
{ path: "/Manage-roles", Component: ManageDepartmentAndRoles },
{ path: "/wallet-program", Component: WalletProgram },
{ path: "/reimbursement-request", Component: ReimbursementRequest },
{ path: "/reimbursement-request-view", Component: ReimbursementRequestView },
{ path: "/advance-expense-request", Component: AdvanceExpenseRequest },
{ path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
{ path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },