[Main Form] Added the Academics Component in the Main Form.

package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@material/web": "^2.2.0",
+    "@mui/icons-material": "^6.4.3",
     "@mui/material": "^6.4.1",
     "@mui/x-date-pickers": "^7.24.1",
     "cra-template": "1.2.0",

src/CPS-Frontend/Main Form/Attended Workshops/attendedWorkshop.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { useState } from "react";
+import { RadioGroup, Radio, Box, Tooltip, FormGroup, TextField, Card, CardContent, Typography, CardHeader, FormControlLabel } from "@mui/material";
+
+
+const ConferenceOrganizer = () => {
+
+    const [conferenceOrgChecked, setconferenceOrgChecked] = useState(false);
+
+    const [numberOfConferenceOrg, setnumberOfConferenceOrg] = useState();
+    console.log(numberOfConferenceOrg);
+
+    const handleConferenceOrgChecked = (e) => {
+        setconferenceOrgChecked(e.target.value);
+    }
+
+    return (
+        <>
+            <Card variant="elevation" elevation={5} sx={{ width: '100%', paddingLeft: "40px", paddingRight: "40px" }} raised>
+                <CardHeader title="Attended Workshop / FDP / Short term
+courses of minimum of 05 working days
+duration in offline mode." subheader="Select Options" sx={{ textAlign: "center" }} />
+
+                <FormGroup row sx={{ marginTop: "10px", marginBottom: "20px", alignItems: "center", gap: 2, justifyContent: "space-between" }}>
+                    <Typography>Have you ever Attended Workshop / FDP / Short term
+                        courses of minimum of 05 working days
+                        duration in offline mode.?</Typography>
+                    <RadioGroup row sx={{ gap: 2 }} value={conferenceOrgChecked} onChange={(e) => handleConferenceOrgChecked(e)}>
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+                </FormGroup>
+
+                {(conferenceOrgChecked !== "No" && conferenceOrgChecked) &&
+                    <>
+                        <CardContent>
+                            <Tooltip title={
+                                <Box sx={{ padding: '8px', maxWidth: "250px" }}>
+                                    <Typography variant="body1" sx={{ fontWeight: 'bold' }}>Number of Attended Workshops / FDP / STC</Typography>
+                                    <Typography variant="body2">
+                                        -Maximum Allowed Value is <strong>3</strong> from last Appointment<br />
+                                        -Please Ensure Valid Entries Only.<br />
+                                    </Typography>
+                                </Box>
+                            } arrow placement="right" enterDelay={200} leaveDelay={200}><TextField inputProps={{ min: 0, max: 3 }} type="number" label="How many number of Attended Workshops / FDP / STC?" fullWidth onChange={(e) => { let value = parseInt(e.target.value, 10); if (value > 3) { value = 3 } if (value < 0) { value = 0 } if (isNaN(value)) { value = e.target.value } e.target.value = value; setnumberOfConferenceOrg(value) }} />
+                            </Tooltip>
+                        </CardContent>
+
+                    </>
+                }
+
+            </Card >
+        </>
+    );
+}
+
+export default ConferenceOrganizer;

src/CPS-Frontend/Main Form/BookPublishedInternational/booksPublishedInternational.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { Radio, RadioGroup, FormGroup, Card, CardHeader, FormControlLabel, Typography, FormControl, TextField } from "@mui/material";
+
+const BooksPublishedInInternational = () => {
+
+    const [industryProjectsChecked, setindustryProjectsChecked] = useState(false);
+
+    const [NumberofIndustryProjects, setNumberofIndustryProjects] = useState();
+    console.log(setNumberofIndustryProjects);
+
+    const [bookISBNnumber, setbookISBNnumber] = useState([]);
+    console.log(bookISBNnumber);
+
+    const [IndustryProjectsNumber, setIndustryProjectsNumber] = useState([]);
+
+    useEffect(() => {
+        if (NumberofIndustryProjects) {
+            const count = parseInt(NumberofIndustryProjects, 10) || 0;
+            setIndustryProjectsNumber((prevList) => {
+                const newList = [...prevList];
+                if (newList.length < count) {
+                    newList.push(...Array(count - newList.length).fill({ industryAttachementsOption: "" }));
+                } else {
+                    newList.length = count;
+                }
+                return newList;
+            });
+        }
+    }, [NumberofIndustryProjects]);
+
+    const handleaIndustryProjectsChecked = (e) => {
+        setindustryProjectsChecked(e.target.value);
+    }
+
+    return (
+        <>
+            <Card variant="elevation" elevation={5} sx={{ width: '100%', paddingLeft: "40px", paddingRight: "40px", paddingBottom: "20px" }} raised>
+                <CardHeader title="Text / Reference book published on relevant
+subjects from reputed international
+publishers with ISBN" subheader="Select Options" sx={{ textAlign: "center" }} />
+
+                <FormGroup row sx={{ marginTop: "10px", marginBottom: "20px", alignItems: "center", gap: 2, justifyContent: "space-between" }}>
+                    <Typography>Do you have any Text / Reference book published on relevant
+                        subjects from reputed international
+                        publishers with ISBN?</Typography>
+                    <RadioGroup row sx={{ gap: 2 }} value={industryProjectsChecked} onChange={(e) => handleaIndustryProjectsChecked(e)}>
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+                </FormGroup>
+
+                {(industryProjectsChecked !== "No" && industryProjectsChecked) &&
+                    <>
+                        <FormControl fullWidth>
+                            <TextField label="How many Text / Reference book published in Inteenational publishers with ISBN?" type="number" variant="outlined" fullWidth onChange={(e) => { let value = parseInt(e.target.value, 10); if (value <= 0) { value = 0; } else if (value) { } else { value = isNaN(value); } e.target.value = value; setNumberofIndustryProjects(e.target.value) }} />
+                        </FormControl>
+
+                        {(industryProjectsChecked !== "No") && IndustryProjectsNumber.map((_, index) => (
+                            <FormControl fullWidth sx={{ marginTop: "20px" }}>
+                                <Typography variant="h5" sx={{ marginBottom: "20px", textAlign: "center" }}>Information About Text / Reference Book {index + 1}</Typography>
+                                <FormControl fullWidth>
+                                    <TextField type="number" label="Enter the ISBN Number of the Text / Reference Book" fullWidth variant="outlined" onChange={(e) => { let value = parseInt(e.target.value, 10); if (value <= 0) { value = 0; } else if (value) { } else { value = isNaN(value); } e.target.value = value; setbookISBNnumber(e.target.value) }} />
+                                </FormControl>
+                            </FormControl>
+                        ))}
+                    </>
+
+                }
+
+            </Card >
+
+        </>
+    );
+}
+
+export default BooksPublishedInInternational;

src/CPS-Frontend/Main Form/BooksPublishedInNational/booksPublishedNational.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { Radio, RadioGroup, FormGroup, Card, CardHeader, FormControlLabel, Typography, FormControl, TextField } from "@mui/material";
+
+const BooksPublishedInNational = () => {
+
+    const [industryProjectsChecked, setindustryProjectsChecked] = useState(false);
+
+    const [NumberofIndustryProjects, setNumberofIndustryProjects] = useState();
+    console.log(setNumberofIndustryProjects);
+
+    const [bookISBNnumber, setbookISBNnumber] = useState([]);
+    console.log(bookISBNnumber);
+
+    const [IndustryProjectsNumber, setIndustryProjectsNumber] = useState([]);
+
+    useEffect(() => {
+        if (NumberofIndustryProjects) {
+            const count = parseInt(NumberofIndustryProjects, 10) || 0;
+            setIndustryProjectsNumber((prevList) => {
+                const newList = [...prevList];
+                if (newList.length < count) {
+                    newList.push(...Array(count - newList.length).fill({ industryAttachementsOption: "" }));
+                } else {
+                    newList.length = count;
+                }
+                return newList;
+            });
+        }
+    }, [NumberofIndustryProjects]);
+
+    const handleaIndustryProjectsChecked = (e) => {
+        setindustryProjectsChecked(e.target.value);
+    }
+
+    return (
+        <>
+            <Card variant="elevation" elevation={5} sx={{ width: '100%', paddingLeft: "40px", paddingRight: "40px", paddingBottom: "20px" }} raised>
+                <CardHeader title="Text / Reference Books published on
+relevant subjects from reputed national
+publishers with ISBN" subheader="Select Options" sx={{ textAlign: "center" }} />
+
+                <FormGroup row sx={{ marginTop: "10px", marginBottom: "20px", alignItems: "center", gap: 2, justifyContent: "space-between" }}>
+                    <Typography>Do you have any Text / Reference Books published on
+                        relevant subjects from reputed national
+                        publishers with ISBN?</Typography>
+                    <RadioGroup row sx={{ gap: 2 }} value={industryProjectsChecked} onChange={(e) => handleaIndustryProjectsChecked(e)}>
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+                </FormGroup>
+
+                {(industryProjectsChecked !== "No" && industryProjectsChecked) &&
+                    <>
+                        <FormControl fullWidth>
+                            <TextField label="How many Text / Reference book published in National publishers with ISBN?" type="number" variant="outlined" fullWidth onChange={(e) => { let value = parseInt(e.target.value, 10); if (value <= 0) { value = 0; } else if (value) { } else { value = isNaN(value); } e.target.value = value; setNumberofIndustryProjects(e.target.value) }} />
+                        </FormControl>
+
+                        {(industryProjectsChecked !== "No") && IndustryProjectsNumber.map((_, index) => (
+                            <FormControl fullWidth sx={{ marginTop: "20px" }}>
+                                <Typography variant="h5" sx={{ marginBottom: "20px", textAlign: "center" }}>Information About Text / Reference Book {index + 1}</Typography>
+                                <FormControl fullWidth>
+                                    <TextField type="number" label="Enter the ISBN Number of the Text / Reference Book" fullWidth variant="outlined" onChange={(e) => { let value = parseInt(e.target.value, 10); if (value <= 0) { value = 0; } else if (value) { } else { value = isNaN(value); } e.target.value = value; setbookISBNnumber(e.target.value) }} />
+                                </FormControl>
+                            </FormControl>
+                        ))}
+                    </>
+
+                }
+
+            </Card >
+
+        </>
+    );
+}
+
+export default BooksPublishedInNational;