hardwater-ui-planner 0.0.1

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

@@ -0,0 +1,753 @@
+"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, input, studentId, colors, createStudent, getAcademicYear, getSchools, StorageService, buttonStyles, editStudent }) => {
+    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)(input?.isActive);
+    const [formData, setFormData] = (0, react_1.useState)(input);
+    const [editableForm, setEditableForm] = (0, react_1.useState)(input);
+    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);
+        setCurriculum(input?.academics?.curriculumId || '');
+    };
+    const getSectionsData = () => {
+        let tempSection = filteredData
+            .filter((val) => val.schoolGradeId === grade)
+            .map((val) => val.sections.map((e) => ({
+            name: e.sectionName,
+            id: e.sectionId
+        })));
+        const sections = tempSection.flat();
+        setSectionData(sections);
+        const initialSection = input?.academics?.sectionId || '';
+        if (initialSection && sections.some(s => s.id === initialSection)) {
+            setSection(initialSection);
+        }
+    };
+    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);
+        setGrade(input?.academics?.schoolGradeId || '');
+    };
+    const getSchoolName = () => {
+        setSchoolName(input?.school?.name || '');
+    };
+    (0, react_1.useEffect)(() => {
+        if (schoolId)
+            getCurriculumData();
+    }, [schoolId]);
+    (0, react_1.useEffect)(() => {
+        getSchoolName();
+        if (curriculum)
+            getGradesData();
+    }, [curriculum]);
+    (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`;
+            }
+            if (data[`${role}PhoneNumber`] && !phoneNumberRegex.test(data[`${role}PhoneNumber`])) {
+                errors[`${role}PhoneNumber`] = `Provide a valid ${role.charAt(0).toUpperCase() + role.slice(1)} Phone Number`;
+            }
+            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';
+                }
+            }
+        });
+        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);
+        if (validData && !isClicked) {
+            setIsClicked(true);
+            let body = { ...formData };
+            body.phoneNumber = `+91${formData.phoneNumber}`;
+            const phoneFields = ['motherPhoneNumber', 'fatherPhoneNumber', 'guardianPhoneNumber'];
+            phoneFields.forEach((field) => {
+                if (formData[field]) {
+                    body[field] = `+91${formData[field]}`;
+                }
+            });
+            let payload = {
+                firstName: body.firstName,
+                lastName: body.lastName,
+                phoneNumber: body.phoneNumber,
+                email: body.email,
+                loginUserId: body.loginUserId,
+                isActive: checked,
+                schoolName: body?.academics?.schoolName,
+                schoolId: body?.academics?.schoolId,
+                academicYearId: body?.academics?.academicYearId,
+                academicYearName: body?.academics?.academicYearName,
+                curriculumId: body?.academics?.curriculumId,
+                curriculumName: body?.academics?.curriculumName,
+                schoolGradeId: body?.academics?.schoolGradeId,
+                schoolGradeName: body?.academics?.schoolGradeName,
+                sectionId: body?.academics?.sectionId,
+                sectionName: body?.academics?.sectionName,
+                fatherFirstName: body?.fatherFirstName || '',
+                fatherLastName: body?.fatherLastName || '',
+                fatherEmail: body?.fatherEmail || '',
+                fatherPhoneNumber: body?.fatherPhoneNumber || '',
+                motherFirstName: body?.motherFirstName || '',
+                motherLastName: body?.motherLastName || '',
+                motherEmail: body?.motherEmail || '',
+                motherPhoneNumber: body?.motherPhoneNumber || '',
+                guardianFirstName: body?.guardianFirstName || '',
+                guardianLastName: body?.guardianLastName || '',
+                guardianEmail: body?.guardianEmail || '',
+                guardianPhoneNumber: body?.guardianPhoneNumber || ''
+            };
+            let result = await editStudent(payload, studentId);
+            setIsClicked(false);
+            if (result?.data?.status === 'success') {
+                toaster_1.toaster.success({
+                    description: result?.data?.message,
+                    type: 'success',
+                    duration: 3000,
+                    closable: true
+                });
+                onClose();
+            }
+            else {
+                toaster_1.toaster.error({
+                    description: result?.data?.message,
+                    type: 'error',
+                    duration: 3000,
+                    closable: true
+                });
+            }
+        }
+        setFormData(formData);
+        //   if(result?.data?.message=== "Student already existed wih the below data"){
+        //     toast({
+        //       description: result?.data?.message,
+        //       status: 'error',
+        //       duration: 3000,
+        //       isClosable: true
+        //     });
+        //   }
+        //   else{
+        //   if (result?.data?.data?.isNew == 0) {
+        //     toast({
+        //       description: result?.data?.message,
+        //       status: 'success',
+        //       duration: 3000,
+        //       isClosable: true
+        //     });
+        //     setFormData(input);
+        //     onClose();
+        //   } else if (result?.data?.data?.isNew == 1) {
+        //     toast({
+        //       description: result?.data?.message,
+        //       status: 'success',
+        //       duration: 3000,
+        //       isClosable: true
+        //     });
+        //     setFormData(input);
+        //     onClose();
+        //   } else {
+        //     toast({
+        //       description: result.errors,
+        //       status: 'error',
+        //       duration: 3000,
+        //       isClosable: true
+        //     });
+        //   }
+        // } }else {
+        //   toast({
+        //     description: 'Please Fill All Required Fields !!',
+        //     status: 'error',
+        //     duration: 3000,
+        //     isClosable: 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, readOnly: editableForm?.fatherFirstName?.length > 0 }), (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, readOnly: editableForm?.fatherLastName?.length > 0 }), (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, readOnly: editableForm?.fatherEmail?.length > 0 }), (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, readOnly: editableForm?.fatherPhoneNumber?.length > 0 }), (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, readOnly: editableForm?.motherFirstName?.length > 0 }), (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, readOnly: editableForm?.motherLastName?.length > 0 }), (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, readOnly: editableForm?.motherEmail?.length > 0 }), (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, readOnly: editableForm?.motherPhoneNumber?.length > 0 }), (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, readOnly: editableForm?.guardianFirstName?.length > 0 }), (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, readOnly: editableForm?.guardianLastName?.length > 0 }), (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, readOnly: editableForm?.guardianEmail?.length > 0 }), (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, readOnly: editableForm?.guardianPhoneNumber?.length > 0 }), (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: ["Edit student for ", academicYearName] }), (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.Input, { borderRadius: 0, borderColor: colors.lightGray, backgroundColor: colors.lightGray, color: 'white', onChange: handleCurriculum, css: {
+                                            '&:hover': {
+                                                borderColor: colors.lightGray
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.lightGray,
+                                                boxShadow: `0 0 0 2px ${colors.lightGray}`
+                                            }
+                                        }, name: 'curriculumId', readOnly: true, value: formData.academics?.curriculumName }), (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.Input, { borderRadius: 0, borderColor: colors.lightGray, backgroundColor: colors.lightGray, color: 'white', onChange: handleGrade, css: {
+                                            '&:hover': {
+                                                borderColor: colors.lightGray
+                                            },
+                                            '&:focus': {
+                                                borderColor: colors.lightGray,
+                                                boxShadow: `0 0 0 2px ${colors.lightGray}`
+                                            }
+                                        }, name: 'schoolGradeId', readOnly: true, value: formData.academics?.schoolGradeName }), (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.jsx)(react_2.NativeSelect.Field, { value: section, onChange: handleSection, name: "sectionId", children: sectionData.length > 0 ? (sectionData.map((sectionItem) => ((0, jsx_runtime_1.jsx)("option", { value: sectionItem.id, style: {
+                                                        backgroundColor: colors.lightGray,
+                                                        color: 'white',
+                                                        borderRadius: 0,
+                                                        fontFamily: 'Inter, sans-serif',
+                                                        fontSize: '16px',
+                                                        fontWeight: 400,
+                                                        lineHeight: '18px',
+                                                        letterSpacing: '0em'
+                                                    }, children: sectionItem.name }, sectionItem.id)))) : ((0, jsx_runtime_1.jsx)("option", { value: input?.academics?.sectionId || '', style: {
+                                                        backgroundColor: colors.lightGray,
+                                                        color: 'white',
+                                                        borderRadius: 0,
+                                                        fontFamily: 'Inter, sans-serif',
+                                                        fontSize: '16px',
+                                                        fontWeight: 400,
+                                                        lineHeight: '18px',
+                                                        letterSpacing: '0em'
+                                                    }, children: input?.academics?.sectionName || 'Loading...' })) }), (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', children: [(0, jsx_runtime_1.jsx)(react_2.Switch.HiddenInput, {}), (0, jsx_runtime_1.jsx)(react_2.Switch.Control, {}), (0, jsx_runtime_1.jsx)(react_2.Switch.Thumb, {})] })] }), (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(input);
+                                    onClose();
+                                }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", variant: "primary", css: medium, children: "Save" })] })] })] }));
+};
+exports.default = StudentModal;
+//# sourceMappingURL=EditStudentModal.js.map