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

dash add emp modal fix

Browse Source
This commit is contained in:
priyanshuvish
2024-10-10 15:40:57 +05:30
parent e49aa35b15
commit 5cfea1b44c
4 changed files with 76 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Components/Cards/BlueCard.jsx
View File

@@ -1,13 +1,16 @@
import { Box, Stack, Text, Link, Badge } from '@chakra-ui/react';
import React from 'react';
import { Box, Stack, Text, Link } from '@chakra-ui/react';
import React, { useState } from 'react'; // Import useState
import { MdGroups } from 'react-icons/md';
import EmployeesAddModal from '../../Pages/ManageHumanResource/EmployeesAddModal';
function BlueCard({ blueCardData }) {
const [isOpen, setIsOpen] = useState(false); // State to manage modal visibility
const openModal = () => setIsOpen(true); // Function to open the modal
const closeModal = () => setIsOpen(false); // Function to close the modal
function BlueCard({blueCardData}) {
return (
<Box
backgroundColor={blueCardData.backgroundColor}
borderRadius="xl"
>
<Box backgroundColor={blueCardData.backgroundColor} borderRadius="xl">
<Box bg="#fff" borderRadius="xl" p={4} h="115px">
<Stack direction={["column", "row"]} color={blueCardData.backgroundColor}>
<Text as="span">
@@ -17,7 +20,7 @@ function BlueCard({blueCardData}) {
{blueCardData.title.toUpperCase()}
</Text>
</Stack>
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
{blueCardData.count}
</Text>
</Box>
@@ -31,9 +34,12 @@ function BlueCard({blueCardData}) {
<MdGroups />
</Text>
<Text fontSize="sm" m={0} py={2}>
<Link mb={0}>{blueCardData.buttonText}</Link>
<Link mb={0} onClick={openModal}>{blueCardData.buttonText}</Link>
</Text>
</Stack>
{blueCardData.title === "Total EMPLOYEES" && (
<EmployeesAddModal isOpen={isOpen} onClose={closeModal} />
)}
</Box>
);
}

210
src/Pages/Onboarding/OnboardingAboutCompany.jsx
View File

@@ -38,7 +38,7 @@ const validationSchema = Yup.object().shape({
mobileNumber_corporate: Yup.string()
.matches(/^\d{10}$/, "Phone number must be 10 digits")
.required("Phone number is required"),
logo_path_file_name:Yup.mixed().required('Company logo is required'),
logo_path_file_name: Yup.mixed().required('Company logo is required'),
});
const OnboardingAboutCompany = ({
@@ -85,15 +85,12 @@ const OnboardingAboutCompany = ({
};
const onSubmit = async (data) => {
setCorpData({ ...corpData, ...data });
setCorpData({ ...corpData, ...data });
handleNext();
// Handle your submit logic here
};
const handleFileUpload = async (file, setPreview) => {
setIsLoading(true)
console.log('File uploaded:', file);
@@ -103,23 +100,23 @@ const OnboardingAboutCompany = ({
const code = localStorage?.getItem("codeCorporate");
try {
const res = await sendFile({ data: formData, code }); // Upload file to server
console.log(res);
console.log(res);
if (res?.data?.data) {
// Assuming res.data.data contains the file URL or some ID
setCorpData({ ...corpData, logo_path_file_name:res?.data?.data });
setCorpData({ ...corpData, logo_path_file_name: res?.data?.data });
setValue("logo_path_file_name", res?.data?.data);
console.log(errors);
console.log(errors);
setPreview(res?.data?.data)
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
setIsLoading(false);
} else if (res?.error?.data?.message){
} else if (res?.error?.data?.message) {
toast({
render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
});
} else if(res?.error){
} else if (res?.error) {
toast({
render: () => <ToastBox status={'error'} message={"Somthing went wrong"} />,
});
@@ -175,9 +172,9 @@ const OnboardingAboutCompany = ({
{/* Industry Select Field */}
<FormControl isRequired mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Industry
</Text>
</FormLabel>
<InputGroup>
<Select
placeholder="Select industry"
@@ -228,156 +225,55 @@ const OnboardingAboutCompany = ({
</FormErrorMessage>
</FormControl>
{/* Upload Company Logo Field */}
{/* <Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Upload Company Logo
<FileUploader
label="Upload Company Logo"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUpload}
> {errors.logo_path_file_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.logo_path_file_name?.message}
</Text>
<Box
my={2}
position="relative"
onClick={() =>
document.getElementById("company-logo-file-input").click()
}
)}
</FileUploader>
<HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
variant="outline"
size="sm"
px={8}
_hover={{ opacity: 0.8 }}
color={"#d0b8ef"}
border={"1px solid #d0b8ef"}
isDisabled={activeStep === 0}
onClick={() => setActiveStep(activeStep - 1)}
/>
<Button
bg={"#6311CB"}
color={"#fff"}
fontSize={"xs"}
fontWeight={500}
size="sm"
_hover={{ opacity: 0.8 }}
rightIcon={<ArrowForwardIcon />}
w={"100%"}
type="submit"
// isLoading={isLoading}
>
<VStack
border={"1px dashed #D0D5DD"}
boxShadow={"md"}
borderRadius={"md"}
bg={"#faf8fd"}
p={4}
h={"28"}
justifyContent={"center"}
cursor="pointer"
>
<SlCloudUpload color={"#191D23"} size={30} />
<Text
color={"#191D23"}
fontWeight={"500"}
fontSize={"sm"}
mt={"2"}
mb={0}
>
Drag and drop files here or{" "}
<Text as="span" textDecoration="underline">
Choose file
</Text>
</Text>
</VStack>
<input
type="file"
id="company-logo-file-input"
style={{ display: "none" }} // Hide the file input
onChange={(e) => {
handleFileChange(e); // Handle file input
}}
/>
{activeStep === steps.length - 1 ? "Next step" : "Next step"}
</Button>
</HStack>
{fileName && (
<Text fontSize="sm" mt={2}>
Uploaded file: {fileName}
</Text>
)}
</Box>
{errors.logo_path_file_name && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.logo_path_file_name.message}
</Text>
)}
<HStack justifyContent={"space-between"}>
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
Supported formats- jpg, png, svg
</Text>
<Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
Maximum size - 20MB
</Text>
</HStack>
<HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
variant="outline"
size="sm"
px={8}
_hover={{ opacity: 0.8 }}
color={"#d0b8ef"}
border={"1px solid #d0b8ef"}
isDisabled={activeStep === 0}
onClick={() => setActiveStep(activeStep - 1)}
/>
<Button
bg={"#6311CB"}
color={"#fff"}
fontSize={"xs"}
fontWeight={500}
size="sm"
_hover={{ opacity: 0.8 }}
rightIcon={<ArrowForwardIcon />}
w={"100%"}
type="submit"
isLoading={isLoading}
>
{activeStep === steps.length - 1 ? "Next step" : "Next step"}
</Button>
</HStack>
</Box> */}
<FileUploader
label="Upload Company Logo"
maxFileSize={3 * 1024 * 1024} // Max 3MB size
onFileUpload={handleFileUpload}
> {errors.logo_path_file_name?.message && (
<Text color="red" fontWeight={500} fontSize="xs">
{errors.logo_path_file_name?.message}
</Text>
)}
</FileUploader>
<HStack mt={6}>
<IconButton
aria-label="Back"
icon={<ArrowBackIcon />}
variant="outline"
size="sm"
px={8}
_hover={{ opacity: 0.8 }}
color={"#d0b8ef"}
border={"1px solid #d0b8ef"}
isDisabled={activeStep === 0}
onClick={() => setActiveStep(activeStep - 1)}
/>
<Button
bg={"#6311CB"}
color={"#fff"}
fontSize={"xs"}
fontWeight={500}
size="sm"
_hover={{ opacity: 0.8 }}
rightIcon={<ArrowForwardIcon />}
w={"100%"}
type="submit"
// isLoading={isLoading}
>
{activeStep === steps.length - 1 ? "Next step" : "Next step"}
</Button>
</HStack>
</Box>
{/* Display the loading spinner */}
{isLoading && (
<Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'} position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
{/* Display the loading spinner */}
{isLoading && (
<Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'} position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
<Text as={'span'} fontWeight={600} fontSize={'sm'}>Uploading please wait...</Text>
</Box>
)}

8
src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx
View File

@@ -225,9 +225,9 @@ const OnboardingAddCompanyDetails = ({
{/* Company PAN Field */}
<Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company PAN
</Text>
</FormLabel>
<Input
type='text'
border="1px solid #e2e8f0"
@@ -241,9 +241,9 @@ const OnboardingAddCompanyDetails = ({
{/* Company GST Number */}
<Box mb={3}>
<Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
<FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
Company GST number
</Text>
</FormLabel>
<Input
type='text'
border="1px solid #e2e8f0"

8
src/Pages/Report/Report.jsx
View File

@@ -231,11 +231,11 @@ const Report = () => {
</Box>
</HStack>
<HStack w={"100%"} mb={4}>
<Box bg={"#fff"} me={2} rounded={6} w={"65%"} pb={0} p={4} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
<ApexLine />
<Box h={300} bg={"#fff"} me={2} rounded={6} w={"65%"} pb={0} p={4} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
{/* <ApexLine /> */}
</Box>
<Box bg={"#fff"} rounded={6} w={"35%"} p={4} display={"flex"} justifyContent={"center"} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
<PieCharts />
<Box h={300} bg={"#fff"} rounded={6} w={"35%"} p={4} display={"flex"} justifyContent={"center"} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
{/* <PieCharts /> */}
</Box>
</HStack>
<Box