hardwater-ui-planner 0.0.1

package/dist/components/Molecules/Teacher/StudentModals/StudentModal.js

@@ -0,0 +1,737 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const toaster_1 = require("../../../ui/toaster");
+const StudentModal = ({ open, onClose, academicYearName, inputData, colors, createStudent, getAcademicYear, getSchools, StorageService, buttonStyles, }) => {
+    const [formErrors, setFormErrors] = (0, react_1.useState)({});
+    const [curriculumData, setCurriculumData] = (0, react_1.useState)([]);
+    const [gradeData, setGradeData] = (0, react_1.useState)([]);
+    const [sectionData, setSectionData] = (0, react_1.useState)([]);
+    const [filteredData, setFilteredData] = (0, react_1.useState)([]);
+    const [curriculum, setCurriculum] = (0, react_1.useState)('');
+    const [grade, setGrade] = (0, react_1.useState)('');
+    const [section, setSection] = (0, react_1.useState)('');
+    const [schoolName, setSchoolName] = (0, react_1.useState)('');
+    const [schoolId, setSchoolId] = (0, react_1.useState)('');
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    const [formData, setFormData] = (0, react_1.useState)(inputData);
+    const [isClicked, setIsClicked] = (0, react_1.useState)(false);
+    const nameRegex = /^[a-zA-Z\s]*[a-zA-Z][a-zA-Z\s]*$/;
+    const emailRegex = /\S+@\S+\.\S+/;
+    const phoneNumberRegex = /^\+?(?:(?:00)?91)?[1-9][0-9]{9}$/;
+    const { small, medium, large, extraLarge } = buttonStyles.buttonSizes;
+    (0, react_1.useEffect)(() => {
+        let userDetails = StorageService.getItem('userDetails');
+        userDetails = JSON.parse(userDetails);
+        if (userDetails?.schoolId) {
+            setSchoolId(userDetails?.schoolId);
+        }
+    }, []);
+    const getCurriculumData = async () => {
+        let result = await getAcademicYear(schoolId);
+        const filteredData = result.data.filter((item) => item.schoolId === schoolId && item.ayName == academicYearName);
+        setFilteredData(filteredData);
+        const tempData = filteredData.map((val) => {
+            return {
+                name: val.curriculumName,
+                id: val.curriculumId
+            };
+        });
+        let setCurr = new Set(tempData.map((item) => JSON.stringify(item)));
+        const uniqueCurriculumArray = Array.from(setCurr).map((item) => JSON.parse(item));
+        setCurriculumData(uniqueCurriculumArray);
+    };
+    const getSectionsData = () => {
+        let tempSection = filteredData
+            .filter((val) => val.schoolGradeId === grade)
+            .map((val) => val.sections.map((e) => ({
+            name: e.sectionName,
+            id: e.sectionId
+        })));
+        setSectionData(tempSection.flat());
+    };
+    const getGradesData = () => {
+        let tempGrade = filteredData.map((val) => {
+            return {
+                name: val.schoolGradeName,
+                id: val.schoolGradeId
+            };
+        });
+        let gradeSet = new Set(tempGrade.map((item) => JSON.stringify(item)));
+        const gradesArray = Array.from(gradeSet).map((item) => JSON.parse(item));
+        setGradeData(gradesArray);
+    };
+    const getSchoolName = async () => {
+        let scl_result = await getSchools(schoolId);
+        let sclName = scl_result.filter((school) => school._id === schoolId)[0].name;
+        setSchoolName(sclName);
+    };
+    (0, react_1.useEffect)(() => {
+        if (schoolId)
+            getCurriculumData();
+    }, [schoolId]);
+    (0, react_1.useEffect)(() => {
+        if (schoolId) {
+            getSchoolName();
+            if (curriculum)
+                getGradesData();
+        }
+    }, [curriculum, schoolId]);
+    (0, react_1.useEffect)(() => {
+        if (grade) {
+            getSectionsData();
+        }
+    }, [grade]);
+    const handleCurriculum = (e) => {
+        setCurriculum(e.target.value);
+        const { name, value } = e.target;
+        const nameValue = curriculumData.filter((val) => val.id === value)[0]?.name;
+        setFormData((prevData) => ({
+            ...prevData,
+            academics: {
+                ...prevData.academics,
+                [name]: String(value),
+                curriculumName: nameValue
+            }
+        }));
+        setFormErrors({ ...formErrors, ['curriculum']: '' });
+    };
+    const handleSwitch = () => {
+        setChecked((prev) => !prev);
+    };
+    const handleGrade = (e) => {
+        setGrade(e.target.value);
+        const { name, value } = e.target;
+        const nameValue = gradeData.filter((val) => val.id === value)[0]?.name;
+        let academicYearId = filteredData.filter((val) => val.schoolGradeId == value)[0]?._id;
+        setFormData((prevData) => ({
+            ...prevData,
+            academics: {
+                ...prevData.academics,
+                schoolName: schoolName,
+                schoolId: schoolId,
+                academicYearName: academicYearName,
+                academicYearId: academicYearId,
+                [name]: value,
+                schoolGradeName: nameValue
+            }
+        }));
+        setFormErrors({ ...formErrors, ['grade']: '' });
+    };
+    const handleSection = (e) => {
+        setSection(e.target.value);
+        const { name, value } = e.target;
+        const nameValue = sectionData.filter((val) => val.id === value)[0]?.name;
+        setFormData((prevData) => ({
+            ...prevData,
+            academics: {
+                ...prevData.academics,
+                [name]: value,
+                sectionName: nameValue
+            }
+        }));
+        setFormErrors({ ...formErrors, ['section']: '' });
+    };
+    const handleChange = (e) => {
+        let { name, value } = e.target;
+        if (name == 'loginUserId') {
+            value = value.toLowerCase();
+        }
+        setFormData({
+            ...formData,
+            [name]: value
+        });
+        setFormErrors({ ...formErrors, [name]: '' });
+    };
+    const validateData = (data) => {
+        const errors = {};
+        if (!nameRegex.test(data.firstName)) {
+            errors.firstName = 'First Name should contain only letters';
+        }
+        else if (data.firstName.length > 150) {
+            errors.firstName = 'First Name should not exceed 150 characters';
+        }
+        if (data.lastName && !nameRegex.test(data.lastName)) {
+            errors.lastName = 'Last Name should contain only letters';
+        }
+        else if (data.lastName && data.lastName.length > 150) {
+            errors.lastName = 'Last Name should not exceed 150 characters';
+        }
+        if (!phoneNumberRegex.test(data.phoneNumber)) {
+            errors.phoneNumber = 'Provide a valid Phone Number';
+        }
+        if (!emailRegex.test(data.email)) {
+            errors.email = 'Invalid email address';
+        }
+        if (curriculum == '') {
+            errors.curriculum = 'Missing Field';
+        }
+        if (grade == '') {
+            errors.grade = 'Missing Field';
+        }
+        if (data.loginUserId.trim().length === 0) {
+            errors.loginUserId = 'Input should not be only spaces.';
+        }
+        if (data.loginUserId !== data.loginUserId.trim()) {
+            errors.loginUserId = 'Input should not have leading or trailing spaces.';
+        }
+        if (data.loginUserId.length > 20) {
+            errors.loginUserId = 'Input should not exceed 20 characters.';
+        }
+        if (data.loginUserId.includes('@')) {
+            errors.loginUserId = 'Input should not contain @';
+        }
+        if (section == '') {
+            errors.section = 'Missing Field';
+        }
+        ['father', 'mother', 'guardian'].forEach((role) => {
+            if (data[`${role}FirstName`] &&
+                (!nameRegex.test(data[`${role}FirstName`]) || data[`${role}FirstName`].length > 150)) {
+                errors[`${role}FirstName`] = `${role.charAt(0).toUpperCase() + role.slice(1)}'s First Name should contain only letters and not exceed 150 characters`;
+            }
+            if (data[`${role}LastName`] &&
+                (!nameRegex.test(data[`${role}LastName`]) || data[`${role}LastName`].length > 150)) {
+                errors[`${role}LastName`] = `${role.charAt(0).toUpperCase() + role.slice(1)}'s Last Name should contain only letters and not exceed 150 characters`;
+            }
+            // Validate phone numbers
+            if (data[`${role}PhoneNumber`] && !phoneNumberRegex.test(data[`${role}PhoneNumber`])) {
+                errors[`${role}PhoneNumber`] = `Provide a valid ${role.charAt(0).toUpperCase() + role.slice(1)} Phone Number`;
+            }
+            // Validate emails
+            if (data[`${role}Email`] && !emailRegex.test(data[`${role}Email`])) {
+                errors[`${role}Email`] = `Invalid ${role.charAt(0).toUpperCase() + role.slice(1)} Email address`;
+            }
+            // email and phone number is mandatory if first name and last name is provided
+            if (data[`${role}FirstName`]) {
+                if (!data[`${role}Email`]) {
+                    errors[`${role}Email`] = 'Email is required';
+                }
+                if (!data[`${role}PhoneNumber`]) {
+                    errors[`${role}PhoneNumber`] = 'Phone Number is required';
+                }
+            }
+            // first name , phone number and email is mandatory if last name is provided
+            if (data[`${role}LastName`]) {
+                if (!data[`${role}FirstName`]) {
+                    errors[`${role}FirstName`] = 'First Name is required';
+                }
+                if (!data[`${role}PhoneNumber`]) {
+                    errors[`${role}PhoneNumber`] = 'Phone Number is required';
+                }
+                if (!data[`${role}Email`]) {
+                    errors[`${role}Email`] = 'Email is required';
+                }
+            }
+            // if email or phone number is provided, then first name is required
+            if (data[`${role}Email`] || data[`${role}PhoneNumber`]) {
+                if (!data[`${role}FirstName`]) {
+                    errors[`${role}FirstName`] = 'First Name is required';
+                }
+                // if email is empty, then phone number is required
+                if (!data[`${role}Email`]) {
+                    errors[`${role}Email`] = 'Email is required';
+                }
+                // if phone number is empty, then email is required
+                if (!data[`${role}PhoneNumber`]) {
+                    errors[`${role}PhoneNumber`] = 'Phone Number is required';
+                }
+            }
+        });
+        // Check if all non-null phone numbers are not the same
+        const { fatherPhoneNumber, motherPhoneNumber, guardianPhoneNumber } = data;
+        if ((fatherPhoneNumber && fatherPhoneNumber === motherPhoneNumber) ||
+            (fatherPhoneNumber && fatherPhoneNumber === guardianPhoneNumber) ||
+            (motherPhoneNumber && motherPhoneNumber === guardianPhoneNumber)) {
+            errors.fatherPhoneNumber = 'Provide a valid Phone Number';
+            errors.motherPhoneNumber = 'Provide a valid Phone Number';
+            errors.guardianPhoneNumber = 'Provide a valid Phone Number';
+        }
+        setFormErrors(errors);
+        return Object.values(errors).length === 0;
+    };
+    const conditionalAsterisk = (data) => {
+        if (data === 'father') {
+            if (formData.fatherFirstName !== '' ||
+                formData.fatherEmail !== '' ||
+                formData.fatherLastName !== '' ||
+                formData.fatherPhoneNumber !== '')
+                return '*';
+        }
+        if (data === 'mother') {
+            if (formData.motherFirstName !== '' ||
+                formData.motherEmail !== '' ||
+                formData.motherLastName !== '' ||
+                formData.motherPhoneNumber !== '')
+                return '*';
+        }
+        if (data === 'guardian') {
+            if (formData.guardianFirstName !== '' ||
+                formData.guardianEmail !== '' ||
+                formData.guardianLastName !== '' ||
+                formData.guardianPhoneNumber !== '')
+                return '*';
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        let validData = validateData(formData);
+        console.log(validData, 'validations new');
+        if (validData && !isClicked) {
+            setIsClicked(true);
+            let body = { ...formData };
+            body.phoneNumber = `+91${formData.phoneNumber}`;
+            body.isActive = checked;
+            const phoneFields = ['motherPhoneNumber', 'fatherPhoneNumber', 'guardianPhoneNumber'];
+            phoneFields.forEach((field) => {
+                if (formData[field]) {
+                    body[field] = `+91${formData[field]}`;
+                }
+            });
+            let result = await createStudent(body);
+            setIsClicked(false);
+            if (result?.data?.message === 'Student already existed with the below data') {
+                toaster_1.toaster.error({
+                    description: result?.data?.message,
+                    type: 'error',
+                    duration: 3000,
+                    closable: true
+                });
+            }
+            else {
+                if (result?.data?.data?.isNew == 0) {
+                    toaster_1.toaster.success({
+                        description: result?.data?.message,
+                        type: 'success',
+                        duration: 3000,
+                        closable: true
+                    });
+                    setFormData(inputData);
+                    onClose();
+                }
+                else if (result?.data?.data?.isNew == 1) {
+                    toaster_1.toaster.success({
+                        description: result?.data?.message,
+                        type: 'success',
+                        duration: 3000,
+                        closable: true
+                    });
+                    setFormData(inputData);
+                    onClose();
+                }
+                else {
+                    toaster_1.toaster.error({
+                        description: result.errors,
+                        type: 'error',
+                        duration: 3000,
+                        closable: true
+                    });
+                }
+            }
+        }
+        else {
+            toaster_1.toaster.error({
+                description: 'Please Fill All Required Fields !!',
+                type: 'error',
+                duration: 3000,
+                closable: true
+            });
+        }
+    };
+    const parentFormComponent = () => {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Stack, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: 'md', color: 'white', px: 2, children: "Father details" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { py: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.fatherFirstName, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["First Name", conditionalAsterisk('father')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "fatherFirstName", type: "text", value: formData.fatherFirstName, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.fatherFirstName })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.fatherLastName, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: { color: 'white' }, children: "Last Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "fatherLastName", type: "text", value: formData.fatherLastName, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.fatherLastName })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.fatherEmail, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["Email", conditionalAsterisk('father')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "fatherEmail", type: "email", value: formData.fatherEmail, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.fatherEmail })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.fatherPhoneNumber, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["Mobile Number ", conditionalAsterisk('father')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "fatherPhoneNumber", type: "tel", value: formData.fatherPhoneNumber, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.fatherPhoneNumber })] })] }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: 'md', color: 'white', px: 2, children: "Mother details" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { py: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.motherFirstName, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["First Name", conditionalAsterisk('mother')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "motherFirstName", type: "text", value: formData.motherFirstName, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.motherFirstName })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.motherLastName, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: { color: 'white' }, children: "Last Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "motherLastName", type: "text", value: formData.motherLastName, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.motherLastName })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.motherEmail, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["Email", conditionalAsterisk('mother')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "motherEmail", type: "email", value: formData.motherEmail, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.motherEmail })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.motherPhoneNumber, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["Mobile Number", conditionalAsterisk('mother')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "motherPhoneNumber", type: "tel", value: formData.motherPhoneNumber, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.motherPhoneNumber })] })] }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: 'md', color: 'white', px: 2, children: "Guardian details" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { py: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.guardianFirstName, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["First Name", conditionalAsterisk('guardian')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "guardianFirstName", type: "text", value: formData.guardianFirstName, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.guardianFirstName })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.guardianLastName, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: { color: 'white' }, children: "Last Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "guardianLastName", type: "text", value: formData.guardianLastName, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.guardianLastName })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.guardianEmail, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["Email", conditionalAsterisk('guardian')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "guardianEmail", type: "email", value: formData.guardianEmail, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.guardianEmail })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.guardianPhoneNumber, css: {
+                                fontFamily: 'Inter, sans-serif',
+                                fontSize: '15px',
+                                fontWeight: 400,
+                                lineHeight: '18px',
+                                letterSpacing: '0em'
+                            }, px: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: { color: 'white' }, children: ["Mobile Number", conditionalAsterisk('guardian')] }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "guardianPhoneNumber", type: "tel", value: formData.guardianPhoneNumber, css: {
+                                        borderRadius: 0,
+                                        borderColor: colors.black,
+                                        backgroundColor: colors.black,
+                                        color: 'white',
+                                        '&:hover': {
+                                            borderColor: colors.black
+                                        },
+                                        '&:focus': {
+                                            borderColor: colors.black,
+                                            boxShadow: `0 0 0 0 ${colors.black}`
+                                        }
+                                    }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.guardianPhoneNumber })] })] })] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: colors.lightGray, p: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Heading, { size: 'md', css: { color: 'white' }, m: 2, children: ["Add student for ", academicYearName] }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: 'sm', css: { color: 'white' }, m: 2, children: "Student details" }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { css: {
+                            backgroundColor: colors.black
+                        }, justifyContent: 'space-between', children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.curriculum, px: 2, my: 2, children: [(0, jsx_runtime_1.jsx)(react_2.NativeSelect.Root, { borderRadius: 0, borderColor: colors.lightGray, backgroundColor: colors.lightGray, color: 'white', css: {
+                                            '&:hover': {
+                                                borderColor: colors.lightGray
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.lightGray,
+                                                boxShadow: `0 0 0 2px ${colors.lightGray}`
+                                            }
+                                        }, children: (0, jsx_runtime_1.jsxs)(react_2.NativeSelect.Field, { value: curriculum, onChange: handleCurriculum, name: 'curriculumId', children: [(0, jsx_runtime_1.jsx)("option", { style: {
+                                                        backgroundColor: colors.lightGray,
+                                                        fontFamily: 'Inter, sans-serif',
+                                                        fontSize: '16px',
+                                                        fontWeight: 400,
+                                                        lineHeight: '18px',
+                                                        letterSpacing: '0em'
+                                                    }, value: '', children: "Curriculum*" }), curriculumData.map((val) => ((0, jsx_runtime_1.jsx)("option", { value: val.id, style: {
+                                                        backgroundColor: colors.lightGray,
+                                                        color: 'white',
+                                                        borderRadius: 0,
+                                                        fontFamily: 'Inter, sans-serif',
+                                                        fontSize: '16px',
+                                                        fontWeight: 400,
+                                                        lineHeight: '18px',
+                                                        letterSpacing: '0em'
+                                                    }, children: val.name }, val.id)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.curriculum })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.grade, px: 2, my: 2, children: [(0, jsx_runtime_1.jsx)(react_2.NativeSelect.Root, { borderRadius: 0, borderColor: colors.lightGray, backgroundColor: colors.lightGray, color: 'white', css: {
+                                            '&:hover': {
+                                                borderColor: colors.lightGray
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.lightGray,
+                                                boxShadow: `0 0 0 2px ${colors.lightGray}`
+                                            }
+                                        }, children: (0, jsx_runtime_1.jsxs)(react_2.NativeSelect.Field, { value: grade, onChange: handleGrade, name: 'schoolGradeId', children: [(0, jsx_runtime_1.jsx)("option", { style: {
+                                                        backgroundColor: colors.lightGray,
+                                                        fontFamily: 'Inter, sans-serif',
+                                                        fontSize: '16px',
+                                                        fontWeight: 400,
+                                                        lineHeight: '18px',
+                                                        letterSpacing: '0em'
+                                                    }, value: '', children: "Grade*" }), gradeData.map((val) => ((0, jsx_runtime_1.jsx)("option", { value: val.id, id: val.masterId, style: {
+                                                        backgroundColor: colors.lightGray,
+                                                        color: 'white',
+                                                        borderRadius: 0,
+                                                        fontFamily: 'Inter, sans-serif',
+                                                        fontSize: '16px',
+                                                        fontWeight: 400,
+                                                        lineHeight: '18px',
+                                                        letterSpacing: '0em'
+                                                    }, children: val.name }, val.id)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.grade })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.section, px: 2, my: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.NativeSelect.Root, { borderRadius: 0, borderColor: colors.lightGray, backgroundColor: colors.lightGray, color: 'white', css: {
+                                            '&:hover': {
+                                                borderColor: colors.lightGray
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.lightGray,
+                                                boxShadow: `0 0 0 2px ${colors.lightGray}`
+                                            }
+                                        }, children: [(0, jsx_runtime_1.jsxs)(react_2.NativeSelect.Field, { value: section, onChange: handleSection, name: 'sectionId', children: [(0, jsx_runtime_1.jsx)("option", { style: {
+                                                            backgroundColor: colors.lightGray,
+                                                            fontFamily: 'Inter, sans-serif',
+                                                            fontSize: '16px',
+                                                            fontWeight: 400,
+                                                            lineHeight: '18px',
+                                                            letterSpacing: '0em'
+                                                        }, value: 'Section', children: "Section*" }), sectionData.map((val, index) => ((0, jsx_runtime_1.jsx)("option", { value: val.id, style: {
+                                                            backgroundColor: colors.lightGray,
+                                                            fontFamily: 'Inter, sans-serif',
+                                                            fontSize: '16px',
+                                                            fontWeight: 400,
+                                                            lineHeight: '18px',
+                                                            letterSpacing: '0em'
+                                                        }, children: val.name }, val.id)))] }), (0, jsx_runtime_1.jsx)(react_2.NativeSelect.Indicator, {})] }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.section })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { py: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Root, { css: {
+                                    fontFamily: 'Inter, sans-serif',
+                                    fontSize: '15px',
+                                    fontWeight: 400,
+                                    lineHeight: '18px',
+                                    letterSpacing: '0em'
+                                }, invalid: !!formErrors.firstName, px: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: { color: 'white' }, children: "First Name*" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "firstName", value: formData.firstName, onChange: handleChange, css: {
+                                            borderRadius: 0,
+                                            borderColor: colors.black,
+                                            backgroundColor: colors.black,
+                                            color: 'white',
+                                            '&:hover': {
+                                                borderColor: colors.black
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.black,
+                                                boxShadow: `0 0 0 0 ${colors.black}`
+                                            }
+                                        }, placeholder: "Type here..." }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.firstName })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { css: {
+                                    fontFamily: 'Inter, sans-serif',
+                                    fontSize: '15px',
+                                    fontWeight: 400,
+                                    lineHeight: '18px',
+                                    letterSpacing: '0em'
+                                }, invalid: !!formErrors.lastName, px: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: { color: 'white' }, children: "Last Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "lastName", value: formData.lastName, onChange: handleChange, css: {
+                                            borderRadius: 0,
+                                            borderColor: colors.black,
+                                            backgroundColor: colors.black,
+                                            color: 'white',
+                                            '&:hover': {
+                                                borderColor: colors.black
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.black,
+                                                boxShadow: `0 0 0 0 ${colors.black}`
+                                            }
+                                        }, placeholder: "Type here..." }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.lastName })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { py: 5, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.loginUserId, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: {
+                                            color: 'white',
+                                            fontFamily: 'Inter, sans-serif',
+                                            fontSize: '15px',
+                                            fontWeight: 400,
+                                            lineHeight: '18px',
+                                            letterSpacing: '0em'
+                                        }, px: 2, children: "Student ID*" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "loginUserId", type: "loginUserId", value: formData.loginUserId, css: {
+                                            borderRadius: 0,
+                                            borderColor: colors.black,
+                                            backgroundColor: colors.black,
+                                            color: 'white',
+                                            '&:hover': {
+                                                borderColor: colors.black
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.black,
+                                                boxShadow: `0 0 0 0 ${colors.black}`
+                                            }
+                                        }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.loginUserId })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { css: {
+                                    fontFamily: 'Inter, sans-serif',
+                                    fontSize: '15px',
+                                    fontWeight: 400,
+                                    lineHeight: '18px',
+                                    letterSpacing: '0em'
+                                }, invalid: !!formErrors.phoneNumber, px: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: { color: 'white' }, children: "Phone Number*" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "phoneNumber", type: "tel", value: formData.phoneNumber, onChange: handleChange, css: {
+                                            borderRadius: 0,
+                                            borderColor: colors.black,
+                                            backgroundColor: colors.black,
+                                            color: 'white',
+                                            '&:hover': {
+                                                borderColor: colors.black
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.black,
+                                                boxShadow: `0 0 0 0 ${colors.black}`
+                                            }
+                                        }, placeholder: "Type here..." }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.phoneNumber })] }), (0, jsx_runtime_1.jsxs)(react_2.Field.Root, { invalid: !!formErrors.email, css: {
+                                    fontFamily: 'Inter, sans-serif',
+                                    fontSize: '15px',
+                                    fontWeight: 400,
+                                    lineHeight: '18px',
+                                    letterSpacing: '0em'
+                                }, px: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Field.Label, { css: { color: 'white' }, children: " Email*" }), (0, jsx_runtime_1.jsx)(react_2.Input, { name: "email", type: "email", value: formData.email, css: {
+                                            borderRadius: 0,
+                                            borderColor: colors.black,
+                                            backgroundColor: colors.black,
+                                            color: 'white',
+                                            '&:hover': {
+                                                borderColor: colors.black
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.black,
+                                                boxShadow: `0 0 0 0 ${colors.black}`
+                                            }
+                                        }, placeholder: "Type here...", onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.Field.ErrorText, { children: formErrors.email })] })] }), parentFormComponent(), (0, jsx_runtime_1.jsxs)(react_2.Stack, { my: 5, children: [(0, jsx_runtime_1.jsxs)(react_2.Field.Label, { css: {
+                                    color: 'white',
+                                    fontFamily: 'Inter, sans-serif',
+                                    fontSize: '15px',
+                                    fontWeight: 400,
+                                    lineHeight: '18px',
+                                    letterSpacing: '0em'
+                                }, children: ["Status: ", checked ? 'Enabled' : 'Disabled'] }), (0, jsx_runtime_1.jsxs)(react_2.Switch.Root, { colorPalette: "green", css: { borderColor: colors.green }, checked: checked, onChange: handleSwitch, width: '10px', readOnly: true, children: [(0, jsx_runtime_1.jsx)(react_2.Switch.HiddenInput, {}), (0, jsx_runtime_1.jsx)(react_2.Switch.Control, {})] })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { py: 5, justifyContent: "center", gap: '10px', children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "secondary", css: medium, onClick: () => {
+                                    setFormData(inputData);
+                                    onClose();
+                                }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", variant: "primary", css: medium, children: "Save" })] })] })] }));
+};
+exports.default = StudentModal;
+//# sourceMappingURL=StudentModal.js.map