[update] - commit
This commit is contained in:
npcdazai
@@ -1,37 +1,96 @@
|
||||
import { Badge, Box, Button, Checkbox, CircularProgress, CircularProgressLabel, color, Divider, Flex, Grid, GridItem, Heading, Image, Menu, MenuButton, MenuItem, MenuList, Progress, Stack, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Tag, TagLabel } from '@chakra-ui/react'
|
||||
import React, { useContext, useState } from 'react'
|
||||
import BlueCard from '../../Components/Cards/BlueCard'
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations'
|
||||
import { HStack, Text, VStack, Icon } from '@chakra-ui/react';
|
||||
import { BsArrowsAngleExpand, BsBarChartFill, BsFillBarChartFill } from 'react-icons/bs';
|
||||
import { FiBarChart2 } from 'react-icons/fi';
|
||||
import { WiTime4 } from 'react-icons/wi';
|
||||
import { MdArrowForward, MdNoFood } from 'react-icons/md';
|
||||
import PlatiniumGift from '../../Components/PlatiniumGift';
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
CircularProgress,
|
||||
CircularProgressLabel,
|
||||
color,
|
||||
Divider,
|
||||
Flex,
|
||||
Grid,
|
||||
GridItem,
|
||||
Heading,
|
||||
Image,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Progress,
|
||||
Stack,
|
||||
Tab,
|
||||
TabIndicator,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Tag,
|
||||
TagLabel,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import BlueCard from "../../Components/Cards/BlueCard";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import { HStack, Text, VStack, Icon } from "@chakra-ui/react";
|
||||
import {
|
||||
BsArrowsAngleExpand,
|
||||
BsBarChartFill,
|
||||
BsFillBarChartFill,
|
||||
} from "react-icons/bs";
|
||||
import { FiBarChart2 } from "react-icons/fi";
|
||||
import { WiTime4 } from "react-icons/wi";
|
||||
import { MdArrowForward, MdNoFood } from "react-icons/md";
|
||||
import PlatiniumGift from "../../Components/PlatiniumGift";
|
||||
import { PiUsersThreeFill } from "react-icons/pi";
|
||||
import GlobalStateContext from '../../Contexts/GlobalStateContext';
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import blackmen from "../../assets/blackmen.png";
|
||||
import koreanpfp from "../../assets/koreanboi.png";
|
||||
import asian from "../../assets/asain.png";
|
||||
import goth from "../../assets/goth.png";
|
||||
import womenpfp from "../../assets/womenpfp1.png";
|
||||
import NormalTable from '../../Components/DataTable/NormalTable';
|
||||
import { AiOutlineCalendar } from 'react-icons/ai';
|
||||
import { IoMdAddCircleOutline, IoMdArrowDropdown } from 'react-icons/io';
|
||||
import { LuListFilter } from 'react-icons/lu';
|
||||
import { ChevronDownIcon } from '@chakra-ui/icons';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import SecondaryButton from '../../Components/Buttons/SecondaryButton';
|
||||
import { GoDotFill } from 'react-icons/go';
|
||||
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import { AiOutlineCalendar } from "react-icons/ai";
|
||||
import { IoMdAddCircleOutline, IoMdArrowDropdown } from "react-icons/io";
|
||||
import { LuListFilter } from "react-icons/lu";
|
||||
import { ChevronDownIcon } from "@chakra-ui/icons";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
|
||||
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
|
||||
import { GoDotFill } from "react-icons/go";
|
||||
import { FaUser } from 'react-icons/fa';
|
||||
import { Doughnut } from 'react-chartjs-2';
|
||||
|
||||
const Dashbaord = () => {
|
||||
|
||||
const { dash } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [users, setusers] = useState(50);
|
||||
const data = {
|
||||
labels: ['Full KYC', 'Min KYC'],
|
||||
datasets: [{
|
||||
label: 'KYC Status',
|
||||
data: [72, 28], // Sample percentages
|
||||
backgroundColor: [
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 159, 64, 1)',
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
|
||||
const options = {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Employee KYC Status'
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const blueCardData = [
|
||||
{
|
||||
@@ -46,6 +105,30 @@ const Dashbaord = () => {
|
||||
badgeColor: "#3725EA",
|
||||
viewTextColor: "#6311CB",
|
||||
},
|
||||
// {
|
||||
// backgroundColor: "#C33FAD",
|
||||
// iconColor: "#00A438",
|
||||
// title: "WALLET REQUEST",
|
||||
// count: 100,
|
||||
// buttonBg: "#FCA1001A",
|
||||
// buttonBorder: "#FCA100",
|
||||
// buttonText: "View Requests",
|
||||
// badgeText: "20 New",
|
||||
// badgeColor: "#3725EA",
|
||||
// viewTextColor: "#6311CB",
|
||||
// },
|
||||
// {
|
||||
// backgroundColor: "#6311CB",
|
||||
// iconColor: "#00A438",
|
||||
// title: "WALLET REQUEST",
|
||||
// count: 100,
|
||||
// buttonBg: "#FCA1001A",
|
||||
// buttonBorder: "#FCA100",
|
||||
// buttonText: "View Requests",
|
||||
// badgeText: "20 New",
|
||||
// badgeColor: "#3725EA",
|
||||
// viewTextColor: "#6311CB",
|
||||
// },
|
||||
{
|
||||
backgroundColor: "#C33FAD",
|
||||
iconColor: "#00A438",
|
||||
@@ -58,32 +141,7 @@ const Dashbaord = () => {
|
||||
badgeColor: "#3725EA",
|
||||
viewTextColor: "#6311CB",
|
||||
},
|
||||
{
|
||||
backgroundColor: "#6311CB",
|
||||
iconColor: "#00A438",
|
||||
title: "WALLET REQUEST",
|
||||
count: 100,
|
||||
buttonBg: "#FCA1001A",
|
||||
buttonBorder: "#FCA100",
|
||||
buttonText: "View Requests",
|
||||
badgeText: "20 New",
|
||||
badgeColor: "#3725EA",
|
||||
viewTextColor: "#6311CB",
|
||||
},
|
||||
{
|
||||
backgroundColor: "#C33FAD",
|
||||
iconColor: "#00A438",
|
||||
title: "WALLET REQUEST",
|
||||
count: 100,
|
||||
buttonBg: "#FCA1001A",
|
||||
buttonBorder: "#FCA100",
|
||||
buttonText: "View Requests",
|
||||
badgeText: "20 New",
|
||||
badgeColor: "#3725EA",
|
||||
viewTextColor: "#6311CB",
|
||||
},
|
||||
]
|
||||
|
||||
];
|
||||
|
||||
const gridItemsData = [
|
||||
{
|
||||
@@ -114,32 +172,29 @@ const Dashbaord = () => {
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const dashHeadRow = [
|
||||
'Wallet Name',
|
||||
"Wallet Name",
|
||||
"Total employees",
|
||||
'Amount in card',
|
||||
'Pending request',
|
||||
'Pending amount',
|
||||
|
||||
"Amount in card",
|
||||
"Pending request",
|
||||
"Pending amount",
|
||||
];
|
||||
|
||||
const dashHeadSecRow = [
|
||||
'Wallet Name',
|
||||
"Wallet Name",
|
||||
"Total employees",
|
||||
'Benefit limit',
|
||||
'Remaining amount',
|
||||
'Status',
|
||||
|
||||
"Benefit limit",
|
||||
"Remaining amount",
|
||||
"Status",
|
||||
];
|
||||
const dashHeadThirdRow = [
|
||||
'Employee Name',
|
||||
"Employee Name",
|
||||
"Email",
|
||||
'Wallet',
|
||||
'Amount',
|
||||
'Date & time',
|
||||
|
||||
"Wallet",
|
||||
"Amount",
|
||||
"Date & time",
|
||||
];
|
||||
|
||||
// first
|
||||
// first
|
||||
|
||||
const dashArr = dash.map((item, index) => ({
|
||||
"Wallet Name": (
|
||||
@@ -148,7 +203,7 @@ const Dashbaord = () => {
|
||||
<MdNoFood color="#6311CB" />
|
||||
</Box>
|
||||
<Text mb={0} fontSize="xs">
|
||||
{item.wallet || 'Food'}
|
||||
{item.wallet || "Food"}
|
||||
</Text>
|
||||
</HStack>
|
||||
),
|
||||
@@ -183,29 +238,38 @@ const Dashbaord = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
'Amount in card': (
|
||||
"Amount in card": (
|
||||
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
|
||||
{item.walletAmount || 5000}
|
||||
</Text>
|
||||
),
|
||||
'Pending request': (
|
||||
"Pending request": (
|
||||
<HStack>
|
||||
<Text key={`balance-${index}`} mb={0} fontSize="xs" color={"#007E23"}>
|
||||
+4 new
|
||||
</Text>
|
||||
<Text mb={0} size="xs" bg="#6311CB" rounded="md" py={1.5} px={4} fontWeight={400} color="#fff">
|
||||
<Text
|
||||
mb={0}
|
||||
size="xs"
|
||||
bg="#6311CB"
|
||||
rounded="md"
|
||||
py={1.5}
|
||||
px={4}
|
||||
fontWeight={400}
|
||||
color="#fff"
|
||||
>
|
||||
View
|
||||
</Text>
|
||||
</HStack>
|
||||
),
|
||||
'Pending amount': (
|
||||
"Pending amount": (
|
||||
<Text key={`balance-${index}`} mb={0} fontSize="xs">
|
||||
{item.balanceRemaining || '₹ 2000'}
|
||||
{item.balanceRemaining || "₹ 2000"}
|
||||
</Text>
|
||||
),
|
||||
}));
|
||||
|
||||
// Second
|
||||
// Second
|
||||
|
||||
const dashSecArr = dash.map((item, index) => ({
|
||||
"Wallet Name": (
|
||||
@@ -214,7 +278,7 @@ const Dashbaord = () => {
|
||||
<MdNoFood color="#6311CB" />
|
||||
</Box>
|
||||
<Text mb={0} fontSize="xs">
|
||||
{item.wallet || 'Food'}
|
||||
{item.wallet || "Food"}
|
||||
</Text>
|
||||
</HStack>
|
||||
),
|
||||
@@ -249,17 +313,17 @@ const Dashbaord = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
'Benefit limit': (
|
||||
"Benefit limit": (
|
||||
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
|
||||
{item.walletAmount || 5000}
|
||||
</Text>
|
||||
),
|
||||
'Remaining amount': (
|
||||
"Remaining amount": (
|
||||
<Text key={`balance-${index}`} mb={0} fontSize="xs">
|
||||
{item.balanceRemaining || '₹ 2000'}
|
||||
{item.balanceRemaining || "₹ 2000"}
|
||||
</Text>
|
||||
),
|
||||
'Status': (
|
||||
Status: (
|
||||
<Tag
|
||||
size={"sm"}
|
||||
py={2}
|
||||
@@ -268,44 +332,42 @@ const Dashbaord = () => {
|
||||
item?.status === "Approved"
|
||||
? "#00A438"
|
||||
: item?.status === "Pending"
|
||||
? "#EAB600"
|
||||
: "red"
|
||||
}
|
||||
border={`1px solid ${item?.status === "Approved"
|
||||
? "#00A438"
|
||||
: item?.status === "Pending"
|
||||
? "#EAB600"
|
||||
: "red"
|
||||
}`}
|
||||
}
|
||||
border={`1px solid ${
|
||||
item?.status === "Approved"
|
||||
? "#00A438"
|
||||
: item?.status === "Pending"
|
||||
? "#EAB600"
|
||||
: "red"
|
||||
}`}
|
||||
bg={
|
||||
item?.status === "Approved"
|
||||
? "#ebf8ef"
|
||||
: item?.status === "Pending"
|
||||
? "#fdf9eb"
|
||||
: "#ffe5e5"
|
||||
? "#fdf9eb"
|
||||
: "#ffe5e5"
|
||||
}
|
||||
>
|
||||
<HStack>
|
||||
<GoDotFill size={10} />
|
||||
<Text mb={0}>
|
||||
{item?.status || "N/A"}
|
||||
</Text>
|
||||
<Text mb={0}>{item?.status || "N/A"}</Text>
|
||||
</HStack>
|
||||
|
||||
</Tag>
|
||||
),
|
||||
}));
|
||||
|
||||
// Third
|
||||
// Third
|
||||
|
||||
const dashThirdArr = dash.map((item, index) => ({
|
||||
"Employee Name": (
|
||||
<HStack key={`wallet-${index}`}>
|
||||
<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"
|
||||
/>
|
||||
<Box>
|
||||
<Text mb={0} fontSize="xs" fontWeight={600}>
|
||||
@@ -318,22 +380,22 @@ const Dashbaord = () => {
|
||||
</HStack>
|
||||
),
|
||||
|
||||
'Email': (
|
||||
Email: (
|
||||
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
|
||||
olivia@gmail.com
|
||||
</Text>
|
||||
),
|
||||
'Wallet': (
|
||||
Wallet: (
|
||||
<Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
|
||||
Food
|
||||
</Text>
|
||||
),
|
||||
'Amount': (
|
||||
Amount: (
|
||||
<Text key={`balance-${index}`} mb={0} fontSize="xs" color={"#00A438"}>
|
||||
{item.balanceRemaining || '₹ 2000'}
|
||||
{item.balanceRemaining || "₹ 2000"}
|
||||
</Text>
|
||||
),
|
||||
'Date & time': (
|
||||
"Date & time": (
|
||||
<Text key={`balance-${index}`} mb={0} fontSize="xs">
|
||||
2 June 2024, 10 am
|
||||
</Text>
|
||||
@@ -342,11 +404,19 @@ const Dashbaord = () => {
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
|
||||
<Grid h={150} templateColumns="repeat(4, 1fr)" gap={6} >
|
||||
<Grid h={150} templateColumns="repeat(4, 1fr)" gap={6}>
|
||||
{blueCardData.map((item, index) => (
|
||||
<BlueCard key={index} blueCardData={item} />
|
||||
))}
|
||||
{/* <EmployeeKYCStatus/> */}
|
||||
<div>
|
||||
<h2>Employee KYC Status</h2>
|
||||
<Doughnut data={data} options={options} />
|
||||
<div>
|
||||
<p>Full KYC: 72%</p>
|
||||
<p>Min KYC: 28%</p>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
{/* EXP card */}
|
||||
@@ -355,19 +425,20 @@ const Dashbaord = () => {
|
||||
{gridItemsData.map((item, index) => (
|
||||
<GridItem key={index} backgroundColor="#fff" borderRadius="xl">
|
||||
<Box bg="#fff" borderRadius="xl" p={4}>
|
||||
<HStack
|
||||
w={"100%"}
|
||||
justifyContent={'space-between'}
|
||||
mb={3}
|
||||
>
|
||||
<Text fontSize={'sm'} as={'span'} fontWeight={500}>
|
||||
<HStack w={"100%"} justifyContent={"space-between"} mb={3}>
|
||||
<Text fontSize={"sm"} as={"span"} fontWeight={500}>
|
||||
Expense card
|
||||
</Text>
|
||||
<HStack spacing={1}>
|
||||
<Text fontSize={'sm'} as={'span'} fontWeight={500} color={"#6311CB"}>
|
||||
<Text
|
||||
fontSize={"sm"}
|
||||
as={"span"}
|
||||
fontWeight={500}
|
||||
color={"#6311CB"}
|
||||
>
|
||||
Manage expense wallets
|
||||
</Text>
|
||||
<MdArrowForward size={14} color='#6311CB' />
|
||||
<MdArrowForward size={14} color="#6311CB" />
|
||||
</HStack>
|
||||
</HStack>
|
||||
<Divider borderStyle="dashed" />
|
||||
@@ -388,7 +459,9 @@ const Dashbaord = () => {
|
||||
<Text mb={0} color="#A3AED0">
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text fontSize="2xl" fontWeight={600} color={"#2B3674"}>{item.count}</Text>
|
||||
<Text fontSize="2xl" fontWeight={600} color={"#2B3674"}>
|
||||
{item.count}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<Box mt={16}>
|
||||
@@ -403,7 +476,12 @@ const Dashbaord = () => {
|
||||
border={`1px solid ${item.buttonBorder}`}
|
||||
>
|
||||
{!item.hideBadge && (
|
||||
<Text display="flex" alignItems="center" color="#FCA100" mb={0}>
|
||||
<Text
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
color="#FCA100"
|
||||
mb={0}
|
||||
>
|
||||
<WiTime4 />
|
||||
<Text fontSize="xs" as="span" mx={2}>
|
||||
{item.buttonText}
|
||||
@@ -444,7 +522,12 @@ const Dashbaord = () => {
|
||||
<PlatiniumGift />
|
||||
</Box>
|
||||
<Box flex={1} pt={4}>
|
||||
<Text color={"#474279"} fontWeight={600} fontSize={"md"} mb={1.5}>
|
||||
<Text
|
||||
color={"#474279"}
|
||||
fontWeight={600}
|
||||
fontSize={"md"}
|
||||
mb={1.5}
|
||||
>
|
||||
OptiFii Gift cards
|
||||
</Text>
|
||||
<Text color={"#A3AED0"} fontWeight={500} fontSize={"xs"} mb={6}>
|
||||
@@ -455,24 +538,25 @@ const Dashbaord = () => {
|
||||
px={4}
|
||||
leftIcon={<PiUsersThreeFill color={"#fff"} />}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
|
||||
|
||||
{/* EXP overview */}
|
||||
|
||||
|
||||
<HStack alignItems={"start"} spacing={6}>
|
||||
|
||||
<Box flex={1}>
|
||||
{/* table 1 */}
|
||||
<Box bg={"#fff"} shadow={"md"} rounded={"md"} p={4} mb={4}>
|
||||
<HStack justifyContent={"space-between"} mb={2}>
|
||||
<Heading fontSize={"md"} fontWeight={500} mb={0} color={"#474279"}>
|
||||
<Heading
|
||||
fontSize={"md"}
|
||||
fontWeight={500}
|
||||
mb={0}
|
||||
color={"#474279"}
|
||||
>
|
||||
Expense Overview
|
||||
</Heading>
|
||||
<BsArrowsAngleExpand
|
||||
@@ -484,9 +568,12 @@ const Dashbaord = () => {
|
||||
/>
|
||||
</HStack>
|
||||
|
||||
<Tabs position='relative' variant='unstyled'>
|
||||
|
||||
<HStack justifyContent={"space-between"} alignItems={"start"} borderBottom={"1px solid #D4D4D4"}>
|
||||
<Tabs position="relative" variant="unstyled">
|
||||
<HStack
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"start"}
|
||||
borderBottom={"1px solid #D4D4D4"}
|
||||
>
|
||||
<Box>
|
||||
<TabList>
|
||||
<Tab
|
||||
@@ -495,7 +582,8 @@ const Dashbaord = () => {
|
||||
fontWeight={500}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
Reimbursement request
|
||||
</Tab>
|
||||
<Tab
|
||||
@@ -504,10 +592,18 @@ const Dashbaord = () => {
|
||||
fontWeight={500}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}>Advance Expense request</Tab>
|
||||
}}
|
||||
>
|
||||
Advance Expense request
|
||||
</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
|
||||
<TabIndicator
|
||||
mt="-1.5px"
|
||||
height="2px"
|
||||
bg="#5E0FCD"
|
||||
borderRadius="1px"
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
fontSize={"xs"}
|
||||
@@ -543,8 +639,17 @@ const Dashbaord = () => {
|
||||
|
||||
<HStack justifyContent={"space-between"} mt={2}>
|
||||
<HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
|
||||
<Text fontSize={"xs"} color={"#888888"} mb={0}>Total report amount</Text>
|
||||
<Text fontSize={"sm"} color={"#6311CB"} mb={0} fontWeight={500}>₹ 50,000</Text>
|
||||
<Text fontSize={"xs"} color={"#888888"} mb={0}>
|
||||
Total report amount
|
||||
</Text>
|
||||
<Text
|
||||
fontSize={"sm"}
|
||||
color={"#6311CB"}
|
||||
mb={0}
|
||||
fontWeight={500}
|
||||
>
|
||||
₹ 50,000
|
||||
</Text>
|
||||
</HStack>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
@@ -568,7 +673,6 @@ const Dashbaord = () => {
|
||||
</Menu>
|
||||
</HStack>
|
||||
|
||||
|
||||
<TabPanels>
|
||||
<TabPanel px={0}>
|
||||
<NormalTable
|
||||
@@ -592,9 +696,14 @@ const Dashbaord = () => {
|
||||
|
||||
{/* table 2 */}
|
||||
|
||||
<Box bg={"#fff"} shadow={"md"} rounded={"md"} p={4} >
|
||||
<Box bg={"#fff"} shadow={"md"} rounded={"md"} p={4}>
|
||||
<HStack justifyContent={"space-between"} mb={2}>
|
||||
<Heading fontSize={"md"} fontWeight={500} mb={0} color={"#474279"}>
|
||||
<Heading
|
||||
fontSize={"md"}
|
||||
fontWeight={500}
|
||||
mb={0}
|
||||
color={"#474279"}
|
||||
>
|
||||
Benefit Overview
|
||||
</Heading>
|
||||
|
||||
@@ -641,8 +750,12 @@ const Dashbaord = () => {
|
||||
|
||||
<HStack justifyContent={"space-between"} mt={2}>
|
||||
<HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
|
||||
<Text fontSize={"xs"} color={"#888888"} mb={0}>Total report amount</Text>
|
||||
<Text fontSize={"sm"} color={"#6311CB"} mb={0} fontWeight={500}>₹ 50,000</Text>
|
||||
<Text fontSize={"xs"} color={"#888888"} mb={0}>
|
||||
Total report amount
|
||||
</Text>
|
||||
<Text fontSize={"sm"} color={"#6311CB"} mb={0} fontWeight={500}>
|
||||
₹ 50,000
|
||||
</Text>
|
||||
</HStack>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
@@ -674,44 +787,47 @@ const Dashbaord = () => {
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
|
||||
{/* box 1 */}
|
||||
<Box bg={"#fff"} shadow={"md"} rounded={"md"} p={4} mb={6}>
|
||||
<Box>
|
||||
<Text color={"#474279"} fontSize={"sm"} fontWeight={500} mb={3}>Your Balance</Text>
|
||||
<Text color={"#474279"} fontSize={"sm"} fontWeight={500} mb={3}>
|
||||
Your Balance
|
||||
</Text>
|
||||
<Box>
|
||||
<Text color={"#1A202C"} fontSize={"xl"} as={"span"} fontWeight={600}>₹ 120,435.00</Text>
|
||||
<Text color={"#90A3BF"} fontSize={"xs"} as={"span"} ml={1}>( INR )</Text>
|
||||
<Text
|
||||
color={"#1A202C"}
|
||||
fontSize={"xl"}
|
||||
as={"span"}
|
||||
fontWeight={600}
|
||||
>
|
||||
₹ 120,435.00
|
||||
</Text>
|
||||
<Text color={"#90A3BF"} fontSize={"xs"} as={"span"} ml={1}>
|
||||
( INR )
|
||||
</Text>
|
||||
</Box>
|
||||
<Text color={"#90A3BF"} fontSize={"xs"} >Last uploaded on Jan 31, 2024</Text>
|
||||
<Text color={"#90A3BF"} fontSize={"xs"}>
|
||||
Last uploaded on Jan 31, 2024
|
||||
</Text>
|
||||
</Box>
|
||||
<HStack mt={10} mb={6}>
|
||||
<PrimaryButton
|
||||
px={"4"}
|
||||
leftIcon={<IoMdAddCircleOutline size={14} color='#fff' />}
|
||||
title={"Load Money"} />
|
||||
<SecondaryButton
|
||||
px={"4"}
|
||||
title={"Transaction statement"} />
|
||||
leftIcon={<IoMdAddCircleOutline size={14} color="#fff" />}
|
||||
title={"Load Money"}
|
||||
/>
|
||||
<SecondaryButton px={"4"} title={"Transaction statement"} />
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* box 2 */}
|
||||
<Box
|
||||
rounded={"md"}
|
||||
boxShadow="md"
|
||||
p={4}
|
||||
bg="white"
|
||||
>
|
||||
|
||||
<Text color={"#474279"} fontSize={"sm"} fontWeight={500} mb={3}>Monthly Expense</Text>
|
||||
<Box rounded={"md"} boxShadow="md" p={4} bg="white">
|
||||
<Text color={"#474279"} fontSize={"sm"} fontWeight={500} mb={3}>
|
||||
Monthly Expense
|
||||
</Text>
|
||||
<HStack justifyContent={"space-between"} mb={4}>
|
||||
<Box
|
||||
fontSize={"xs"}
|
||||
@@ -721,7 +837,6 @@ const Dashbaord = () => {
|
||||
p={2}
|
||||
rounded={"md"}
|
||||
>
|
||||
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
@@ -779,74 +894,102 @@ const Dashbaord = () => {
|
||||
<VStack align="stretch" spacing={10}>
|
||||
{/* Individual items */}
|
||||
<Flex justify="space-between" fontSize="sm">
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>Fuel</Text>
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>
|
||||
Fuel
|
||||
</Text>
|
||||
<Flex align="center">
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>₹ 20,000</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">40%</Text>
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>
|
||||
₹ 20,000
|
||||
</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">
|
||||
40%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex justify="space-between" fontSize="sm">
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>Food</Text>
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>
|
||||
Food
|
||||
</Text>
|
||||
<Flex align="center">
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>₹ 15,000</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">35%</Text>
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>
|
||||
₹ 15,000
|
||||
</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">
|
||||
35%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex justify="space-between" fontSize="sm">
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>Travel</Text>
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>
|
||||
Travel
|
||||
</Text>
|
||||
<Flex align="center">
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>₹ 10,000</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">20%</Text>
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>
|
||||
₹ 10,000
|
||||
</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">
|
||||
20%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex justify="space-between" fontSize="sm">
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>Travel</Text>
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>
|
||||
Travel
|
||||
</Text>
|
||||
<Flex align="center">
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>₹ 10,000</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">10%</Text>
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>
|
||||
₹ 10,000
|
||||
</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">
|
||||
10%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex justify="space-between" fontSize="sm">
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>Voucher</Text>
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>
|
||||
Voucher
|
||||
</Text>
|
||||
<Flex align="center">
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>₹ 5,000</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">10%</Text>
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>
|
||||
₹ 5,000
|
||||
</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">
|
||||
10%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex justify="space-between" fontSize="sm">
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>Voucher</Text>
|
||||
<Text mb={"2"} color={"#4F6487"} fontWeight={500}>
|
||||
Voucher
|
||||
</Text>
|
||||
<Flex align="center">
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>₹ 5,000</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">10%</Text>
|
||||
<Text mb={"2"} mr={2} fontWeight={600}>
|
||||
₹ 5,000
|
||||
</Text>
|
||||
<Text mb={"2"} fontSize="xs" color="gray.500">
|
||||
10%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</HStack>
|
||||
|
||||
{/* Total spending's */}
|
||||
|
||||
<HStack alignItems={"start"} spacing={6} mt={6}>
|
||||
|
||||
{/* box */}
|
||||
<Box
|
||||
rounded={"md"}
|
||||
boxShadow="md"
|
||||
p={4}
|
||||
bg="white"
|
||||
w={350}
|
||||
minH={395}
|
||||
>
|
||||
|
||||
<Box rounded={"md"} boxShadow="md" p={4} bg="white" w={350} minH={395}>
|
||||
<HStack justifyContent={"space-between"} mb={4} alignItems={"start"}>
|
||||
<Text color={"#474279"} fontSize={"sm"} fontWeight={500} mb={0}>Total spending's</Text>
|
||||
<Text color={"#474279"} fontSize={"sm"} fontWeight={500} mb={0}>
|
||||
Total spending's
|
||||
</Text>
|
||||
|
||||
<Box
|
||||
fontSize={"xs"}
|
||||
@@ -857,7 +1000,6 @@ const Dashbaord = () => {
|
||||
px={2}
|
||||
rounded={"md"}
|
||||
>
|
||||
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
@@ -874,7 +1016,12 @@ const Dashbaord = () => {
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<HStack justifyContent={"space-between"} borderBottom={"1px dashed rgba(99, 17, 203, 0.3)"} pb={"4"} mb={"4"}>
|
||||
<HStack
|
||||
justifyContent={"space-between"}
|
||||
borderBottom={"1px dashed rgba(99, 17, 203, 0.3)"}
|
||||
pb={"4"}
|
||||
mb={"4"}
|
||||
>
|
||||
<Box>
|
||||
<Text fontSize={"sm"} fontWeight={500} mb={1}>
|
||||
Expense
|
||||
@@ -884,12 +1031,19 @@ const Dashbaord = () => {
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<CircularProgress value={40} color='#C33FAD' size={16}>
|
||||
<CircularProgressLabel fontWeight={500} fontSize={"sm"}>40%</CircularProgressLabel>
|
||||
<CircularProgress value={40} color="#C33FAD" size={16}>
|
||||
<CircularProgressLabel fontWeight={500} fontSize={"sm"}>
|
||||
40%
|
||||
</CircularProgressLabel>
|
||||
</CircularProgress>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack justifyContent={"space-between"} borderBottom={"1px dashed rgba(99, 17, 203, 0.3)"} pb={"4"} mb={"4"}>
|
||||
<HStack
|
||||
justifyContent={"space-between"}
|
||||
borderBottom={"1px dashed rgba(99, 17, 203, 0.3)"}
|
||||
pb={"4"}
|
||||
mb={"4"}
|
||||
>
|
||||
<Box>
|
||||
<Text fontSize={"sm"} fontWeight={500} mb={1}>
|
||||
Benefit
|
||||
@@ -899,12 +1053,19 @@ const Dashbaord = () => {
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<CircularProgress value={60} color='#C33FAD' size={16}>
|
||||
<CircularProgressLabel fontWeight={500} fontSize={"sm"}>60%</CircularProgressLabel>
|
||||
<CircularProgress value={60} color="#C33FAD" size={16}>
|
||||
<CircularProgressLabel fontWeight={500} fontSize={"sm"}>
|
||||
60%
|
||||
</CircularProgressLabel>
|
||||
</CircularProgress>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack justifyContent={"space-between"} borderBottom={"1px dashed rgba(99, 17, 203, 0.3)"} pb={"4"} mb={"4"}>
|
||||
<HStack
|
||||
justifyContent={"space-between"}
|
||||
borderBottom={"1px dashed rgba(99, 17, 203, 0.3)"}
|
||||
pb={"4"}
|
||||
mb={"4"}
|
||||
>
|
||||
<Box>
|
||||
<Text fontSize={"sm"} fontWeight={500} mb={1}>
|
||||
Gifts & voucher
|
||||
@@ -914,12 +1075,13 @@ const Dashbaord = () => {
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<CircularProgress value={80} color='#C33FAD' size={16}>
|
||||
<CircularProgressLabel fontWeight={500} fontSize={"sm"}>80%</CircularProgressLabel>
|
||||
<CircularProgress value={80} color="#C33FAD" size={16}>
|
||||
<CircularProgressLabel fontWeight={500} fontSize={"sm"}>
|
||||
80%
|
||||
</CircularProgressLabel>
|
||||
</CircularProgress>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
</Box>
|
||||
|
||||
{/* table */}
|
||||
@@ -990,8 +1152,12 @@ const Dashbaord = () => {
|
||||
|
||||
<HStack justifyContent={"space-between"} mt={2}>
|
||||
<HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
|
||||
<Text fontSize={"xs"} color={"#888888"} mb={0}>Total report amount</Text>
|
||||
<Text fontSize={"sm"} color={"#6311CB"} mb={0} fontWeight={500}>₹ 50,000</Text>
|
||||
<Text fontSize={"xs"} color={"#888888"} mb={0}>
|
||||
Total report amount
|
||||
</Text>
|
||||
<Text fontSize={"sm"} color={"#6311CB"} mb={0} fontWeight={500}>
|
||||
₹ 50,000
|
||||
</Text>
|
||||
</HStack>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
@@ -1023,17 +1189,10 @@ const Dashbaord = () => {
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
</HStack>
|
||||
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashbaord
|
||||
export default Dashbaord;
|
||||
|
||||
@@ -1,78 +1,100 @@
|
||||
import { Box, Button, Flex, Radio, RadioGroup, Text, useBreakpointValue, VStack } from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const ApplyForDigitalCard = () => {
|
||||
const [step, setStep] = useState(1);
|
||||
const steps = [
|
||||
{ label: "Select card type", description: "Pending" },
|
||||
{ label: "Select employee", description: "Pending" },
|
||||
];
|
||||
|
||||
const handleNext = () => {
|
||||
if (step < steps.length) {
|
||||
setStep(step + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
if (step > 1) {
|
||||
setStep(step - 1);
|
||||
}
|
||||
};
|
||||
const currentStep = step - 1;
|
||||
const isLastStep = step === steps.length;
|
||||
const isFirstStep = step === 1;
|
||||
const circleSize = useBreakpointValue({ base: "30px", md: "40px" });
|
||||
return (
|
||||
<Box p={4}>
|
||||
<Box>
|
||||
<RadioGroup
|
||||
value={String(step)}
|
||||
onChange={(val) => setStep(Number(val))}
|
||||
>
|
||||
<Flex p={4} justifyContent="space-between" alignItems="center">
|
||||
{steps.map((item, index) => (
|
||||
<VStack key={index} spacing={2}>
|
||||
<Radio value={String(index + 1)} colorScheme="purple" size="lg">
|
||||
{/* {index + 1} */}
|
||||
</Radio>
|
||||
<Text fontSize="small" color="#9C9C9C" fontWeight={400}>
|
||||
STEP {index + 1}
|
||||
</Text>
|
||||
<Text color="#000000" fontWeight={600} fontSize="small">
|
||||
{item.label}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={index + 1 === step ? "blue.500" : "gray.500"}
|
||||
>
|
||||
{index + 1 === step ? "In Progress" : "Pending"}
|
||||
</Text>
|
||||
</VStack>
|
||||
))}
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Text,
|
||||
useBreakpointValue,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import DigitalTable from "./DigitalTable";
|
||||
|
||||
const ApplyForDigitalCard = () => {
|
||||
const [step, setStep] = useState(1);
|
||||
|
||||
// Steps array consistency and label correction
|
||||
const steps = [
|
||||
{
|
||||
component: <DigitalTable />, // Component must be rendered properly
|
||||
label: "Step 1: Digital Table", // Label for clarity
|
||||
description: "Pending",
|
||||
},
|
||||
{
|
||||
component: <Box>Select employee component here</Box>, // Placeholder for the second component
|
||||
label: "Step 2: Select Employee",
|
||||
description: "Pending",
|
||||
},
|
||||
];
|
||||
|
||||
const handleNext = () => {
|
||||
if (step < steps.length) {
|
||||
setStep(step + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
if (step > 1) {
|
||||
setStep(step - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const currentStep = step - 1;
|
||||
const isLastStep = step === steps.length;
|
||||
const isFirstStep = step === 1;
|
||||
const circleSize = useBreakpointValue({ base: "30px", md: "40px" });
|
||||
|
||||
return (
|
||||
<Box overflowX="scroll" p={4}>
|
||||
<Box>
|
||||
<RadioGroup
|
||||
value={String(step)}
|
||||
onChange={(val) => setStep(Number(val))}
|
||||
>
|
||||
<Flex p={4} justifyContent="space-between" alignItems="center">
|
||||
{steps.map((item, index) => (
|
||||
<VStack key={index} spacing={2}>
|
||||
<Radio value={String(index + 1)} colorScheme="purple" size="lg" />
|
||||
<Text fontSize="small" color="#9C9C9C" fontWeight={400}>
|
||||
STEP {index + 1}
|
||||
</Text>
|
||||
<Text color="#000000" fontWeight={600} fontSize="small">
|
||||
{item.label}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={index + 1 === step ? "blue.500" : "gray.500"}
|
||||
>
|
||||
{index + 1 === step ? "In Progress" : "Pending"}
|
||||
</Text>
|
||||
</VStack>
|
||||
))}
|
||||
</Flex>
|
||||
</RadioGroup>
|
||||
{/* Render the appropriate component */}
|
||||
<Box mt={4}>{steps[currentStep].component}</Box>
|
||||
<Flex justifyContent="space-between" mt={8}>
|
||||
<Button
|
||||
onClick={handlePrev}
|
||||
disabled={isFirstStep}
|
||||
colorScheme="purple"
|
||||
variant="outline"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
disabled={isLastStep}
|
||||
colorScheme="purple"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Flex>
|
||||
</RadioGroup>
|
||||
<Box mt={4}>{steps[currentStep].label}</Box>
|
||||
<Flex justifyContent="space-between" mt={8}>
|
||||
<Button
|
||||
onClick={handlePrev}
|
||||
disabled={isFirstStep}
|
||||
colorScheme="purple"
|
||||
variant="outline"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
disabled={isLastStep}
|
||||
colorScheme="purple"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplyForDigitalCard;
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplyForDigitalCard;
|
||||
|
||||
@@ -12,13 +12,24 @@ import {
|
||||
} from "@chakra-ui/react";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import SelectCard from "./SelectCard";
|
||||
import DigiTable from "../DigiTable";
|
||||
import WhereToShare from "./WhereToShare";
|
||||
|
||||
const Stepper = () => {
|
||||
const [step, setStep] = useState(1);
|
||||
const steps = [
|
||||
{ component: <SelectCard />, description: "In Progress" },
|
||||
{ label: "Where to share?", description: "Pending" },
|
||||
{ label: "Select employee", description: "Pending" },
|
||||
{
|
||||
component: <WhereToShare />,
|
||||
|
||||
label: "Where to share?",
|
||||
description: "Pending",
|
||||
},
|
||||
{
|
||||
component: <DigiTable />,
|
||||
label: "Select employee",
|
||||
description: "Pending",
|
||||
},
|
||||
];
|
||||
|
||||
const handleNext = () => {
|
||||
@@ -39,7 +50,7 @@ const Stepper = () => {
|
||||
const circleSize = useBreakpointValue({ base: "30px", md: "40px" });
|
||||
|
||||
return (
|
||||
<Box bgColor="#F3F3F9" {...OPACITY_ON_LOAD} overflow={'scroll'} p={4}>
|
||||
<Box bgColor="#F3F3F9" {...OPACITY_ON_LOAD} overflow={"scroll"} p={4}>
|
||||
<Box bgColor="#fff" maxW="100%">
|
||||
<RadioGroup
|
||||
value={String(step)}
|
||||
@@ -69,9 +80,7 @@ const Stepper = () => {
|
||||
</RadioGroup>
|
||||
|
||||
{/* Stepper Content */}
|
||||
<Box mt={4}>
|
||||
{steps[currentStep].component}
|
||||
</Box>
|
||||
<Box mt={4}>{steps[currentStep].component}</Box>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<Flex justifyContent="space-between" mt={8}>
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Image,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Stack,
|
||||
Text,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerFooter,
|
||||
DrawerOverlay,
|
||||
DrawerContent,
|
||||
DrawerCloseButton,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import FileUploader from "../../../Components/FileUploader/FileUploader";
|
||||
import blackmen from "../../../assets/blackmen.png";
|
||||
import koreanpfp from "../../../assets/koreanboi.png";
|
||||
import asian from "../../../assets/asain.png";
|
||||
import goth from "../../../assets/goth.png";
|
||||
import womenpfp from "../../../assets/womenpfp1.png";
|
||||
import { useRef } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import DigiTable from "../DigiTable";
|
||||
|
||||
const BrandVoucherTable = () => {
|
||||
const [selectedValue, setSelectedValue] = useState("1");
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const btnRef = useRef();
|
||||
|
||||
const renderContent = () => {
|
||||
switch (selectedValue) {
|
||||
case "1":
|
||||
return <Text>Hii</Text>;
|
||||
case "2":
|
||||
return <Text>Heelo</Text>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="100%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
p={4}
|
||||
overflowX="scroll"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
w="100%"
|
||||
flexDirection="column"
|
||||
bgColor="#FFFFFF"
|
||||
p={4}
|
||||
alignItems="start"
|
||||
rounded={"md"}
|
||||
>
|
||||
<Text fontSize="medium" fontWeight={600}>
|
||||
Select employee
|
||||
</Text>
|
||||
<FileUploader />
|
||||
</Box>
|
||||
|
||||
<Text
|
||||
align="center"
|
||||
mt="1rem"
|
||||
color="#0F0F0F"
|
||||
fontWeight={600}
|
||||
fontSize="small"
|
||||
>
|
||||
Download a{" "}
|
||||
<span style={{ color: "#3725EA", fontWeight: 700 }}>
|
||||
sample spreadsheet
|
||||
</span>{" "}
|
||||
to quickly start your import
|
||||
</Text>
|
||||
<Box>
|
||||
<DigiTable />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandVoucherTable;
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Box, Button, Image, Text, VStack } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import VanillaTilt from "vanilla-tilt"; // Ensure this is imported
|
||||
import mobilepng from "../../../assets/mobileCard.png";
|
||||
import cardfooter from "../../../assets/cardFooter.png";
|
||||
import cardfooter2 from "../../../assets/cardFooter2.png";
|
||||
import cardfooter3 from "../../../assets/cardFooter3.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
const cards = [
|
||||
{
|
||||
@@ -34,6 +33,37 @@ const cards = [
|
||||
];
|
||||
|
||||
const SelectCard = () => {
|
||||
const tiltRefs = useRef([]);
|
||||
|
||||
useEffect(() => {
|
||||
tiltRefs.current.forEach((node) => {
|
||||
if (node) {
|
||||
VanillaTilt.init(node, {
|
||||
max: 13,
|
||||
speed: 700,
|
||||
glare: true,
|
||||
scale: 1.05,
|
||||
"max-glare": 0.5,
|
||||
onEnter: () => {
|
||||
node.style.zIndex = 10; // Bring to top on hover
|
||||
},
|
||||
onLeave: () => {
|
||||
node.style.zIndex = 1; // Reset zIndex after hover
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup VanillaTilt instances on unmount
|
||||
return () => {
|
||||
tiltRefs.current.forEach((node) => {
|
||||
if (node?.vanillaTilt) {
|
||||
node.vanillaTilt.destroy();
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [tiltRefs]);
|
||||
|
||||
return (
|
||||
<Box p={4}>
|
||||
<Text color="#000000" fontWeight={600} fontSize="small">
|
||||
@@ -44,14 +74,16 @@ const SelectCard = () => {
|
||||
{cards.map((card, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
ref={(el) => (tiltRefs.current[index] = el)}
|
||||
bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)"
|
||||
color="white"
|
||||
borderRadius="lg"
|
||||
overflow="hidden"
|
||||
width="300px"
|
||||
width={{ base: "100%", md: "300px" }}
|
||||
padding={6}
|
||||
textAlign="center"
|
||||
boxShadow="lg"
|
||||
position="relative"
|
||||
>
|
||||
<VStack
|
||||
h="373px"
|
||||
@@ -59,24 +91,25 @@ const SelectCard = () => {
|
||||
spacing={4}
|
||||
position="relative"
|
||||
>
|
||||
<NavLink to={card.link}>
|
||||
<Button
|
||||
p={4}
|
||||
bgColor="transparent"
|
||||
border="1px solid #ffff"
|
||||
color="#fff"
|
||||
fontSize="small"
|
||||
_hover={{ bgColor: "transparent", color: "white" }}
|
||||
>
|
||||
Select
|
||||
</Button>
|
||||
</NavLink>
|
||||
<Button
|
||||
p={4}
|
||||
bgColor="transparent"
|
||||
border="1px solid #fff"
|
||||
color="#fff"
|
||||
fontSize="small"
|
||||
_hover={{ bgColor: "transparent", color: "white" }}
|
||||
>
|
||||
Select
|
||||
</Button>
|
||||
|
||||
<Text as="span" fontSize="large">
|
||||
{card.title}
|
||||
</Text>
|
||||
|
||||
<Text as="span" fontSize="large">
|
||||
{card.subtitle}
|
||||
</Text>
|
||||
|
||||
<Text as="span" fontSize="small" textAlign="start">
|
||||
{card.description}
|
||||
</Text>
|
||||
@@ -89,6 +122,7 @@ const SelectCard = () => {
|
||||
position="absolute"
|
||||
bottom="-1.5rem"
|
||||
right="-1.5rem"
|
||||
borderRadius="md"
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -100,6 +134,7 @@ const SelectCard = () => {
|
||||
position="absolute"
|
||||
bottom="-1.5rem"
|
||||
left="-1.5rem"
|
||||
borderRadius="md"
|
||||
/>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react";
|
||||
import { Grid, GridItem } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
const formsInfos = [
|
||||
{
|
||||
label: "Address line 1",
|
||||
},
|
||||
{
|
||||
label: "Address line 2",
|
||||
},
|
||||
{
|
||||
label: "Pincode",
|
||||
},
|
||||
{
|
||||
label: "City",
|
||||
},
|
||||
{
|
||||
label: "Single Point Activation Number",
|
||||
},
|
||||
];
|
||||
|
||||
const SingleAddress = () => {
|
||||
return (
|
||||
<Box p={4}>
|
||||
<Text color="#5E5E5E" fontWeight={600} fontSize="small" mb={4}>
|
||||
Fill address details
|
||||
</Text>
|
||||
|
||||
<FormControl>
|
||||
<Grid templateColumns='repeat(2, 1fr)' gap={6}>
|
||||
{formsInfos.map((val) => (
|
||||
<GridItem
|
||||
key={val.label}
|
||||
>
|
||||
<FormLabel>{val.label}</FormLabel>
|
||||
<Input type="text" />
|
||||
</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
</FormControl>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleAddress;
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import SingleAddress from "./SingleAddress";
|
||||
|
||||
const WhereToShare = ({ register }) => {
|
||||
const [selectedValue, setSelectedValue] = useState("1");
|
||||
|
||||
const renderContent = () => {
|
||||
switch (selectedValue) {
|
||||
case "1":
|
||||
return <SingleAddress />;
|
||||
case "2":
|
||||
return <Box>Add department content</Box>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<RadioGroup onChange={setSelectedValue} value={selectedValue}>
|
||||
<Stack spacing={4} direction="row">
|
||||
<Box
|
||||
p={1}
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
borderRadius="5px"
|
||||
bgColor="#F4F4F4"
|
||||
>
|
||||
<Radio size="sm" colorScheme="purple" value="1">
|
||||
Single address
|
||||
</Radio>
|
||||
</Box>
|
||||
<Box
|
||||
p={2}
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
borderRadius="5px"
|
||||
bgColor="#F4F4F4"
|
||||
>
|
||||
<Radio size="sm" colorScheme="blue" value="2">
|
||||
Multiple address
|
||||
</Radio>
|
||||
</Box>
|
||||
</Stack>
|
||||
</RadioGroup>
|
||||
<Box mt={4}>{renderContent()}</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhereToShare;
|
||||
273
src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx
Normal file
273
src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
HStack,
|
||||
IconButton,
|
||||
Image,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Tag,
|
||||
TagLabel,
|
||||
Text,
|
||||
useDisclosure,
|
||||
VStack,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerFooter,
|
||||
DrawerOverlay,
|
||||
DrawerContent,
|
||||
DrawerCloseButton,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
|
||||
import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
|
||||
import { FaRegUser } from "react-icons/fa";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { LuEye, LuListFilter } from "react-icons/lu";
|
||||
import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
|
||||
import { useToast } from "@chakra-ui/react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import FileUploader from "../../Components/FileUploader/FileUploader";
|
||||
|
||||
const Employees = () => {
|
||||
const { employees } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const [scrollBehavior, setScrollBehavior] = useState("inside");
|
||||
const [selectedRadio, setSelectedRadio] = useState([]);
|
||||
const toast = useToast();
|
||||
const btnRef = useRef();
|
||||
|
||||
const {
|
||||
isOpen: isModalOpen,
|
||||
onOpen: onModalOpen,
|
||||
onClose: onModalClose,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isPaymentOpen,
|
||||
onOpen: onPaymentOpen,
|
||||
onClose: onPaymentClose,
|
||||
} = useDisclosure();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRadio.length > 0) {
|
||||
onOpen();
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
}, [selectedRadio, onOpen, onClose]);
|
||||
|
||||
const tableHeadRow = [
|
||||
"Emp ID",
|
||||
"Name",
|
||||
"Email Address",
|
||||
"Department",
|
||||
"Designation",
|
||||
];
|
||||
|
||||
const extractedArray = employees.map((item) => ({
|
||||
"Emp ID": (
|
||||
// <Checkbox colorScheme="purple" value="1">
|
||||
<Text as={"span"} fontSize={"xs"}>
|
||||
{item?.EmpID}
|
||||
</Text>
|
||||
// </Checkbox>
|
||||
),
|
||||
Name: (
|
||||
<HStack>
|
||||
<Image
|
||||
borderRadius="full"
|
||||
boxSize="40px"
|
||||
src="https://bit.ly/dan-abramov"
|
||||
alt="Dan Abramov"
|
||||
/>
|
||||
<Text mb={0}>{item?.Name}</Text>
|
||||
</HStack>
|
||||
),
|
||||
"Email Address": item?.emailAddress,
|
||||
Department: item?.Department,
|
||||
Designation: item?.Role,
|
||||
Status: (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
borderRadius="full"
|
||||
colorScheme={
|
||||
item?.status === "Active"
|
||||
? "green"
|
||||
: item?.status === "Inactive"
|
||||
? "red"
|
||||
: "gray"
|
||||
}
|
||||
border={`1px solid ${
|
||||
item?.status === "Active"
|
||||
? "green"
|
||||
: item?.status === "Inactive"
|
||||
? "red"
|
||||
: "gray"
|
||||
}`}
|
||||
p={1}
|
||||
px={3}
|
||||
>
|
||||
<TagLabel>{item?.status}</TagLabel>
|
||||
</Tag>
|
||||
),
|
||||
Action: (
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
aria-label="Options"
|
||||
icon={<BsThreeDotsVertical />}
|
||||
bg={"transparent"}
|
||||
/>
|
||||
<MenuList>
|
||||
<MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
|
||||
>
|
||||
Delete
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<LuEye color="#6311CB" size={16} />}
|
||||
onClick={() => navigate("/employees/view")}
|
||||
>
|
||||
View
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
w="100%"
|
||||
flexDirection="column"
|
||||
bgColor="#FFFFFF"
|
||||
p={4}
|
||||
alignItems="start"
|
||||
rounded={"md"}
|
||||
>
|
||||
<Text fontSize="medium" fontWeight={600}>
|
||||
Import employee
|
||||
</Text>
|
||||
<FileUploader />
|
||||
</Box>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<BsFilterRight fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
>
|
||||
Sort
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Ascending</MenuItem>
|
||||
<MenuItem>Descending</MenuItem>
|
||||
<MenuItem>Recently Viewed</MenuItem>
|
||||
<MenuItem>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
<HStack>
|
||||
<InputGroup width={300} size="sm">
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Type to search..."
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<LuListFilter fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
>
|
||||
Filter
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Ascending</MenuItem>
|
||||
<MenuItem>Descending</MenuItem>
|
||||
<MenuItem>Recently Viewed</MenuItem>
|
||||
<MenuItem>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<Button
|
||||
color="white"
|
||||
bgColor="#6311CB"
|
||||
fontSize="small"
|
||||
_hover={{ bgColor: "#6311CB", color: "white" }}
|
||||
>
|
||||
Proceed
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Employees`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
showRadioButton={true}
|
||||
setSelectedRadio={setSelectedRadio}
|
||||
selectedRadio={selectedRadio}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Employees;
|
||||
Reference in New Issue
Block a user