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

SideBar Fix

Browse Source
This commit is contained in:
npcdazai
2024-10-09 12:12:27 +05:30
parent 9713ba5c90
commit dac977ff52
6 changed files with 301 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Components/DataTable/NormalTable.jsx
View File

@@ -63,9 +63,9 @@ const NormalTable = ({
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
<TableCaption p={total ? 0 : null}>
{total ? total : "Tanami v1.0.0"}
</TableCaption>
{/* <TableCaption p={total ? 0 : null}>
{total ? total : "Optifii v1.0.0"}
</TableCaption> */}
<Thead bg="purple.100">
<Tr>
{showRadioButton && (

7
src/Layout/DefaultLayout.jsx
View File

@@ -346,13 +346,12 @@ const DashboardLayout = ({ isOnline }) => {
>
{({ isActive }) => (
<>
{SubIcon && (
{/* {SubIcon && (
<SubIcon
fontSize={"8px"}
fontSize={"18px"}
className="ms-2"
/>
)}
{/* Blue Dot when submenu is active */}
)} */}
{isActive && (
<Box
as="span"

1
src/Pages/Dashboard/Dashbaord.jsx
View File

@@ -31,7 +31,6 @@ 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 { GaugeComponent } from "react-gauge-component";
import {
BsArrowsAngleExpand,

503
src/Pages/Onboarding/OnboardingFrame.jsx
View File

@@ -1,69 +1,115 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState } from "react";
import {
Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
StepTitle, Divider, Button, HStack, IconButton, Flex,
useDisclosure
} from '@chakra-ui/react';
import Header from './Header';
Box,
Text,
Stepper,
Step,
StepIndicator,
StepStatus,
StepSeparator,
useSteps,
StepTitle,
Divider,
Button,
HStack,
IconButton,
Flex,
useDisclosure,
Image,
} from "@chakra-ui/react";
import Header from "./Header";
import onboarding_bg from "../../assets/onboarding_bg.webp";
import { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons';
import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa';
import OnboardingYourDetails from './OnboardingYourDetails';
import OnboardingAboutCompany from './OnboardingAboutCompany';
import OnboardingAddCompanyDetails from './OnboardingAddCompanyDetails';
import OnboardingDirectorDetails from './OnboardingDirectorDetails';
import OnboardingSelectPackage from './OnboardingSelectPackage';
import OnboardingSelectPackageModal from './OnboardingSelectPackageModal'; // Import your modal component
import { OPACITY_ON_LOAD } from '../../Layout/animations';
import { useSearchParams } from 'react-router-dom';
import {
ArrowBackIcon,
ArrowForwardIcon,
CheckIcon,
Icon,
} from "@chakra-ui/icons";
import {
FaUser,
FaBuilding,
FaClipboard,
FaUserTie,
FaBoxOpen,
} from "react-icons/fa";
import OnboardingYourDetails from "./OnboardingYourDetails";
import OnboardingAboutCompany from "./OnboardingAboutCompany";
import OnboardingAddCompanyDetails from "./OnboardingAddCompanyDetails";
import OnboardingDirectorDetails from "./OnboardingDirectorDetails";
import OnboardingSelectPackage from "./OnboardingSelectPackage";
import OnboardingSelectPackageModal from "./OnboardingSelectPackageModal"; // Import your modal component
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useSearchParams } from "react-router-dom";
import company from "../../assets/company.png";
import pfp from "../../assets/pfp.png";
// Retrieve the active step from localStorage or set it to 0 if it doesn't exist
// const initialStep = parseInt(localStorage.getItem("activeStep")) || 0;
const OnboardingFrame = () => {
// Create a searchParams instance
const [searchParams] = useSearchParams();
const [ corpData, setCorpData ] = useState({})
const [corpData, setCorpData] = useState({});
useEffect(() => {
// Extract specific parameters
if (searchParams) {
const codeCorporate = searchParams.get("code_corporate");
const codeCorporateId = searchParams.get("code_corporateId");
localStorage?.setItem('codeCorporate', codeCorporate)
localStorage?.setItem('codeCorporateId', codeCorporateId)
const codeCorporate = searchParams.get("code_corporate");
const codeCorporateId = searchParams.get("code_corporateId");
localStorage?.setItem("codeCorporate", codeCorporate);
localStorage?.setItem("codeCorporateId", codeCorporateId);
}
}, [searchParams])
}, [searchParams]);
useEffect(() => {
localStorage.setItem("corpData", JSON.stringify(corpData));
console.log(corpData);
}, [corpData])
}, [corpData]);
// Modal state and disclosure hook
const { isOpen, onOpen, onClose } = useDisclosure();
// Modal state and disclosure hook
const { isOpen, onOpen, onClose } = useDisclosure();
const steps = [
{
title: "Your details",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaUser,
img: company,
},
{
title: "About Company",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaBuilding,
img: company,
},
{
title: "Company details",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaClipboard,
img: company,
},
{
title: "Director details",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaUserTie,
img: pfp,
},
{
title: "Select package",
description: "Lorem ipsum dolor sit amet dolor",
icon: FaBoxOpen,
img: company,
},
];
const steps = [
{ title: 'Your details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUser },
{ title: 'About Company', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBuilding },
{ title: 'Company details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaClipboard },
{ title: 'Director details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUserTie },
{ title: 'Select package', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBoxOpen },
];
// Stepper configuration
const { activeStep, setActiveStep } = useSteps({
// Stepper configuration
const { activeStep, setActiveStep } = useSteps({
index: 0, // Initialize the active step from localStorage or 0
count: steps.length,
});
// Function to handle the "Next" button click
const handleNext = () => {
// Function to handle the "Next" button click
const handleNext = () => {
if (activeStep === steps.length - 1) {
// If it's the last step, open the modal
onOpen();
@@ -71,175 +117,216 @@ const handleNext = () => {
// Otherwise, go to the next step
const nextStep = activeStep + 1;
setActiveStep(nextStep);
// Store the new active step in localStorage
localStorage.setItem("activeStep", nextStep);
}
};
// Array of components for each step
const stepComponents = [
<OnboardingYourDetails
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingAboutCompany
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingAddCompanyDetails
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingDirectorDetails
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
<OnboardingSelectPackage
corpData={corpData}
setCorpData={setCorpData}
setActiveStep={setActiveStep}
activeStep={activeStep}
steps={steps}
handleNext={handleNext}
/>,
];
// Array of components for each step
const stepComponents = [
<OnboardingYourDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingAboutCompany corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingAddCompanyDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingDirectorDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />,
<OnboardingSelectPackage corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext} />
];
return (
<Box>
{/* Onboarding content */}
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
<Header />
<Box
w={'100%'}
minH="calc(100vh - 62px)"
bgImage={`url(${onboarding_bg})`}
bgSize={'cover'}
bgPosition={'center'}
position={'relative'}
px={6}
display={"flex"}
gap={"6"}
alignItems={"start"}
_before={{
content: '""',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
bg: 'rgba(0, 0, 0, 0.3)',
zIndex: 1,
}}
return (
<Box>
{/* Onboarding content */}
<Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
<Header />
<Box
w={"100%"}
minH="calc(100vh - 62px)"
bgImage={`url(${onboarding_bg})`}
bgSize={"cover"}
bgPosition={"center"}
position={"relative"}
px={6}
display={"flex"}
gap={"6"}
alignItems={"start"}
_before={{
content: '""',
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
bg: "rgba(0, 0, 0, 0.3)",
zIndex: 1,
}}
>
{/* Stepper Box */}
<Box
w={"100%"}
my={5}
boxShadow={"md"}
maxW={"350px"}
zIndex={2}
bg={"#fff"}
py={6}
px={4}
borderRadius={"md"}
maxH={"82.9vh"}
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
"&::-webkit-scrollbar": {
width: "6px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#6311CB",
borderRadius: "6px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "#F6F0FF",
},
}}
>
<Box>
<Text color={"#49475A"} fontWeight={500} fontSize={"sm"}>
Lorem ipsum dolor sit amet, adipiscing elit.
</Text>
<Divider />
<Box>
<Stepper
index={activeStep}
orientation="vertical"
h="400"
gap="0"
my={"5"}
sx={{ "--stepper-accent-color": "#6311CB" }}
>
{/* Stepper Box */}
<Box
w={'100%'}
my={5}
boxShadow={'md'}
maxW={"350px"}
zIndex={2}
bg={'#fff'}
py={6}
px={4}
borderRadius={'md'}
maxH={"82.9vh"}
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
'&::-webkit-scrollbar': {
width: '6px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#6311CB',
borderRadius: '6px',
},
'&::-webkit-scrollbar-track': {
backgroundColor: '#F6F0FF',
},
}}
>
<Box>
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
Lorem ipsum dolor sit amet, adipiscing elit.
</Text>
<Divider />
<Box>
<Stepper
index={activeStep}
orientation="vertical"
h="400"
gap="0"
my={"5"}
sx={{ '--stepper-accent-color': '#6311CB' }}
>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator>
<StepStatus
complete={<CheckIcon boxSize="16px" />}
incomplete={<Icon as={step.icon} color={"purple.400"} boxSize="16px" />}
active={<Icon as={step.icon} color={"purple.500"} boxSize="16px" />}
/>
</StepIndicator>
<Box flexShrink="0" ml={4}>
<StepTitle
fontWeight={activeStep === index ? "600" : "500"}
fontSize={activeStep === index ? "md" : "sm"}
mb={1}
>
{step.title}
</StepTitle>
<Text fontSize="xs" color="gray.500">
{step.description}
</Text>
</Box>
<StepSeparator
borderColor={activeStep > index ? "purple.500" : "purple.300"}
borderWidth={1}
/>
</Step>
))}
</Stepper>
</Box>
</Box>
</Box>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator>
<StepStatus
complete={<CheckIcon boxSize="16px" />}
incomplete={
<Image
src={step.img}
color={"purple.400"}
boxSize="16px"
/>
}
active={
<Icon
as={step.icon}
color={"purple.500"}
boxSize="16px"
/>
}
/>
</StepIndicator>
<Box flexShrink="0" ml={4}>
<StepTitle
fontWeight={activeStep === index ? "600" : "500"}
fontSize={activeStep === index ? "md" : "sm"}
mb={1}
>
{step.title}
</StepTitle>
<Text fontSize="xs" color="gray.500">
{step.description}
</Text>
</Box>
<StepSeparator
borderColor={
activeStep > index ? "purple.500" : "purple.300"
}
borderWidth={1}
/>
</Step>
))}
</Stepper>
</Box>
</Box>
</Box>
{/* Content Box */}
<Box
w={'100%'}
bg={'#fff'}
p={6}
borderRadius={'md'}
my={5}
boxShadow={'md'}
zIndex={2}
maxH="calc(82vh - 0px)"
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
'&::-webkit-scrollbar': {
width: '6px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#6311CB',
borderRadius: '6px',
},
'&::-webkit-scrollbar-track': {
backgroundColor: '#F6F0FF',
},
}}
>
<HStack justifyContent={"end"}>
{/* Content Box */}
<Box
w={"100%"}
bg={"#fff"}
p={6}
borderRadius={"md"}
my={5}
boxShadow={"md"}
zIndex={2}
maxH="calc(82vh - 0px)"
overflowY={"auto"}
sx={{
/* Custom scrollbar styling */
"&::-webkit-scrollbar": {
width: "6px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#6311CB",
borderRadius: "6px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "#F6F0FF",
},
}}
>
<HStack justifyContent={"end"}>
{/* Step Indicator (Horizontal) */}
<Flex justify="center" align="center" gap={2} mt={4}>
{steps.map((_, index) => (
<Box
key={index}
h="4px"
w="20px"
bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
borderRadius="full"
/>
))}
</Flex>
</HStack>
{/* Step Indicator (Horizontal) */}
<Flex justify="center" align="center" gap={2} mt={4}>
{steps.map((_, index) => (
<Box
key={index}
h="4px"
w="20px"
bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
borderRadius="full"
/>
))}
</Flex>
</HStack>
<Box>
<Box w={{ base: "70%", lg: "92%" }} mx={"auto"}>
{/* Render the current step component */}
{stepComponents[activeStep]}
<Box>
<Box
w={{ base: "70%", lg: "92%" }}
mx={"auto"}
>
{/* Render the current step component */}
{stepComponents[activeStep]}
{/* <HStack mt={6}>
{/* <HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
@@ -267,16 +354,16 @@ const handleNext = () => {
{activeStep === steps.length - 1 ? 'Next step' : 'Next step'}
</Button>
</HStack> */}
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
{/* Modal for final step */}
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
</Box>
</Box>
);
</Box>
{/* Modal for final step */}
<OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
</Box>
);
};
export default OnboardingFrame;

BIN
src/assets/company.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 B

BIN
src/assets/pfp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 588 B