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

Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/optifii-employee into dev

Browse Source
This commit is contained in:
priyanshuvish
2024-09-05 19:56:31 +05:30
parent e0858e470d b5c1b2c0c5
commit 654b5fc66a
9 changed files with 213 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@@ -34,6 +34,7 @@
"redux-persist": "^6.0.0",
"redux-persist-transform-encrypt": "^5.1.1",
"uuid": "^10.0.0",
"vanilla-tilt": "^1.8.1",
"xlsx": "^0.18.5",
"yup": "^1.4.0"
},
@@ -6233,6 +6234,12 @@
"uuid": "dist/bin/uuid"
}
},
"node_modules/vanilla-tilt": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
"integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==",
"license": "MIT"
},
"node_modules/vite": {
"version": "5.2.9",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz",

1
package.json
View File

@@ -36,6 +36,7 @@
"redux-persist": "^6.0.0",
"redux-persist-transform-encrypt": "^5.1.1",
"uuid": "^10.0.0",
"vanilla-tilt": "^1.8.1",
"xlsx": "^0.18.5",
"yup": "^1.4.0"
},

3
src/Components/MiniHeader.jsx
View File

@@ -7,10 +7,11 @@ const MiniHeader = ({ title, subTitle, backButton }) => {
const navigate = useNavigate();
const [firstPart, secondPart] = title && title?.split(/ (.+)/);
return (
return (
<HStack gap={3} mb={4}>
{backButton && (
<Icon
boxShadow='md'
cursor={"pointer"}
onClick={() => navigate(-1)}
as={ArrowBackIcon}

16
src/Pages/Benefit/Benefit.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { Box } from "@chakra-ui/react";
import React from "react";
import MiniHeader from "../../Components/MiniHeader";
const Benefit = () => {
return (
<Box h={"100%"} p={6}>
<MiniHeader
title={"Reimbursement Report For June 2024"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
/>
</Box>
);
};
export default Benefit;

82
src/Pages/Expenses.jsx
View File

@@ -1,82 +0,0 @@
import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
import React from "react";
import MiniHeader from "../Components/MiniHeader";
import logo_card from "../assets/logo_card.svg";
import TRANSCORP_LOGO from "../assets/TRANSCORP_LOGO.svg";
import RuPay from '../assets/rupayImg.png'
const Expenses = () => {
return (
<Box h={"100%"} p={6}>
<MiniHeader
title={"Manage Expenses"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
/>
<HStack justifyContent={"start"} w={"100%"} h={"500px"} gap={4}>
<VStack
// bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
alignItems={"start"}
justifyContent={"space-between"}
height={"100%"}
w={320}
rounded={"xl"}
p={4}
boxShadow={"md"}
position={"relative"}
>
<Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
<Image w={28} src={logo_card} />
<Image w={28} src={TRANSCORP_LOGO} me={0.5} />
</Box>
<VStack
width={"100%"}
display={"flex"}
alignItems={"start"}
justifyContent={"space-between"}
>
<Text color={"#fff"}>1234 5678 1234 5678</Text>
<Button
size={"sm"}
rounded={"full"}
bg={"#ffffff30"}
fontSize={"sm"}
px={6}
border={"1px solid #fff"}
_hover={{ opacity: 0.8 }}
_active={{ opacity: 1 }}
color={"#fff"}
>
Tap to view details
</Button>
</VStack>
<Box width={"100%"} display={"flex"} justifyContent={"end"}>
{/* <Image w={32} src={logo_card} /> */}
<Image w={28} src={RuPay} me={0.5} />
</Box>
<Text
position={"absolute"}
top={28}
right={-6}
transform="rotate(270deg)"
fontSize={'sm'}
color={"#9E9E9E"}
>
Valid in india
</Text>
</VStack>
<VStack bg={"pink"} height={"100%"} w={"50%"} rounded={"xl"}></VStack>
<VStack bg={"purple"} height={"100%"} w={"27%"} rounded={"xl"}></VStack>
</HStack>
</Box>
);
};
export default Expenses;

148
src/Pages/Expenses/Expenses.jsx Normal file
View File

@@ -0,0 +1,148 @@
import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
import React, { useEffect, useRef } from "react";
// import MiniHeader from "../Components/MiniHeader";
import logo_card from "../../assets/logo_card.svg";
import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
import RuPay from '../../assets/rupayImg.png'
import MiniHeader from "../../Components/MiniHeader";
import VanillaTilt from "vanilla-tilt";
const InternalCard = ({title1, subTitle1, title2, subbTitle2}) =>{
return(
<VStack h={'50%'} gap={0} w={'100%'} rounded={'lg'} justifyContent={'space-evenly'} bg={'gray.50'}>
<VStack gap={0} alignItems={'start'} w={'100%'} p={2}>
<Text as={'span'} fontSize={'md'} fontWeight={600}>
{title1}
</Text>
<Text as={'span'} fontSize={'xs'} fontWeight={500} color={'gray.600'}>
{subTitle1}
</Text>
</VStack>
<VStack gap={0} alignItems={'start'} w={'100%'} p={2}>
<Text as={'span'} fontSize={'md'} fontWeight={600}>
{title2}
</Text>
<Text as={'span'} fontSize={'xs'} fontWeight={500} color={'gray.600'}>
{subbTitle2}
</Text>
</VStack>
</VStack>)
}
const Expenses = () => {
const tiltRef = useRef(null);
useEffect(() => {
const node = tiltRef.current;
if (node) {
VanillaTilt.init(node, {
max: 25,
speed: 400,
glare: true,
"max-glare": 0.5,
});
}
return () => {
if (node && node.vanillaTilt) {
node.vanillaTilt.destroy();
}
};
}, []);
return (
<Box h={"100%"} p={4}>
<MiniHeader
title={"Manage Expenses"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
/>
<HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4}>
<VStack
ref={tiltRef} // Attach tilt to this ref
// bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
alignItems={"start"}
justifyContent={"space-between"}
height={"100%"}
w={240}
h={"372px"}
rounded={"xl"}
p={4}
boxShadow={"md"}
position={"relative"}
>
<Box width={"100%"} cursor={'grab'} display={"flex"} justifyContent={"space-between"}>
<Image w={20} src={logo_card} />
<Image w={24} src={TRANSCORP_LOGO} me={0.5} />
</Box>
<VStack
width={"100%"}
display={"flex"}
alignItems={"start"}
justifyContent={"space-between"}
>
<Text color={"#fff"} fontSize={"sm"}>1234 5678 1234 5678</Text>
<Button
size={"sm"}
rounded={"full"}
bg={"#ffffff30"}
fontSize={"sm"}
px={6}
border={"1px solid #fff"}
_hover={{ opacity: 0.8 }}
_active={{ opacity: 1 }}
color={"#fff"}
fontWeight={500}
>
Tap to view details
</Button>
</VStack>
<Box width={"100%"} display={"flex"} justifyContent={"end"}>
{/* <Image w={32} src={logo_card} /> */}
<Image w={24} src={RuPay} me={0.5} />
</Box>
<Text
position={"absolute"}
top={24}
right={-6}
transform="rotate(270deg)"
fontSize={'xs'}
color={"#9E9E9E"}
>
Valid in india
</Text>
</VStack>
<VStack bg={"#fff"} boxShadow={'md'} height={"100%"} flexGrow={1} gap={4} rounded={"xl"} p={4}>
<InternalCard title1={'$50,000'} subTitle1={'Available spend limit'} title2={"1234 5678 1234 5678"} subbTitle2={"Account Number"} />
<InternalCard title1={'Kartikey Gautam'} subTitle1={'Account name'} title2={"01/12"} subbTitle2={"Validity"} />
</VStack>
<VStack bg={"purple"} height={"100%"} w={"30%"} rounded={"xl"}>
</VStack>
</HStack>
</Box>
);
};
export default Expenses;

16
src/Pages/Gifts/Gifts.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { Box } from "@chakra-ui/react";
import React from "react";
import MiniHeader from "../../Components/MiniHeader";
const Gifts = () => {
return (
<Box h={"100%"} p={6}>
<MiniHeader
title={"Your Gift Cards"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
/>
</Box>
);
};
export default Gifts;

16
src/Pages/HelpAndSupport/HelpAndSupport.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { Box } from "@chakra-ui/react";
import React from "react";
import MiniHeader from "../../Components/MiniHeader";
const HelpAndSupport = () => {
return (
<Box h={"100%"} p={6}>
<MiniHeader
title={"Contact Us"}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
/>
</Box>
);
};
export default HelpAndSupport;

7
src/Routes/Routes.js
View File

@@ -4,6 +4,10 @@ import AddNewReport from "../Pages/Report/AddNewReport";
// import ReportsHistory from "../Pages/Report/ReportsHistory";
import Report from "../Pages/Report/Report";
import Requests from "../Pages/Requests/Requests";
import Expenses from "../Pages/Expenses/Expenses";
import Benefit from "../Pages/Benefit/Benefit";
import Gifts from "../Pages/Gifts/Gifts";
import HelpAndSupport from "../Pages/HelpAndSupport/HelpAndSupport";
export const RouteLink = [
@@ -13,4 +17,7 @@ export const RouteLink = [
{ path: "/reports/add-new-report", Component: AddNewReport },
// { path: "/reports/reports-history", Component: ReportsHistory },
{ path: "/requests", Component: Requests },
{ path: "/benefit", Component: Benefit },
{ path: "/gifts", Component: Gifts },
{ path: "/help-support", Component: HelpAndSupport },
];