\n {t(\n `create-assign-question:resetModal.selectReset`,\n 'Do you want to reset the cart?'\n )}\n
\n \n );\n};\n\nexport default CartResetModal;\n","import React from 'react';\nimport { Form } from 'react-bootstrap';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n assignClass,\n assignGroup,\n resetAssignment\n} from 'stores/worksheet/actions';\nimport { findIndex, find, propEq } from 'ramda';\nimport { classType } from 'constants/index';\n\nexport default function ClassGroupCheckbox(props) {\n const { type } = props;\n const dispatch = useDispatch();\n const { assignedClass, assignedGroup } = useSelector(\n state => state.worksheet\n );\n\n const { classes } = useSelector(state => state.lookup);\n\n const items = classes.filter(classData => {\n return classData.Type === classType[type];\n });\n\n const assignedData = type === 'class' ? assignedClass : assignedGroup;\n const assignData = type === 'class' ? assignClass : assignGroup;\n\n const checkChecked = id => {\n return findIndex(propEq('ID', parseInt(id, 10)))(assignedData) !== -1;\n };\n\n const onChange = event => {\n const { value } = event.target;\n // Use new variable to avoid mutating state\n let updatedData;\n\n if (!checkChecked(value)) {\n const newData = find(propEq('ID', parseInt(value, 10)))(classes);\n\n updatedData = [...assignedData, newData];\n } else {\n const index = findIndex(propEq('ID', parseInt(value, 10)))(assignedData);\n updatedData = [\n ...assignedData.slice(0, index),\n ...assignedData.slice(index + 1)\n ];\n }\n\n dispatch(assignData(updatedData));\n dispatch(resetAssignment('admin'));\n };\n\n return items.length !== 0 ? (\n <>\n {items.map(item => {\n return (\n \n No classes found
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchClassRequest } from 'stores/utils/lookup/actions';\nimport CheckboxClassGroup from './CheckboxClassGroup';\n\nexport default function AssignClass() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n\n const { levels, selectedLevel: globalSelectedLevel } = useSelector(\n state => state.levels\n );\n\n const [selectedLevel, setSelectedLevel] = useState(globalSelectedLevel.ID);\n\n const onChangeLevel = event => {\n setSelectedLevel(event.target.value);\n };\n\n useEffect(() => {\n dispatch(fetchClassRequest(selectedLevel));\n }, [dispatch, selectedLevel]); // @see {@link https://github.com/facebook/create-react-app/issues/6880#issuecomment-488158024 having dispatch in useEffect dependencies}\n\n return (\n \n
\n {t(\n `create-assign-question:assignModal.classAssign`,\n 'Please choose classes you want to assign'\n )}\n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n {/*
\n \n Class \n Group \n \n */}\n
\n
\n
\n {t(\n `create-assign-question:assignModal.chooseStud`,\n 'Please choose students you want to assign'\n )}\n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n \n {classes.map(classItem => (\n \n {classItem.Name}\n \n ))}\n \n \n
\n
\n {isLoading &&
\n
\n {isLoading ? (\n ''\n ) : availableStudents.length === 0 || error !== '' ? (\n \n {t(\n `create-assign-question:assignModal.noStud`,\n 'No student in the selected class'\n )}\n \n ) : (\n availableStudents.map(student => (\n \n {student.FullName}\n \n ))\n )}\n \n \n \n {t(`create-assign-question:assignModal.add`, 'Add')}\n \n \n {t(`create-assign-question:assignModal.remove`, 'Remove')}\n \n
\n \n {assignedStudent.map(student => (\n \n {student.FullName}\n \n ))}\n \n \n
\n \n );\n })}\n \n ) : (\n \n {t(\n 'create-assign-question:assignModal.noFound',\n 'No Private groups found'\n )}\n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchPrivateGroupsRequest } from 'stores/privateGroup/actions';\nimport PrivateGroupCheckbox from './CheckboxPrivateGroup';\n\nexport default function AssignClass() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n\n const [groupName, setGroupName] = useState('');\n const { privateGroups } = useSelector(state => state.privateGroup);\n\n const handleChangeGroupName = group => {\n setGroupName(group);\n };\n\n useEffect(() => {\n dispatch(fetchPrivateGroupsRequest(groupName));\n }, [dispatch, groupName]);\n\n return (\n \n
\n {t(\n `create-assign-question:assignModal.choosePrivateGroup`,\n 'Please choose private groups you want to assign'\n )}\n
\n
\n handleChangeGroupName(event.target.value)}\n />\n \n
\n
\n
\n {t(\n 'create-assign-question:assignModal.chooseAdmin',\n 'Please choose users and level you want to assign'\n )}\n
\n
\n \n {t(\n 'create-assign-question:assignModal.allPremium',\n 'All Premium users'\n )}\n \n
\n\n {/*
\n */}\n
\n \n {t(\n 'create-assign-question:assignModal.allKoobits',\n 'All KooBits users'\n )}\n \n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n
\n {t(\n `create-assign-question:assignModal.chooseGroup`,\n 'Please choose groups you want to assign'\n )}\n
\n {groups.length !== 0 ? (\n <>\n {groups.map(item => {\n return (\n
\n \n {t(`create-assign-question:assignModal.noGroup`, 'No group found')}\n
\n )}\n \n {isAdmin && (\n <>\n
\n \n {t(\n `create-assign-question:assignModal.pvtGroup`,\n 'Private Group'\n )}\n \n
\n
& \n \n )}\n
\n \n {t(`create-assign-question:assignModal.class`, 'Class')}\n \n
\n
& \n
\n \n {t(`create-assign-question:assignModal.group`, 'Group')}\n \n
\n
& \n
\n \n {t(\n `create-assign-question:assignModal.indvStud`,\n 'Individual Student'\n )}\n \n
\n {isAdmin && (\n
\n \n {t(`create-assign-question:assignModal.forAdimn`, 'For Admin')}\n \n
\n )}\n
{renderSwitch(typeAssign)}
\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { groupBy } from 'ramda';\nimport hasProp from 'helpers/hasProp';\n\nexport default function AssignResult(props) {\n const { t } = useTranslation(['create-assign-question']);\n const {\n assignedClass,\n assignedGroup,\n assignedStudent,\n assignedPrivateGroup,\n assignedAdminGroup,\n assignedLevel,\n hasAssignees\n } = props;\n\n const groupedStudents = groupBy(\n student => student.ClassName,\n assignedStudent\n );\n\n return (\n <>\n {t(`create-assign-question:assign.assignTo`, 'Assign to')} \n {hasAssignees ? (\n <>\n {assignedClass.length > 0 && (\n \n
{t(`create-assign-question:assignModal.class`, 'Class')} \n {assignedClass.map(item => (\n
{item.Name}
\n ))}\n
\n
{t(`create-assign-question:assignModal.group`, 'Group')} \n {assignedGroup.map(item => (\n
{item.Name}
\n ))}\n
\n
\n {t(\n `create-assign-question:assignModal.pvtGroup`,\n 'Private Group'\n )}\n \n {assignedPrivateGroup.map(item => (\n
{item.Name}
\n ))}\n
\n
\n {t(\n `create-assign-question:assignModal.adminGroup`,\n 'Admin Group'\n )}\n \n
{assignedAdminGroup.Name}
\n
\n
{t(`create-assign-question:assignModal.level`, 'Level')} \n
{`Primary ${assignedLevel}`}
\n
\n
\n {t(\n `create-assign-question:assignModal.indvStud`,\n 'Individual Students'\n )}\n \n {Object.entries(groupedStudents).map(\n ([studentClass, classOfStudents]) => {\n return (\n
\n {studentClass}
\n {classOfStudents.map(singleStudent => (\n \n
{singleStudent.FullName}
\n
\n );\n }\n )}\n
\n {t(\n `create-assign-question:assignModal.noSelection`,\n 'No Classes, Groups or students chosen'\n )}\n
\n )}\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Col } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\nimport hasProp from 'helpers/hasProp';\nimport AssignRadio from './AssignRadio';\nimport AssignResult from './AssignResult';\n\nexport default function AssignModal(props) {\n const { t } = useTranslation(['create-assign-question']);\n const { onConfirm } = props;\n const {\n assignedClass,\n assignedGroup,\n assignedStudent,\n assignedPrivateGroup,\n assignedAdminGroup,\n assignedLevel\n } = useSelector(state => state.worksheet);\n\n const hasAssignees =\n assignedClass.length > 0 ||\n assignedGroup.length > 0 ||\n assignedStudent.length > 0 ||\n assignedPrivateGroup.length > 0 ||\n (hasProp(assignedAdminGroup, 'ID') && assignedLevel !== '');\n\n return (\n \n
\n
\n \n
\n
\n
\n {t(`create-assign-question:assignModal.confirm`, 'Confirm')}\n \n {/* if it's clickable, change btn-secondary class into btn-primary */}\n \n \n \n {item.Name}\n \n
\n ));\n };\n\n const [startDate, setStartDate] = useState(moment().startOf('day'));\n const [endDate, setEndDate] = useState(\n moment()\n .add(3, 'day')\n .set({ hour: 23, minute: 59 })\n );\n const [releaseDate, setReleaseDate] = useState(\n moment()\n .add(4, 'day')\n .startOf('day')\n );\n\n const applyCallback = (startDateValue, endDateValue) => {\n setStartDate(startDateValue);\n setEndDate(endDateValue);\n };\n\n const applyCallbackRelease = (e, picker) => {\n setReleaseDate(picker.startDate);\n };\n\n const groupedStudents = groupBy(\n student => student.ClassName,\n tempAssignedStudent\n );\n\n const saveAssignedWorksheet = () => {\n // compile data for assigning\n const assignedClassData = assignedClass.map(classData => ({\n referenceId: classData.ID,\n type: assignReferenceType.class\n }));\n const assignedGroupData = assignedGroup.map(groupData => ({\n referenceId: groupData.ID,\n type: assignReferenceType.group\n }));\n const assignedPrivateGroupData = assignedPrivateGroup.map(\n privateGroupData => ({\n referenceId: privateGroupData.ID,\n type: assignReferenceType.group\n })\n );\n const assignedStudentData = assignedStudent.map(studentData => ({\n referenceId: studentData.UserId,\n type: assignReferenceType.student\n }));\n let assignedAdminData = null;\n if (hasProp(assignedAdminGroup, 'ID')) {\n switch (assignedAdminGroup.ID) {\n case 'premium':\n assignedAdminData = {\n referenceId: parseInt(assignedLevel, 10),\n type: assignReferenceType.level,\n isPremium: 1\n };\n break;\n case 'retail':\n assignedAdminData = {\n referenceId: parseInt(assignedLevel, 10),\n type: assignReferenceType.level,\n isRetail: 1\n };\n break;\n case 'koobits':\n assignedAdminData = {\n referenceId: parseInt(assignedLevel, 10),\n type: assignReferenceType.level\n };\n break;\n default:\n assignedAdminData = null;\n }\n }\n const assignmentsArray =\n assignedAdminData !== null\n ? [assignedAdminData]\n : [\n ...assignedClassData,\n ...assignedGroupData,\n ...assignedStudentData,\n ...assignedPrivateGroupData\n ];\n\n const data = {\n // data needed for saving worksheet\n Title: title,\n Instructions: title,\n WorksheetStatus: worksheetStatus.publish,\n PresentationTypeID: presentationType,\n AssignmentTypeID: assignmentType,\n TimeLimit: timeLimit,\n NumberOfKokoCredits,\n // data needed for assignment\n startDate: startDate.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n endDate: endDate.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n assignments: assignmentsArray,\n isCreateHomework: isCreateHomework || false,\n isEditSavedWorksheet: isEditSavedWorksheet || false,\n isCreateFactualFluency: isCreateFactualFluency || false\n };\n if (assignmentType === assignmentTypes.test) {\n data.resultDate = releaseDate.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n }\n const isPublish = true;\n dispatch(assignWorksheet(data, isPublish));\n setShowConfirm(false);\n setShowAssign(true);\n };\n\n const onConfirm = () => {\n setShow(false);\n const newAssignedClass = [...assignedClass];\n setTempAssignedClass(newAssignedClass);\n\n const newAssignedGroup = [...assignedGroup];\n setTempAssignedGroup(newAssignedGroup);\n\n const newAssignedStudent = [...assignedStudent];\n setTempAssignedStudent(newAssignedStudent);\n\n const newAssignedPrivateGroup = [...assignedPrivateGroup];\n setTempAssignedPrivateGroup(newAssignedPrivateGroup);\n\n const newAssignedAdminGroup = assignedAdminGroup;\n setTempAssignedAdminGroup(newAssignedAdminGroup);\n const newAssignedLevel = assignedLevel;\n setTempAssignedLevel(newAssignedLevel);\n };\n\n // button modal\n\n return (\n <>\n \n \n\n setShowConfirm(false)}\n title={t(\n `create-assign-question:saveAssignModal.assignHw`,\n 'Assign Homework Now'\n )}\n loading={isLoading}\n >\n \n {t(\n `create-assign-question:saveAssignModal.assignMsg`,\n 'Homework will be assigned to the classes/ students that you have selected.'\n )}\n
\n \n {t(\n `create-assign-question:saveAssignModal.proceed`,\n 'Do you want to proceed?'\n )}\n
\n \n\n {\n setShowSave(false);\n setShow(true);\n }}\n isLoading={isLoading}\n onClose={() => {\n setShowSave(false);\n if (\n isCreateHomework ||\n isEditSavedWorksheet ||\n isCreateFactualFluency\n ) {\n dispatch(resetWorksheet());\n history.push('/create-and-assign/saved-worksheet');\n } else {\n setShowResetCart(true);\n }\n }}\n onCloseError={() => setShowSave(false)}\n error={error}\n />\n\n {\n setShowAssign(false);\n setShowLink(true);\n }}\n onClose={() => setShowAssign(false)}\n error={error}\n isLoading={isLoading}\n />\n\n {\n setShowLink(false);\n if (\n isCreateHomework ||\n isEditSavedWorksheet ||\n isCreateFactualFluency\n ) {\n dispatch(resetWorksheet());\n history.push('/create-and-assign/saved-worksheet');\n } else {\n setShowResetCart(true);\n }\n }}\n onClose={() => {\n setShowLink(false);\n if (\n isCreateHomework ||\n isEditSavedWorksheet ||\n isCreateFactualFluency\n ) {\n dispatch(resetWorksheet());\n history.push('/create-and-assign/saved-worksheet');\n } else {\n setShowResetCart(true);\n }\n }}\n />\n {\n dispatch(resetCartQuestions());\n dispatch(resetWorksheet());\n history.push('/create-and-assign/saved-worksheet');\n setShowResetCart(false);\n }}\n onClose={() => {\n dispatch(resetWorksheet());\n dispatch(setSelectedQuestions(cartQuestions));\n setShowResetCart(false);\n history.push('/create-and-assign/saved-worksheet');\n }}\n />\n \n \n {' '}\n {t(\n `create-assign-question:assign.assignSettings`,\n 'Assignment Settings'\n )}\n \n \n
\n \n
{t(`create-assign-question:assign.assignTo`, 'Assign to')}
\n {!hasAssignees && (\n
\n {t(\n `create-assign-question:assign.clickChoose`,\n 'Click here to choose'\n )}\n \n )}\n {tempAssignedClass.length > 0 && (\n
\n
\n {t(`create-assign-question:assignModal.class`, 'Class')}\n \n {renderAssigneeItem(tempAssignedClass)}\n \n )}\n {tempAssignedGroup.length > 0 && (\n
\n
\n {t(`create-assign-question:assignModal.group`, 'Group')}\n \n {renderAssigneeItem(tempAssignedGroup)}\n \n )}\n {tempAssignedPrivateGroup.length > 0 && (\n
\n
\n {t(\n `create-assign-question:assignModal.pvtGroup`,\n 'Private Group'\n )}\n \n {renderAssigneeItem(tempAssignedPrivateGroup)}\n \n )}\n {hasProp(tempAssignedAdminGroup, 'ID') && (\n
\n )}\n {tempAssignedLevel !== '' && (\n
\n )}\n {tempAssignedStudent.length > 0 && (\n
\n
\n {t(\n `create-assign-question:assignModal.indvStud`,\n 'Individual Students'\n )}\n \n {Object.entries(groupedStudents).map(\n ([studentClass, classOfStudents]) => {\n return (\n
\n {studentClass}
\n {classOfStudents.map(singleStudent => (\n \n ))}\n \n );\n }\n )}\n
\n )}\n
\n
\n
\n
\n
\n {t(`create-assign-question:assign.startEnd`, 'Start / End')}\n
\n
\n
\n
\n {assignmentType === assignmentTypes.test && (\n
\n
\n
\n
\n {t(\n `create-assign-question:assignModal.releaseDate`,\n 'Release Date'\n )}\n
\n
\n
\n
\n )}\n {/*
\n
\n
\n
Rewards
\n
\n
\n {kokoCredits.map(koko => {\n return (\n \n {koko}\n \n );\n })}\n \n Koko
\n \n
\n
*/}\n
\n \n {t(`create-assign-question:assign.saveOnly`, 'Save Only')}\n \n \n {t(`create-assign-question:assign.saveAssign`, 'Save & Assign')}\n \n
\n \n \n );\n}\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport HeaderBox from 'components/CreateAndAssign/HeaderBox';\nimport WorksheetAssignTitle from 'components/CreateAndAssign/QuestionCart/WorksheetAssignTitle';\nimport NewBorder from 'components/Shared/NewBorder';\nimport QuestionHeader from 'components/Question/QuestionHeader';\nimport QuestionContent from 'components/Question/QuestionContent';\nimport AssignSidebar from 'components/CreateAndAssign/AssignSidebar';\n// import printImage from 'assets/img/print-icon.svg';\n\nexport default function WorksheetAssign() {\n const { selectedQuestions, title } = useSelector(state => state.worksheet);\n\n return (\n <>\n \n
\n window.print()}\n >\n \n
\n {/*
*/}\n {/*
\n
*/}\n
\n {selectedQuestions.map((question, key) => {\n const order = key + 1;\n return (\n
\n
\n );\n })}\n
\n
\n \n {Object.keys(assignmentTypeNames).map(type => (\n
\n
\n {assignmentTypeInitials[type]}\n \n
\n \n {t(\n `create-assign-question:preview.${assignmentTypeNames[type]}`,\n assignmentTypeNames[type]\n )}\n \n
\n
\n
\n
\n );\n}\n","import React, { useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setPresentationType } from 'stores/worksheet/actions';\nimport HeaderBox from 'components/CreateAndAssign/HeaderBox';\nimport NavigationWizard from 'components/CreateAndAssign/NavigationWizard';\nimport ChooseWorkSheetType from 'components/CreateAndAssign/ChooseWorkSheetType';\nimport { Col } from 'react-bootstrap';\nimport { presentationTypes } from 'constants/index';\nimport { nextStep } from 'stores/utils/step/actions';\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport ButtonStepPrev from 'components/Shared/ButtonStepPrev';\n\nexport default function WorksheetPreviewNew() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n const { presentationType } = useSelector(state => state.worksheet);\n\n const presentationTypeID = isNilOrEmpty(presentationType)\n ? presentationTypes.standard\n : parseInt(presentationType, 10);\n\n useEffect(() => {\n dispatch(setPresentationType(presentationTypeID));\n }, [presentationTypeID, dispatch]);\n const handleOnNext = () => {\n dispatch(nextStep());\n dispatch(setPresentationType(presentationTypeID));\n };\n\n return (\n \n
\n \n
\n \n
\n {t(\n `create-assign-question:preview.chooseWoType`,\n 'Choose Worksheet Type'\n )}\n \n
\n {t(\n `create-assign-question:preview.chooseWo1`,\n 'We provide 3 worksheet types: '\n )}\n \n {t(\n `create-assign-question:preview.chooseWo2`,\n 'Homework, Mock Test and Test/Assessment.'\n )}\n {' '}\n
\n
\n
\n
\n
\n \n )}\n \n );\n}\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Dropdown } from 'react-bootstrap';\nimport { useDispatch } from 'react-redux';\nimport { deleteWorksheet } from 'stores/worksheet/actions';\nimport './SavedWorksheetRowSubMenu.styles.scss';\nimport ConfirmModal from 'components/Alert/ConfirmModal';\nimport { featureToggle } from 'constants/index';\nimport { isNil } from 'ramda';\n\nexport default function SavedWorksheetRowSubMenu(props) {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n const { worksheet } = props;\n\n const handleDelete = selectedWorksheet => {\n dispatch(deleteWorksheet(selectedWorksheet.ID));\n };\n\n const handlePrint = async () => {\n const sessionSecret = sessionStorage.getItem('secret');\n const url = isNil(sessionSecret)\n ? `/worksheet/print/${worksheet.ID}`\n : `/worksheet/print/${worksheet.ID}?secret=${sessionSecret}`;\n const win = window.open(url, '_blank');\n win.focus();\n };\n\n const [showConfirm, setShowConfirm] = useState(false);\n return (\n <>\n handleDelete(worksheet)}\n onClose={() => setShowConfirm(false)}\n title={t(`create-assign-saved:delWo.delWo`, 'Delete Worksheet')}\n >\n \n {t(\n `create-assign-saved:delWo.delConfirm`,\n 'This assignment will be deleted'\n )}\n
\n \n {t(`create-assign-saved:delWo.proceed`, 'Do you want to proceed?')}\n
\n \n \n \n {featureToggle.printButton && (\n handlePrint()}\n >\n setShowConfirm(true)}\n >\n \n \n \n );\n}\n","import { assignmentTypes } from 'constants/index';\nimport { invertObj } from 'ramda';\n\nexport const isFactualFluency = typeId => {\n const assignmentTypeName = invertObj(assignmentTypes)[typeId];\n const factualFluencyTime = ['total', 'interval', 'notime'];\n\n return factualFluencyTime.includes(assignmentTypeName);\n};\n","import React from 'react';\nimport { assignmentTypes } from 'constants/index';\nimport { invertObj, toUpper } from 'ramda';\nimport './CircleType.styles.scss';\nimport iconFactualFluency from 'assets/img/icon-factual-fluency.png';\nimport { isFactualFluency } from 'helpers/factualFluency';\n\nexport default function CircleType(props) {\n const { typeId } = props;\n const assignmentTypeName = invertObj(assignmentTypes)[typeId];\n\n return (\n \n {isFactualFluency(typeId) ? (\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport moment from 'moment';\nimport scheduleIcon from 'assets/img/icon-schedule-orange.svg';\nimport assignedIcon from 'assets/img/icon-assigned.svg';\nimport assignNow from 'assets/img/icon-assign-now.svg';\nimport { useDispatch } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { selectWorksheet } from 'stores/worksheet/actions';\nimport history from 'helpers/history';\nimport { worksheetStatus, featureToggle } from 'constants/index';\nimport SavedWorksheetRowSubMenu from './SavedWorksheetRowSubMenu';\nimport CircleType from '../CircleType';\nimport './SavedWorksheetRow.styles.scss';\nimport { isFactualFluency } from 'helpers/factualFluency';\n\nexport default function SavedWorksheetRow(props) {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n const { worksheet } = props;\n const ModifiedDate = moment(worksheet.ModifiedDate).format('DD/MM/YYYY');\n\n const handleSchedule = selectedWorksheet => {\n dispatch(selectWorksheet(selectedWorksheet, false, false, 1));\n history.push('/create-and-assign/saved-worksheet/schedule');\n };\n\n const handleAssign = selectedWorksheet => {\n dispatch(selectWorksheet(selectedWorksheet, false, false, 2));\n history.push('/create-and-assign/saved-worksheet/assign-now');\n };\n\n const handleEdit = async selectedWorksheet => {\n await dispatch(selectWorksheet(selectedWorksheet, false, true));\n\n if (isFactualFluency(selectedWorksheet.PresentationType.AssignmentTypeID)) {\n history.push('/create-and-assign/factual-fluency/edit');\n } else {\n history.push('/create-and-assign/saved-worksheet/edit');\n }\n };\n return (\n \n
\n
\n
\n
\n
\n {featureToggle.previewButton && (\n
\n
\n )}\n
\n
\n
handleSchedule(worksheet)}\n disabled={worksheetStatus.publish !== worksheet.WorksheetStatus}\n >\n handleAssign(worksheet)}\n disabled={worksheetStatus.publish !== worksheet.WorksheetStatus}\n >\n handleEdit(worksheet)}\n >\n {t(`create-assign-saved:main.edit`, 'Edit')}\n \n \n
\n
\n {worksheet.IsAssigned && (\n
\n
\n
\n \n
\n {t(`create-assign-saved:main.seeAll`, 'see all assignments')}\n \n \n
\n )}\n
\n {worksheet.Files.length > 0 &&\n worksheet.Files.map(file => (\n
\n
\n \n ))}\n
\n
\n
\n
\n
{t(`create-assign-saved:main.type`, 'Type')}
\n
\n
\n
{t(`create-assign-saved:main.woTitle`, 'Worksheet Title')}
\n
\n
\n
{t(`create-assign-saved:main.lastMod`, 'Last Modified')}
\n
\n {featureToggle.previewButton && (\n
\n
{t(`create-assign-saved:main.type`, 'Preview')}
\n
\n )}\n
\n
\n {dataWorksheets.map(worksheet => (\n
\n
\n
\n
\n
\n
\n
\n
\n Your haven‘t saved any worksheet. \n \n
\n You can check the Question Cart to create the worksheet.\n \n
\n Create worksheet\n \n \n
\n \n \n onPageChange(page - 1)}\n >\n < {t(`create-assign-saved:pagination.prev`, 'Prev')}\n \n \n {pages.map(pageNumber => {\n return (\n \n onPageChange(pageNumber)}\n >\n {pageNumber}\n \n \n );\n })}\n \n onPageChange(page + 1)}\n >\n {t(`create-assign-saved:pagination.next`, 'Next')} >\n \n \n \n {t(`create-assign-saved:pagination.page`, 'Page')}\n onSearchPageChange(evt.target.value)}\n />\n {t(`create-assign-saved:pagination.of`, 'of')} {maxPage}\n \n \n \n );\n}\n\nPagination.defaultProps = {\n numVisiblePages: 3\n};\n\nexport default Pagination;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDebounce } from 'use-debounce';\nimport SavedWorksheetList from 'components/CreateAndAssign/SavedWorksheet/SavedWorksheetList';\nimport './SavedWorksheet.styles.scss';\nimport savedWorksheetIcon from 'assets/img/icon-saved-worksheet-grey.svg';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { isNil } from 'ramda';\nimport {\n fetchWorksheetsRequest,\n deleteWorksheetReset\n // resetSelectedWorksheet\n} from 'stores/worksheet/actions';\nimport EmptySavedWorksheet from 'components/CreateAndAssign/EmptySavedWorksheet';\nimport Pagination from 'components/Shared/Pagination';\nimport Spinner from 'components/Shared/Spinner';\n\nexport default function SavedWorksheet() {\n const { t } = useTranslation(['create-assign-saved']);\n const {\n isLoading,\n worksheets,\n deleteWorkSheet,\n worksheetSearchPage\n } = useSelector(state => state.worksheet);\n // Variables and setup\n const initialPage = worksheetSearchPage || 1;\n const perPage = 5;\n const dispatch = useDispatch();\n const [page, setPage] = useState(initialPage);\n\n // Search page logic\n const [searchPage, setSearchPage] = useState(initialPage);\n const [debouncedSearchPage] = useDebounce(searchPage, 500);\n const totalWorksheets = !isNil(worksheets.TotalCount)\n ? worksheets.TotalCount\n : 0;\n const maxPage = Math.ceil(totalWorksheets / perPage);\n const onSearchPageChange = pageNumber => {\n if (pageNumber <= maxPage) {\n setSearchPage(pageNumber);\n } else {\n setSearchPage(page);\n }\n };\n\n const totalData = !isNil(worksheets.List) ? worksheets.List.length : 0;\n\n useEffect(() => {\n if (debouncedSearchPage) {\n dispatch(fetchWorksheetsRequest(debouncedSearchPage, perPage));\n setPage(parseInt(debouncedSearchPage, 10));\n }\n }, [debouncedSearchPage, dispatch]);\n\n useEffect(() => {\n if (deleteWorkSheet) {\n let pageNo = debouncedSearchPage;\n if (totalData === 1 && debouncedSearchPage !== 1) {\n pageNo -= 1;\n setSearchPage(pageNo);\n }\n dispatch(fetchWorksheetsRequest(pageNo, perPage));\n setPage(parseInt(pageNo, 10));\n dispatch(deleteWorksheetReset());\n }\n }, [debouncedSearchPage, deleteWorkSheet, dispatch, totalData]);\n\n const isInitialLoading = isLoading && isNil(worksheets.List);\n if (isInitialLoading) {\n return (\n \n );\n }\n\n // Callback for page change\n const onPageChange = number => {\n // dispatch(fetchWorksheetsRequest(number, perPage));\n setPage(number);\n setSearchPage(number);\n };\n\n // Callback for search page change\n\n return totalData > 0 ? (\n \n
\n
\n
\n
{t(`create-assign-saved:main.savedWo`, 'Saved Worksheet')} \n
\n
\n {isLoading ? (\n
\n \n Loading... \n \n
\n ) : (\n <>\n
\n
\n \n )}\n
\n \n {selectedValue}\n \n \n {children}\n {values.length > 0 &&\n values.map(value => (\n {\n event.preventDefault();\n setValue(value);\n }}\n className=\"dropdown-item-custom\"\n >\n {valueTemplate !== undefined\n ? valueKey !== null\n ? valueTemplate(value[valueKey])\n : valueTemplate(value)\n : valueKey !== null\n ? value[valueKey]\n : value}\n \n ))}\n \n \n );\n};\n\nexport default DropdownMenu;\n","import styled from 'styled-components';\n\nexport const SelectNumberWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n .diff-type {\n color: ${props => props.color};\n /* text-transform: capitalize; */\n }\n .diff-controls {\n display: flex;\n background: #fff;\n justify-content: center;\n margin-top: 10px;\n .dec-count,\n .inc-count {\n border: 1px solid #c5c5c5;\n color: #727272;\n cursor: pointer;\n padding: 5px 10px;\n }\n .dec-count {\n border-style: solid none solid solid;\n border-radius: 3px 0 0 3px;\n }\n .inc-count {\n border-style: solid solid solid none;\n border-radius: 0 3px 3px 0;\n }\n input {\n border: 1px solid #c5c5c5;\n border: none solid none solid;\n width: 25%;\n text-align: center;\n font-size: 15px;\n color: #222222;\n }\n }\n`;\n","import React from 'react';\nimport { SelectNumberWrapper } from './SelectNumberQuestions.styles';\n\nexport default function SelectNumberQuestions({\n type,\n count,\n changeCount,\n color,\n index,\n changeControl,\n label\n}) {\n return (\n \n {label}
\n \n
changeControl('dec', type, index)}\n >\n -\n changeCount(e.target.value, type, index)}\n />\n changeControl('inc', type, index)}\n >\n +\n \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const TopicalWorksheetContainer = styled.div`\n padding-top: 20px;\n padding-left: 40px;\n padding-right: 20px;\n height: calc(100vh - 75px);\n margin-left: 200px;\n background-color: #f2f2f2;\n\n .topical-worksheet-header {\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n margin-left: 10px;\n font-size: 20px;\n color: #545454;\n }\n }\n .topical-loader {\n position: absolute;\n top: 50%;\n left: 55%;\n }\n .topical-worksheet-dropdown {\n display: flex;\n justify-content: space-evenly;\n margin-top: 20px;\n .tw-levels {\n display: flex;\n align-items: center;\n .dropdown-menu.show {\n max-height: 400px;\n overflow: auto;\n background: #fff;\n }\n button {\n padding: 3px 10px;\n font-size: 15px;\n border: 1px solid #c5c5c5 !important;\n }\n }\n span {\n font-size: 14px;\n color: #727272;\n margin-right: 40px;\n }\n }\n .topical-worksheet-body {\n margin-top: 50px;\n .topical-worksheet-card {\n display: flex;\n background: #ffffff;\n margin-bottom: 30px;\n border-radius: 5px;\n user-select: none;\n .topical-name-category {\n flex: 1;\n border-right: 0.5px solid #c5c5c5;\n display: flex;\n padding: 10px;\n align-items: center;\n .syllabus-img {\n width: 70px;\n }\n .syllabus-name {\n margin-left: 5px;\n .syllabus-item-name {\n font-size: 16px;\n font-weight: bold;\n color: #1d1d1d;\n }\n }\n }\n .topical-difficulty-category {\n flex: 3;\n border-right: 0.5px solid #c5c5c5;\n display: flex;\n padding: 10px;\n justify-content: space-evenly;\n align-items: center;\n }\n .topical-total-category {\n flex: 1;\n padding: 10px;\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: space-evenly;\n .tw-category-total {\n span {\n font-size: 18px;\n color: #1d1d1d;\n font-weight: 700;\n margin-left: 10px;\n }\n }\n .tw-category-controls {\n display: flex;\n width: 90%;\n justify-content: space-evenly;\n .tw-push-cart {\n background: #ffffff;\n border: 1px solid #ff5b00;\n border-radius: 4px;\n color: #ff5b00;\n padding: 5px 10px;\n font-size: 18px;\n }\n .tw-create {\n background: #ff5b00;\n border: 1px solid #cf4a00;\n border-radius: 4px;\n color: #fff;\n font-size: 18px;\n padding: 5px 20px;\n }\n .tw-create:disabled,\n .tw-push-cart:disabled {\n cursor: not-allowed !important;\n }\n }\n }\n }\n }\n @media (max-width: 1024px) {\n margin-left: 10px;\n }\n`;\n\nexport const NoSyllabusContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n .no-syll-img {\n }\n .title {\n color: #555555;\n font-weight: 900;\n font-size: 18px;\n margin: 25px 0 12px;\n }\n .suggestion {\n color: #555555;\n font-size: 18px;\n }\n`;\n","import React from 'react';\nimport noSyllabus from 'assets/img/icon-no-syllabus.svg';\nimport { NoSyllabusContainer } from './TopicalWorksheet.styles';\n\nexport default function NoSyllabus() {\n return (\n \n No topics found
\n Select another syllabus to show topics.
\n \n );\n}\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Dropdown, Spinner } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { sort, clone, isEmpty } from 'ramda';\n\nimport { HOTS_CURR_ID, AGE_GROUP } from 'constants/hotsCurr';\n\nimport {\n fetchSyllabusRequest,\n pushToCartRequest,\n createWorkSheetRequest,\n pushToCartReset\n} from 'stores/topical-worksheet/actions';\nimport { selectLevel } from 'stores/levels/actions';\nimport { selectCurriculum } from 'stores/curriculums/actions';\n\nimport DropdownMenu from 'components/Shared/DropdownMenu';\nimport AlertModal from 'components/Alert/AlertModal';\nimport SelectNumberQuestions from 'components/CreateAndAssign/SelectNumberQuestions';\n\nimport topicalWorksheetWhiteIcon from 'assets/img/icon-topical-worksheet-white.svg';\nimport cartIcon from 'assets/img/icon-push-cart.svg';\nimport { resetSelectedWorksheet } from 'stores/worksheet/actions';\nimport { TopicalWorksheetContainer } from './TopicalWorksheet.styles';\nimport NoSyllabus from './NoSyllabus';\n\nexport default function TopicalWorksheet() {\n const { t } = useTranslation(['create-assig-topical', 'common']);\n const history = useHistory();\n const dispatch = useDispatch();\n const { curriculums, selectedCurriculum } = useSelector(\n state => state.curriculums\n );\n const { levels, selectedLevel } = useSelector(state => state.levels);\n\n const {\n syllabus,\n createWorksheet,\n pushCart,\n isLoading,\n pushCartLoading,\n createWorksheetLoading,\n error\n } = useSelector(state => state.topicalWorksheet);\n const sortedTopics = sort((a, b) => a.Display - b.Display, syllabus);\n\n const [isRun, setIsRun] = useState(false);\n const [levelId, setLevelId] = useState(selectedLevel?.ID);\n const [curriculumId, setCurriculumId] = useState(\n selectedCurriculum.CurriculumID\n );\n const [curriculumName, setCurriculumName] = useState(\n selectedCurriculum.curriculumName\n );\n const [isShowModal, setIsShowModal] = useState(false);\n const [isShowMsg, setIsShowMsg] = useState('');\n\n const levellessCurr = isEmpty(selectedCurriculum.Levels);\n\n const sortedArray = arrVal => {\n const val = arrVal.map(elem => {\n return {\n easy: 0,\n medium: 0,\n difficult: 0,\n total: 0\n };\n });\n return val;\n };\n const [counts, setCounts] = useState(sortedArray(sortedTopics));\n\n const isHOTS = selectedCurriculum?.CurriculumID === HOTS_CURR_ID;\n\n useEffect(() => {\n setCurriculum(curriculumId, curriculumName);\n return () => {\n dispatch(resetSelectedWorksheet());\n };\n // eslint-disable-next-line\n }, [dispatch]);\n\n useEffect(() => {\n if (!isRun) {\n setIsRun(true);\n return;\n }\n const sortedTopics = sort((a, b) => a.Display - b.Display, syllabus);\n let tempCounts = clone(counts);\n tempCounts = sortedArray(sortedTopics);\n setCounts(tempCounts);\n // eslint-disable-next-line\n }, [syllabus]);\n\n useEffect(() => {\n if (!isRun) {\n setIsRun(true);\n return;\n }\n if (!isEmpty(createWorksheet)) {\n history.push('/create-and-assign/topical-worksheet/create');\n }\n // eslint-disable-next-line\n }, [createWorksheet]);\n\n useEffect(() => {\n if (!isRun) {\n setIsRun(true);\n return;\n }\n if (!isEmpty(pushCart)) {\n dispatch(pushToCartReset());\n history.push('/create-and-assign');\n }\n // eslint-disable-next-line\n }, [pushCart]);\n\n useEffect(() => {\n if (!isRun) {\n setIsRun(true);\n return;\n }\n if (!isEmpty(error)) {\n setIsShowModal(true);\n setIsShowMsg(error);\n }\n // eslint-disable-next-line\n }, [error]);\n\n const getSyllabus = (currId, level) => {\n dispatch(fetchSyllabusRequest(currId, level));\n };\n\n const setCurriculum = (id, name) => {\n const curriculum = curriculums.find(curr => curr.CurriculumID === id);\n setCurriculumId(id);\n setCurriculumName(name);\n const findLevel = curriculum.Levels.find(level => level.ID === levelId);\n if (!findLevel) {\n if (curriculum.Levels[0]) {\n setLevelId(curriculum.Levels[0].ID);\n dispatch(selectLevel(curriculum.Levels[0]));\n }\n getSyllabus(id, curriculum.Levels[0]?.ID ?? -1);\n } else {\n getSyllabus(id, levelId);\n }\n dispatch(selectCurriculum(curriculum));\n };\n\n const setLevel = id => {\n const level = levels.find(lvl => lvl.ID === id);\n setLevelId(id);\n dispatch(selectLevel(level));\n getSyllabus(curriculumId, id);\n };\n\n const save = (topicId, index, type) => {\n const { easy, medium, difficult } = counts[index];\n const obj = {\n curriculumId,\n topicId,\n levelId,\n easy,\n medium,\n difficult\n };\n if (type === 'push') {\n dispatch(pushToCartRequest(obj));\n } else {\n dispatch(createWorkSheetRequest(obj));\n }\n };\n\n const onChangeHandler = (val, difficultyLevel, index) => {\n if (/^\\d*\\.?\\d*$/.test(val)) {\n const tempCounts = clone(counts);\n const objVal = tempCounts[index];\n if (val === '') val = 0;\n objVal[difficultyLevel] = Number(val);\n objVal.total = objVal.easy + objVal.medium + objVal.difficult;\n setCounts(tempCounts);\n }\n };\n\n const onControlsHandler = (type, difficultyLevel, index) => {\n const tempCounts = clone(counts);\n const objVal = tempCounts[index];\n if (type === 'inc') {\n objVal[difficultyLevel] = objVal[difficultyLevel] + 1;\n } else if (objVal[difficultyLevel] !== 0) {\n objVal[difficultyLevel] = objVal[difficultyLevel] - 1;\n }\n objVal.total = objVal.easy + objVal.medium + objVal.difficult;\n setCounts(tempCounts);\n };\n\n const onModalClose = () => {\n setIsShowMsg('');\n setIsShowModal(false);\n };\n\n return (\n \n \n
\n
\n {t(`create-assig-topical:main.topicalWo`, 'Topical Worksheet')}\n \n
\n
\n {t(`create-assig-topical:main.curriculum`, 'Curriculum')} \n \n \n {curriculumName}\n \n \n {curriculums.map(item => (\n \n setCurriculum(item.CurriculumID, item.curriculumName)\n }\n value={curriculumId}\n >\n {item.curriculumName}\n \n ))}\n \n \n
\n {!levellessCurr && (\n
\n {t(`create-assig-topical:main.level`, 'Level')} \n level.ID)}\n setValue={setLevel}\n valueTemplate={value =>\n isHOTS\n ? `${t(`common:age`, 'Age')} ${AGE_GROUP[value]}`\n : `P${value}`\n }\n />\n
\n )}\n
\n {sortedTopics.length === 0 ? (\n
\n ) : (\n sortedTopics.map((item, index) => (\n
\n
\n
\n
\n
\n
\n {t(`create-assig-topical:main.total`, 'Total: ')}\n {counts[index] && counts[index].total} \n
\n
\n
save(item.ID, index, 'push')}\n disabled={counts[index] && counts[index].total === 0}\n >\n + save(item.ID, index, 'create')}\n disabled={counts[index] && counts[index].total === 0}\n >\n {t(`create-assig-topical:main.create`, 'Create')}\n \n \n
\n
\n ))\n )}\n
\n {t(`create-assig-topical:delWo.close`, 'Close')}\n \n }\n >\n {isShowMsg}
\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const TopicWrap = styled.div`\n .skill-wrap {\n &.open {\n display: block;\n }\n &.hide {\n display: none;\n }\n }\n`;\n\nexport const ArrowImage = styled.img`\n height: 15px;\n margin-right: 20px;\n transition-duration: 0.3s;\n &.open {\n transform: rotate(90deg);\n transition-duration: 0.3s;\n }\n`;\n\nexport const TopicItemContainer = styled.div`\n background: #fdfbf6;\n border-bottom: solid 1px #dfdfdf;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n cursor: pointer;\n .title-wrap {\n display: flex;\n align-items: center;\n .arrow-button {\n border: none;\n background-color: transparent;\n width: 25px;\n }\n .title-topic {\n font-size: 1.2rem;\n font-weight: bolder;\n }\n }\n\n .question-wrap {\n display: flex;\n align-items: center;\n .total-qn {\n font-size: 1.5rem;\n color: #ff5b00;\n font-weight: bold;\n font-family: 'Muli', sans-serif;\n &.empty {\n color: #cececc;\n }\n }\n }\n`;\n\nexport const SkillItem = styled.div`\n background: #fcfcfc;\n border-bottom: solid 1px #dfdfdf;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n\n .title-wrap {\n margin-left: 30px;\n display: flex;\n align-items: center;\n .subtitle-skill {\n color: #afafaf;\n font-size: 1rem;\n font-weight: bolder;\n margin-right: 20px;\n }\n .title-skill {\n color: #4a4a4a;\n font-size: 1rem;\n font-weight: bolder;\n }\n }\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport iconRight from 'assets/img/icon-right-purple.svg';\nimport { clone, sum } from 'ramda';\nimport {\n TopicWrap,\n ArrowImage,\n TopicItemContainer,\n SkillItem\n} from './TopicItem.style';\nimport SelectNumberQuestions from '../SelectNumberQuestions';\n\nconst TopicItem = ({\n topic,\n index,\n counts,\n setCounts,\n allOpen,\n setAllOpen\n}) => {\n const { t } = useTranslation(['create-assign-factual-fluency.json']);\n const [showSkill, setShowSkill] = useState(false);\n useEffect(() => {\n if (allOpen) {\n setShowSkill(true);\n }\n }, [allOpen]);\n const onChangeHandler = useCallback(\n (val, difficultyLevel, indexSkill) => {\n if (/^\\d*\\.?\\d*$/.test(val)) {\n const tempCounts = clone(counts);\n const objVal = tempCounts[index];\n if (val === '') val = 0;\n if (val <= 10) {\n objVal.skills[indexSkill].numberOfQuestion = Number(val);\n objVal.total = sum(\n objVal.skills.map(item => {\n return item.numberOfQuestion;\n })\n );\n setCounts(tempCounts);\n }\n }\n },\n [index, counts, setCounts]\n );\n\n const onControlsHandler = useCallback(\n (type, difficultyLevel, indexSkill) => {\n const tempCounts = clone(counts);\n const objVal = tempCounts[index];\n if (type === 'inc') {\n objVal.skills[indexSkill].numberOfQuestion =\n objVal.skills[indexSkill].numberOfQuestion + 1;\n } else if (objVal.skills[indexSkill].numberOfQuestion !== 0) {\n objVal.skills[indexSkill].numberOfQuestion =\n objVal.skills[indexSkill].numberOfQuestion - 1;\n }\n if (objVal.skills[indexSkill].numberOfQuestion <= 10) {\n objVal.total = sum(\n objVal.skills.map(item => {\n return item.numberOfQuestion;\n })\n );\n setCounts(tempCounts);\n }\n },\n [index, counts, setCounts]\n );\n\n const onPress = () => {\n setShowSkill(prev => {\n setAllOpen(!prev);\n return !prev;\n });\n };\n\n return (\n \n \n \n
\n \n\n
{topic.Name}
\n
\n \n {counts[index].total}\n \n
\n \n \n {topic.Skills.map((Skill, i) => (\n
\n \n
{`${t(\n 'create-assign-factual-fluency:main.skill',\n 'Skill'\n )} ${i + 1}`}
\n
{Skill.Name}
\n
\n ))}\n
\n );\n};\nexport default React.memo(TopicItem);\n","import styled from 'styled-components';\n\nexport const TopicContainer = styled.div`\n border: solid 1px #dfdfdf;\n color: #1e1e1e;\n border-bottom: none;\n`;\n","import React, { useState } from 'react';\nimport TopicItem from './TopicItem';\nimport { TopicContainer } from './TopicList.style';\n\nconst TopicList = props => {\n const { topics, counts, setCounts } = props;\n const [allOpen, setAllOpen] = useState(false);\n return (\n \n {topics.map((Topic, index) => {\n return (\n \n );\n};\nexport default React.memo(TopicList);\n","import styled from 'styled-components';\n\nexport const FactualFluencyContainer = styled.div`\n height: calc(100vh - 75px);\n margin-left: 195px;\n background-color: #f2f2f2;\n\n .factual-fluency-header {\n padding-top: 20px;\n padding-left: 40px;\n padding-right: 20px;\n padding-bottom: 20px;\n background-color: #fff;\n position: fixed;\n top: 55px;\n width: calc(100% - 195px);\n z-index: 1;\n\n .factual-fluency-title {\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n margin-left: 10px;\n font-size: 20px;\n color: #545454;\n }\n }\n\n .factual-fluency-action {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n\n .factual-fluency-dropdown {\n display: flex;\n justify-content: space-evenly;\n .tw-levels {\n display: flex;\n align-items: center;\n .dropdown-menu.show {\n max-height: 400px;\n overflow: auto;\n background: #fff;\n }\n button {\n padding: 3px 10px;\n font-size: 15px;\n border: 1px solid #c5c5c5 !important;\n }\n }\n span {\n font-size: 14px;\n color: #727272;\n margin-right: 40px;\n }\n }\n }\n\n .topical-loader {\n position: absolute;\n top: 50%;\n left: 55%;\n }\n\n .factual-fluency-body {\n margin-top: 200px;\n padding: 0 140px;\n .factual-fluency-card {\n display: flex;\n background: #ffffff;\n margin-bottom: 30px;\n border-radius: 5px;\n user-select: none;\n .topical-name-category {\n flex: 1;\n border-right: 0.5px solid #c5c5c5;\n display: flex;\n padding: 10px;\n align-items: center;\n justify-content: right;\n .syllabus-img {\n width: 70px;\n }\n .syllabus-name {\n margin-left: 5px;\n .syllabus-item-title {\n color: #727272;\n font-size: 12px;\n margin-bottom: 20px;\n }\n .syllabus-item-name {\n font-size: 14px;\n font-weight: bold;\n color: #1d1d1d;\n }\n }\n }\n .topical-difficulty-category {\n flex: 3;\n border-right: 0.5px solid #c5c5c5;\n display: flex;\n padding: 10px;\n justify-content: space-evenly;\n align-items: center;\n }\n .topical-total-category {\n flex: 1;\n padding: 10px;\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: space-evenly;\n .tw-category-total {\n span {\n font-size: 18px;\n color: #1d1d1d;\n font-weight: 700;\n margin-left: 10px;\n }\n }\n .tw-category-controls {\n display: flex;\n width: 90%;\n justify-content: space-evenly;\n .tw-push-cart {\n background: #ffffff;\n border: 1px solid #ff5b00;\n border-radius: 4px;\n color: #ff5b00;\n padding: 5px 10px;\n font-size: 18px;\n }\n .tw-create {\n background: #ff5b00;\n border: 1px solid #cf4a00;\n border-radius: 4px;\n color: #fff;\n font-size: 18px;\n padding: 5px 20px;\n }\n .tw-create:disabled,\n .tw-push-cart:disabled {\n cursor: not-allowed !important;\n }\n }\n }\n }\n }\n @media (max-width: 1024px) {\n margin-left: 10px;\n }\n`;\n\nexport const NoTopicsContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n .no-topic-img {\n }\n .title {\n color: #555555;\n font-weight: 900;\n font-size: 18px;\n margin: 25px 0 12px;\n }\n .suggestion {\n color: #555555;\n font-size: 18px;\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport noSyllabus from 'assets/img/icon-no-syllabus.svg';\nimport { NoTopicsContainer } from './FactualFluency.styles';\n\nexport default function NoTopicSkill() {\n const { t } = useTranslation(['create-assign-factual-fluency']);\n return (\n \n \n {t('create-assign-factual-fluency:empty.notFound', 'No topics found')}\n
\n \n {t(\n 'create-assign-factual-fluency:empty.suggest',\n 'Select another level to show topics.'\n )}\n
\n \n );\n}\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { Spinner } from 'react-bootstrap';\nimport { clone, flatten, isEmpty, sum } from 'ramda';\nimport {\n fetchTopicSkillRequest,\n createFactualFluencyRequest\n} from 'stores/factual-fluency/actions';\nimport { resetSelectedWorksheet } from 'stores/worksheet/actions';\n// Temporary deactivate cause currently we only have content for P1\n// import { selectLevel } from 'stores/levels/actions';\n// import DropdownMenu from 'components/Shared/DropdownMenu';\nimport topicalWorksheetWhiteIcon from 'assets/img/icon-topical-worksheet-white.svg';\nimport AlertModal from 'components/Alert/AlertModal';\n\nimport NavigationWizard from 'components/CreateAndAssign/NavigationWizard';\nimport TopicList from 'components/CreateAndAssign/FactualFluency/TopicList';\nimport ValidationMessage from 'components/CreateAndAssign/ValidationMessage';\nimport NoTopicSkill from './NoTopicSkill';\nimport { FactualFluencyContainer } from './FactualFluency.styles.js';\n\nconst sortedArray = arrVal => {\n const val = arrVal.map(item => {\n return {\n topicId: item.Id,\n total: 0,\n skills: item.Skills.map(skill => {\n return { topicId: item.Id, skillId: skill.Id, numberOfQuestion: 0 };\n })\n };\n });\n return val;\n};\n\nconst FactualFluency = () => {\n const { t } = useTranslation(['create-assign-factual-fluency']);\n const dispatch = useDispatch();\n const history = useHistory();\n // Temporary deactivate cause currently we only have content for P1\n // const { levels, selectedLevel } = useSelector(state => state.levels);\n\n const {\n topicSkill,\n createFactualFluency,\n isLoading,\n createFactualFluencyLoading,\n error\n } = useSelector(state => state.factualFluency);\n\n // eslint-disable-next-line no-unused-vars\n const [levelId, setLevelId] = useState(1);\n const [isShowModal, setIsShowModal] = useState(false);\n const [isShowMsg, setIsShowMsg] = useState('');\n\n const onModalClose = () => {\n setIsShowMsg('');\n setIsShowModal(false);\n };\n\n const [counts, setCounts] = useState([]);\n const totalQn = sum(\n counts.map(count => {\n return count.total;\n })\n );\n\n const getTopics = useCallback(\n levelId => {\n dispatch(fetchTopicSkillRequest(levelId));\n },\n [dispatch]\n );\n\n useEffect(() => {\n return () => {\n dispatch(resetSelectedWorksheet());\n };\n }, [dispatch]);\n\n useEffect(() => {\n getTopics(levelId);\n // eslint-disable-next-line\n }, [levelId]);\n\n useEffect(() => {\n let tempCounts = clone(counts);\n tempCounts = sortedArray(topicSkill);\n setCounts(tempCounts);\n // eslint-disable-next-line\n }, [topicSkill]);\n\n useEffect(() => {\n if (!isEmpty(createFactualFluency)) {\n history.push('/create-and-assign/factual-fluency/create');\n }\n }, [history, createFactualFluency]);\n\n useEffect(() => {\n if (!isEmpty(error)) {\n setIsShowModal(true);\n setIsShowMsg(error);\n }\n }, [error]);\n\n // Temporary deactivate cause currently we only have content for P1\n // const setLevel = useCallback(\n // id => {\n // const level = levels.find(lvl => lvl.ID === id);\n // setLevelId(id);\n // dispatch(selectLevel(level));\n // },\n // [dispatch, levels]\n // );\n\n const save = useCallback(() => {\n if (totalQn > 0) {\n const obj = flatten(\n counts.map(count => {\n return count.skills.filter(skill => skill.numberOfQuestion > 0);\n })\n );\n dispatch(createFactualFluencyRequest(obj));\n }\n }, [totalQn, counts, dispatch]);\n\n return (\n \n \n
\n
\n
\n {t(\n `create-assign-factual-fluency:main.factualFluency`,\n 'Factual Fluency Practice'\n )}\n \n
\n\n
\n {/* Temporary deactivate cause currently we only have content for P1 */}\n {/*
\n
\n \n {t(`create-assign-factual-fluency:main.level`, 'Level')}\n \n level.ID)}\n setValue={setLevel}\n valueTemplate={value => `P${value}`}\n />\n
\n
*/}\n {totalQn > 50 &&
}\n
save()}\n showtotalQuestions\n totalQuestions={totalQn}\n />\n \n
\n {isLoading || createFactualFluencyLoading ? (\n
\n ) : topicSkill.length === 0 || counts.length === 0 ? (\n
\n ) : (\n
\n )}\n
\n {t(`create-assign-factual-fluency:delWo.close`, 'Close')}\n \n }\n >\n {isShowMsg}
\n \n \n );\n};\n\nexport default React.memo(FactualFluency);\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form, Spinner } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { find, findIndex, propEq } from 'ramda';\nimport { selectQuestions } from 'stores/questions/actions';\nimport { questionStatus } from 'constants/index';\n\nexport default function SearchResult() {\n const { t } = useTranslation(['create-assign-import-qn']);\n // const { keyword } = props;\n const { isLoading, searchedQuestions, selectedQuestions } = useSelector(\n state => state.questions\n );\n\n const validSearchedQuestions = searchedQuestions.filter(\n question => questionStatus[question.Status] === 'Valid'\n );\n\n const dispatch = useDispatch();\n\n const checkChecked = id => {\n return findIndex(propEq('ID', parseInt(id, 10)))(selectedQuestions) !== -1;\n };\n const onChange = event => {\n const { value } = event.target;\n // Use new variable to avoid mutating state\n let updatedData;\n\n if (!checkChecked(value)) {\n const newData = find(propEq('ID', parseInt(value, 10)))(\n searchedQuestions\n );\n\n updatedData = [...selectedQuestions, newData];\n } else {\n const index = findIndex(propEq('ID', parseInt(value, 10)))(\n selectedQuestions\n );\n updatedData = [\n ...selectedQuestions.slice(0, index),\n ...selectedQuestions.slice(index + 1)\n ];\n }\n\n dispatch(selectQuestions(updatedData));\n };\n\n const isAllQuestionsSelected =\n validSearchedQuestions.length > 0\n ? validSearchedQuestions\n .map(question => question.ID)\n .every(\n v =>\n selectedQuestions.map(selected => selected.ID).indexOf(v) !== -1\n )\n : false;\n\n const toggleCheckAll = event => {\n let updatedData;\n if (event.target.checked) {\n updatedData = [...selectedQuestions, ...validSearchedQuestions];\n } else {\n const questionIds = searchedQuestions.map(question => question.ID);\n updatedData = selectedQuestions.filter(\n question => questionIds.indexOf(question.ID) === -1\n );\n }\n dispatch(selectQuestions(updatedData));\n };\n\n return (\n \n {isLoading && (\n
\n \n {t('create-assign-import-qn:result.loading', 'Loading...')}\n \n \n )}\n {searchedQuestions.length > 0 ? (\n <>\n
\n
\n \n \n \n {t('create-assign-import-qn:result.id', 'Question ID')}\n \n \n {t('create-assign-import-qn:result.status', 'Status')}\n \n \n \n \n \n \n {searchedQuestions.map(question => (\n \n {question.ID} \n {questionStatus[question.Status]} \n \n {questionStatus[question.Status] === 'Valid' && (\n \n \n ))}\n \n
\n
\n \n ) : (\n
\n \n {t('create-assign-import-qn:result.notFound', 'Question Not found')}\n \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n setEmptyCart(!emptyCart)}\n label={t('create-assign-import-qn:emptyCart', 'Empty Cart')}\n bsPrefix=\"form-check-visible import-question-list__input--check\"\n />\n
\n
\n {t(\n 'create-assign-import-qn:qnList',\n {\n qn: selectedQuestions.length\n },\n `Selected ${selectedQuestions.length} Question`\n )}\n {isEnglish && selectedQuestions.length > 1 ? 's' : ''}\n
\n
\n {t(\n 'create-assign-import-qn:btn',\n 'Add Valid Question To Cart'\n )}\n \n \n
\n
\n
\n
\n
\n {children}\n
\n );\n};\nexport default HeaderFull;\n","import React from 'react';\n\nexport default function Border(props) {\n const { color } = props;\n return
;\n}\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport moment from 'moment-timezone';\nimport HeaderFull from 'components/CreateAndAssign/HeaderFull';\nimport { useSelector, useDispatch } from 'react-redux';\nimport CircleType from 'components/CreateAndAssign/CircleType';\nimport Border from 'components/Shared/Border';\nimport DateTimeRangePicker from 'components/CreateAndAssign/DateTimeRangePicker';\nimport { assignmentTypes, assignmentVisibilities } from 'constants/index';\nimport DateTimePicker from 'components/CreateAndAssign/DateTimePicker';\nimport { nextStep } from 'stores/utils/step/actions';\nimport {\n setStartEndDate,\n setReleaseDate,\n setAssignmentVisibility,\n setKokoCredit\n} from 'stores/worksheet/schedule/actions';\nimport { Spinner } from 'react-bootstrap';\n\nexport default function ScheduleTime() {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n const { selectedWorksheet, isLoading } = useSelector(\n state => state.worksheet\n );\n\n const {\n startDate,\n endDate,\n releaseDate,\n assignmentVisibility,\n kokoCredit\n } = useSelector(state => state.schedule);\n\n // must fullfil by data selected worksheet but I can find that\n // kokoCredits 10, 15, 20 is temporarily removed\n const kokoCredits = [5];\n const [kokoCreditVal, setKokoCreditVal] = useState(kokoCredit);\n const [visibilityVal, setVisibilityVal] = useState(assignmentVisibility);\n const startDateVal = moment(startDate, 'YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n const endDateVal = moment(endDate, 'YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n\n const releaseDateVal = moment(releaseDate, 'YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n\n const applyCallback = (startDateValue, endDateValue) => {\n dispatch(\n setStartEndDate(\n startDateValue.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n endDateValue.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ')\n )\n );\n };\n\n const applyCallbackRelease = (e, picker) => {\n dispatch(\n setReleaseDate(picker.startDate.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'))\n );\n };\n\n const onChangeKoko = event => {\n setKokoCreditVal(event.target.value);\n dispatch(setKokoCredit(event.target.value));\n };\n const onChangeVisibility = event => {\n setVisibilityVal(event.target.value);\n dispatch(setAssignmentVisibility(parseInt(event.target.value, 10)));\n };\n\n const handleNext = () => {\n if (!kokoCredit) {\n dispatch(setKokoCredit(kokoCreditVal));\n }\n\n if (!startDate && !endDate) {\n dispatch(\n setStartEndDate(\n startDateVal.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n endDateVal.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ')\n )\n );\n }\n\n if (!assignmentVisibility) {\n dispatch(setAssignmentVisibility(visibilityVal));\n }\n\n if (\n selectedWorksheet.PresentationType.AssignmentTypeID ===\n assignmentTypes.test &&\n !releaseDate\n ) {\n dispatch(\n setReleaseDate(releaseDateVal.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'))\n );\n }\n\n dispatch(nextStep());\n };\n return isLoading ? (\n \n \n Loading... \n \n
\n ) : (\n \n
\n \n
{selectedWorksheet?.Title} \n \n \n \n {t(`create-assign-saved:scheduleWo.cancel`, 'Cancel')}\n \n \n {t(`create-assign-saved:scheduleWo.next`, 'Next')}\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n {t(`create-assign-saved:scheduleWo.startend`, 'Start / End')}\n
\n
\n
\n
\n {selectedWorksheet?.PresentationType?.AssignmentTypeID ===\n assignmentTypes.test && (\n
\n
\n \n {t(\n `create-assign-saved:scheduleWo.releaseDate`,\n 'Release Date'\n )}\n
\n \n
\n )}\n
\n
\n
\n
\n
\n
\n {t(\n `create-assign-saved:scheduleWo.showWo`,\n `Show the worksheet in students' account`\n )}\n
\n
\n
\n \n {Object.keys(assignmentVisibilities).map(key => {\n return (\n \n {t(\n `create-assign-saved:scheduleWo.${assignmentVisibilities[key]}`,\n assignmentVisibilities[key]\n )}\n \n );\n })}\n \n
\n
\n
\n
\n
\n
\n
{t(`create-assign-saved:scheduleWo.rewards`, 'Rewards')}
\n
\n
\n \n {kokoCredits.map(kokoItem => {\n return (\n \n {kokoItem}\n \n );\n })}\n \n
\n
Koko
\n
\n
\n
\n No classes found
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchClassRequest } from 'stores/utils/lookup/actions';\nimport CheckboxClassGroup from './CheckboxClassGroup';\n\nexport default function AssignClass() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n\n const { levels, selectedLevel: globalSelectedLevel } = useSelector(\n state => state.levels\n );\n\n const [selectedLevel, setSelectedLevel] = useState(globalSelectedLevel.ID);\n\n const onChangeLevel = event => {\n setSelectedLevel(event.target.value);\n };\n\n useEffect(() => {\n dispatch(fetchClassRequest(selectedLevel));\n }, [dispatch, selectedLevel]); // @see {@link https://github.com/facebook/create-react-app/issues/6880#issuecomment-488158024 having dispatch in useEffect dependencies}\n\n return (\n \n
\n {t(\n `create-assign-question:assignModal.classAssign`,\n 'Please choose classes you want to assign'\n )}\n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n
\n
\n
\n {t(\n `create-assign-question:assignModal.chooseStud`,\n 'Please choose students you want to assign'\n )}\n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n \n {classes.map(classItem => (\n \n {classItem.Name}\n \n ))}\n \n \n
\n
\n {isLoading &&
\n
\n {isLoading ? (\n ''\n ) : availableStudents.length === 0 || error !== '' ? (\n \n {t(\n `create-assign-question:assignModal.noStud`,\n 'No student in the selected class'\n )}\n \n ) : (\n availableStudents.map(student => (\n \n {student.FullName}\n \n ))\n )}\n \n \n \n {t(`create-assign-question:assignModal.add`, 'Add')}\n \n \n {t(`create-assign-question:assignModal.remove`, 'Remove')}\n \n
\n \n {assignedStudent.map(student => (\n \n {student.FullName}\n \n ))}\n \n \n
\n \n );\n })}\n \n ) : (\n \n {t(\n 'create-assign-question:assignModal.noFound',\n 'No Private groups found'\n )}\n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchPrivateGroupsRequest } from 'stores/privateGroup/actions';\nimport PrivateGroupCheckbox from './CheckboxPrivateGroup';\n\nexport default function AssignClass() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n\n const [groupName, setGroupName] = useState('');\n const { privateGroups } = useSelector(state => state.privateGroup);\n\n const handleChangeGroupName = group => {\n setGroupName(group);\n };\n\n useEffect(() => {\n dispatch(fetchPrivateGroupsRequest(groupName));\n }, [dispatch, groupName]);\n\n return (\n \n
\n {t(\n `create-assign-question:assignModal.choosePrivateGroup`,\n 'Please choose private groups you want to assign'\n )}\n
\n
\n handleChangeGroupName(event.target.value)}\n />\n \n
\n
\n
\n {t(\n 'create-assign-question:assignModal.chooseAdmin',\n 'Please choose users and level you want to assign'\n )}\n
\n
\n \n {t(\n 'create-assign-question:assignModal.allPremium',\n 'All Premium users'\n )}\n \n
\n\n {/*
\n */}\n
\n \n {t(\n 'create-assign-question:assignModal.allKoobits',\n 'All KooBits users'\n )}\n \n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n
\n {t(\n `create-assign-question:assignModal.chooseGroup`,\n 'Please choose groups you want to assign'\n )}\n
\n {groups.length !== 0 ? (\n <>\n {groups.map(item => {\n return (\n
\n \n {t(`create-assign-question:assignModal.noGroup`, 'No group found')}\n
\n )}\n \n {isAdmin && (\n <>\n
\n \n {t(\n `create-assign-question:assignModal.pvtGroup`,\n 'Private Group'\n )}\n \n
\n
& \n \n )}\n
\n \n {t(`create-assign-question:assignModal.class`, 'Class')}\n \n
\n
& \n
\n \n {t(`create-assign-question:assignModal.group`, 'Group')}\n \n
\n
& \n
\n \n {t(\n `create-assign-question:assignModal.indvStud`,\n 'Individual Student'\n )}\n \n
\n {isAdmin && (\n
\n \n {t(`create-assign-question:assignModal.forAdimn`, 'For Admin')}\n \n
\n )}\n
{renderSwitch(typeAssign)}
\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { groupBy } from 'ramda';\nimport hasProp from 'helpers/hasProp';\n\nexport default function AssignResult(props) {\n const { t } = useTranslation(['create-assign-question']);\n const {\n assignedClass,\n assignedGroup,\n assignedStudent,\n assignedPrivateGroup,\n assignedAdminGroup,\n assignedLevel,\n hasAssignees\n } = props;\n\n const groupedStudents = groupBy(\n student => student.ClassName,\n assignedStudent\n );\n\n return (\n <>\n {t(`create-assign-question:assign.assignTo`, 'Assign to')} \n {hasAssignees ? (\n <>\n {assignedClass.length > 0 && (\n \n
\n {t(`create-assign-question:assign.assignTo`, 'Assign to')}\n \n {assignedClass.map(item => (\n
{item.Name}
\n ))}\n
\n
{t(`create-assign-question:assignModal.group`, 'Group')} \n {assignedGroup.map(item => (\n
{item.Name}
\n ))}\n
\n
\n {t(\n `create-assign-question:assignModal.pvtGroup`,\n 'Private Group'\n )}\n \n {assignedPrivateGroup.map(item => (\n
{item.Name}
\n ))}\n
\n
\n {t(\n `create-assign-question:assignModal.adminGroup`,\n 'Admin Group'\n )}\n \n
{assignedAdminGroup.Name}
\n
\n
{t(`create-assign-question:assignModal.level`, 'Level')} \n
{`Primary ${assignedLevel}`}
\n
\n
\n {t(\n `create-assign-question:assignModal.indvStud`,\n 'Individual Students'\n )}\n \n {Object.entries(groupedStudents).map(\n ([studentClass, classOfStudents]) => {\n return (\n
\n {studentClass}
\n {classOfStudents.map(singleStudent => (\n \n
{singleStudent.FullName}
\n
\n );\n }\n )}\n
\n {t(\n `create-assign-question:assignModal.noSelection`,\n 'No Classes, Groups or students chosen'\n )}\n
\n )}\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { nextStep } from 'stores/utils/step/actions';\nimport HeaderFull from 'components/CreateAndAssign/HeaderFull';\nimport CircleType from 'components/CreateAndAssign/CircleType';\nimport Border from 'components/Shared/Border';\nimport AssignRadio from 'components/CreateAndAssign/Schedule/AssignRadio';\nimport AssignResult from 'components/CreateAndAssign/Schedule/AssignResult';\nimport { Col } from 'react-bootstrap';\nimport hasProp from 'helpers/hasProp';\nimport './ScheduleClass.styles.scss';\n\nexport default function ScheduleClass() {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n const { selectedWorksheet } = useSelector(state => state.worksheet);\n\n const {\n assignedClass,\n assignedGroup,\n assignedStudent,\n assignedPrivateGroup,\n assignedAdminGroup,\n assignedLevel\n } = useSelector(state => state.schedule);\n\n const hasAssignees =\n assignedClass.length > 0 ||\n assignedGroup.length > 0 ||\n assignedStudent.length > 0 ||\n assignedPrivateGroup.length > 0 ||\n (hasProp(assignedAdminGroup, 'ID') && assignedLevel !== '');\n\n const handleNext = () => {\n if (hasAssignees) {\n dispatch(nextStep());\n }\n };\n\n return (\n \n
\n \n
{selectedWorksheet.Title} \n \n \n \n {t(`create-assign-saved:scheduleWo.cancel`, 'Cancel')}\n \n \n {t(`create-assign-saved:scheduleWo.next`, 'Next')}\n \n
\n \n
\n
\n
\n {label && (\n
\n {label}\n \n )}\n
\n {value &&
{value} }\n {children &&
{children}
}\n
\n
setShow(!show)}\n >\n {t(`create-assign-saved:assignNow.showMore`, 'Show more')}\n \n \n \n \n {items.map((item, index) => {\n return
{item}
;\n })}\n
\n \n \n );\n}\n\nPopoverItems.defaultProps = {\n placement: 'top'\n};\n\nexport default PopoverItems;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\n\nimport Spinner from 'components/Shared/Spinner';\nimport ErrorIcon from 'assets/img/icon-error.svg';\nimport AlertModal from './AlertModal';\n\nconst InfoScheduledWorksheetModal = props => {\n const { t } = useTranslation(['create-assign-question']);\n const history = useHistory();\n const { isShow, onConfirm, onClose, isLoading, error } = props;\n const buttons = (\n <>\n {error === null && (\n \n {t(`create-assign-question:main.next`, 'Next')}\n \n )}\n \n );\n\n const errorTitle = (\n \n \n \n
\n );\n return (\n \n \n {isLoading &&
}\n {!isLoading && error === null && (\n <>\n
\n {t(\n `create-assign-question:saveAssignModal.hwAssignedMsg`,\n 'Homework Scheduled Succesfully!This Worksheet has been scheduled to the classes / student that you have selected'\n )}\n
\n
\n {t(\n `create-assign-question:saveAssignModal.trackAssign`,\n 'Track Assignment'\n )}\n
\n
\n \n {t(\n `create-assign-question:saveAssignModal.trackStuActions`,\n 'Track student assignment actions'\n )}\n history.push('/track-assignment')}\n >\n \n \n {t(\n `create-assign-question:saveAssignModal.editReWo`,\n 'To edit or re-use your worksheet, go to'\n )}\n \n history.push('/create-and-assign/saved-worksheet')\n }\n >\n \n \n \n )}\n {!isLoading && error !== null && (\n
\n {t(\n `create-assign-question:saveAssignModal.failedSchedule`,\n 'Failed to schedule worksheet.'\n )}{' '}\n \n {t(`create-assign-question:saveAssignModal.ok`, 'OK')}\n \n \n );\n return (\n \n \n
\n {t(\n `create-assign-question:saveAssignModal.reimndMsg`,\n 'You can remind your student to complete this worksheet by sharing the link via email, forum, LMS, or simply instruct the students to login to KooBits and look for it at the homework section.'\n )}\n
\n
\n
\n {t(\n `create-assign-question:saveAssignModal.impNote`,\n 'important note:'\n )}\n
\n
{item.Name} );\n };\n\n const renderAssigneeItem = items => {\n if (items.length > 5) {\n const itemsShow = items.slice(0, 5);\n const itemsPopOver = items.slice(5).map(item => {\n return item.Name;\n });\n\n return (\n <>\n {renderShowAssigne(itemsShow)}\n \n {item.FullName} ({item.ClassName}) \n \n ));\n };\n\n const renderAssigneeItemIndividual = items => {\n if (items.length > 3) {\n const itemsShow = items.slice(0, 3);\n const itemsPopOver = items.slice(3).map(item => {\n return `${item.FullName} (${item.ClassName})`;\n });\n\n return (\n <>\n {renderShowIndividual(itemsShow)}\n {\n setShowScheduled(false);\n setShowLink(true);\n }}\n onClose={() => setShowScheduled(false)}\n isLoading={isLoading}\n error={error}\n />\n\n {\n setShowLink(false);\n history.push('/create-and-assign/saved-worksheet');\n }}\n onClose={() => {\n setShowLink(false);\n }}\n />\n\n \n
\n \n
{selectedWorksheet.Title} \n \n \n \n {t(`create-assign-saved:scheduleWo.cancel`, 'Cancel')}\n \n \n {t(`create-assign-saved:scheduleWo.schedule`, 'Schedule')}\n \n
\n \n
\n
\n
\n
\n {t(`create-assign-saved:scheduleWo.schedTime`, 'Schedule Time')}\n
\n
\n
\n
\n {selectedWorksheet.PresentationType.AssignmentTypeID ===\n assignmentTypes.test && (\n
\n )}\n
\n
\n
\n
\n
\n
\n
\n {t(`create-assign-saved:assignNow.assignTo`, 'Assign To')}\n
\n
\n {isAdmin && (\n <>\n {hasProp(assignedAdminGroup, 'ID') && (\n
\n )}\n {assignedLevel !== '' && (\n
\n )}\n {assignedPrivateGroup.length > 0 && (\n
\n {renderAssigneeItem(assignedPrivateGroup)}\n \n )}\n \n )}\n {assignedClass.length > 0 && (\n \n {renderAssigneeItem(assignedClass)}\n \n )}\n {assignedGroup.length > 0 && (\n \n {renderAssigneeItem(assignedGroup)}\n \n )}\n {assignedStudent.length > 0 && (\n \n {renderAssigneeItemIndividual(assignedStudent)}\n \n )}\n \n
\n
\n
\n {t(`create-assign-saved:scheduleWo.rewards`, 'Rewards')}\n
\n
\n
\n
\n
\n < {t(`create-assign-saved:scheduleWo.backList`, 'Back To List')}\n \n );\n\n useEffect(() => {\n return () => {\n dispatch(resetSelectedWorksheet());\n dispatch(resetSchedule());\n };\n }, [dispatch]);\n\n const onSelect = step => {\n let valid = false;\n switch (step) {\n case 3:\n if (hasAssignees) {\n valid = true;\n }\n break;\n default:\n valid = true;\n break;\n }\n if (valid) {\n dispatch(setStep(step));\n }\n };\n\n return (\n \n \n
\n );\n}\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport moment from 'moment-timezone';\nimport HeaderFull from 'components/CreateAndAssign/HeaderFull';\nimport { useSelector, useDispatch } from 'react-redux';\nimport CircleType from 'components/CreateAndAssign/CircleType';\nimport Border from 'components/Shared/Border';\nimport DateTimeRangePicker from 'components/CreateAndAssign/DateTimeRangePicker';\nimport { assignmentTypes } from 'constants/index';\nimport DateTimePicker from 'components/CreateAndAssign/DateTimePicker';\nimport { nextStep } from 'stores/utils/step/actions';\nimport {\n setStartEndDate,\n setReleaseDate,\n setKokoCredit\n} from 'stores/worksheet/assign/actions';\nimport { Spinner } from 'react-bootstrap';\nimport history from 'helpers/history';\n\nexport default function AssignTime() {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n const { selectedWorksheet, isLoading } = useSelector(\n state => state.worksheet\n );\n\n const { startDate, endDate, releaseDate, kokoCredit } = useSelector(\n state => state.assign\n );\n\n // must fullfil by data selected worksheet but I can find that\n // kokoCredits 10, 15, 20 is temporarily removed\n const kokoCredits = [5];\n const [kokoCreditVal, setKokoCreditVal] = useState(kokoCredit);\n const startDateVal = moment(startDate, 'YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n const endDateVal = moment(endDate, 'YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n\n const releaseDateVal = moment(releaseDate, 'YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n\n const applyCallback = (startDateValue, endDateValue) => {\n dispatch(\n setStartEndDate(\n startDateValue.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n endDateValue.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ')\n )\n );\n };\n\n const applyCallbackRelease = (e, picker) => {\n dispatch(\n setReleaseDate(picker.startDate.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'))\n );\n };\n\n const onChangeKoko = event => {\n setKokoCreditVal(event.target.value);\n dispatch(setKokoCredit(event.target.value));\n };\n\n const handleNext = () => {\n if (!kokoCredit) {\n dispatch(setKokoCredit(kokoCreditVal));\n }\n\n if (!startDate && !endDate) {\n dispatch(\n setStartEndDate(\n startDateVal.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n endDateVal.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ')\n )\n );\n }\n\n if (\n selectedWorksheet.PresentationType.AssignmentTypeID ===\n assignmentTypes.test &&\n !releaseDate\n ) {\n dispatch(\n setReleaseDate(releaseDateVal.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'))\n );\n }\n\n dispatch(nextStep());\n };\n\n const handleCancel = () => {\n history.push('/create-and-assign/saved-worksheet');\n };\n\n return isLoading ? (\n \n \n Loading... \n \n
\n ) : (\n \n
\n \n
{selectedWorksheet?.Title} \n \n \n \n {t(`create-assign-saved:scheduleWo.cancel`, 'Cancel')}\n \n \n {t(`create-assign-saved:scheduleWo.next`, 'Next')}\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n {t(`create-assign-saved:scheduleWo.startend`, 'Start / End')}\n
\n
\n
\n
\n {selectedWorksheet?.PresentationType.AssignmentTypeID ===\n assignmentTypes.test && (\n
\n
\n \n {t(\n `create-assign-saved:scheduleWo.releaseDate`,\n 'Release Date'\n )}\n
\n \n
\n )}\n
\n
\n
\n
\n
\n
{t(`create-assign-saved:scheduleWo.rewards`, 'Rewards')}
\n
\n
\n \n {kokoCredits.map(kokoItem => {\n return (\n \n {kokoItem}\n \n );\n })}\n \n
\n
Koko
\n
\n
\n
\n No classes found
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchClassRequest } from 'stores/utils/lookup/actions';\nimport CheckboxClassGroup from './CheckboxClassGroup';\n\nexport default function AssignClass() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n\n const { levels, selectedLevel: globalSelectedLevel } = useSelector(\n state => state.levels\n );\n\n const [selectedLevel, setSelectedLevel] = useState(globalSelectedLevel.ID);\n\n const onChangeLevel = event => {\n setSelectedLevel(event.target.value);\n };\n\n useEffect(() => {\n dispatch(fetchClassRequest(selectedLevel));\n }, [dispatch, selectedLevel]); // @see {@link https://github.com/facebook/create-react-app/issues/6880#issuecomment-488158024 having dispatch in useEffect dependencies}\n\n return (\n \n
\n {t(\n `create-assign-question:assignModal.classAssign`,\n 'Please choose classes you want to assign'\n )}\n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n
\n
\n
\n {t(\n `create-assign-question:assignModal.chooseStud`,\n 'Please choose students you want to assign'\n )}\n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n \n {classes.map(classItem => (\n \n {classItem.Name}\n \n ))}\n \n \n
\n
\n {isLoading &&
\n
\n {isLoading ? (\n ''\n ) : availableStudents.length === 0 || error !== '' ? (\n \n {t(\n `create-assign-question:assignModal.noStud`,\n 'No student in the selected class'\n )}\n \n ) : (\n availableStudents.map(student => (\n \n {student.FullName}\n \n ))\n )}\n \n \n \n {t(`create-assign-question:assignModal.add`, 'Add')}\n \n \n {t(`create-assign-question:assignModal.remove`, 'Remove')}\n \n
\n \n {assignedStudent.map(student => (\n \n {student.FullName} {student.ClassName}\n \n ))}\n \n \n
\n \n );\n })}\n \n ) : (\n \n {t(\n 'create-assign-question:assignModal.noFound',\n 'No Private groups found'\n )}\n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchPrivateGroupsRequest } from 'stores/privateGroup/actions';\nimport PrivateGroupCheckbox from './CheckboxPrivateGroup';\n\nexport default function AssignClass() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n\n const [groupName, setGroupName] = useState('');\n const { privateGroups } = useSelector(state => state.privateGroup);\n\n const handleChangeGroupName = group => {\n setGroupName(group);\n };\n\n useEffect(() => {\n dispatch(fetchPrivateGroupsRequest(groupName));\n }, [dispatch, groupName]);\n\n return (\n \n
\n {t(\n `create-assign-question:assignModal.choosePrivateGroup`,\n 'Please choose private groups you want to assign'\n )}\n
\n
\n handleChangeGroupName(event.target.value)}\n />\n \n
\n
\n
\n {t(\n 'create-assign-question:assignModal.chooseAdmin',\n 'Please choose users and level you want to assign'\n )}\n
\n
\n \n {t(\n 'create-assign-question:assignModal.allPremium',\n 'All Premium users'\n )}\n \n
\n\n {/*
\n */}\n
\n \n {' '}\n {t(\n 'create-assign-question:assignModal.allKoobits',\n 'All KooBits users'\n )}\n \n
\n
\n \n {levels.map(level => (\n \n {level.Name}\n \n ))}\n \n \n
\n
\n {t(\n `create-assign-question:assignModal.chooseGroup`,\n 'Please choose groups you want to assign'\n )}\n
\n {groups.length !== 0 ? (\n <>\n {groups.map(item => {\n return (\n
\n \n {t(`create-assign-question:assignModal.noGroup`, 'No group found')}\n
\n )}\n \n {isAdmin && (\n <>\n
\n \n {t(\n `create-assign-question:assignModal.pvtGroup`,\n 'Private Group'\n )}\n \n
\n
& \n \n )}\n
\n \n {t(`create-assign-question:assignModal.class`, 'Class')}\n \n
\n
& \n
\n \n {t(`create-assign-question:assignModal.group`, 'Group')}\n \n
\n
& \n
\n \n {t(\n `create-assign-question:assignModal.indvStud`,\n 'Individual Student'\n )}\n \n
\n {isAdmin && (\n
\n \n {t(`create-assign-question:assignModal.forAdimn`, 'For Admin')}\n \n
\n )}\n
{renderSwitch(typeAssign)}
\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { groupBy } from 'ramda';\nimport hasProp from 'helpers/hasProp';\n\nexport default function AssignResult(props) {\n const { t } = useTranslation(['create-assign-question']);\n const {\n assignedClass,\n assignedGroup,\n assignedStudent,\n assignedPrivateGroup,\n assignedAdminGroup,\n assignedLevel,\n hasAssignees\n } = props;\n\n const groupedStudents = groupBy(\n student => student.ClassName,\n assignedStudent\n );\n\n return (\n <>\n {t(`create-assign-question:assign.assignTo`, 'Assign to')} \n {hasAssignees ? (\n <>\n {assignedClass.length > 0 && (\n \n
{t(`create-assign-question:assignModal.class`, 'Class')} \n {assignedClass.map(item => (\n
{item.Name}
\n ))}\n
\n
{t(`create-assign-question:assignModal.group`, 'Group')} \n {assignedGroup.map(item => (\n
{item.Name}
\n ))}\n
\n
\n {t(\n `create-assign-question:assignModal.pvtGroup`,\n 'Private Group'\n )}\n \n {assignedPrivateGroup.map(item => (\n
{item.Name}
\n ))}\n
\n
\n {t(\n `create-assign-question:assignModal.adminGroup`,\n 'Admin Group'\n )}\n \n
{assignedAdminGroup.Name}
\n
\n
{t(`create-assign-question:assignModal.level`, 'Level')} \n
{`Primary ${assignedLevel}`}
\n
\n
\n {t(\n `create-assign-question:assignModal.indvStud`,\n 'Individual Students'\n )}\n \n {Object.entries(groupedStudents).map(\n ([studentClass, classOfStudents]) => {\n return (\n
\n {studentClass}
\n {classOfStudents.map(singleStudent => (\n \n
{singleStudent.FullName}
\n
\n );\n }\n )}\n
\n {t(\n `create-assign-question:assignModal.noSelection`,\n 'No Classes, Groups or students chosen'\n )}\n
\n )}\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { nextStep, prevStep } from 'stores/utils/step/actions';\nimport HeaderFull from 'components/CreateAndAssign/HeaderFull';\nimport CircleType from 'components/CreateAndAssign/CircleType';\nimport Border from 'components/Shared/Border';\nimport AssignRadio from 'components/CreateAndAssign/Assign/AssignRadio';\nimport AssignResult from 'components/CreateAndAssign/Assign/AssignResult';\nimport { Col } from 'react-bootstrap';\nimport hasProp from 'helpers/hasProp';\n\nexport default function AssignClass() {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n const { selectedWorksheet } = useSelector(state => state.worksheet);\n\n const {\n assignedClass,\n assignedGroup,\n assignedStudent,\n assignedPrivateGroup,\n assignedAdminGroup,\n assignedLevel\n } = useSelector(state => state.assign);\n\n const hasAssignees =\n assignedClass.length > 0 ||\n assignedGroup.length > 0 ||\n assignedStudent.length > 0 ||\n assignedPrivateGroup.length > 0 ||\n (hasProp(assignedAdminGroup, 'ID') && assignedLevel !== '');\n\n const handleNext = () => {\n if (hasAssignees) {\n dispatch(nextStep());\n }\n };\n\n const handleCancel = () => {\n dispatch(prevStep());\n };\n return (\n \n
\n \n
{selectedWorksheet.Title} \n \n \n \n {t(`create-assign-saved:scheduleWo.cancel`, 'Cancel')}\n \n \n {t(`create-assign-saved:scheduleWo.next`, 'Next')}\n \n
\n \n
\n
\n
{item.Name} );\n };\n\n const renderAssigneeItem = items => {\n if (items.length > 5) {\n const itemsShow = items.slice(0, 5);\n const itemsPopOver = items.slice(5).map(item => {\n return item.Name;\n });\n\n return (\n <>\n {renderShowAssigne(itemsShow)}\n \n {item.FullName} ({item.ClassName}) \n \n ));\n };\n\n const renderAssigneeItemIndividual = items => {\n if (items.length > 3) {\n const itemsShow = items.slice(0, 3);\n const itemsPopOver = items.slice(3).map(item => {\n return `${item.FullName} (${item.ClassName})`;\n });\n\n return (\n <>\n {renderShowIndividual(itemsShow)}\n {\n setShowAssign(false);\n setShowLink(true);\n }}\n onClose={() => setShowAssign(false)}\n isLoading={isLoading}\n error={error}\n />\n\n {\n setShowLink(false);\n history.push('/create-and-assign/saved-worksheet');\n }}\n onClose={() => {\n setShowLink(false);\n }}\n />\n\n \n
\n \n
{selectedWorksheet.Title} \n \n \n \n {t(`create-assign-saved:scheduleWo.cancel`, 'Cancel')}\n \n \n {t(`create-assign-saved:assignNow.assign`, 'Assign')}\n \n
\n \n
\n
\n
\n
\n {t(`create-assign-saved:scheduleWo.schedTime`, 'Schedule Time')}\n
\n
\n
\n
\n {selectedWorksheet.PresentationType.AssignmentTypeID ===\n assignmentTypes.test && (\n
\n )}\n
\n
\n
\n
\n
\n
\n {t(`create-assign-saved:assignNow.assignTo`, 'Assign To')}\n
\n
\n {isAdmin && (\n <>\n {hasProp(assignedAdminGroup, 'ID') && (\n
\n )}\n {assignedLevel !== '' && (\n
\n )}\n {assignedPrivateGroup.length > 0 && (\n
\n {renderAssigneeItem(assignedPrivateGroup)}\n \n )}\n \n )}\n {assignedClass.length > 0 && (\n \n {renderAssigneeItem(assignedClass)}\n \n )}\n {assignedGroup.length > 0 && (\n \n {renderAssigneeItem(assignedGroup)}\n \n )}\n {assignedStudent.length > 0 && (\n \n {renderAssigneeItemIndividual(assignedStudent)}\n \n )}\n \n
\n
\n
\n {t(`create-assign-saved:scheduleWo.rewards`, 'Rewards')}\n
\n
\n
\n
\n
\n < {t(`create-assign-saved:scheduleWo.backList`, 'Back To List')}\n \n );\n\n useEffect(() => {\n return () => {\n dispatch(resetSelectedWorksheet());\n dispatch(resetAssign());\n };\n }, [dispatch]);\n\n const onSelect = step => {\n let valid = false;\n switch (step) {\n case 3:\n if (hasAssignees) {\n valid = true;\n }\n break;\n default:\n valid = true;\n break;\n }\n if (valid) {\n dispatch(setStep(step));\n }\n };\n\n return (\n \n );\n}\n","import styled from 'styled-components';\n\nexport const EditSavedWorksheetContainer = styled.div`\n margin-top: 55px;\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n .question-cart-content {\n margin-left: 0;\n border-bottom: 1px solid rgba(#707070, 0.21);\n }\n .check-add-score {\n left: 100px;\n ~ .custom-checkbox {\n left: 100px;\n @media (max-width: 991px) {\n left: 120px;\n }\n @media (max-width: 639px) {\n left: 40px;\n }\n }\n ~ label {\n left: 130px;\n @media (max-width: 991px) {\n left: 150px;\n }\n @media (max-width: 639px) {\n left: 70px;\n }\n }\n }\n .box-white-wrap {\n .question-card.create-assign {\n padding-left: 10px;\n }\n }\n }\n`;\n\nexport const HeaderContainer = styled.div`\n width: 100%;\n max-width: 1065px;\n background-color: #fff;\n padding: 15px 1px 0 1px;\n margin: 0 auto 10px;\n font-family: 'Muli', sans-serif;\n border-radius: 0;\n box-shadow: none;\n color: rgba(52, 52, 52, 0.8);\n display: flex;\n align-items: center;\n flex-direction: column;\n`;\n\nexport const HeaderContent = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Modal, Col } from 'react-bootstrap';\nimport WorksheetQuestionModal from 'components/CreateAndAssign/QuestionCart/WorksheetQuestionModal';\nimport WorksheetForm from 'components/CreateAndAssign/QuestionCart/WorksheetForm';\nimport { setWorksheetTitle } from 'stores/worksheet/actions';\nimport NavigationWizard from 'components/CreateAndAssign/NavigationWizard';\nimport { nextStep } from 'stores/utils/step/actions';\nimport WorksheetQuestion from 'components/CreateAndAssign/QuestionCart/WorksheetQuestion';\nimport Spinner from 'components/Shared/Spinner';\nimport ValidationMessage from 'components/CreateAndAssign/ValidationMessage';\nimport {\n EditSavedWorksheetContainer,\n HeaderContainer,\n HeaderContent\n} from './EditSavedWorksheet.styles';\n\nconst EditSavedWorksheet = () => {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n // REDUX STATES\n const { isLoading, editSavedWorksheetQuestions, title } = useSelector(\n state => state.worksheet\n );\n // COMPONENT STATES\n const [show, setShow] = useState(false);\n const [showSolution, setShowSolution] = useState(false);\n const [selectedCard, setSelectedCard] = useState(null);\n const [alertMsg, setAlertMsg] = useState(false);\n\n const toggleShowSolution = () => setShowSolution(!showSolution);\n\n const [questionPopup, setQuestionPopup] = useState({});\n const handleClose = () => {\n toggleShowSolution();\n setShow(false);\n };\n\n const handleShow = async question => {\n setQuestionPopup(question);\n setShow(true);\n };\n\n const handleNextStep = () => {\n if (title.trim() === '') {\n setAlertMsg(true);\n }\n if (title.trim().length > 0 && editSavedWorksheetQuestions.length > 0) {\n setAlertMsg(false);\n dispatch(nextStep());\n }\n };\n\n const onChangeTitle = value => {\n dispatch(setWorksheetTitle(value));\n };\n\n /*eslint-disable */\n useEffect(() => {\n if (!isLoading && editSavedWorksheetQuestions.length > 0) {\n setSelectedCard(editSavedWorksheetQuestions[0].ID);\n }\n }, [isLoading]);\n /* eslint-enable */\n\n return (\n \n {isLoading && \n \n \n \n \n {editSavedWorksheetQuestions.length > 50 && \n \n
\n {editSavedWorksheetQuestions.map((question, key) => {\n return (\n handleShow(question)}\n onShowSolution={toggleShowSolution}\n selectedCard={selectedCard}\n onClick={() => setSelectedCard(question.ID)}\n cardIndex={key}\n />\n );\n })}\n
\n
\n );\n};\n\nexport default EditSavedWorksheet;\n","import styled from 'styled-components';\n\nexport const AssignContent = styled.div`\n margin-top: 55px;\n padding-left: 205px;\n padding-right: 283px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media screen and (max-width: 1199px) {\n padding-right: 220px;\n }\n @media screen and (max-width: 991.98px) {\n padding-right: 200px;\n }\n @media screen and (max-width: 575.98px) {\n padding-right: 180px;\n }\n`;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport HeaderBox from 'components/CreateAndAssign/HeaderBox';\nimport WorksheetAssignTitle from 'components/CreateAndAssign/QuestionCart/WorksheetAssignTitle';\nimport NewBorder from 'components/Shared/NewBorder';\nimport QuestionHeader from 'components/Question/QuestionHeader';\nimport QuestionContent from 'components/Question/QuestionContent';\nimport AssignSidebar from 'components/CreateAndAssign/AssignSidebar';\nimport { AssignContent } from './AssignSavedWorksheet.styles';\n\nconst AssignSavedWorksheet = () => {\n const { editSavedWorksheetQuestions, title } = useSelector(\n state => state.worksheet\n );\n return (\n <>\n \n \n \n \n {/*
*/}\n
\n {editSavedWorksheetQuestions.map((question, key) => {\n const order = key + 1;\n return (\n
\n
\n );\n })}\n
\n \n < {t(`create-assign-saved:scheduleWo.backList`, 'Back To List')}\n \n );\n const onSelect = step => {\n let valid = false;\n switch (step) {\n case 2:\n valid =\n title.trim().length > 0 &&\n editSavedWorksheetQuestions.length > 0 &&\n editSavedWorksheetQuestions.length <= 50;\n break;\n case 3:\n valid =\n title.trim().length > 0 &&\n editSavedWorksheetQuestions.length > 0 &&\n !isNilOrEmpty(presentationType);\n break;\n default:\n valid = true;\n break;\n }\n if (valid) {\n dispatch(setStep(step));\n }\n };\n return (\n \n \n \n \n );\n};\n\nexport default EditView;\n","import styled from 'styled-components';\n\nexport const CreateHomeworkWorksheetContainer = styled.div`\n margin-top: 55px;\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n .question-cart-content {\n margin-left: 0;\n margin-top: 60px;\n }\n .check-add-score {\n left: 100px;\n ~ .custom-checkbox {\n left: 100px;\n @media (max-width: 991px) {\n left: 120px;\n }\n @media (max-width: 639px) {\n left: 40px;\n }\n }\n ~ label {\n left: 130px;\n @media (max-width: 991px) {\n left: 150px;\n }\n @media (max-width: 639px) {\n left: 70px;\n }\n }\n }\n .box-white-wrap {\n .question-card.create-assign {\n padding-left: 10px;\n }\n }\n }\n`;\n\nexport const HeaderContainer = styled.div`\n width: 100%;\n max-width: 1065px;\n background-color: #fff;\n padding: 15px 1px 0 1px;\n margin: 0 auto 10px;\n font-family: 'Muli', sans-serif;\n border-radius: 0;\n box-shadow: none;\n color: rgba(52, 52, 52, 0.8);\n display: flex;\n align-items: center;\n flex-direction: column;\n`;\n\nexport const HeaderContent = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Modal, Col } from 'react-bootstrap';\nimport WorksheetQuestionModal from 'components/CreateAndAssign/QuestionCart/WorksheetQuestionModal';\nimport WorksheetForm from 'components/CreateAndAssign/QuestionCart/WorksheetForm';\nimport { setWorksheetTitle } from 'stores/worksheet/actions';\nimport NavigationWizard from 'components/CreateAndAssign/NavigationWizard';\nimport { nextStep } from 'stores/utils/step/actions';\nimport WorksheetQuestion from 'components/CreateAndAssign/QuestionCart/WorksheetQuestion';\nimport Spinner from 'components/Shared/Spinner';\nimport { isEmpty } from 'ramda';\nimport ValidationMessage from 'components/CreateAndAssign/ValidationMessage';\nimport {\n CreateHomeworkWorksheetContainer,\n HeaderContainer,\n HeaderContent\n} from './CreateHomeworkWorksheet.styles';\n\nconst CreateHomeworkWorksheet = () => {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n // REDUX STATES\n const { title } = useSelector(state => state.worksheet);\n const { isLoading, createWorksheetItems } = useSelector(\n state => state.topicalWorksheet\n );\n // COMPONENT STATES\n const [show, setShow] = useState(false);\n const [showSolution, setShowSolution] = useState(false);\n const [selectedCard, setSelectedCard] = useState(\n !isEmpty(createWorksheetItems) && createWorksheetItems[0].ID\n );\n const [alertMsg, setAlertMsg] = useState(false);\n\n const toggleShowSolution = () => setShowSolution(!showSolution);\n\n const [questionPopup, setQuestionPopup] = useState({});\n const handleClose = () => {\n toggleShowSolution();\n setShow(false);\n };\n\n const handleShow = async question => {\n setQuestionPopup(question);\n setShow(true);\n };\n\n const handleNextStep = () => {\n if (title.trim() === '') {\n setAlertMsg(true);\n }\n if (title.trim().length > 0 && createWorksheetItems.length > 0) {\n setAlertMsg(false);\n dispatch(nextStep());\n }\n };\n\n const onChangeTitle = value => {\n dispatch(setWorksheetTitle(value));\n };\n\n return (\n \n {isLoading && \n \n \n \n \n {createWorksheetItems.length > 50 && \n \n
\n {createWorksheetItems.map((question, key) => {\n return (\n handleShow(question)}\n onShowSolution={toggleShowSolution}\n selectedCard={selectedCard}\n onClick={() => setSelectedCard(question.ID)}\n cardIndex={key}\n />\n );\n })}\n
\n
\n );\n};\n\nexport default CreateHomeworkWorksheet;\n","import styled from 'styled-components';\n\nexport const AssignContent = styled.div`\n margin-top: 55px;\n padding-left: 205px;\n padding-right: 283px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media screen and (max-width: 1199px) {\n padding-right: 220px;\n }\n @media screen and (max-width: 991.98px) {\n padding-right: 200px;\n }\n @media screen and (max-width: 575.98px) {\n padding-right: 180px;\n }\n`;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport HeaderBox from 'components/CreateAndAssign/HeaderBox';\nimport WorksheetAssignTitle from 'components/CreateAndAssign/QuestionCart/WorksheetAssignTitle';\nimport NewBorder from 'components/Shared/NewBorder';\nimport QuestionHeader from 'components/Question/QuestionHeader';\nimport QuestionContent from 'components/Question/QuestionContent';\nimport AssignSidebar from 'components/CreateAndAssign/AssignSidebar';\nimport { AssignContent } from './AssignSavedWorksheet.styles';\n\nconst AssignSavedWorksheet = () => {\n const { title } = useSelector(state => state.worksheet);\n\n const { createWorksheetItems } = useSelector(state => state.topicalWorksheet);\n return (\n <>\n \n \n \n \n {/*
*/}\n
\n {createWorksheetItems.map((question, key) => {\n const order = key + 1;\n return (\n
\n
\n );\n })}\n
\n \n \n \n \n );\n};\n\nexport default CreateHomework;\n","import styled from 'styled-components';\n\nexport const CreateFactualFluencyWorksheetContainer = styled.div`\n margin-top: 55px;\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n .question-cart-content {\n margin-left: 0;\n margin-top: 60px;\n }\n .check-add-score {\n left: 100px;\n ~ .custom-checkbox {\n left: 100px;\n @media (max-width: 991px) {\n left: 120px;\n }\n @media (max-width: 639px) {\n left: 40px;\n }\n }\n ~ label {\n left: 130px;\n @media (max-width: 991px) {\n left: 150px;\n }\n @media (max-width: 639px) {\n left: 70px;\n }\n }\n }\n .box-white-wrap {\n .question-card.create-assign {\n padding-left: 10px;\n }\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Modal, Col } from 'react-bootstrap';\nimport WorksheetQuestionModal from 'components/CreateAndAssign/QuestionCart/WorksheetQuestionModal';\nimport HeaderBox from 'components/CreateAndAssign/HeaderBox';\nimport WorksheetForm from 'components/CreateAndAssign/QuestionCart/WorksheetForm';\nimport { setWorksheetTitle } from 'stores/worksheet/actions';\nimport NavigationWizard from 'components/CreateAndAssign/NavigationWizard';\nimport { nextStep } from 'stores/utils/step/actions';\nimport WorksheetQuestion from 'components/CreateAndAssign/QuestionCart/WorksheetQuestion';\nimport Spinner from 'components/Shared/Spinner';\nimport { CreateFactualFluencyWorksheetContainer } from './CreateFactualFluencyWorksheet.styles';\nimport { isEmpty } from 'ramda';\n\nconst CreateFactualFluencyWorksheet = () => {\n const { t } = useTranslation(['create-assign-saved']);\n const dispatch = useDispatch();\n // REDUX STATES\n const { title } = useSelector(state => state.worksheet);\n const { isLoading, createFactualFluencyItems } = useSelector(\n state => state.factualFluency\n );\n\n // COMPONENT STATES\n const [show, setShow] = useState(false);\n const [showSolution, setShowSolution] = useState(false);\n const [selectedCard, setSelectedCard] = useState(\n !isEmpty(createFactualFluencyItems) && createFactualFluencyItems[0].ID\n );\n const [alertMsg, setAlertMsg] = useState(false);\n\n const toggleShowSolution = () => setShowSolution(!showSolution);\n\n const [questionPopup, setQuestionPopup] = useState({});\n const handleClose = () => {\n toggleShowSolution();\n setShow(false);\n };\n\n const handleShow = async question => {\n setQuestionPopup(question);\n setShow(true);\n };\n\n const handleNextStep = () => {\n if (title.trim() === '') {\n setAlertMsg(true);\n }\n if (title.trim().length > 0 && createFactualFluencyItems.length > 0) {\n setAlertMsg(false);\n dispatch(nextStep());\n }\n };\n\n const onChangeTitle = value => {\n dispatch(setWorksheetTitle(value));\n };\n\n return (\n \n {isLoading && \n \n \n \n \n
\n {createFactualFluencyItems.map((question, key) => {\n return (\n handleShow(question)}\n onShowSolution={toggleShowSolution}\n selectedCard={selectedCard}\n onClick={() => setSelectedCard(question.ID)}\n cardIndex={key}\n />\n );\n })}\n
\n
\n );\n};\n\nexport default React.memo(CreateFactualFluencyWorksheet);\n","import { timeSettingTypes } from 'constants/index';\nimport { find, propEq } from 'ramda';\n\nexport const secondsToTime = secs => {\n const hours = Math.floor(secs / (60 * 60));\n\n const divisor_for_minutes = secs % (60 * 60);\n const minutes = Math.floor(divisor_for_minutes / 60);\n\n const divisor_for_seconds = divisor_for_minutes % 60;\n const seconds = Math.ceil(divisor_for_seconds);\n\n const obj = {\n h: hours,\n m: minutes,\n s: seconds\n };\n return obj;\n};\n\nexport const renderTimes = (times, translation) => {\n const names = {\n h: 'H',\n m: 'Min',\n s: 'Sec'\n };\n const res = Object.keys(times)\n .map(time => {\n let parsedTime;\n if (times[time] !== 0) {\n parsedTime = `${times[time]} ${names[time]}`;\n }\n return parsedTime;\n })\n .filter(v => v !== undefined)\n .join(' ');\n return res;\n};\n\nexport const getTimeType = assigmentId => {\n const timeType = find(propEq('value', parseInt(assigmentId, 10)))(\n Object.values(timeSettingTypes)\n );\n\n return timeType;\n};\n\nexport const milisecondToString = timeMs => {\n const timeSecond = timeMs / 1000;\n const minute = Math.floor(timeSecond / 60);\n const second = Math.floor(timeSecond - minute * 60);\n const minutePadded = `${minute}`.padStart(2, '0');\n const secondPadded = `${second}`.padStart(2, '0');\n return `${minutePadded} min ${secondPadded} sec`;\n};\n","import styled from 'styled-components';\n\nexport const AssignContent = styled.div`\n margin-top: 55px;\n padding-left: 205px;\n padding-right: 283px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media screen and (max-width: 1199px) {\n padding-right: 220px;\n }\n @media screen and (max-width: 991.98px) {\n padding-right: 200px;\n }\n @media screen and (max-width: 575.98px) {\n padding-right: 180px;\n }\n\n .question-header {\n margin-right: 40px;\n }\n\n .media {\n p {\n font-size: 20px;\n line-height: 1.1rem;\n }\n }\n`;\n\nexport const FatualFluencyInfo = styled.div`\n display: flex;\n flex-direction: row;\n border-top: 1px solid #dddddd;\n margin: 0 -15px;\n padding: 10px 15px 0 15px;\n font-size: 12px;\n div {\n margin-right: 20px;\n\n span {\n color: #ff5b00;\n font-weight: bold;\n }\n }\n`;\n","import React, { useCallback } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\nimport HeaderBox from 'components/CreateAndAssign/HeaderBox';\nimport WorksheetAssignTitle from 'components/CreateAndAssign/QuestionCart/WorksheetAssignTitle';\nimport NewBorder from 'components/Shared/NewBorder';\nimport QuestionHeader from 'components/Question/QuestionHeader';\nimport QuestionContent from 'components/Question/QuestionContent';\nimport AssignSidebar from 'components/CreateAndAssign/AssignSidebar';\nimport iconFactualFluency from 'assets/img/icon-factual-fluency.png';\nimport { getTimeType, renderTimes, secondsToTime } from 'helpers/timesParser';\nimport { isNil } from 'ramda';\nimport {\n AssignContent,\n FatualFluencyInfo\n} from './AssignSavedFactualFluency.styles';\n\nconst AssignSavedFactualFluency = ({ method }) => {\n const { t } = useTranslation(['create-assign-question']);\n const { title, assignmentType, timeLimit } = useSelector(\n state => state.worksheet\n );\n\n const { createFactualFluencyItems } = useSelector(\n state => state.factualFluency\n );\n\n const onPreview = useCallback(() => {\n const sessionSecret = sessionStorage.getItem('secret');\n const url = isNil(sessionSecret)\n ? `/factual-fluency/ready`\n : `/factual-fluency/ready?secret=${sessionSecret}`;\n const win = window.open(url, '_blank');\n if (win != null) {\n win.focus();\n }\n }, []);\n\n const timeType = getTimeType(assignmentType);\n\n const times = secondsToTime(timeLimit);\n\n const renderInfo = (time, times) => {\n const translation = name => {\n switch (name) {\n case 'Interval Time':\n return 'intervalTime';\n case 'Do not time me':\n return 'noTime';\n case 'Total Time':\n return 'totalTime';\n default:\n return '';\n }\n };\n const timeUnit = unit => {\n return `${t(`create-assign-question:timeSetting.${unit}`, unit)}`;\n };\n\n if (time.value === 6) {\n return (\n \n {t(\n `create-assign-question:timeSetting.${translation(time.name)}`,\n time.name\n )}\n
\n );\n }\n\n return (\n \n {t(\n `create-assign-question:timeSetting.${translation(time.name)}`,\n time.name\n )}\n : {renderTimes(times, timeUnit)} \n
\n );\n };\n\n return (\n <>\n \n \n \n \n
\n {renderInfo(timeType, times)}\n \n {t('create-assign-question:timeSetting.noOfQn', 'No.of Qn :')}\n \n {createFactualFluencyItems.length}{' '}\n {t('create-assign-question:timeSetting.qn', 'Qn')}\n \n
\n \n
\n\n {createFactualFluencyItems.map((question, key) => {\n const order = key + 1;\n return (\n <>\n
\n \n \n {Object.keys(timeSettingTypes).map(type => {\n const checked = assignmentTypeID === timeSettingTypes[type].value;\n return (\n handleOnChange(timeSettingTypes[type].value)}\n >\n \n \n
\n
\n
\n {t(\n `create-assign-question:timeSetting.${type}`,\n timeSettingTypes[type].name\n )}\n \n {type !== 'noTime' && (\n
infoHandler(e, type)}\n id={type}\n >\n ?\n {showInfo && toggleInfo === type && (\n \n \n {type === 'intervalTime'\n ? `${t(\n `create-assign-question:timeSetting.intervalTimeInfo`,\n 'You can set interval time between two questions'\n )}`\n : `${t(\n `create-assign-question:timeSetting.totalTimeInfo`,\n 'You can set total time for this worksheet'\n )}`}\n
\n \n )}\n \n )}\n \n dispatch(setSettingTimeValue(parseInt(e.target.value, 10)))\n }\n defaultValue={second}\n className=\"interval-options\"\n id=\"interval-options\"\n >\n {interval.map(time => (\n \n {time}{' '}\n {t('create-assign-question:timeSetting.Sec', 'Sec')}\n \n ))}\n \n )}\n\n {type === 'totalTime' && (\n \n {\n setMinute(e.target.value);\n dispatch(setSettingTimeValue(e.target.value * 60));\n }}\n value={minute}\n />\n \n {t('create-assign-question:timeSetting.Min', 'min')}\n \n
\n )}\n \n \n \n {t('create-assign-question:timeSetting.example', 'Example')}\n
\n \n {type === 'totalTime' &&
}\n
\n
\n \n );\n })}\n \n );\n};\n\nexport default React.memo(ChooseWorkSheetTimeType);\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n height: calc(100vh - 60px);\n overflow: hidden;\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 3.5rem;\n }\n`;\n\nexport const HeaderBox = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 1065px;\n background-color: #fff;\n padding: 15px 1px 0 1px;\n margin: 60px auto 0;\n font-family: 'Muli', sans-serif;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.07);\n color: rgba(52, 52, 52, 0.8);\n div {\n display: flex;\n flex: 1;\n }\n\n .back-button-wrap {\n padding-left: 12px;\n }\n\n .title-wrap {\n align-items: center;\n .title-container {\n display: flex;\n flex-direction: column;\n flex: 2;\n .title {\n justify-content: center;\n align-items: center;\n h5 {\n margin-bottom: 0;\n }\n img {\n margin-right: 10px;\n height: 31px;\n width: 31px;\n }\n }\n .desc {\n text-align: center;\n font-size: 1rem;\n margin: 1.5rem 0 1.5rem;\n text-indent: 1.8rem;\n }\n }\n }\n`;\n\nexport const ContentBox = styled.div`\n max-width: 1065px;\n border-top: 1px solid rgba(112, 112, 112, 0.21);\n margin-left: auto;\n margin-right: auto;\n height: 80%;\n`;\n","import React, { useCallback, useEffect } from 'react';\nimport { useTranslation, Trans } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setPresentationType } from 'stores/worksheet/actions';\nimport NavigationWizard from 'components/CreateAndAssign/NavigationWizard';\nimport { presentationTypes } from 'constants/index';\nimport { nextStep } from 'stores/utils/step/actions';\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport ButtonStepPrev from 'components/Shared/ButtonStepPrev';\nimport ChooseWorkSheetTimeType from 'components/CreateAndAssign/FactualFluency/ChooseWorkSheetTimeType';\nimport iconFactualFluency from 'assets/img/icon-factual-fluency.png';\nimport { Container, HeaderBox, ContentBox } from './WorksheetTimer.styles';\n\nexport default function WorksheetTimer() {\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n const { presentationType } = useSelector(state => state.worksheet);\n\n const presentationTypeID = isNilOrEmpty(presentationType)\n ? presentationTypes.kooQuiz\n : parseInt(presentationType, 10);\n\n useEffect(() => {\n dispatch(setPresentationType(presentationTypeID));\n }, [presentationTypeID, dispatch]);\n\n const handleOnNext = useCallback(() => {\n dispatch(nextStep());\n }, [dispatch]);\n\n return (\n \n \n \n
\n \n
\n
\n
\n
\n
\n {t(\n `create-assign-question:timeSetting.chooseTimeType`,\n 'Factual Fluency Presentation Setting'\n )}\n \n
\n
\n \n Choose one time setting for your worksheet\n \n
\n
\n
\n
\n \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const CreateFactualFluencyContainer = styled.div`\n .question-cart-content {\n margin-top: 60px !important;\n }\n .content__stepper-block {\n width: ${props =>\n props.activeStep === 3 ? 'calc(100vw - 395px)' : 'calc(100vw - 195px)'};\n margin-left: 195px;\n }\n .question-cart-content__back {\n margin-top: 0;\n position: absolute;\n left: 1.5rem;\n }\n @media (max-width: 1024px) {\n .content__stepper-block {\n width: 100vw;\n margin-left: 0;\n }\n .topical-preview {\n padding-left: 55px;\n }\n }\n\n @media (max-width: 640px) {\n .content__stepper-block {\n width: calc(100vw + 20px);\n left: -20px;\n }\n .topical-preview {\n padding-left: 20px;\n }\n }\n`;\n","import React, { useCallback, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory, Link } from 'react-router-dom';\nimport { setStep } from 'stores/utils/step/actions';\nimport StepperWizard from 'components/Shared/StepperWizard';\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport { isEmpty } from 'ramda';\nimport { setCreateFactualFluencyQuestions } from 'stores/factual-fluency/actions';\nimport CreateFactualFluencyWorksheet from './CreateFactualFluencyWorksheet';\nimport AssignSavedFactualFluency from './AssignSavedFactualFluency';\nimport WorksheetTimer from './WorksheetTimer';\nimport { CreateFactualFluencyContainer } from './CreateFactualFluency.styles';\n\nconst CreateFactualFluency = ({ match }) => {\n const { method } = match.params;\n\n const { t } = useTranslation(['create-assign-question']);\n const dispatch = useDispatch();\n const history = useHistory();\n const { activeStep } = useSelector(state => state.step);\n const { title, assignmentType, editSavedWorksheetQuestions } = useSelector(\n state => state.worksheet\n );\n const { createFactualFluencyItems } = useSelector(\n state => state.factualFluency\n );\n\n // deactivate to prevent step 3 page crash when change the language\n // useEffect(() => {\n // return () => {\n // dispatch(resetSelectedWorksheet());\n // };\n // }, [dispatch]);\n\n useEffect(() => {\n isEmpty(createFactualFluencyItems) &&\n method === 'create' &&\n history.push('/create-and-assign/factual-fluency');\n }, [createFactualFluencyItems, history, method]);\n\n useEffect(() => {\n if (method === 'edit') {\n dispatch(setCreateFactualFluencyQuestions(editSavedWorksheetQuestions));\n }\n // eslint-disable-next-line\n }, [method, editSavedWorksheetQuestions]);\n const BackButton = (\n \n < {t(`create-assign-saved:scheduleWo.backList`, 'Back To List')}\n \n );\n const onSelect = useCallback(\n step => {\n let valid = true;\n switch (step) {\n case 2:\n valid = !!title.trim() && createFactualFluencyItems.length > 0;\n break;\n case 3:\n valid =\n !!title.trim() &&\n createFactualFluencyItems.length > 0 &&\n !isNilOrEmpty(assignmentType);\n break;\n default:\n valid = false;\n break;\n }\n if (valid) {\n dispatch(setStep(step));\n }\n },\n [title, createFactualFluencyItems, assignmentType, dispatch]\n );\n\n return (\n \n \n \n );\n};\n\nexport default React.memo(CreateFactualFluency);\n","import React, { useEffect, useState } from 'react';\nimport { Route, Switch, useLocation } from 'react-router-dom';\nimport SidebarCreateAssign from 'components/Sidebar/SidebarCreateAssign';\nimport Sidebar from 'components/Sidebar/Sidebar';\nimport QuestionCart from 'pages/CreateAndAssign/QuestionCart';\nimport SavedWorksheet from 'pages/CreateAndAssign/SavedWorksheet';\nimport TopicalWorksheet from 'pages/CreateAndAssign/TopicalWorksheet/TopicalWorksheet';\nimport FactualFluency from 'pages/CreateAndAssign/FactualFluency/FactualFluency';\nimport Overlay from 'components/Content/Overlay';\nimport { useDispatch } from 'react-redux';\nimport { startStep } from 'stores/utils/step/actions';\nimport ImportQuestionList from 'pages/CreateAndAssign/ImportQuestionList';\nimport Header from 'components/Header/Header';\nimport ScheduleView from './Schedule/ScheduleView';\nimport AssignView from './Assign/AssignView';\nimport EditView from './Edit/EditView';\nimport CreateHomework from './CreateHomework/CreateHomework';\nimport CreateFactualFluency from './CreateFactualFluency/CreateFactualFluency';\n\nexport default function CreateAndAssign() {\n const dispatch = useDispatch();\n const [expanded, setExpanded] = useState(false);\n const toggleNavigation = () => setExpanded(!expanded);\n const { pathname } = useLocation();\n\n useEffect(() => {\n dispatch(startStep());\n }, [dispatch, pathname]);\n\n const getContentClassName = () =>\n `content content-sidebar-small${\n pathname === '/create-and-assign'\n ? ' content--centered content__inner-question-cart'\n : ''\n }`;\n\n return (\n <>\n \n \n \n \n
\n
\n Topic Revision }\n />\n \n
\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link, withRouter } from 'react-router-dom';\nimport AssignedByMeIcon from 'assets/img/icon-track-assignment-assigned-by-me.svg';\nimport AssignedByOthersIcon from 'assets/img/icon-track-assignment-assigned-by-others.svg';\nimport AssignedByMeActiveIcon from 'assets/img/icon-track-assignment-assigned-by-me-active.svg';\nimport AssignedByOthersActiveIcon from 'assets/img/icon-track-assignment-assigned-by-others-active.svg';\n\nconst SidebarTrackAssignment = ({ pathname }) => {\n const { t } = useTranslation(['track-assignment-assigned-me']);\n return (\n \n
\n \n \n \n {t(\n `track-assignment-assigned-me:sidebar.assignedMe`,\n 'Assigned by me'\n )}\n \n \n \n \n \n \n {t(\n `track-assignment-assigned-me:sidebar.assignedOthers`,\n 'Assigned by others'\n )}\n \n \n \n \n
\n \n \n {\n setIsActive(true);\n }}\n onMouseLeave={() => {\n setIsActive(false);\n }}\n style={{ marginTop: '1rem' }}\n >\n \n \n ...\n \n \n {featureToggle.popoverMenu && (\n <>\n \n \n {t(`track-assignment-assigned-me:main.edit`, 'Edit')}\n \n \n \n )}\n \n {\n const sessionSecret = sessionStorage.getItem('secret');\n const url = isNil(sessionSecret)\n ? `${process.env.REACT_APP_DOMAIN}${\n process.env.REACT_APP_SUBDOMAIN\n }${\n process.env.REACT_APP_SUBDOMAIN === '/' ? '' : '/'\n }print/${homeworkID}`\n : `${process.env.REACT_APP_DOMAIN}${\n process.env.REACT_APP_SUBDOMAIN\n }${\n process.env.REACT_APP_SUBDOMAIN === '/' ? '' : '/'\n }print/${homeworkID}?secret=${sessionSecret}`;\n const win = window.open(url, '_blank');\n if (win != null) {\n win.focus();\n }\n }}\n >\n {t(`track-assignment-assigned-me:main.print`, 'Print')}\n \n \n \n {\n setSelectedHomeworkID(homeworkID);\n dispatch(resetError());\n openDeleteModal();\n }}\n >\n {t(`track-assignment-assigned-me:main.delete`, 'Delete')}\n \n \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const AssignmentDate = styled.div`\n font-size: 0.75rem;\n color: rgba(114, 114, 114, 0.65);\n padding: 0 0.5rem 0.5rem 0.5rem;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n .edit-status {\n font-size: 0.875rem;\n color: #ff0000;\n }\n`;\n\nexport const StyledCard = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n background: #fff;\n border-radius: 5px;\n margin-bottom: 1rem;\n border: solid 1px #dfdfdf;\n color: #1e1e1e;\n .hw-link {\n color: #1e1e1e;\n &:hover {\n color: #ff7121;\n }\n }\n\n .bg-progress-bar-submission {\n background-color: #ff5b00;\n }\n\n .progress {\n border-radius: 30px;\n }\n .class-submission {\n display: flex;\n flex-direction: row;\n padding: 0.8rem 1rem;\n border-top: solid 1px #dfdfdf;\n background: #f7f9f9;\n &:hover {\n cursor: pointer;\n }\n .submission-class-student {\n padding-left: 2.7rem;\n margin-right: 1rem;\n width: 240px;\n }\n .submissions {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n }\n .details {\n display: flex;\n flex-direction: row;\n\n .title {\n flex-basis: 50%;\n font-size: 17px;\n font-weight: 600;\n padding: 1rem 1rem;\n display: flex;\n flex-direction: row;\n align-items: center;\n .hw-type-icon {\n width: 31px;\n height: 31px;\n border-radius: 50%;\n padding: 0.5rem;\n font-family: Helvetica, sans-serif;\n font-size: 19px;\n font-weight: 100;\n color: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-right: 0.7rem;\n\n img {\n width: 31px;\n height: 31px;\n }\n }\n }\n .qn-count {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-basis: 8%;\n border-left: solid 1px #c8c8c8;\n border-right: solid 1px #c8c8c8;\n }\n .dates {\n flex-basis: 17%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n .dates-title {\n font-size: 0.75rem;\n font-weight: 600;\n color: rgba(114, 114, 114, 0.55);\n }\n .start-end-dates {\n font-size: 0.8125rem;\n color: #1e1e1e;\n }\n .start-end-dates:hover {\n text-decoration-line: underline;\n cursor: pointer;\n color: #ff5b00;\n }\n .visible-date {\n font-size: 0.6875rem;\n color: #ff5b00;\n }\n }\n .actions {\n flex-basis: 25%;\n border-left: solid 1px #c8c8c8;\n display: flex;\n flex-direction: row;\n justify-content: space-evenly;\n align-items: center;\n padding: 0 1rem;\n .btn-assign-button {\n height: 31px;\n width: 134px;\n padding: 0;\n border: solid 1px #d5d5d5;\n &:hover {\n border-color: #ff5b00;\n }\n }\n .btn-print-button {\n width: 57px;\n height: 31px;\n padding: 0 0 0.5rem 0;\n border: solid 1px #d5d5d5;\n &:hover {\n border-color: #ff5b00;\n }\n }\n .btn-open-button {\n height: 31px;\n width: 84px;\n padding: 0;\n }\n }\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport moment from 'moment-timezone';\nimport { Link, useHistory } from 'react-router-dom';\nimport { Button, ProgressBar } from 'react-bootstrap';\nimport PopoverMenu from 'components/TrackAssignment/PopoverMenu';\nimport checkIcon from 'assets/img/icon-check-orange.svg';\nimport printIcon from 'assets/img/icon-track-assignment-print-active.svg';\nimport { featureToggle, homeworkTypes } from 'constants/index';\nimport { AssignmentDate, StyledCard } from './AssignmentCard.styles';\nimport iconFactualFluency from 'assets/img/icon-factual-fluency.png';\n\nconst getIcon = homeworkType => {\n if (homeworkType === 13) {\n return \n {`${t(\n 'track-assignment-assigned-me:main.assignDate',\n 'Assign Date: '\n )}${moment\n .tz(assignedDate, 'Asia/singapore')\n .format('DD-MMM-YYYY')}`} \n {homeworkStatus === 4 && (\n \n *\n {t(\n `track-assignment-assigned-me:main.editProgress`,\n 'Editing in progress'\n )}\n \n )}\n \n \n \n
\n \n {getIcon(homeworkType)}\n \n 0 &&\n (individuals === null || individuals.TotalAssignee > 0)\n ? classes.length === 1\n ? `/track-assignment/homework/${homeworkID}/${classes[0].ClassID}`\n : `/track-assignment/homework/${homeworkID}`\n : `/track-assignment/homework/${homeworkID}/all`\n }\n className=\"hw-link\"\n >\n {homeworkName}\n \n
\n
\n \n {t(`track-assignment-assigned-me:main.totalQn`, 'Total Qn')}\n \n \n {homeworkQnCount}\n \n
\n
\n \n {t(\n `track-assignment-assigned-me:main.startEndDate`,\n 'Start/End date (dd/mm/yy)'\n )}\n \n openChangeTitleModal(assignment)}\n >\n {moment.tz(startDate, 'Asia/singapore').format('DD/MM/YY')} -{' '}\n {moment.tz(deadline, 'Asia/singapore').format('DD/MM/YY')}\n \n {homeworkStatus === 6 && (\n \n {t(`track-assignment-assigned-me:main.visible`, 'Visible on ')}\n {moment.tz(visibleDate, 'Asia/singapore').format('DD/MM/YY')}\n \n )}\n
\n
\n {featureToggle.assignAgainButton &&\n (isOthers ? (\n
{}}\n >\n {}}\n >\n {t(\n `track-assignment-assigned-me:main.assignAgain`,\n 'Assign again'\n )}\n \n ))}\n {\n history.push(\n classes.length > 0 &&\n (individuals === null || individuals.TotalAssignee > 0)\n ? classes.length === 1\n ? `/track-assignment/homework/${homeworkID}/${classes[0].ClassID}`\n : `/track-assignment/homework/${homeworkID}`\n : `/track-assignment/homework/${homeworkID}/all`\n );\n }}\n >\n {t(`track-assignment-assigned-me:main.open`, 'Open')}\n \n {!isOthers && (\n \n
{\n history.push(`/track-assignment/homework/${homeworkID}/all`);\n }}\n >\n \n \n {`${individuals.TotalAssignee} Student${\n individuals.TotalAssignee > 1 ? 's' : ''\n }`}\n \n \n \n {`${t(\n 'track-assignment-assigned-me:main.submission',\n 'Submission '\n )} ${individuals.TotalSubmission}/${\n individuals.TotalAssignee\n }`} \n \n \n )}\n {classes !== null &&\n classes.map(group => (\n {\n history.push(\n `/track-assignment/homework/${homeworkID}/${group.ClassID}`\n );\n }}\n >\n \n \n {group.ClassName}\n \n \n \n {`${t(\n 'track-assignment-assigned-me:main.submission',\n 'Submission '\n )} ${group.TotalSubmission}/${group.TotalAssignee}`} \n \n \n ))}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const PaginationContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n font-size: 0.9375rem;\n font-weight: 600;\n color: #1c1b1b;\n padding: 2rem 1rem;\n input {\n border: solid 1px #cecece;\n }\n .next-prev-page {\n margin-right: 1rem;\n .btn-outline-page-primary {\n background: #fff;\n border: solid 1px #cecece;\n font-weight: 600;\n margin-left: 1rem;\n }\n .btn-outline-page-primary.selected {\n color: #fff;\n background: #ff5b00;\n }\n .btn-outline-page-primary.selected:hover {\n color: #fff;\n }\n .btn-outline-page-primary:hover {\n color: #ff5b00;\n }\n .btn-outline-page-primary.disabled,\n .btn-outline-page-primary:disabled {\n color: #d8d8d8;\n }\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { PaginationContainer } from './Pagination.styles';\n\nexport default function Pagination({ currentPage, setPage }) {\n const { t } = useTranslation(['create-assign-saved']);\n const { numOfPages } = useSelector(state => state.assignments);\n const [debouncedCallback] = useDebouncedCallback(value => {\n setPage(value);\n }, 2000);\n return (\n \n \n setPage(currentPage - 1)}\n >\n < {t(`create-assign-saved:pagination.prev`, 'Prev')}\n \n {currentPage === 1 && (\n <>\n \n {currentPage}\n \n {numOfPages >= 2 && (\n setPage(currentPage + 1)}\n >\n {currentPage + 1}\n \n )}\n {numOfPages >= 3 && (\n setPage(currentPage + 2)}\n >\n {currentPage + 2}\n \n )}\n \n )}\n {currentPage > 1 && currentPage < numOfPages && (\n <>\n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n setPage(currentPage + 1)}\n >\n {currentPage + 1}\n \n \n )}\n {currentPage === 2 && currentPage === numOfPages && (\n <>\n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n \n )}\n {currentPage > 2 && currentPage === numOfPages && (\n <>\n setPage(currentPage - 2)}\n >\n {currentPage - 2}\n \n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n \n )}\n = numOfPages}\n onClick={() => setPage(currentPage + 1)}\n >\n {t(`create-assign-saved:pagination.next`, 'Next')} >\n \n
\n \n {t(`create-assign-saved:pagination.page`, 'Page')}{' '}\n {\n e.preventDefault();\n if (\n e.target.value !== currentPage &&\n e.target.value >= 1 &&\n e.target.value <= numOfPages\n ) {\n debouncedCallback(parseInt(e.target.value));\n }\n }}\n />{' '}\n {t(`create-assign-saved:pagination.of`, 'of')} {numOfPages}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const EmptyAssignmentContainer = styled.div`\n padding-top: 5rem;\n color: #46535e;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n h1 {\n font-size: 1.5625rem;\n line-height: 1;\n }\n\n h2 {\n font-size: 1.25rem;\n line-height: 1;\n margin-bottom: 1em;\n }\n\n &-btn {\n font-size: 1.375rem;\n line-height: 1.5;\n padding: 0.375em 3.5em;\n border-radius: 4px;\n }\n\n img {\n margin-bottom: 2rem;\n }\n\n @media (max-width: 968px) {\n padding: 0 2rem;\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport emptyAssignmentImage from 'assets/img/empty-assignment.svg';\nimport { EmptyAssignmentContainer } from './EmptyAssignment.styles';\n\nexport default function EmptyAssignment() {\n const { t } = useTranslation(['track-assignment-assigned-me']);\n return (\n \n \n \n {t(\n `track-assignment-assigned-me:emptyState.emptyMsg`,\n `You haven't assigned any homework yet.`\n )}\n \n \n \n {t(\n `track-assignment-assigned-me:emptyState.emptyDesc1`,\n 'You can click the '\n )}\n \n {t(\n `track-assignment-assigned-me:emptyState.emptyDesc2`,\n 'Create & Assign '\n )}\n \n {t(\n `track-assignment-assigned-me:emptyState.emptyDesc3`,\n 'at the top bar, and track assignment here.'\n )}\n \n \n {t(\n `track-assignment-assigned-me:emptyState.browseContent`,\n 'Browse Content'\n )}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const StyledModal = styled.div`\n position: fixed; /* Stay in place */\n z-index: 1; /* Sit on top */\n padding-top: 90px;\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0, 0, 0); /* Fallback color */\n background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */\n .modal-content {\n position: relative;\n background-color: #fefefe;\n margin: auto;\n padding: 0;\n border: 1px solid #888;\n width: 40%;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n -webkit-animation-name: animatetop;\n -webkit-animation-duration: 0.4s;\n animation-name: animatetop;\n animation-duration: 0.4s;\n /* top: 20%; */\n }\n /* Add Animation */\n @-webkit-keyframes animatetop {\n from {\n top: -300px;\n opacity: 0;\n }\n to {\n top: 0;\n opacity: 1;\n }\n }\n\n @keyframes animatetop {\n from {\n top: -300px;\n opacity: 0;\n }\n to {\n top: 0;\n opacity: 1;\n }\n }\n`;\n","import React, { useEffect, useRef } from 'react';\nimport { StyledModal } from './CustomModal.styles';\n\nexport default function CustomModal({ children, hide }) {\n function useOutsideAlerter(ref) {\n useEffect(() => {\n function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n // hide();\n }\n }\n document.addEventListener('mousedown', handleClickOutside);\n return () =>\n document.removeEventListener('mousedown', handleClickOutside);\n }, [ref]);\n }\n const wrapperRef = useRef(null);\n useOutsideAlerter(wrapperRef);\n\n return (\n \n \n {children}\n
\n \n );\n}\n","import styled from 'styled-components';\n\nconst DeleteModalBodyContnainer = styled.div`\n display: flex;\n flex-direction: column;\n width: 550px;\n background: white;\n padding: 50px;\n align-items: center;\n .close-btn {\n position: absolute;\n right: 35px;\n top: 30px;\n border: none;\n font-size: 18px;\n background: none;\n }\n .title {\n color: #ff5b00;\n font-size: 18px;\n margin: 10px;\n }\n .text {\n color: #060606;\n margin: 10px 10px 30px 10px;\n font-size: 16px;\n }\n .btn-group {\n margin: 10px;\n button {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n }\n .no-btn {\n background: white;\n color: #ff5b00;\n border: 1px solid #d5d5d5;\n &:hover {\n background: #FFF7F3\n color: #f25008;\n border-color: #f25008;\n }\n }\n .yes-btn {\n background: #ff5b00;\n color: white;\n border: 1px solid #ff3d3d;\n &:hover {\n background: #f25008;\n }\n }\n }\n span {\n font-size: 16px;\n }\n .success-title {\n font-size: 18px;\n }\n .success-btn {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n background: #5ED46A;\n color: white;\n border: 1px solid #29C16A;\n }\n`;\n\nexport default DeleteModalBodyContnainer;\n","import React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { deleteAssignedHwRequest } from 'stores/assignments/actions';\nimport successIcon from 'assets/img/icon-manage-class-success-check.svg';\nimport { Spinner } from 'react-bootstrap';\nimport DeleteModalBodyContnainer from './AssignmentCardDeleteModalBody.styles';\n\nconst DeleteModalBody = ({ hide, homeworkID }) => {\n const dispatch = useDispatch();\n // Redux states\n const { isLoading, deleteHwResult, error } = useSelector(\n state => state.assignments\n );\n\n return (\n \n {deleteHwResult === true ? (\n <>\n \n \n \n Homework is successfully deleted.\n \n {\n hide();\n }}\n >\n OK\n \n \n ) : (\n <>\n {\n hide();\n }}\n >\n X\n \n Delete Assignment
\n \n Are you sure you want to delete this assignment?\n
\n {error && {error} }\n \n {\n hide();\n }}\n >\n No\n \n {\n dispatch(\n deleteAssignedHwRequest({\n homeworkID\n })\n );\n }}\n >\n Yes\n {isLoading && (\n
\n \n )}\n \n );\n};\n\nexport default DeleteModalBody;\n","import React from 'react';\nimport DateTimeRangeContainer from 'react-advanced-datetimerange-picker';\nimport calendarIcon from 'assets/img/icon-calendar-white.svg';\nimport './DateTimePicker.styles.scss';\n\nexport default function DateTimeRangePicker(props) {\n const { startDate, endDate, applyCallback } = props;\n\n const config = {\n sundayFirst: true\n };\n\n const value = `${startDate.format('DD MMM YYYY, h:mm A')} - ${endDate.format(\n 'DD MMM YYYY, h:mm A'\n )}`;\n\n return (\n \n \n
{value} \n
\n
\n \n {dateFormat(date)} \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const ChangeTitleDateContainer = styled.div`\n display: flex;\n flex-direction: column;\n width: 550px;\n background: white;\n padding: 10px;\n align-items: center;\n position: relative;\n .close {\n position: absolute;\n right: 20px;\n top: 20px;\n border: none;\n font-size: 18px;\n background: none;\n }\n .title {\n color: #000000;\n font-size: 18px;\n margin: 10px;\n }\n .text {\n color: #060606;\n margin: 10px 10px 30px 10px;\n font-size: 16px;\n }\n .btn-group {\n margin: 10px;\n button {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n }\n .no-btn {\n background: white;\n color: #ff5b00;\n border: 1px solid #d5d5d5;\n &:hover {\n background: #fff7f3;\n color: #f25008;\n border-color: #f25008;\n }\n }\n .yes-btn {\n background: #ff5b00;\n color: white;\n border: 1px solid #ff3d3d;\n &:hover {\n background: #f25008;\n }\n :disabled {\n cursor: not-allowed;\n }\n }\n }\n .success-title {\n font-size: 18px;\n }\n .success-btn {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n background: #5ed46a;\n color: white;\n border: 1px solid #29c16a;\n }\n .form-container {\n width: 100%;\n padding: 20px;\n .row-title {\n color: #727272;\n }\n .form-row {\n flex-direction: column;\n margin-bottom: 15px;\n }\n .hw-form-inp {\n background: #ffffff;\n border: 0.5px solid #c4c4c4;\n border-radius: 2px;\n height: 30px;\n padding: 0 8px;\n }\n .dropdown-menu.show {\n width: 100%;\n }\n .dropdown-item.active,\n .dropdown-item:active {\n background: transparent;\n }\n .release-dropdown {\n color: #202020;\n padding: 3px 10px;\n font-size: 15px;\n width: 100%;\n background-color: #ffffff;\n border: 1px solid rgb(197, 197, 197) !important;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .custom-dropdown {\n display: flex;\n justify-content: space-between;\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Spinner, Dropdown } from 'react-bootstrap';\nimport { changeTitleDateRequest } from 'stores/assignments/actions';\n\nimport DateTimeRangePicker from 'components/TrackAssignment/DateTimeRangePicker';\n\nimport moment from 'moment-timezone';\nimport { assignmentVisibilities } from 'constants/index';\nimport successIcon from 'assets/img/icon-manage-class-success-check.svg';\nimport tickIcon from 'assets/img/icon-tick.svg';\nimport DatePicker from './DatePicker';\nimport { ChangeTitleDateContainer } from './ChangeTitleDateModal.styles';\n\nexport default function ChangeTitleDateModal({ hide, data }) {\n const { t } = useTranslation(['track-assignment-assigned-me']);\n const { changeTitleIsLoading, changeTitleDate } = useSelector(\n state => state.assignments\n );\n const dispatch = useDispatch();\n\n const [Title, setTitle] = useState(data.HomeWorkTitle);\n const [StartDate, setStartDate] = useState(setDate(data.StartDate));\n const [Deadline, setDeadline] = useState(setDate(data.Deadline));\n const [ResultDate, setResultDate] = useState(setDate(data.ResultDate, true));\n const [Visibility, setVisibility] = useState(data.AssignmentVisibilty);\n\n function setDate(date, deadLine) {\n if (deadLine) date = compareDate(date, data.Deadline);\n return moment.tz(date, 'Asia/singapore');\n }\n\n function compareDate(resDate, deadLineDate) {\n const result = new Date(resDate);\n const deadline = new Date(deadLineDate);\n if (deadline.getTime() > result.getTime()) {\n return deadLineDate;\n }\n return resDate;\n }\n\n const applyCallback = (startDateValue, endDateValue) => {\n setStartDate(startDateValue);\n setDeadline(endDateValue);\n setResultDate(compareDate(ResultDate, endDateValue));\n };\n\n const applyCallbackRelease = (e, picker) => {\n setResultDate(picker.startDate);\n };\n\n const update = () => {\n const obj = {\n HomeworkId: data.HomeWorkId,\n StartDate: StartDate.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n Deadline: Deadline.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ'),\n Title\n };\n if (data.HomeWorkStatus === 6) obj.Visibility = Visibility;\n if (data.HomeWorkType === 12)\n obj.ResultDate = ResultDate.format('YYYY-MM-DDTHH:mm:ss.SSSSSSSZZ');\n dispatch(changeTitleDateRequest(obj));\n };\n\n return (\n \n {changeTitleDate === true ? (\n <>\n \n \n \n {t(\n `track-assignment-assigned-me:editAssign.changesSave`,\n 'Changes have been saved sucessfully!'\n )}\n \n \n {t(`track-assignment-assigned-me:editAssign.ok`, 'OK')}\n \n \n ) : (\n <>\n \n X\n \n \n {t(\n `track-assignment-assigned-me:editAssign.editAssignment`,\n 'Edit Assignment'\n )}\n
\n\n \n
\n
\n {t(\n `track-assignment-assigned-me:editAssign.hWTitle`,\n 'Homework Title'\n )}\n
\n
setTitle(e.target.value)}\n required\n />\n \n\n
\n
\n {t(`track-assignment-assigned-me:editAssign.date`, 'Date')}\n
\n
\n
\n\n {data.HomeWorkStatus === 6 && (\n
\n
\n {t(\n `track-assignment-assigned-me:editAssign.showWorksheet`,\n 'Show the worksheet in students’ account'\n )}\n
\n
\n \n {assignmentVisibilities[Visibility]}\n \n \n {Object.keys(assignmentVisibilities).map(key => (\n setVisibility(key)}\n >\n \n
\n {assignmentVisibilities[key]}\n \n {Visibility === key && (\n \n \n
\n )}\n\n {data.HomeWorkType === 12 && (\n
\n
\n {t(\n `track-assignment-assigned-me:editAssign.resRelease`,\n 'Result Release Date'\n )}\n
\n
\n
\n )}\n
\n );\n}\n\nfunction Buttons({ hide, update, isLoading, disableBtn, t }) {\n return (\n \n \n {t(`track-assignment-assigned-me:editAssign.cancel`, 'Cancel')}\n \n \n {t(`track-assignment-assigned-me:editAssign.confirm`, 'Confirm')}\n {isLoading && (\n
\n );\n}\n","import styled from 'styled-components';\n\nexport const AssignmentSummaryPage = styled.div`\n padding-top: 1rem;\n .summary-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n font-family: 'Muli';\n margin-bottom: 1rem;\n\n .title {\n font-size: 20px;\n color: #545454;\n margin-right: ${props => (props.isOthers === true ? '10%' : '25%')};\n }\n .year-selector {\n display: flex;\n .dropdown-container {\n margin-right: ${props => (props.isOthers === true ? '1rem' : '0')};\n }\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport moment from 'moment';\nimport {\n fetchAssignmentsRequest,\n fetchTeacherAssignmentsRequest,\n fetchTeachersRequest,\n setAssignmentSummaryHistory,\n setSelectedTeacher,\n resetDeleteHwResult,\n changeTitleDateReset\n} from 'stores/assignments/actions';\nimport AssignmentCard from 'components/TrackAssignment/AssignmentCard';\nimport Pagination from 'components/TrackAssignment/Pagination';\nimport EmptyAssignment from 'components/TrackAssignment/EmptyAssignment';\nimport assignmentIcon from 'assets/img/icon-track-assignment-summary.svg';\nimport Spinner from 'components/Shared/Spinner';\nimport DropdownMenu from 'components/Shared/DropdownMenu';\nimport PopupModal from 'components/Shared/PopupModal';\nimport CustomModal from 'components/TrackAssignment/CustomModal';\nimport DeleteModalBody from 'components/TrackAssignment/AssignmentCardDeleteModalBody';\nimport ChangeTitleDateModal from 'components/TrackAssignment/ChangeTitleDateModal';\n\nimport { AssignmentSummaryPage } from './AssignmentSummary.styles';\n\nexport default function AssignmentSummary({ isOthers, match }) {\n const { t } = useTranslation(['track-assignment-assigned-me']);\n const teacherID = isOthers ? parseInt(match.params.teacherID) : null;\n const dispatch = useDispatch();\n const history = useHistory();\n // Redux States\n const {\n assignments,\n isLoading,\n years,\n teachers,\n deleteHwResult,\n latestYearWithAssignments,\n changeTitleDate\n } = useSelector(state => state.assignments);\n // States\n const [currentPage, setCurrentPage] = useState(1);\n const [selectedYear, setSelectedYear] = useState(moment().year());\n const [selectedHomeworkID, setSelectedHomeworkID] = useState(null);\n const [showDeleteModal, setShowDeleteModal] = useState(false);\n const [showChangeTitleModal, setShowChangeTitleModal] = useState(false);\n const [changeData, setChangeData] = useState({});\n const hideDeleteModal = () => {\n if (deleteHwResult) {\n dispatch(resetDeleteHwResult());\n dispatch(\n fetchAssignmentsRequest({\n date: selectedYear !== null ? `${selectedYear}` : null,\n pageSize: 20,\n pageIndex: currentPage\n })\n );\n }\n setShowDeleteModal(false);\n };\n const openDeleteModal = () => {\n setShowDeleteModal(true);\n };\n\n const openChangeTitleModal = data => {\n setShowChangeTitleModal(true);\n setChangeData(data);\n };\n\n const closeChangeTitleModal = () => {\n if (changeTitleDate) {\n dispatch(changeTitleDateReset());\n dispatch(\n fetchAssignmentsRequest({\n date: selectedYear !== null ? `${selectedYear}` : null,\n pageSize: 20,\n pageIndex: currentPage\n })\n );\n }\n setShowChangeTitleModal(false);\n };\n\n // Dropdown item click handler\n const handleSelectedTeacher = teacher => {\n history.replace(`/track-assignment/others/${teacher.ID}`);\n };\n // Fetch list of teachers\n useEffect(() => {\n if (isOthers === true) {\n dispatch(fetchTeachersRequest());\n }\n }, [dispatch, isOthers]);\n // Fetch assignment data\n useEffect(() => {\n if (isOthers === true) {\n dispatch(setAssignmentSummaryHistory('others'));\n dispatch(setSelectedTeacher(teacherID));\n dispatch(\n fetchTeacherAssignmentsRequest({\n teacherID,\n pageSize: 20,\n pageIndex: currentPage,\n year: selectedYear\n })\n );\n } else {\n dispatch(setAssignmentSummaryHistory('me'));\n dispatch(\n fetchAssignmentsRequest({\n date: selectedYear !== null ? `${selectedYear}` : null,\n pageSize: 20,\n pageIndex: currentPage\n })\n );\n }\n }, [currentPage, dispatch, isOthers, selectedYear, teacherID]);\n\n return (\n \n {isLoading && \n
\n \n
\n {isOthers && (\n <>\n \n {t(\n `track-assignment-assigned-me:main.assignBy`,\n 'Assigned by:'\n )}\n 0 &&\n teachers.find(teacher => teacher.ID === teacherID)\n .FullName\n }\n values={teachers}\n valueKey=\"FullName\"\n setValue={handleSelectedTeacher}\n />\n
\n \n {t(\n `track-assignment-assigned-me:main.assignByMeIn`,\n 'Assigned by me in:'\n )}\n
\n \n )}\n {!isOthers && (\n \n {t(\n `track-assignment-assigned-me:main.assignByMeIn`,\n 'Assigned by me in:'\n )}\n
\n )}\n \n
\n \n {showChangeTitleModal && (\n \n \n )}\n {assignments.length > 0 ? (\n <>\n {selectedYear !== null\n ? assignments\n .slice(0, 20)\n .map(assignment => (\n \n );\n}\n","import styled from 'styled-components';\n\nexport const OtherAssignmentsPage = styled.div`\n padding-top: 5rem;\n color: #46535e;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n h1 {\n font-size: 1.5625rem;\n line-height: 1;\n }\n\n h2 {\n font-size: 1.25rem;\n line-height: 1;\n margin-bottom: 1em;\n }\n\n &-btn {\n font-size: 1.375rem;\n line-height: 1.5;\n padding: 0.375em 3.5em;\n border-radius: 4px;\n }\n\n img {\n margin-bottom: 2rem;\n }\n\n .no-assignments-error {\n margin-top: 1rem;\n font-size: 1rem;\n color: #ff5b00;\n }\n\n .btn-show-button {\n width: 270px;\n &:disabled {\n background: #d8d8d8;\n border: 1px solid #d8d8d8;\n cursor: not-allowed;\n }\n }\n\n @media (max-width: 968px) {\n padding: 0 2rem;\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { isEmpty } from 'ramda';\nimport { fetchTeachersRequest } from 'stores/assignments/actions';\nimport splash from 'assets/img/other-assignments-splash.svg';\nimport DropdownMenu from 'components/Shared/DropdownMenu';\nimport { OtherAssignmentsPage } from './OtherAssignments.styles';\n\nexport default function OtherAssignments() {\n const { t } = useTranslation(['track-assignment-assigned-others']);\n const dispatch = useDispatch();\n const history = useHistory();\n const { teachers } = useSelector(state => state.assignments);\n const [selectedTeacher, setSelectedTeacher] = useState(\n teachers.length > 0\n ? teachers[0]\n : {\n FullName: t(\n `track-assignment-assigned-others:main.selectTeacher`,\n 'Select a teacher'\n )\n }\n );\n\n const handleShowButton = () => {\n history.push(`/track-assignment/others/${selectedTeacher.ID}`);\n };\n\n // Fetch teachers data\n useEffect(() => {\n dispatch(fetchTeachersRequest());\n }, [dispatch]);\n return (\n \n \n \n {t(\n `track-assignment-assigned-others:main.browseAssign`,\n 'Browse assignments created by'\n )}\n \n \n \n {t(`track-assignment-assigned-others:main.show`, 'Show')}\n \n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BarChart, Bar, XAxis, YAxis, CartesianGrid, Cell } from 'recharts';\n\nconst colors = ['#55C92B', '#49C8AA', '#FF7121', '#FFC043'];\n\nconst CustomYAxisTick = ({ x, y, payload }) => {\n return (\n \n \n {payload.value}\n \n \n );\n};\n\nexport default function SubmissionsBarChart({ data }) {\n const { t } = useTranslation(['track-assignment-multi-class']);\n return (\n \n \n {data.map((entry, index) => (\n | \n ))}\n \n \n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Modal } from 'react-bootstrap';\nimport { isNil } from 'ramda';\nimport { useSelector, useDispatch } from 'react-redux';\nimport HTMLReactParser from 'html-react-parser';\nimport questionParser from 'helpers/questionParser';\nimport convertTagsToHTML from 'helpers/text/convertTagsToHTML';\nimport Collapse from 'components/Shared/Collapse';\nimport DifficultyChillis from 'components/Level/DifficultyChillis';\nimport {\n McqOptionsList,\n TableModal\n} from 'components/Question/QuestionContent.styles';\nimport Spinner from 'components/Shared/Spinner';\nimport {\n fetchSingleClassReportRequest,\n clearSingleClassReport\n} from 'stores/assignments/actions';\nimport { parseQnAnswer } from 'helpers/singleClassReport';\n\nconst QuestionContent = ({ data, qnNumber }) => {\n const { t } = useTranslation(['track-assignment-assigned-me']);\n const { Payload, Difficulty } = data;\n // States\n const [questionTitle, setQuestionTitle] = useState(null);\n const [questionSolution, setQuestionSolution] = useState(null);\n const [questionAnswerParsed, setQuestionAnswerParsed] = useState(null);\n const [mcqOptionsParsed, setMCQOptionsParsed] = useState([]);\n // Effects\n useEffect(() => {\n if (!isNil(Payload)) {\n const { title, solution, mcqOptions, questionAnswer } = questionParser({\n Payload\n });\n const renderOptions = mcqOptions.map(option =>\n HTMLReactParser(convertTagsToHTML(option, false), {\n replace: domNode => {\n if (domNode.name === 'img') {\n domNode.attribs.style = 'width: 68%';\n return domNode;\n }\n return domNode;\n }\n })\n );\n setMCQOptionsParsed(renderOptions);\n setQuestionTitle(\n HTMLReactParser(convertTagsToHTML(title), {\n replace: domNode => {\n if (domNode.name === 'img' && !isNil(domNode.attribs?.url)) {\n return (\n \n {domNode.children[0]?.data ?? ''}\n \n );\n }\n if (domNode.name === 'input') {\n return \n
\n
\n
\n
\n
\n
\n
\n \n {t(\n 'track-assignment-assigned-me:openHwModal.qn',\n 'Question'\n )}{' '}\n {qnNumber}\n \n \n {t(\n 'track-assignment-assigned-me:openHwModal.difficulty',\n 'Difficulty:'\n )}{' '}\n \n
\n
\n
\n
\n
\n
{questionTitle} \n {mcqOptionsParsed.length > 0 && (\n
\n {mcqOptionsParsed.map(option => (\n {option} \n ))}\n \n )}\n
\n
\n
\n
\n {questionAnswerParsed !== null &&\n questionAnswerParsed.length > 0 && (\n <>\n \n \n {t(\n 'track-assignment-assigned-me:openHwModal.answer',\n 'Answer:'\n )}\n \n
\n {questionAnswerParsed}
\n \n )}\n \n \n {t(\n 'track-assignment-assigned-me:openHwModal.solution',\n 'Solution:'\n )}\n \n
\n {questionSolution}\n \n \n
\n
\n
hide()} className=\"question-summary\">\n \n
\n hide()}\n >\n × \n \n {hwTitle} \n
\n {isSingleClassReportLoading && (\n
\n
\n )}\n {!isSingleClassReportLoading &&\n singleClassReport.length > 0 &&\n singleClassReport[0].Questions.length > 0 &&\n singleClassReport[0].Questions.map((question, index) => (\n
\n ))}\n
\n );\n};\n\nexport default HomeworkQuestionsModal;\n","import styled from 'styled-components';\nimport { Modal } from 'react-bootstrap';\n\nexport const StyledModal = styled(Modal)`\n .modal-custom {\n min-width: 30%;\n .modal-header-custom {\n border-bottom: none;\n z-index: 100;\n }\n }\n\n .modal-custom-large {\n min-width: 60%;\n .modal-header-custom {\n border-bottom: none;\n }\n }\n`;\n","import React from 'react';\nimport { Modal } from 'react-bootstrap';\nimport { StyledModal } from './PopupModal.styles';\n\nexport default function PopupModal({ children, show, hide, size }) {\n return (\n {\n hide();\n }}\n >\n {children} \n \n );\n}\n","import styled from 'styled-components';\n\nexport const DownloadCSVModalContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: 0.875rem;\n margin-top: -50px;\n .success-title {\n font-size: 1.125rem;\n color: #000000;\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n .btn-success-ok {\n width: 127px;\n color: #fffdfc;\n background: #5ed46a;\n margin-bottom: 1rem;\n }\n .title {\n margin-bottom: 2rem;\n display: flex;\n justify-content: center;\n color: #ff5b00;\n font-size: 1.25rem;\n .action-icon {\n margin-right: 1rem;\n }\n }\n .content-section {\n color: #000000;\n text-align: center;\n p {\n font-size: 16px;\n }\n .class-list {\n text-align: left;\n margin-left: 20px;\n margin-bottom: 10px;\n .form-check-input {\n margin-left: 0px;\n }\n .form-check-label {\n margin: 0px 30px;\n }\n }\n }\n .btn-section {\n display: flex;\n width: 500px;\n justify-content: space-evenly;\n margin-top: 20px;\n padding: 20px;\n border-top: solid 1px rgba(112, 112, 112, 0.22);\n .cancel-btn {\n color: #ff5b00;\n border: solid 1px #d5d5d5;\n width: 127px;\n background: #ffffff;\n &:hover {\n border-color: #ff5b00;\n background: #fff7f3;\n }\n }\n .download-btn {\n width: 127px;\n color: #fffdfc;\n background: #ff5b00;\n &:hover {\n background: #f25008;\n }\n }\n .download-btn:disabled {\n border: none;\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport Spinner from 'components/Shared/Spinner';\nimport { Button } from 'react-bootstrap';\nimport downloadIcon from 'assets/img/icon-track-assignment-download.svg';\nimport { fetchCSVClassReportRequest } from 'stores/assignments/actions';\n// import CsvDownload from 'react-csv-downloader';\nimport { CSVLink } from 'react-csv';\n\nimport successIcon from 'assets/img/icon-manage-class-success-check.svg';\nimport { DownloadCSVModalContainer } from './DownloadCSVModalBody.styles';\n\nconst DownloadCSVModalBody = ({ hide, homeworkID }) => {\n const { t } = useTranslation(['track-assignment-assigned-me']);\n const dispatch = useDispatch();\n const {\n parsedCSVClassReport,\n CSVClassReport,\n isCSVClassReportLoading,\n error\n } = useSelector(state => state.assignments);\n\n // selected class state\n const [selectedClassID, setSelectedClassID] = useState([]);\n const [downloadSucces, setDownloadSuccess] = useState(false);\n\n // get list of class name\n const classList = CSVClassReport[0] && CSVClassReport[0].TrackingGroup;\n const individualList = CSVClassReport[0] &&\n CSVClassReport[0].TrackingIndividual && { ClassName: 'Assigned Students' };\n\n const downloadOptionList = () => {\n if (CSVClassReport[0] && CSVClassReport[0].TrackingIndividual !== null) {\n return classList && classList.concat(individualList);\n }\n if (CSVClassReport[0] && CSVClassReport[0].TrackingGroup === null) {\n return individualList;\n }\n return classList;\n };\n\n const combineList = downloadOptionList();\n\n // filtered csv data based on selected classID\n const filteredData =\n parsedCSVClassReport &&\n parsedCSVClassReport.filter(item => {\n return selectedClassID.indexOf(item.classID) >= 0;\n });\n\n // CSV Columns\n const columns = [\n {\n key: 'class',\n label: `${t('track-assignment-assigned-me:csvColumn.class', 'CLASS')}`\n },\n {\n key: 'studentName',\n label: `${t(\n 'track-assignment-assigned-me:csvColumn.studentName',\n 'STUDENT NAME'\n )}`\n },\n {\n key: 'homeworkTitle',\n label: `${t(\n 'track-assignment-assigned-me:csvColumn.hwName',\n 'HOMEWORK NAME'\n )}`\n },\n {\n key: 'homeworkID',\n label: `${t(\n 'track-assignment-assigned-me:csvColumn.hwId',\n 'HOMEWORK ID'\n )}`\n },\n {\n key: 'score',\n label: `${t('track-assignment-assigned-me:csvColumn.score', 'SCORE')}`\n },\n {\n key: 'maxScore',\n label: `${t(\n 'track-assignment-assigned-me:csvColumn.maxScore',\n 'MAX ATTAINABLE'\n )}`\n },\n {\n key: 'submissionDate',\n label: `${t(\n 'track-assignment-assigned-me:csvColumn.subDate',\n 'SUBMISSION DATE'\n )}`\n }\n ];\n\n useEffect(() => {\n dispatch(\n fetchCSVClassReportRequest({\n homeworkID\n })\n );\n }, [dispatch, homeworkID]);\n return (\n \n {downloadSucces === true ? (\n <>\n \n \n \n {t(\n 'track-assignment-assigned-me:downloadModal.downloadDes',\n 'Assignment downloaded successfully!'\n )}\n \n {\n hide();\n }}\n >\n {t('track-assignment-assigned-me:editAssign.ok', 'OK')}\n \n \n ) : (\n <>\n \n
\n
\n {t(\n 'track-assignment-assigned-me:downloadModal.xls',\n 'Download XLS'\n )}\n \n
\n {isCSVClassReportLoading ? (\n
\n ) : (\n <>\n
\n {t(\n 'track-assignment-assigned-me:downloadModal.select',\n 'Select class to download'\n )}\n
\n {combineList &&\n combineList.map((item, index) => (\n
\n {\n if (e.target.checked) {\n setSelectedClassID([\n ...selectedClassID,\n item.ClassID\n ]);\n } else {\n setSelectedClassID(\n selectedClassID.filter(\n sth => sth !== item.ClassID\n )\n );\n }\n }}\n />\n \n {item.ClassName}\n \n
\n ))}\n \n )}\n {!isCSVClassReportLoading && error !== null &&
{error}
}\n
\n hide()}>\n {t('track-assignment-assigned-me:editAssign.cancel', 'Cancel')}\n \n \n setDownloadSuccess(true)}\n >\n {t(\n 'track-assignment-assigned-me:downloadModal.download',\n 'Download'\n )}\n \n \n
\n \n )}\n \n );\n};\n\nexport default DownloadCSVModalBody;\n","import styled from 'styled-components';\n\nexport const MultiClassReportPage = styled.div`\n background: #fff;\n .report-navigation {\n padding: 1rem 1rem;\n cursor: pointer;\n width: 100px;\n &:hover {\n color: #ff5b00;\n }\n }\n .tab-container {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n .scroller-tab {\n text-align: center;\n color: rgba(84, 84, 84, 0.43);\n background: #f5f5f5;\n border-bottom: solid 1px rgba(112, 112, 112, 0.26);\n border-top: solid 1px rgba(112, 112, 112, 0.26);\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n flex-grow: 1;\n border-right: none;\n height: 53px;\n padding: 0.5rem 0.5rem;\n }\n }\n .report-tabs {\n display: flex;\n flex-direction: row;\n border-top: solid 1px rgba(112, 112, 112, 0.26);\n overflow-x: auto;\n .class-tab {\n cursor: pointer;\n flex-shrink: 0;\n &:hover {\n color: #ff5b00;\n background: #fff7f3;\n }\n }\n span {\n padding: 1rem 2rem;\n min-width: 6rem;\n text-align: center;\n color: rgba(84, 84, 84, 0.43);\n background: #f5f5f5;\n border-right: solid 1px rgba(112, 112, 112, 0.26);\n border-bottom: solid 1px rgba(112, 112, 112, 0.26);\n }\n .active {\n color: #ff5b00;\n border-bottom: none;\n background: #fff;\n flex-shrink: 0;\n }\n .placeholder {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding: 0 0.5rem;\n flex-grow: 1;\n border-right: none;\n }\n }\n .report-homework-details {\n display: flex;\n flex-direction: row;\n padding: 1rem 1rem;\n border-bottom: solid 1px rgba(112, 112, 112, 0.22);\n .report-actions {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n flex-basis: 40%;\n span {\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n margin-right: 1rem;\n font-size: 11px;\n .action-icon {\n margin-bottom: 0.3rem;\n }\n }\n }\n .report-homework-details-info {\n flex-basis: 60%;\n .report-dates {\n color: rgba(30, 30, 30, 0.46);\n }\n }\n p {\n font-size: 22px;\n color: #1e1e1e;\n }\n }\n .report-submission-details {\n padding: 1rem 1rem;\n .submission-details-url {\n display: flex;\n flex-direction: row;\n align-items: center;\n .url-text {\n color: #ff5b00;\n }\n .copy-button {\n border: solid 1px #d8d8d8;\n background: #fff;\n padding: 0.2rem 1rem;\n color: #ff5b00;\n margin-left: 1rem;\n border-radius: 2px;\n\n &:hover {\n border: solid 1px #ff5b00;\n background: #fff7f3;\n }\n }\n }\n }\n .report-submission-chart {\n padding-bottom: 1rem;\n .chart-empty-text {\n position: relative;\n bottom: 18rem;\n left: 24rem;\n width: 18rem;\n text-align: center;\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport moment from 'moment';\nimport Clipboard from 'react-clipboard.js';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { ButtonGroup, Button } from 'react-bootstrap';\nimport {\n fetchMultiClassReportRequest,\n clearMultiClassReport\n} from 'stores/assignments/actions';\nimport SubmissionsBarChart from 'components/TrackAssignment/SubmissionsBarChart';\nimport HomeworkQuestionsModal from 'components/TrackAssignment/HomeworkQuestionsModal';\nimport printIcon from 'assets/img/icon-track-assignment-print-active.svg';\nimport downloadIcon from 'assets/img/icon-track-assignment-download.svg';\nimport leaderboardIcon from 'assets/img/icon-track-assignment-leaderboard.svg';\nimport openHWIcon from 'assets/img/icon-track-assignment-open-hw.svg';\nimport { featureToggle, homeworkLink } from 'constants/index';\nimport PopupModal from 'components/ManageClass/PopupModal';\nimport DownloadCSVModalBody from 'components/TrackAssignment/DownloadCSVModalBody';\nimport { isNil } from 'ramda';\nimport { MultiClassReportPage } from './MultiClassReport.styles';\n\nconst checkforSubmissions = classes => {\n for (const classObject of classes) {\n if (classObject.TotalSubmission > 0) {\n return true;\n }\n }\n return false;\n};\n\nexport default function MultiClassReport({ match }) {\n const { t } = useTranslation(['track-assignment-multi-class']);\n const homeworkID = parseInt(match.params.homeworkID);\n const dispatch = useDispatch();\n const history = useHistory();\n const {\n multiClassReport,\n assignmentSummaryHistory,\n selectedTeacher\n } = useSelector(state => state.assignments);\n\n // Component States\n const [showQuestionsModal, setShowQuestionsModal] = useState(false);\n const [showDownloadCSVModal, setShowDownloadCSVModal] = useState(false);\n\n // Modal Event Handlers\n const hideQuestionModal = () => {\n setShowQuestionsModal(false);\n };\n\n const hideDownloadCSVModal = () => {\n setShowDownloadCSVModal(false);\n };\n\n useEffect(() => {\n dispatch(\n fetchMultiClassReportRequest({\n homeworkID\n })\n );\n return () => {\n dispatch(clearMultiClassReport());\n };\n }, [dispatch, homeworkID]);\n\n return (\n <>\n {multiClassReport.length > 0 && (\n \n \n {\n if (assignmentSummaryHistory === 'others') {\n history.push(`/track-assignment/others/${selectedTeacher}`);\n } else {\n history.push('/track-assignment');\n }\n }}\n >\n {`< ${t(`track-assignment-multi-class:main.back`, `Back`)}`}\n \n \n
\n \n {t(`track-assignment-multi-class:main.all`, `All`)}\n \n {multiClassReport[0].TrackingIndividual !== null && (\n {\n history.push(\n `/track-assignment/homework/${homeworkID}/all`\n );\n }}\n >\n {t(\n `track-assignment-multi-class:main.assignedStud`,\n `Assigned Students`\n )}\n \n )}\n {multiClassReport[0].TrackingGroup.length > 0 &&\n multiClassReport[0].TrackingGroup.map(classGroup => (\n {\n history.push(\n `/track-assignment/homework/${homeworkID}/${classGroup.ClassID}`\n );\n }}\n >\n {classGroup.ClassName}\n \n ))}\n
\n\n
\n \n {\n const div = document.getElementsByClassName('report-tabs');\n div[0].scrollLeft -= 100;\n }}\n >\n {'<'}\n \n {\n const div = document.getElementsByClassName('report-tabs');\n div[0].scrollLeft += 100;\n }}\n >\n {'>'}\n \n \n \n
\n
\n
\n {multiClassReport[0].HomeWorkTitle} \n
\n
\n {t(\n `track-assignment-multi-class:main.assignBy`,\n 'Assigned by: '\n )}\n {multiClassReport[0].TeacherName}\n \n
{`${moment(\n multiClassReport[0].StartDate\n ).format('DD/MM/YYYY')} - ${moment(\n multiClassReport[0].Deadline\n ).format('DD/MM/YYYY')}`} \n
\n\n
\n
{\n const sessionSecret = sessionStorage.getItem('secret');\n const url = isNil(sessionSecret)\n ? `${process.env.REACT_APP_DOMAIN}${\n process.env.REACT_APP_SUBDOMAIN\n }${\n process.env.REACT_APP_SUBDOMAIN === '/' ? '' : '/'\n }print/${homeworkID}`\n : `${process.env.REACT_APP_DOMAIN}${\n process.env.REACT_APP_SUBDOMAIN\n }${\n process.env.REACT_APP_SUBDOMAIN === '/' ? '' : '/'\n }print/${homeworkID}?secret=${sessionSecret}`;\n const win = window.open(url, '_blank');\n if (win != null) {\n win.focus();\n }\n }}\n >\n {\n setShowDownloadCSVModal(true);\n }}\n >\n | \n {\n history.push(`/leaderboard/${homeworkID}`);\n }}\n >\n {\n setShowQuestionsModal(true);\n }}\n >\n \n
\n
{`${t(\n `track-assignment-multi-class:main.startDate`,\n 'Start Date: '\n )}${moment(multiClassReport[0].StartDate).format(\n 'DD-MMM-YYYY HH:mm'\n )}`}
\n
{`${t(\n `track-assignment-multi-class:main.deadline`,\n 'Deadline '\n )}${moment(multiClassReport[0].Deadline).format(\n 'DD-MMM-YYYY HH:mm'\n )} ${!multiClassReport[0].CloseAfterDeadline &&\n t(\n `track-assignment-multi-class:main.accessible`,\n '(Accessible after deadline)'\n )}`}
\n
\n \n {t(`track-assignment-multi-class:main.url`, 'URL: ')}\n {`${homeworkLink}${multiClassReport[0].HomeWorkId}`} \n \n \n {t(`track-assignment-multi-class:main.copy`, 'Copy')}\n \n
\n
\n {multiClassReport[0].TrackingGroup.length > 0 && (\n
\n )}\n {multiClassReport[0].TrackingGroup.length > 0 &&\n !checkforSubmissions(multiClassReport[0].TrackingGroup) && (\n
\n
\n {t(\n `track-assignment-multi-class:barGraph.emptyMsg`,\n 'No Submissions yet'\n )}\n \n
\n {t(\n `track-assignment-multi-class:barGraph.submissionMsg`,\n `When your students submit the homework, then you'll find the data here`\n )}\n
\n
\n )}\n
\n )}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const QuestionPaginationContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1rem 0.5rem 1rem 0;\n .question-pagination-page {\n margin: 0.2rem auto;\n color: #f9625c;\n font-size: 12px;\n }\n .btn-container {\n display: flex;\n justify-content: center;\n gap: 6px;\n }\n .next-button,\n .prev-button {\n padding: 12px;\n position: relative;\n border-radius: 50%;\n background: #dfdfdf;\n border: none;\n && {\n &:active {\n background: #dfdfdf;\n }\n }\n\n span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -60%);\n color: #727171;\n }\n }\n`;\n","import React from 'react';\nimport { Button } from 'react-bootstrap';\nimport { QuestionPaginationContainer } from './QuestionPagination.styles';\n\nexport default function QuestionPagination({\n currentPage,\n numOfPages,\n setPage\n}) {\n return (\n \n {currentPage} \n \n {currentPage > 1 && (\n {\n setPage(currentPage - 1);\n }}\n >\n {'<'} \n \n )}\n {currentPage < numOfPages && (\n {\n setPage(currentPage + 1);\n }}\n >\n {'>'} \n \n )}\n
\n \n );\n}\n","import styled from 'styled-components';\n\nexport const QuestionResultContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n .correct-answer {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #55c92b;\n }\n\n .no-attempt {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n border: solid 1.5px #dedede;\n }\n\n .wrong-answer {\n width: 8px;\n height: 8px;\n }\n`;\n","import React from 'react';\nimport wrongAnsIcon from 'assets/img/icon-track-assignment-wrong-ans.svg';\nimport { QuestionResultContainer } from './QuestionResultIcon.styles';\n\nexport default function QuestionResultIcon({ result }) {\n return (\n \n {result === 'no-attempt' ? (\n
\n ) : result ? (\n
\n ) : (\n \n );\n}\n","import styled from 'styled-components';\n\nexport const StyledContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n visibility: ${({ num }) => (num === 0 ? 'hidden' : 'visible')};\n color: #484848;\n .correct-answer {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #75c649;\n margin-right: 4px;\n }\n img {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n }\n`;\n","import React from 'react';\nimport wrongAnsIcon from 'assets/img/icon-track-assignment-wrong-ans.svg';\nimport { StyledContainer } from './ScoreCount.styles';\n\nconst ScoreCount = ({ type, num }) => {\n return (\n \n {type === 'correct' ? (\n \n );\n};\n\nexport default ScoreCount;\n","import styled from 'styled-components';\nimport { Modal } from 'react-bootstrap';\n\nexport const ModalStyled = styled(Modal)`\n .modal-dialog {\n min-width: 50%;\n }\n .question-content {\n color: #008bbe;\n font-weight: bold;\n padding: 1rem;\n }\n .modal-body {\n padding: 0;\n }\n`;\n\nexport const StudentAnswers = styled.div`\n .answer {\n border-top: solid 1px #dbe0d9;\n margin-top: 1rem;\n }\n .correct-box,\n .wrong-box {\n padding: 0.5rem 1rem;\n .title {\n font-weight: 600;\n margin-bottom: 0.3rem;\n }\n .name {\n font-weight: bold;\n color: #363636;\n }\n p {\n margin-bottom: 0px;\n line-height: 20px;\n color: #363636;\n }\n }\n .correct-box {\n background-color: #f5fdf2;\n .title {\n color: #55c92b;\n }\n }\n .wrong-box {\n background-color: #fff6f5;\n .title {\n color: #d5463b;\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { Modal } from 'react-bootstrap';\nimport { isNil } from 'ramda';\nimport convertTagsToHTML from 'helpers/text/convertTagsToHTML';\nimport HTMLReactParser from 'html-react-parser';\nimport questionParser from 'helpers/questionParser';\nimport { McqOptionsList } from 'components/Question/QuestionContent.styles';\nimport { ModalStyled, StudentAnswers } from './QuestionSummaryModal.styles';\n\nexport default function QuestionSummaryModal({ size, show, hide, data }) {\n const [questionTitle, setQuestionTitle] = useState(null);\n const [mcqOptions, setMCQOptions] = useState([]);\n const { question, answers } = data;\n useEffect(() => {\n if (!isNil(question.Payload)) {\n const { title, mcqOptions } = questionParser(question);\n const renderOptions = mcqOptions.map(option =>\n HTMLReactParser(convertTagsToHTML(option, false), {\n replace: domNode => {\n if (domNode.name === 'img') {\n domNode.attribs.style = 'width: 68%';\n return domNode;\n }\n return domNode;\n }\n })\n );\n setMCQOptions(renderOptions);\n setQuestionTitle(\n HTMLReactParser(convertTagsToHTML(title), {\n replace: domNode => {\n if (domNode.name === 'img' && !isNil(domNode.attribs?.url)) {\n return (\n \n {domNode.children[0]?.data ?? ''}\n \n );\n }\n if (domNode.type === 'text') {\n if (domNode.prev?.name === 'input') {\n return {domNode.data} ;\n }\n }\n if (domNode.name === 'input') {\n return (\n hide()}\n className=\"question-summary\"\n >\n \n {`Question ${question.DisplayOrder}`} \n \n \n \n {questionTitle}\n {mcqOptions.length > 0 && (\n \n {mcqOptions.map(option => (\n {option} \n ))}\n \n )}\n
\n \n 0 ||\n Object.keys(answers.wrong).length > 0) &&\n 'answer'\n }\n >\n {Object.keys(answers.correct).length > 0 ? (\n \n
Correct Answer:
\n {Object.keys(answers.correct).map(key => (\n <>\n
{`${key} (${answers.correct[key].num} student)`}
\n
{answers.correct[key].students.join(', ')}
\n \n ))}\n
\n
Wrong Answer:
\n {Object.keys(answers.wrong).map(key => (\n <>\n
{`${key} (${answers.wrong[key].num} student)`}
\n
{answers.wrong[key].students.join(', ')}
\n \n ))}\n
\n \n \n );\n}\n","import React from 'react';\nimport ReactSvgPieChart from 'react-svg-piechart';\n\nexport default function ScorePieChart({ submissions }) {\n const data = [];\n if (submissions.correct > 0) {\n data.push({\n title: 'Correct',\n value: submissions.correct,\n color: '#55C92B'\n });\n }\n if (submissions.wrong > 0) {\n data.push({\n title: 'Wrong',\n value: submissions.wrong,\n color: '#FF5E5E'\n });\n }\n if (submissions.notSubmitted > 0) {\n data.push({\n title: 'Not Submitted',\n value: submissions.notSubmitted,\n color: '#dedede'\n });\n }\n // Check if data array has only 1 item\n if (data.length === 1) {\n data.push(data[0]);\n }\n return (\n \n
\n );\n}\n","import React, { useState, useRef } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { Overlay, Tooltip } from 'react-bootstrap';\nimport {\n markAnswerRightRequest,\n fetchSingleClassReportRequest\n} from 'stores/assignments/actions';\nimport './MarkRightPopover.scss';\n\nfunction MarkRightPopover({ submissionId, homeworkID }) {\n const dispatch = useDispatch();\n const [showConfirmation, setShowConfirmation] = useState(false);\n const target = useRef(null);\n\n const confirmHandler = () => {\n dispatch(markAnswerRightRequest({ submissionId }));\n setShowConfirmation(false);\n dispatch(\n fetchSingleClassReportRequest({\n homeworkID\n })\n );\n };\n\n return (\n \n
setShowConfirmation(true)}\n >\n Mark Right\n \n \n \n \n
setShowConfirmation(false)}>X \n
Are you sure to mark this answer correct?
\n
\n \n Confirm\n \n
\n \n \n \n \n {domNode.children[0]?.data ?? ''}\n \n );\n }\n if (domNode.name === 'input') {\n return \n
\n
\n
\n
\n
\n
\n
\n Question {qnNumber} \n \n Difficulty:{' '}\n \n
\n
\n
\n
\n
\n
{questionTitle} \n {questionMcqOptions.length > 0 && (\n
\n {questionMcqOptions.map(option => (\n {option} \n ))}\n \n )}\n
\n
\n
\n
Student's Answer:
\n
\n
\n
{studentAnswer} \n {isCorrect ? (\n
\n ) : (\n
\n )}\n
\n {!isCorrect && (\n
\n )}\n
\n
\n
\n
\n {questionAnswerParsed !== null &&\n questionAnswerParsed.length > 0 && (\n <>\n \n Answer: \n
\n {questionAnswerParsed}
\n \n )}\n \n Solution: \n
\n {questionSolution}\n \n \n
\n
\n
hide()} className=\"question-summary\">\n {data && (\n \n
\n
hide()}\n >\n × \n \n {data.hwTitle} \n {data.selectedStudent}
\n Score: {data.studentScore}
\n \n {data.questions &&\n data.questions\n .slice(1)\n .map((question, index) => (\n
\n ))}\n
\n );\n}\n","import styled, { css } from 'styled-components';\nimport { MultiClassReportPage } from './MultiClassReport.styles';\n\nexport const SingleClassReportPage = styled(MultiClassReportPage)`\n .report-progress {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: 1rem;\n .bg-progress-bar-submission {\n background-color: #ff5b00;\n }\n }\n\n .submission-details-url {\n display: flex;\n flex-direction: row;\n align-items: center;\n .url-text {\n color: #ff5b00;\n }\n .copy-button {\n border: solid 1px #d8d8d8;\n background: #fff;\n padding: 0.2rem 1rem;\n color: #ff5b00;\n margin-left: 1rem;\n border-radius: 2px;\n\n &:hover {\n border: solid 1px #ff5b00;\n background: #fff7f3;\n }\n }\n }\n\n .report-scores {\n min-height: 350px;\n margin-top: 1rem;\n .report-scores-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n\n .select-sorting-order {\n padding-left: 1rem;\n display: flex;\n flex-direction: row;\n align-items: center;\n .sorting-dropdown {\n margin-left: 1rem;\n }\n #dropdown-sorting {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n border: solid 1px #707070;\n width: 190px;\n font-size: 12px;\n }\n .sorting-dropdown-item {\n width: 190px;\n font-size: 12px;\n }\n }\n .bg-progress-bar-score {\n background-color: #55c92b;\n }\n .progress {\n background-color: #f9625c;\n }\n\n .progress-not-submitted.progress {\n background-color: #dedede;\n }\n .cell-score {\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow-x: auto;\n white-space: nowrap;\n }\n .header-cell-question {\n display: flex;\n flex-direction: column;\n color: #9a9a9a;\n font-weight: 600;\n font-size: 14px;\n background: #f7f7f7;\n align-items: center;\n border-radius: 8px;\n height: 70px;\n width: 40px;\n padding: 6px 0;\n cursor: pointer;\n margin: 0 auto;\n &.chart {\n justify-content: space-between;\n padding: 10px 0 6px;\n }\n }\n }\n\n .score-table {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n .cell-answer {\n height: 43px;\n }\n .score-table-left {\n align-self: flex-end;\n .cell-student-name {\n overflow-x: hidden;\n white-space: nowrap;\n }\n }\n .score-table-right {\n flex-grow: 0;\n }\n }\n`;\nexport const StyledSwitchContainer = styled.div`\n background: #dddddd;\n color: #484848;\n padding: 3px 4px;\n border-radius: 4px;\n display: flex;\n margin-right: 1rem;\n`;\nexport const StyledSwitch = styled.div`\n min-width: 70px;\n min-height: 26px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 4px 0 0 4px;\n background: white;\n border: 1px solid #cbcbcb;\n /* border-right: none; */\n font-size: 12px;\n :last-child {\n border-radius: 0 4px 4px 0;\n border-left: ${({ active }) => (active ? '1px solid #ffac86' : 'none')};\n }\n :first-child {\n border-right: ${({ active }) => (active ? '1px solid #ffac86' : 'none')};\n }\n @media (max-width: 1223px) {\n min-width: 100px;\n }\n ${({ active }) =>\n active &&\n css`\n background: #fff7f2;\n border: 1px solid #ffac86;\n color: #ff5b00;\n `}\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport moment from 'moment';\nimport Clipboard from 'react-clipboard.js';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport {\n ButtonGroup,\n Button,\n ProgressBar,\n Table,\n Dropdown\n} from 'react-bootstrap';\nimport {\n fetchSingleClassReportRequest,\n clearSingleClassReport\n} from 'stores/assignments/actions';\nimport QuestionPagination from 'components/TrackAssignment/QuestionPagination';\nimport QuestionResultIcon from 'components/TrackAssignment/QuestionResultIcon';\nimport ScoreCount from 'components/TrackAssignment/ScoreCount';\nimport QuestionSummaryModal from 'components/TrackAssignment/QuestionSummaryModal';\nimport HomeworkQuestionsModal from 'components/TrackAssignment/HomeworkQuestionsModal';\nimport ScorePieChart from 'components/TrackAssignment/ScorePieChart';\nimport printIcon from 'assets/img/icon-track-assignment-print-active.svg';\nimport downloadIcon from 'assets/img/icon-track-assignment-download.svg';\nimport leaderboardIcon from 'assets/img/icon-track-assignment-leaderboard.svg';\nimport openHWIcon from 'assets/img/icon-track-assignment-open-hw.svg';\nimport {\n getClass,\n compareValues,\n parseQuestionResult\n} from 'helpers/singleClassReport';\nimport StudentSummaryModal from 'components/TrackAssignment/StudentSummaryModal';\nimport Spinner from 'components/Shared/Spinner';\nimport { featureToggle, homeworkLink } from 'constants/index';\nimport PopupModal from 'components/ManageClass/PopupModal';\nimport DownloadCSVModalBody from 'components/TrackAssignment/DownloadCSVModalBody';\nimport {\n SingleClassReportPage,\n StyledSwitchContainer,\n StyledSwitch\n} from './SingleClassReport.styles';\n\n// HELPERS\nconst createStudentSummaryData = (\n studentID,\n singleClassReport,\n studentByScores\n) => {\n const studentIndex = studentByScores.findIndex(\n student => student.ID === studentID\n );\n if (studentIndex !== -1) {\n const summaryData = {\n hwTitle: singleClassReport[0].HomeWorkTitle,\n studentScore: `${studentByScores[studentIndex].score}/${singleClassReport[0].TotalQuestion}`,\n selectedStudent: studentByScores[studentIndex].FullName,\n questions: studentByScores[studentIndex].answers\n };\n return summaryData;\n }\n return null;\n};\n// Constants\nconst TYPES = [\n {\n label: 'Chart',\n value: 'chart'\n },\n {\n label: 'Data',\n value: 'data'\n }\n];\nexport default function SingleClassReport({ match }) {\n const { t } = useTranslation(['track-assignment-multi-class']);\n const dispatch = useDispatch();\n const history = useHistory();\n const {\n isSingleClassReportLoading,\n singleClassReport,\n assignmentSummaryHistory,\n selectedTeacher\n } = useSelector(state => state.assignments);\n const homeworkID = parseInt(match.params.homeworkID);\n const [type, setType] = useState(TYPES[0].value);\n const setInitialClassID = () => {\n switch (match.params.classID) {\n case 'view':\n if (singleClassReport.length > 0) {\n if (singleClassReport[0].TrackingIndividual !== null) {\n return 'all';\n }\n if (singleClassReport[0].TrackingGroup.length > 0) {\n return singleClassReport[0].TrackingGroup[0].ClassID;\n }\n }\n return null;\n case 'all':\n return 'all';\n default:\n return Number(match.params.classID);\n }\n };\n\n // Selected Class ID State\n const [classID, setClassID] = useState(setInitialClassID());\n const sortingOrderHashmap = {\n 1: [\n 'score',\n 'desc',\n t(`track-assignment-multi-class:single.scoreHL`, 'Score ( High to Low )')\n ],\n 2: [\n 'score',\n 'asc',\n t(`track-assignment-multi-class:single.scoreLH`, 'Score ( Low to High )')\n ],\n 3: [\n 'FullName',\n 'asc',\n t(`track-assignment-multi-class:single.nameAZ`, 'Name ( A-Z )')\n ]\n };\n const [scoresOrder, setScoresOrder] = useState(3);\n // Question Pagination State\n const [questionsPage, setQuestionsPage] = useState(1);\n // Question Summary Modal States\n const [showQuestionSummary, setShowQuestionSummary] = useState(false);\n const [questionSummaryData, setQuestionSummaryData] = useState(null);\n // Student Summary Modal States\n const [showStudentSummary, setShowStudentSummary] = useState(false);\n const [selectedStudent, setSelectedStudent] = useState(null);\n // Questions Modal States (Triggered on click of Open HW button)\n const [showQuestionsModal, setShowQuestionsModal] = useState(false);\n const hideQuestionModal = () => {\n setShowQuestionsModal(false);\n };\n\n // Event handlers to hide modals\n const hideQuestionSummary = () => {\n setShowQuestionSummary(false);\n };\n const hideStudentSummary = () => {\n setShowStudentSummary(false);\n };\n\n let questions = null;\n let classDetails = null;\n let studentScores;\n if (singleClassReport.length > 0) {\n // Set questions\n if (singleClassReport[0].hasOwnProperty('Questions')) {\n questions = singleClassReport[0].Questions.sort(\n compareValues('DisplayOrder', 'asc')\n );\n }\n\n // Set classDetails\n if (classID === 'all') {\n if (singleClassReport[0].TrackingIndividual !== null) {\n classDetails = singleClassReport[0].TrackingIndividual;\n }\n } else if (singleClassReport[0].TrackingGroup.length > 0) {\n classDetails = getClass(singleClassReport[0].TrackingGroup, classID);\n }\n // Calculate scores\n if (classID === 'all') {\n if (singleClassReport[0].TrackingIndividual !== null) {\n studentScores = parseQuestionResult(\n singleClassReport[0].TrackingIndividual.QuestionResult,\n singleClassReport[0].Questions,\n singleClassReport[0].TrackingIndividual.Students\n );\n }\n } else if (singleClassReport[0].TrackingGroup.length > 0) {\n studentScores = parseQuestionResult(\n classDetails.QuestionResult,\n singleClassReport[0].Questions,\n classDetails.Students\n );\n }\n }\n\n // Popup States\n const [showDownloadCSVModal, setShowDownloadCSVModal] = useState(false);\n\n // Modal Event Handlers\n const hideDownloadCSVModal = () => {\n setShowDownloadCSVModal(false);\n };\n\n useEffect(() => {\n dispatch(\n fetchSingleClassReportRequest({\n homeworkID\n })\n );\n return () => {\n dispatch(clearSingleClassReport());\n };\n }, [dispatch, homeworkID]);\n\n const [classInfo, setClassInfo] = useState(null);\n // Set classDetails\n useEffect(() => {\n if (singleClassReport.length > 0) {\n // Set classDetails\n if (classID === 'all') {\n if (singleClassReport[0].TrackingIndividual !== null) {\n setClassInfo(singleClassReport[0].TrackingIndividual);\n }\n } else if (singleClassReport[0].TrackingGroup.length > 0) {\n setClassInfo(getClass(singleClassReport[0].TrackingGroup, classID));\n }\n }\n }, [classID, singleClassReport]);\n\n return (\n <>\n {isSingleClassReportLoading && \n \n {\n if (assignmentSummaryHistory === 'others') {\n history.push(`/track-assignment/others/${selectedTeacher}`);\n } else {\n history.push('/track-assignment');\n }\n }}\n >\n {`< ${t(`track-assignment-multi-class:main.back`, `Back`)}`}\n \n \n
\n {singleClassReport[0].TrackingGroup.length > 1 && (\n {\n history.push(`/track-assignment/homework/${homeworkID}`);\n }}\n >\n {t(`track-assignment-multi-class:main.all`, `All`)}\n \n )}\n {singleClassReport[0].TrackingIndividual !== null && (\n {\n setClassID('all');\n }}\n >\n {t(\n `track-assignment-multi-class:main.assignedStud`,\n `Assigned Students`\n )}\n \n )}\n {singleClassReport[0].TrackingGroup.length > 0 &&\n singleClassReport[0].TrackingGroup.map(classGroup => (\n {\n setClassID(classGroup.ClassID);\n }}\n >\n {classGroup.ClassName}\n \n ))}\n
\n
\n \n {\n const div = document.getElementsByClassName(\n 'report-tabs'\n );\n div[0].scrollLeft -= 100;\n }}\n >\n {'<'}\n \n {\n const div = document.getElementsByClassName(\n 'report-tabs'\n );\n div[0].scrollLeft += 100;\n }}\n >\n {'>'}\n \n \n \n
\n
\n
\n {singleClassReport[0].HomeWorkTitle} \n
\n
\n {t(\n `track-assignment-multi-class:main.assignBy`,\n 'Assigned by: '\n )}\n {singleClassReport[0].TeacherName}\n \n
{`${moment(\n singleClassReport[0].StartDate\n ).format('DD/MM/YYYY')} - ${moment(\n singleClassReport[0].Deadline\n ).format('DD/MM/YYYY')}`} \n {classDetails && (\n
\n {' '}\n
\n
\n {t(\n `track-assignment-multi-class:single.submitted`,\n 'Submitted'\n )}{' '}\n {`${classDetails.TotalSubmission}/${classDetails.TotalAssignee}`}\n \n
\n )}\n
\n \n {t(`track-assignment-multi-class:main.url`, 'URL: ')}\n {`${homeworkLink}${homeworkID}`} \n \n \n {t(`track-assignment-multi-class:main.copy`, 'Copy')}\n \n
\n
\n
\n
{\n const win = window.open(\n `${process.env.REACT_APP_DOMAIN}${\n process.env.REACT_APP_SUBDOMAIN\n }${\n process.env.REACT_APP_SUBDOMAIN === '/' ? '' : '/'\n }print/${homeworkID}`,\n '_blank'\n );\n if (win != null) {\n win.focus();\n }\n }}\n >\n {\n history.push(`/leaderboard/${homeworkID}`);\n }}\n >\n {\n setShowDownloadCSVModal(true);\n }}\n >\n {\n setShowQuestionsModal(true);\n }}\n >\n \n
\n
\n
\n \n {t(`track-assignment-multi-class:single.sortBy`, 'Sort by')}\n \n \n \n {sortingOrderHashmap[scoresOrder][2]}\n \n \n {\n event.preventDefault();\n setScoresOrder(1);\n }}\n className=\"sorting-dropdown-item\"\n >\n {t(\n `track-assignment-multi-class:single.scoreHL`,\n 'Score ( High to Low )'\n )}\n \n {\n event.preventDefault();\n setScoresOrder(2);\n }}\n className=\"sorting-dropdown-item\"\n >\n {t(\n `track-assignment-multi-class:single.scoreLH`,\n 'Score ( Low to High )'\n )}\n \n {\n event.preventDefault();\n setScoresOrder(3);\n }}\n className=\"sorting-dropdown-item\"\n >\n {t(\n `track-assignment-multi-class:single.nameAZ`,\n 'Name ( A-Z )'\n )}\n \n \n \n
\n
\n {TYPES.map(item => (\n setType(item.value)}\n >\n {item.label}\n \n ))}\n \n
\n
\n
\n \n \n \n \n {t(\n `track-assignment-multi-class:single.name`,\n 'Name'\n )}\n \n \n \n \n {t(\n `track-assignment-multi-class:single.score`,\n 'Score'\n )}\n \n \n {questions &&\n questions\n .slice((questionsPage - 1) * 10, questionsPage * 10)\n .map((question, index) => (\n \n \n 0 && 'has-submissions'} ${type}`}\n onClick={() => {\n setQuestionSummaryData({\n question,\n answers:\n studentScores.byQuestion[\n (questionsPage - 1) * 10 + index + 1\n ]\n });\n setShowQuestionSummary(true);\n }}\n >\n {type === TYPES[0].value ? (\n total + num,\n 0\n ),\n wrong: Object.values(\n studentScores.byQuestion[\n (questionsPage - 1) * 10 + index + 1\n ].wrong\n ).reduce(\n (total, { num }) => total + num,\n 0\n ),\n notSubmitted:\n classDetails.TotalAssignee -\n classDetails.TotalSubmission\n }}\n />\n ) : (\n <>\n total + num,\n 0\n )}\n />\n total + num,\n 0\n )}\n />\n \n )}\n {`Q${question.DisplayOrder}`} \n \n \n ))}\n \n \n \n {studentScores && (scoresOrder === 1 || scoresOrder === 2)\n ? studentScores.byStudent\n .filter(student => student.hasSubmitted === true)\n .sort(\n compareValues(\n sortingOrderHashmap[scoresOrder][0],\n sortingOrderHashmap[scoresOrder][1]\n )\n )\n .map(student => (\n \n {\n setSelectedStudent(student.ID);\n setShowStudentSummary(true);\n }}\n >\n \n {student.FullName.toUpperCase()}\n \n \n {\n setSelectedStudent(student.ID);\n setShowStudentSummary(true);\n }}\n >\n {student.hasSubmitted ? (\n <>\n \n {student.score}\n \n {` / ${singleClassReport[0].TotalQuestion}`}\n \n ) : (\n \n \n \n ))\n : studentScores.byStudent\n .sort(\n compareValues(\n sortingOrderHashmap[scoresOrder][0],\n sortingOrderHashmap[scoresOrder][1]\n )\n )\n .map(student => (\n \n {\n if (student.hasSubmitted === true) {\n setSelectedStudent(student.ID);\n setShowStudentSummary(true);\n } else {\n return null;\n }\n }}\n >\n \n {student.FullName.toUpperCase()}\n \n \n {\n if (student.hasSubmitted === true) {\n setSelectedStudent(student.ID);\n setShowStudentSummary(true);\n } else {\n return null;\n }\n }}\n >\n {student.hasSubmitted ? (\n <>\n \n {student.score}\n \n {` / ${singleClassReport[0].TotalQuestion}`}\n \n ) : (\n \n \n \n ))}\n {studentScores &&\n (scoresOrder === 1 || scoresOrder === 2) &&\n studentScores.byStudent\n .filter(student => student.hasSubmitted === false)\n .sort(\n compareValues(\n sortingOrderHashmap[3][0],\n sortingOrderHashmap[3][1]\n )\n )\n .map(student => (\n \n {\n if (student.hasSubmitted === true) {\n setSelectedStudent(student.ID);\n setShowStudentSummary(true);\n } else {\n return null;\n }\n }}\n >\n {student.FullName.toUpperCase()} \n \n {\n if (student.hasSubmitted === true) {\n setSelectedStudent(student.ID);\n setShowStudentSummary(true);\n } else {\n return null;\n }\n }}\n >\n {student.hasSubmitted ? (\n <>\n \n {student.score}\n \n {` / ${singleClassReport[0].TotalQuestion}`}\n \n ) : (\n \n \n ))}\n \n
\n {questions.length > 10 && (\n
\n )}\n
\n
\n )}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const TrackAssignmentPage = styled.main`\n .assignment-content {\n padding-right: 2rem;\n position: absolute;\n top: 50px;\n left: 240px;\n width: calc(100vw - 240px);\n }\n\n @media (max-width: 1024px) {\n .assignment-content {\n padding-right: 2rem;\n position: absolute;\n top: 50px;\n left: 80px;\n width: calc(100vw - 80px);\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport SidebarTrackAssignment from 'components/Sidebar/SidebarTrackAssignment';\nimport Sidebar from 'components/Sidebar/Sidebar';\nimport Overlay from 'components/Content/Overlay';\nimport Header from 'components/Header/Header';\nimport AssignmentSummary from './AssignmentSummary';\nimport OtherAssignments from './OtherAssignments';\nimport MultiClassReport from './MultiClassReport';\nimport SingleClassReport from './SingleClassReport';\nimport { TrackAssignmentPage } from './TrackAssignment.styles';\n\nexport default function TrackAssignment() {\n const [expanded, setExpanded] = useState(false);\n const toggleNavigation = () => setExpanded(!expanded);\n\n return (\n <>\n \n \n \n \n
\n
\n \n
\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport { Link, useLocation } from 'react-router-dom';\nimport manageClass from 'assets/img/icon-manage-class-class.svg';\nimport myGroup from 'assets/img/icon-manage-class-group.svg';\nimport gameSetting from 'assets/img/icon-game-setting.svg';\nimport { featureToggle } from 'constants/index';\n\nexport default function SidebarManageClass() {\n const { t } = useTranslation(['manage-class']);\n const { isAdmin } = useSelector(state => state.login);\n const { pathname } = useLocation();\n const isActivePath = path => path === pathname;\n return (\n \n
\n \n \n {t(`manage-class:sidebar.manageClass`, 'Manage Class')} \n \n \n \n \n {t(`manage-class:sidebar.myGroups`, 'My Groups')} \n \n \n {featureToggle.myGroups && (\n \n \n {t(`manage-class:sidebar.myGroups`, 'My Groups')} \n \n \n )}\n {isAdmin && (\n <>\n \n \n \n {t(`manage-class:sidebar.allPvtGroups`, 'All Private Groups')}\n \n \n \n \n \n \n {t(`manage-class:sidebar.addPvtGroups`, 'Add Private Groups')}\n \n \n \n \n )}\n \n \n \n {t(`manage-class:sidebar.mathGameSetting`, 'Math Game Setting')}\n \n \n \n \n
\n {isLoading && (\n \n \n {t('manage-class-private-group:add.loading', 'Loading...')}\n \n \n )}\n {students.length > 0 ? (\n <>\n \n
\n \n \n \n {t(\n 'manage-class-private-group:add.table.username',\n 'Username'\n )}\n \n \n {t('manage-class-private-group:add.table.name', 'Name')}\n \n \n {t('manage-class-private-group:add.table.school', 'School')}\n \n \n {t('manage-class-private-group:add.table.level', 'Level')}\n \n \n {t('manage-class-private-group:add.table.class', 'Class')}\n \n \n \n \n \n \n {students.map(student => (\n \n {student.UserName} \n {student.DisplayName} \n {student.SchoolName} \n {student.LevelId} \n {student.ClassName} \n \n \n \n ))}\n \n
\n
\n {dontHaveData && keyword === '' ? (\n
\n {t(\n 'manage-class-private-group:add.studentSearch',\n 'Please do a Students Search'\n )}\n \n ) : (\n \n {t(\n 'manage-class-private-group:add.notFound',\n 'Student Not found'\n )}\n \n )}\n \n )}\n {!dontHaveData && (\n \n \n \n \n {t('manage-class-private-group:add.prev', 'Previous')}\n \n \n \n \n {t('manage-class-private-group:add.next', 'Next')}\n \n \n \n \n )}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const Header = styled.div`\n margin-top: 2rem;\n padding-right: 250px;\n padding-left: 205px;\n @media (max-width: 1024px) {\n padding-left: 66px;\n }\n @media (max-width: 640px) {\n padding-left: 0;\n }\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport SidebarRight from 'components/Sidebar/SidebarRight';\nimport { Form } from 'react-bootstrap';\n// eslint-disable-next-line no-unused-vars\nimport Select from 'react-select';\nimport optionsParser from 'helpers/optionsParser';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchStudentsSearchRequest } from 'stores/utils/lookup/actions';\nimport { groupBy, propEq, findIndex } from 'ramda';\nimport StudentList from 'components/ManageClass/StudentsList';\nimport { selectStudents, savePrivateGroup } from 'stores/privateGroup/actions';\nimport Border from 'components/Shared/Border';\nimport AlertModal from 'components/Alert/AlertModal';\nimport { Header } from './GroupAdd.styles';\n\n/**\n * @todo when the UI for empty cart questions done, use cartQuestions from reducer or other resources\n * @note client still not confirm whether cartQuestions is the data we will be use\n */\nexport default function GroupAdd() {\n const { t } = useTranslation(['manage-class-private-group']);\n const dispatch = useDispatch();\n const { levels } = useSelector(state => state.levels);\n // eslint-disable-next-line no-unused-vars\n const levelOptions = optionsParser(levels, 'ID', 'Name');\n const { classes } = useSelector(state => state.lookup);\n const { selectedStudents } = useSelector(state => state.privateGroup);\n\n // const [selectedLevel, setSelectedLevel] = useState([]);\n const [keyword, setKeyword] = useState('');\n const [searchTerm, setSearchTerm] = useState('');\n const [title, setTitle] = useState('');\n\n // message alertt\n const [showSuccess, setShowSuccess] = useState(false);\n const [showFailed, setShowFailed] = useState(false);\n\n // eslint-disable-next-line no-unused-vars\n // const onChangeLevel = value => {\n // if (!isNil(value)) {\n // setSelectedLevel(value[0].value);\n // }\n // };\n // Level on change effect\n // useEffect(() => {\n // dispatch(fetchClassRequest(selectedLevel));\n // }, [dispatch, selectedLevel]);\n\n // eslint-disable-next-line no-unused-vars\n const classOptions = optionsParser(classes, 'ID', 'Name');\n\n const onChangeKeyword = event => {\n setKeyword(event.target.value);\n };\n const onChangeTitle = event => {\n setTitle(event.target.value);\n };\n\n const onClick = () => {\n setSearchTerm(keyword);\n dispatch(fetchStudentsSearchRequest(keyword));\n };\n\n const groupedStudents = groupBy(\n student => student.SchoolName,\n selectedStudents\n );\n\n const saveGroup = () => {\n if (title.trim() !== '') {\n dispatch(savePrivateGroup(title));\n dispatch(selectStudents([]));\n setTitle('');\n setKeyword('');\n setShowSuccess(true);\n } else {\n setShowFailed(true);\n }\n };\n\n const onRemove = userId => {\n const index = findIndex(propEq('UserId', parseInt(userId, 10)))(\n selectedStudents\n );\n const updatedData = [\n ...selectedStudents.slice(0, index),\n ...selectedStudents.slice(index + 1)\n ];\n\n dispatch(selectStudents(updatedData));\n };\n\n return (\n <>\n setShowFailed(false)}\n buttons={\n setShowFailed(false)}\n >\n {t('manage-class-private-group:modal.ok', 'Ok')}\n \n }\n />\n\n setShowSuccess(false)}\n buttons={\n setShowSuccess(false)}\n >\n {t('manage-class-private-group:modal.ok', 'Ok')}\n \n }\n />\n\n \n \n {/* @todo Multi select school */}\n {/* \n \n Class \n Group \n \n */}\n {/* @todo Pending API allow search by level */}\n {/* \n */}\n {/* @todo Pending API allow search by class */}\n {/* \n {}}\n isMulti\n />\n */}\n \n \n \n \n {t('manage-class-private-group:add.submitBtn', 'Submit')}\n \n \n
\n \n \n \n
\n {selectStudents.length > 0 && (\n \n
\n {t(\n 'manage-class-private-group:add.selectedStu',\n 'Selected Students'\n )}\n \n {Object.entries(groupedStudents).map(\n ([studentSchool, schoolOfStudents]) => {\n return (\n
\n {studentSchool}
\n {schoolOfStudents.map(singleStudent => (\n \n
\n {singleStudent.DisplayName}{' '}\n onRemove(singleStudent.UserId)}\n />\n
\n
\n );\n }\n )}\n
\n {t('manage-class-private-group:add.submitBtn', 'Submit')}\n \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const GroupsListPage = styled.div`\n padding-left: 205px;\n @media (max-width: 1024px) {\n padding-left: 66px;\n }\n @media (max-width: 640px) {\n padding-left: 0;\n }\n h5 {\n width: 100%;\n margin: 0.625rem auto 1.875rem auto;\n text-align: center;\n }\n .btn-private {\n padding-bottom: 3px;\n padding-top: 3px;\n margin-left: 15px;\n float: right;\n border: solid 1px rgba(114, 114, 114, 0.15);\n color: #ff5b00;\n &-create {\n float: right;\n margin-top: -55px;\n }\n }\n .list-group {\n .list-group-item {\n vertical-align: center;\n font-size: 18px;\n .list-group-initial {\n min-width: 2.25rem;\n display: inline-block;\n padding-top: 5px;\n padding-bottom: 5px;\n text-transform: uppercase;\n text-align: center;\n border-radius: 50%;\n margin-right: 12px;\n color: #fff;\n background-color: #ff5b00;\n }\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { fetchPrivateGroupsRequest } from 'stores/privateGroup/actions';\nimport { GroupsListPage } from './GroupsList.styles';\n\n/**\n * @todo when the UI for empty cart questions done, use cartQuestions from reducer or other resources\n * @note client still not confirm whether cartQuestions is the data we will be use\n */\nexport default function GroupList() {\n const dispatch = useDispatch();\n const { t } = useTranslation(['manage-class-private-group']);\n\n const [groupName, setGroupName] = useState('');\n const { privateGroups } = useSelector(state => state.privateGroup);\n\n const handleChangeGroupName = group => {\n setGroupName(group);\n };\n\n useEffect(() => {\n dispatch(fetchPrivateGroupsRequest(groupName));\n }, [dispatch, groupName]);\n\n return (\n \n \n {t('manage-class-private-group:all.title', 'Search Private Groups')}\n \n \n {t('manage-class-private-group:all.createBtn', 'Create New')}\n \n \n handleChangeGroupName(event.target.value)}\n />\n \n\n \n {privateGroups.map(group => (\n \n \n {group.Name.substr(0, 1)}\n {' '}\n {group.Name}\n {/* @todo pending API for edit and delete */}\n {/* \n Edit\n \n \n Delete\n */}\n \n ))}\n \n \n );\n}\n","import React, { useState, useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchIconsRequest } from 'stores/manage-class/actions';\nimport {\n EditClassIconSelectorContainer,\n PaginationContainer\n} from './EditClassIconSelector.styles';\n\nexport default function EditClassIconSelector({\n level,\n selectedIconID,\n setSelectedIconID\n}) {\n const dispatch = useDispatch();\n const { icons, iconsLevel } = useSelector(state => state.manageClasses);\n const [currentPage, setCurrentPage] = useState(1);\n const maxPage = Math.ceil(icons.length / 10);\n\n useEffect(() => {\n if (iconsLevel !== level) {\n dispatch(\n fetchIconsRequest({\n level\n })\n );\n }\n }, [dispatch, iconsLevel, level]);\n return (\n \n \n {icons\n .slice((currentPage - 1) * 10, (currentPage - 1) * 10 + 10)\n .map(icon => (\n
{\n setSelectedIconID(icon.Id);\n }}\n >\n \n \n \n {currentPage > 1 && (\n {\n setCurrentPage(currentPage - 1);\n }}\n >\n {'<'}\n \n )}\n {currentPage < maxPage && (\n {\n setCurrentPage(currentPage + 1);\n }}\n >\n {'>'}\n \n )}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const EditClassModalBodyContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: #060606;\n font-size: 0.875rem;\n .field-title {\n font-size: 0.875rem;\n color: rgba(26, 26, 26, 0.45);\n font-weight: 600;\n margin-right: 0.5rem;\n width: 100px;\n text-align: right;\n }\n .edit-class-field {\n display: flex;\n width: 100%;\n flex-direction: row;\n justify-content: flex-start;\n input {\n width: 360px;\n height: 38px;\n padding: 0 0.5rem;\n border: solid 1px rgba(112, 112, 112, 0.36);\n }\n }\n .selected-class-icon {\n width: 82px;\n height: 82px;\n border-radius: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 1rem 0;\n }\n .selection-action-buttons {\n display: flex;\n flex-direction: row;\n border-top: solid 1px rgba(112, 112, 112, 0.22);\n justify-content: space-evenly;\n padding-top: 1rem;\n width: 100%;\n .btn-outline-cancel {\n color: #ff5b00;\n border: solid 1px #d5d5d5;\n width: 127px;\n &:hover {\n border-color: #ff5b00;\n background: #fff7f3;\n }\n }\n .btn-ok {\n width: 127px;\n color: #fffdfc;\n background: #ff5b00;\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button, Spinner } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { editClassRequest } from 'stores/manage-class/actions';\nimport { LevelColors } from 'constants/index';\nimport EditClassIconSelector from 'components/ManageClass/EditClassIconSelector';\nimport { EditClassModalBodyContainer } from './EditClassModalBody.styles';\n\nexport default function EditClassModalBody({\n hide,\n selectedClass,\n selectedYear\n}) {\n const { t } = useTranslation(['manage-class']);\n const dispatch = useDispatch();\n const { isLoading, editClassResult, error, icons } = useSelector(\n state => state.manageClasses\n );\n\n const [className, setClassName] = useState(selectedClass.Name);\n const [selectedIconID, setSelectedIconID] = useState(selectedClass.IconId);\n const currentIconIndex = icons.findIndex(icon => icon.Id === selectedIconID);\n\n useEffect(() => {\n if (editClassResult === true) {\n hide();\n }\n }, [editClassResult, hide]);\n return (\n \n \n
\n {t(`manage-class:editGroup.year`, 'Year')}\n \n
{selectedYear}
\n
\n \n {t(`manage-class:editGroup.className`, 'Class name')}\n \n {\n setClassName(e.target.value);\n }}\n />\n
\n\n \n {currentIconIndex !== -1 ? (\n {selectedClass.Name.slice(0, 1).toUpperCase()} \n )}\n \n\n \n \n {t(`manage-class:editGroup.classIcon`, 'Class icon')}\n \n
\n\n {error && {error} }\n \n {\n hide();\n }}\n >\n {t(`manage-class:editGroup.cancel`, 'Cancel')}\n \n {\n dispatch(\n editClassRequest({\n classID: selectedClass.ID,\n className,\n iconID: selectedIconID\n })\n );\n }}\n >\n {t(`manage-class:editGroup.save`, 'Save')}\n {isLoading && (\n
\n \n );\n}\n","const sortStudentsByClass = students => {\n const sortedStudents = [];\n for (const student of students) {\n const hasClass = sortedStudents.findIndex(\n item => item.classID === student.ClassID\n );\n if (hasClass === -1) {\n sortedStudents.push({\n classID: student.ClassID,\n students: [student]\n });\n } else {\n sortedStudents[hasClass].students.push(student);\n }\n }\n return sortedStudents;\n};\n\nexport default sortStudentsByClass;\n","import styled from 'styled-components';\n\nexport const ResetPwContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: #060606;\n font-size: 0.875rem;\n gap: 1.8rem;\n p {\n margin-bottom: 0;\n }\n .success-title {\n font-size: 1.125rem;\n color: #4dae30;\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: -2.5rem;\n }\n .desc {\n width: 90%;\n padding: 0 2.5rem;\n }\n .btn-success-ok {\n width: 127px;\n color: #fffdfc;\n background: #5ed46a;\n margin-bottom: 1rem;\n }\n .reset-title {\n color: #ff5b00;\n font-size: 1.125rem;\n }\n .err {\n color: #ff5b00;\n }\n .selection-action-buttons {\n display: flex;\n flex-direction: row;\n border-top: solid 1px rgba(112, 112, 112, 0.22);\n justify-content: space-evenly;\n padding-top: 1rem;\n width: 100%;\n margin-top: 1rem;\n .btn-outline-cancel {\n color: #ff5b00;\n border: solid 1px #d5d5d5;\n width: 127px;\n &:hover {\n border-color: #ff5b00;\n background: #fff7f3;\n }\n }\n .btn-ok {\n width: 127px;\n color: #fffdfc;\n background: #ff5b00;\n }\n }\n`;\n\nexport const Sample = styled.div`\n border: 1px solid #d1d1d1;\n display: flex;\n padding: 0.8rem;\n gap: 2rem;\n`;\n","import React from 'react';\nimport { useTranslation, Trans } from 'react-i18next';\nimport { Button, Spinner } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { resetPwRequest } from 'stores/manage-class/actions';\nimport successIcon from 'assets/img/icon-manage-class-success-check.svg';\nimport { ResetPwContainer, Sample } from './ResetPwModalBody.styles';\n\nexport default function ResetPwModalBody({ hide, studentID }) {\n const { t } = useTranslation(['manage-class']);\n const dispatch = useDispatch();\n const { isLoading, resetPwResult, error } = useSelector(\n state => state.manageClasses\n );\n return (\n \n {resetPwResult === true ? (\n <>\n \n \n \n \n You have successfully reset the password\n to the same as the student’s Login ID! \n \n
\n \n \n \n e.g. Login ID: abc123 \n \n
\n \n \n Reset Password: abc123 \n \n
\n \n {\n hide();\n }}\n >\n {t(`manage-class:studModal.ok`, 'OK')}\n \n \n ) : (\n <>\n \n {t(`manage-class:resetModal.resetPswd`, 'Reset Password')}\n
\n \n {t(\n `manage-class:resetModal.resetConfirm`,\n 'Do you want to reset the password?'\n )}\n
\n {error && {error} }\n \n {\n hide();\n }}\n >\n {t(`manage-class:resetModal.no`, 'No')}\n \n {\n dispatch(\n resetPwRequest({\n studentID\n })\n );\n }}\n >\n {t(`manage-class:resetModal.yes`, 'Yes')}\n {isLoading && (\n
\n \n )}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const StudentDetailsModalContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: #0a0a0a;\n font-size: 0.875rem;\n .student-details-section {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0 1rem;\n border-bottom: solid 1px rgba(112, 112, 112, 0.39);\n .student-details-name {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n span {\n margin-left: 0.5rem;\n color: #363636;\n }\n }\n .student-details-row {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n width: 100%;\n margin-top: 0.5rem;\n @media (max-width: 975px) {\n flex-direction: column;\n align-items: flex-start;\n }\n .student-details-field {\n display: flex;\n flex-direction: row;\n margin-right: 1rem;\n margin-top: 1rem;\n }\n }\n }\n .placeholder-title {\n font-size: 0.75rem;\n color: rgba(10, 10, 10, 0.39);\n margin-right: 1rem;\n text-align: right;\n }\n .field-group-1 {\n width: 150px;\n }\n .field-group-2 {\n width: 100px;\n }\n .group-1 {\n width: 50px;\n @media (max-width: 1400px) {\n text-align: left;\n }\n @media (max-width: 975px) {\n width: initial;\n }\n }\n .group-2 {\n width: 100px;\n @media (max-width: 975px) {\n text-align: left;\n width: initial;\n }\n }\n .group-3 {\n width: 100px;\n @media (max-width: 1400px) {\n text-align: left;\n }\n @media (max-width: 975px) {\n width: initial;\n }\n }\n .parent-section {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 1rem 1rem;\n border-bottom: solid 1px rgba(112, 112, 112, 0.39);\n .parent-details-row {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n margin-bottom: 1rem;\n flex-wrap: wrap;\n .parent-details-field {\n margin-right: 1rem;\n width: 30%;\n .parent-detail-email {\n color: #ff5b00;\n text-decoration: underline;\n }\n }\n }\n }\n .selection-action-buttons {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n padding-top: 1rem;\n width: 100%;\n .btn-ok {\n width: 127px;\n color: #fffdfc;\n background: #ff5b00;\n }\n }\n`;\n","import React, { useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchStudentDetailsRequest } from 'stores/manage-class/actions';\nimport { Button } from 'react-bootstrap';\nimport moment from 'moment';\nimport { compareValues } from 'helpers/singleClassReport';\nimport SchoolPlanIcon from 'assets/img/icon-manage-class-student-list-plan-school.svg';\nimport StandardPlanIcon from 'assets/img/icon-manage-class-student-list-plan-standard.svg';\nimport PremiumPlanIcon from 'assets/img/icon-manage-class-student-list-plan-premium.svg';\nimport LinkedIcon from 'assets/img/icon-manage-class-linked-active.svg';\nimport avatarPlaceholder from 'assets/img/avatar.png';\nimport Spinner from 'components/Shared/Spinner';\nimport { StudentDetailsModalContainer } from './StudentDetailsModalBody.styles';\n\n// Helper to parse parent/s details\nconst parseParents = data => {\n const parentTypes = {\n 0: 'Unlinked',\n 1: 'Father',\n 2: 'Mother',\n 3: 'Others'\n };\n const result = [];\n // Check for respective parent details\n for (const parent of data) {\n if (\n parent.ParentName !== null ||\n parent.ParentEmail !== null ||\n parent.PhoneNumber !== null\n ) {\n result.push({\n type:\n parent.RelationshipType !== 3 && parent.RelationshipType !== 0\n ? parentTypes[parent.RelationshipType]\n : '',\n order: parent.RelationshipType === 0 ? 4 : parent.RelationshipType,\n name: parent.ParentName,\n email: parent.ParentEmail,\n phone: parent.PhoneNumber,\n hasLinked: parent.RelationshipType !== 0\n });\n }\n }\n return result.sort(compareValues('order', 'asc'));\n};\n\nconst getPlanIcon = planID => {\n switch (planID) {\n case 0:\n return SchoolPlanIcon;\n case 2:\n return StandardPlanIcon;\n case 3:\n return PremiumPlanIcon;\n case 5:\n return PremiumPlanIcon;\n case 6:\n return PremiumPlanIcon;\n default:\n return null;\n }\n};\n\nexport default function StudentDetailsModalBody({ hide, studentID }) {\n const { t } = useTranslation(['manage-class']);\n const dispatch = useDispatch();\n const { studentDetails, isStudentDetailsLoading } = useSelector(\n state => state.manageClasses\n );\n let parents;\n if (\n studentDetails.hasOwnProperty('Parents') &&\n studentDetails.Parents.length\n ) {\n parents = parseParents(studentDetails.Parents);\n } else {\n parents = [];\n }\n useEffect(() => {\n dispatch(\n fetchStudentDetailsRequest({\n studentID\n })\n );\n }, [dispatch, studentID]);\n return (\n \n {isStudentDetailsLoading && \n
\n
{\n e.target.src = avatarPlaceholder;\n }}\n src={studentDetails.ProfileImage}\n alt=\"Student Profile\"\n width=\"40px\"\n height=\"40px\"\n style={{\n borderRadius: '50%'\n }}\n />\n \n {studentDetails.DisplayName} \n \n \n
\n
\n \n {t(`manage-class:searchResult.loginId`, 'Login ID')}\n \n {studentDetails.UserName} \n
\n
\n \n {t(`manage-class:searchResult.password`, 'Password')}\n \n \n {studentDetails.password === null\n ? 'N.A'\n : studentDetails.password}\n \n
\n
\n \n {t(\n `manage-class:studModal.accActiveDate`,\n 'Account Activation Date'\n )}\n \n \n {studentDetails.ActivationDate === null\n ? 'N.A'\n : moment(studentDetails.ActivationDate).format(\n 'DD/MM/YYYY'\n )}\n \n
\n
\n
\n \n \n {t(`manage-class:studModal.class`, 'Class')}\n \n \n {studentDetails.ClassName}\n \n
\n \n
\n {t(`manage-class:studModal.subPlan`, 'Subscription Plan')}\n \n
\n {getPlanIcon(studentDetails.PlanId) !== null && (\n \n
\n \n {t(`manage-class:studModal.validPeriod`, 'Valid Period')}\n \n {`${moment(studentDetails.ValidStartDate).format(\n 'DD/MM/YYYY'\n )} - ${moment(studentDetails.ValidEndDate).format(\n 'DD/MM/YYYY'\n )}`} \n
\n ) : (\n \n \n {t(`manage-class:studModal.validPeriod`, 'Valid Period')}\n \n\n N.A \n
\n )}\n \n
\n
\n \n {parent.name === null ? (\n N.A \n ) : (\n \n {parent.type} {t(`manage-class:search.name`, 'Name')}\n \n )}\n \n {parent.name} \n
\n
\n
\n
\n PH \n {parent.phone === null || parent.phone.length === 0 ? (\n N.A \n ) : (\n {parent.phone} \n )}\n
\n
\n \n {t(`manage-class:studModal.email`, 'Email')}\n \n {parent.email === null ? (\n N.A \n ) : (\n \n {parent.email}\n \n )}\n
\n {parent.hasLinked && (\n
\n
\n
\n {t(\n `manage-class:studModal.linkedParent`,\n 'Linked with Parent APP'\n )}\n \n
\n )}\n
\n
\n {\n hide();\n }}\n >\n {t(`manage-class:studModal.ok`, 'OK')}\n \n
\n \n )}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const PaginationContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n font-size: 0.9375rem;\n font-weight: 600;\n color: #1c1b1b;\n padding: 2rem 1rem;\n @media only screen and (max-width: 768px) {\n font-size: 10px;\n }\n input {\n border: solid 1px #cecece;\n }\n .next-prev-page {\n margin-right: 1rem;\n @media only screen and (max-width: 768px) {\n margin-right: 5px;\n }\n .btn-outline-page-primary {\n background: #fff;\n border: solid 1px #cecece;\n font-weight: 600;\n margin-left: 1rem;\n @media only screen and (max-width: 768px) {\n font-size: 10px;\n margin-left: 5px;\n }\n }\n .btn-outline-page-primary.selected {\n color: #fff;\n background: #ff5b00;\n @media only screen and (max-width: 768px) {\n font-size: 10px;\n }\n }\n .btn-outline-page-primary:hover {\n color: #ff5b00;\n }\n .btn-outline-page-primary.disabled,\n .btn-outline-page-primary:disabled {\n color: #d8d8d8;\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { PaginationContainer } from './Pagination.styles';\n\nexport default function Pagination({ currentPage, setPage }) {\n const { t } = useTranslation(['create-assign-saved']);\n const { maxSearchPages } = useSelector(state => state.manageClasses);\n const [debouncedCallback] = useDebouncedCallback(value => {\n setPage(value);\n }, 2000);\n return (\n \n \n setPage(currentPage - 1)}\n >\n < {t(`create-assign-saved:pagination.prev`, 'Prev')}\n \n {currentPage === 1 && (\n <>\n \n {currentPage}\n \n {maxSearchPages >= 2 && (\n setPage(currentPage + 1)}\n >\n {currentPage + 1}\n \n )}\n {maxSearchPages >= 3 && (\n setPage(currentPage + 2)}\n >\n {currentPage + 2}\n \n )}\n \n )}\n {currentPage > 1 && currentPage < maxSearchPages && (\n <>\n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n setPage(currentPage + 1)}\n >\n {currentPage + 1}\n \n \n )}\n {currentPage === 2 && currentPage === maxSearchPages && (\n <>\n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n \n )}\n {currentPage > 2 && currentPage === maxSearchPages && (\n <>\n setPage(currentPage - 2)}\n >\n {currentPage - 2}\n \n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n \n )}\n = maxSearchPages}\n onClick={() => setPage(currentPage + 1)}\n >\n {t(`create-assign-saved:pagination.next`, 'Next')} >\n \n
\n \n {t(`create-assign-saved:pagination.page`, 'Page')}\n {\n e.preventDefault();\n if (\n e.target.value !== currentPage &&\n e.target.value >= 1 &&\n e.target.value <= maxSearchPages\n ) {\n debouncedCallback(parseInt(e.target.value));\n }\n }}\n />{' '}\n {t(`create-assign-saved:pagination.of`, 'of')} {maxSearchPages}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const MatchedResultSpan = styled.span`\n .result-highlighted-match {\n color: #ff5b00;\n background: #fff;\n }\n`;\n","import React from 'react';\nimport { MatchedResultSpan } from './MatchedResult.styles';\n\nexport default function MatchedResult({ result, searchTerm }) {\n const lowercaseResult = result.toLowerCase();\n const lowercaseSearchTerm = searchTerm.toLowerCase();\n const stringArray = lowercaseResult.split(lowercaseSearchTerm);\n const output = [];\n let originalStringIndex = 0;\n for (let i = 0; i < stringArray.length; i++) {\n if (i > 0) {\n output.push(\n result.slice(\n originalStringIndex,\n originalStringIndex + searchTerm.length\n )\n );\n originalStringIndex += searchTerm.length;\n }\n output.push(\n result.slice(\n originalStringIndex,\n originalStringIndex + stringArray[i].length\n )\n );\n originalStringIndex += stringArray[i].length;\n }\n return (\n \n {output.map((text, index) => {\n if (text.toLowerCase() === searchTerm.toLowerCase()) {\n return (\n \n {`${text}`} \n \n );\n }\n return <>{`${text}`};\n })}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const SearchResultContainer = styled.div`\n .empty-result {\n display: flex;\n justify-content: center;\n margin-top: 250px;\n }\n .search-result-labels {\n display: grid;\n grid-template-columns: repeat(15, 1fr);\n .login_id {\n grid-column: 6/8;\n text-align: center;\n }\n .pswd {\n grid-column: 8/10;\n text-align: center;\n }\n .activation_date {\n grid-column: 10/12;\n text-align: center;\n }\n .status {\n grid-column: 12/14;\n text-align: center;\n }\n }\n .search-result-container {\n display: flex;\n flex-direction: column;\n margin: 0px 50px;\n width: 100%;\n .class-name {\n font-size: 14px;\n font-weight: 600;\n color: #1a1a1a;\n margin-bottom: 10px;\n }\n .table {\n background-color: white;\n .table-bordered {\n display: flex;\n flex-direction: column;\n border: none;\n .table-content {\n display: grid;\n grid-template-columns: repeat(15, 1fr);\n font-size: 14px;\n text-align: center;\n @media only screen and (max-width: 1024px) {\n font-size: 12px;\n }\n @media only screen and (max-width: 768px) {\n font-size: 10px;\n }\n .name {\n grid-column: 1/6;\n display: flex;\n overflow-wrap: break-word;\n text-align: left;\n img {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n margin-right: 10px;\n @media only screen and (max-width: 768px) {\n width: 25px;\n height: 25px;\n margin-right: 5px;\n }\n }\n span {\n img {\n width: 22px;\n height: 22px;\n margin-left: -25px;\n margin-bottom: -40px;\n @media only screen and (max-width: 768px) {\n width: 15px;\n height: 15px;\n margin-left: -15px;\n margin-bottom: -30px;\n }\n }\n }\n p {\n margin-left: 3px;\n }\n }\n .login {\n grid-column: 6/8;\n overflow-wrap: break-word;\n }\n .password {\n grid-column: 8/10;\n overflow-wrap: break-word;\n .rest-pswd {\n background: none;\n border: none;\n color: #ff723d;\n font-size: 13px;\n text-decoration: underline;\n margin-left: 10px;\n @media only screen and (max-width: 768px) {\n font-size: 8px;\n margin-left: 3px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n }\n }\n .active-date {\n grid-column: 10/12;\n overflow-wrap: break-word;\n }\n .link {\n grid-column: 12/14;\n }\n .details {\n grid-column: 14/16;\n button {\n @media only screen and (max-width: 768px) {\n padding: 5px;\n }\n }\n .btn-outline-primary:focus {\n background-color: transparent;\n color: #ff723d;\n }\n }\n }\n }\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { isNil } from 'ramda';\nimport moment from 'moment';\nimport { useDebounce } from 'use-debounce';\nimport {\n searchStudentRequest,\n resetPwResultAction,\n resetError\n} from 'stores/manage-class/actions';\nimport EmptySearchResults from 'assets/img/empty-search-results.svg';\nimport SchoolPlanIcon from 'assets/img/icon-manage-class-student-list-plan-school.svg';\nimport StandardPlanIcon from 'assets/img/icon-manage-class-student-list-plan-standard.svg';\nimport PremiumPlanIcon from 'assets/img/icon-manage-class-student-list-plan-premium.svg';\nimport avatarPlaceholder from 'assets/img/avatar.png';\nimport sortStudentsByClass from 'helpers/parseStudentSearchResults';\nimport Spinner from 'components/Shared/Spinner';\nimport PopupModal from './PopupModal';\nimport ResetPwModalBody from './ResetPwModalBody';\nimport StudentDetailsModalBody from './StudentDetailsModalBody';\nimport Pagination from './PaginationSearch';\nimport MatchedResult from './MatchedResult';\nimport { SearchResultContainer } from './SearchResults.styles';\n\nexport default function SearchResults({ searchTerm, searchType }) {\n const { t } = useTranslation(['manage-class']);\n const [debouncedSearchTerm] = useDebounce(searchTerm, 2000);\n const getPlanIcon = planID => {\n switch (planID) {\n case 0:\n return SchoolPlanIcon;\n case 2:\n return StandardPlanIcon;\n case 3:\n return PremiumPlanIcon;\n case 5:\n return PremiumPlanIcon;\n case 6:\n return PremiumPlanIcon;\n default:\n return null;\n }\n };\n\n const [showStudentDetailsModal, setShowStudentDetailsModal] = useState(false);\n const [selectedStudentID, setSelectedStudentID] = useState(null);\n\n const hideStudentDetailsModal = () => {\n setShowStudentDetailsModal(false);\n };\n\n const dispatch = useDispatch();\n const { searchResults, isLoading, classes, resetPwResult } = useSelector(\n state => state.manageClasses\n );\n const [currentPage, setCurrentPage] = useState(1);\n const sortedSearch = searchResults.hasOwnProperty('List')\n ? sortStudentsByClass(searchResults.List)\n : [];\n const [showResetPwModal, setShowResetPwModal] = useState(false);\n\n useEffect(() => {\n if (searchType === t(`manage-class:search.name`)) {\n dispatch(\n searchStudentRequest({\n pageNum: currentPage,\n searchName: debouncedSearchTerm.trim(),\n searchID: null,\n schoolID: classes.ID\n })\n );\n } else {\n dispatch(\n searchStudentRequest({\n pageNum: currentPage,\n searchName: null,\n searchID: debouncedSearchTerm.trim(),\n schoolID: classes.ID\n })\n );\n }\n // eslint-disable-next-line\n }, [currentPage, dispatch, debouncedSearchTerm, searchType, classes.ID]);\n\n const hideResetPwModal = () => {\n if (resetPwResult === true) {\n if (searchType === t(`manage-class:search.name`)) {\n dispatch(\n searchStudentRequest({\n pageNum: currentPage,\n searchName: debouncedSearchTerm.trim(),\n searchID: null,\n schoolID: classes.ID\n })\n );\n } else {\n dispatch(\n searchStudentRequest({\n pageNum: currentPage,\n searchName: null,\n searchID: debouncedSearchTerm.trim(),\n schoolID: classes.ID\n })\n );\n }\n }\n dispatch(resetError());\n dispatch(resetPwResultAction());\n setShowResetPwModal(false);\n };\n\n const openResetPwModal = () => {\n dispatch(resetError());\n setShowResetPwModal(true);\n };\n\n const passwordFormat = (pass, username) => {\n if (isNil(pass)) {\n return 'N.A';\n }\n if (pass === username) {\n return t(`manage-class:studList.sameAsId`, 'Same as the login ID');\n }\n return pass;\n };\n\n return (\n \n \n \n \n {isLoading && \n
\n
\n
\n {t(`manage-class:searchResult.loginId`, 'Login ID')}\n
\n
\n {t(`manage-class:searchResult.password`, 'Password')}\n
\n
\n {t(\n `manage-class:searchResult.activeDate`,\n 'Activation Date '\n )}\n {t(`manage-class:searchResult.dateFormat`, '(dd/mm/yyyy)')}\n
\n
\n {t(\n `manage-class:searchResult.status`,\n 'Parent App Linking Status'\n )}\n
\n
\n {sortedSearch.map(classObject => (\n
\n
\n {classObject.students[0].ClassName}\n
\n
\n \n {classObject.students.map(student => (\n \n \n {\n e.target.src = avatarPlaceholder;\n }}\n src={student.ProfileImage}\n alt=\"profile\"\n />\n \n {getPlanIcon(student.PlanId) !== null && (\n \n \n {searchType === t(`manage-class:search.name`) ? (\n
\n \n \n {searchType !== t(`manage-class:search.name`) ? (\n \n \n {passwordFormat(student.password, student.UserName)}\n {student.password !== student.UserName && (\n {\n setSelectedStudentID(student.UserId);\n openResetPwModal();\n }}\n >\n {t(`manage-class:studList.reset`, 'Reset')}\n \n )}\n \n \n {student.ActivationDate === null\n ? 'N.A'\n : moment(student.ActivationDate).format(\n 'DD/MM/YYYY'\n )}\n \n \n {student.ParentAppLinkingStatus\n ? t(`manage-class:searchResult.linked`, 'Linked')\n : '-'}\n \n \n {\n setSelectedStudentID(student.UserId);\n setShowStudentDetailsModal(true);\n }}\n >\n {t(\n `manage-class:searchResult.details`,\n 'Details'\n )}\n \n \n \n ))}\n \n
\n
\n ))}\n
\n
\n
\n
\n
\n );\n}\n","const sortClasses = classList => {\n const sortedClasses = [];\n for (const classObject of classList) {\n const hasLevel = sortedClasses.findIndex(\n item => item.level === classObject.LevelId\n );\n if (hasLevel === -1) {\n sortedClasses.push({\n level: classObject.LevelId,\n classes: [classObject]\n });\n } else {\n sortedClasses[hasLevel].classes.push(classObject);\n }\n }\n return sortedClasses;\n};\n\nexport default sortClasses;\n","import styled from 'styled-components';\nimport { LevelHoverColors } from 'constants/index';\n\nexport const CardContainer = styled.div`\n background-color: white;\n border-radius: 10px;\n box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16);\n margin-bottom: 40px;\n margin-top: 10px;\n margin-right: 100px;\n border: solid 5px rgba(0, 0, 0, 0);\n :hover {\n border: ${props => `solid 5px ${LevelHoverColors[props.level]}`};\n }\n @media only screen and (max-width: 1024px) {\n margin-right: 90px;\n }\n`;\n\nexport const CardTopSection = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: flex-start;\n`;\n","import React from 'react';\nimport { Link, useHistory } from 'react-router-dom';\nimport report from 'assets/img/icon-manage-class-report.svg';\nimport edit from 'assets/img/icon-manage-class-edit.svg';\nimport student from 'assets/img/icon-manage-class-student.svg';\nimport { LevelColors } from 'constants/index';\nimport { CardContainer, CardTopSection } from './ClassCard.styles';\n\nexport default function ClassCard({ showModal, card, setSelectedClass }) {\n const history = useHistory();\n return (\n \n \n \n
{\n history.push(`/manage-class/${card.ID}`);\n }}\n style={{\n background: LevelColors[card.LevelId],\n cursor: 'pointer'\n }}\n >\n {card.IconUrl !== 'No Path found' ? (\n {card.Name.slice(0, 1).toUpperCase()} \n )}\n \n \n
\n
{\n setSelectedClass(card);\n showModal(true);\n }}\n style={{\n cursor: 'pointer'\n }}\n />\n \n );\n}\n\n// rgba(255, 203, 81, 1);\n// rgba(255, 230, 146, 0.74);\n","import styled from 'styled-components';\n\nexport const ClassCollection = styled.div`\n display: grid;\n grid-template-columns: repeat(16, 1fr);\n border-bottom: 1px solid #d9d9d9;\n font-family: 'Muli';\n margin-top: 50px;\n .class-list__level {\n grid-column: 3/17;\n color: #1a1a1a;\n }\n .class-list__container {\n grid-column: 3/17;\n display: flex;\n flex-wrap: wrap;\n &__card {\n width: 171px;\n min-height: 140px;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16);\n margin-bottom: 40px;\n margin-top: 10px;\n margin-right: 100px;\n outline-style: solid;\n outline: #ffe692 solid 5px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n @media only screen and (max-width: 1024px) {\n margin-right: 90px;\n }\n\n &__top {\n display: flex;\n justify-content: center;\n &__img {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 82px;\n height: 82px;\n border-radius: 50%;\n margin: 20px;\n color: #fff;\n }\n }\n &__name {\n display: flex;\n justify-content: center;\n color: #1a1a1a;\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n }\n .card-footer {\n background-color: transparent;\n padding: 10px 5px;\n display: flex;\n justify-content: center;\n margin-top: 10px;\n }\n &__button {\n img {\n color: red;\n margin: 0px 10px;\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport sortClasses from 'helpers/parseClassList';\nimport { compareValues } from 'helpers/singleClassReport';\nimport ClassCard from './ClassCard';\nimport { ClassCollection } from './ClassCardCollection.styles';\n\nconst ClassCardCollection = ({ showModal, setSelectedClass, filterLevel }) => {\n const { t } = useTranslation(['manage-class']);\n const { classes } = useSelector(state => state.manageClasses);\n\n const sortData = classes.hasOwnProperty('ClassList')\n ? sortClasses(classes.ClassList).sort(compareValues('level', 'asc'))\n : [];\n\n const filteredData =\n filterLevel === parseInt(filterLevel, 10)\n ? sortData.filter(levelObject => levelObject.level === filterLevel)\n : sortData;\n\n const cardList = filteredData.map(item => (\n <>\n \n \n
\n {t('manage-class:main.primary', 'Primary')} {item.level}\n \n \n \n {item.classes.map(singleCard => (\n
\n \n \n ));\n\n return {cardList}
;\n};\n\nexport default ClassCardCollection;\n","import styled from 'styled-components';\n\nexport const DisplayClassPage = styled.div`\n .error {\n width: 100%;\n text-align: center;\n margin-top: 20rem;\n }\n #dropdown-custom {\n width: 160px;\n margin-left: 10px;\n border: 1px solid #c5c5c5;\n background-color: #ffffff;\n @media only screen and (max-width: 870px) {\n width: 120px;\n margin-top: 5px;\n font-size: 14px;\n }\n @media only screen and (max-width: 768px) {\n width: 120px;\n margin-top: 5px;\n }\n }\n #search {\n background-image: ${props => `url(${props.searchIcon})`};\n background-repeat: no-repeat;\n text-indent: 20px;\n background-position: left;\n background-position-x: 10px;\n @media only screen and (max-width: 870px) {\n margin-top: 5px;\n font-size: 14px;\n }\n }\n #search:focus {\n background-image: none;\n text-indent: 0px;\n }\n .btn {\n @media only screen and (max-width: 768px) {\n font-size: 12px;\n }\n }\n display: flex;\n flex-direction: column;\n padding-left: 195px;\n z-index: 100;\n @media (max-width: 1024px) {\n padding: 0;\n }\n\n .top-bar {\n display: grid;\n grid-template-columns: repeat(16, 1fr);\n position: fixed;\n right: 0px;\n left: 195px;\n background-color: #ffffff;\n box-shadow: 0px 3px 6px #818181;\n padding: 10px 0px;\n font-family: 'Muli';\n margin-bottom: 10px;\n z-index: 10;\n @media only screen and (max-width: 1024px) {\n left: 55px;\n }\n .calendar-year {\n grid-column: 2/5;\n display: flex;\n font-size: 16px;\n p {\n margin-top: 8px;\n }\n }\n .school {\n grid-column: 7/11;\n display: flex;\n img {\n height: 42px;\n width: 42px;\n }\n p {\n font-size: 20px;\n color: #545454;\n font-weight: 500;\n line-height: 25px;\n margin-top: 8px;\n margin-left: 10px;\n @media only screen and (max-width: 1024px) {\n margin-top: 0px;\n text-align: center;\n }\n @media only screen and (max-width: 1142px) {\n font-size: 16px;\n }\n @media only screen and (max-width: 1024px) {\n font-size: 20px;\n margin-top: 8px;\n }\n @media only screen and (max-width: 916px) {\n font-size: 16px;\n }\n }\n }\n .level {\n grid-column: 13/16;\n display: flex;\n p {\n margin-top: 8px;\n }\n }\n }\n .search-bar {\n display: grid;\n grid-template-columns: repeat(16, 1fr);\n padding: 40px 0px 10px 0px;\n margin-top: 60px;\n position: fixed;\n background-color: #f1f1f1;\n z-index: 9;\n .search-type-dropdown {\n grid-column: 6/7;\n }\n .search {\n grid-column: 7/12;\n .form-control:focus {\n border-color: #ffa200;\n }\n }\n }\n .text-information {\n display: flex;\n justify-content: center;\n margin-top: 145px;\n padding: 10px;\n text-align: center;\n width: calc(100vw - 195px);\n position: fixed;\n background-color: #f1f1f1;\n z-index: 8;\n span {\n color: #ff5b00;\n }\n @media (max-width: 1024px) {\n width: calc(100vw - 56x);\n }\n }\n .class-card {\n margin-top: 160px;\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Dropdown, Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n fetchClassesRequest,\n resetEditClassResult,\n resetError\n} from 'stores/manage-class/actions';\nimport moment from 'moment';\nimport PopupModal from 'components/ManageClass/PopupModal';\nimport EditClassModalBody from 'components/ManageClass/EditClassModalBody';\nimport SearchResults from 'components/ManageClass/SearchResults';\nimport ClassCardCollection from 'components/ManageClass/ClassCardCollection';\nimport DropdownMenu from 'components/Shared/DropdownMenu';\nimport SearchIcon from 'assets/img/icon-manage-class-lup.svg';\nimport { DisplayClassPage } from './DisplayClass.styles';\n\n// Helper\nfunction* range(start, end, step) {\n while (start >= end) {\n yield start;\n start += step;\n }\n}\n\nconst generateYears = () => {\n return Array.from(range(moment().year(), 2020, -1));\n};\n\nconst LevelMenuOption = value => `P${value}`;\n\nconst DisplayClass = () => {\n const { t } = useTranslation(['manage-class']);\n const searchTypes = [\n t(`manage-class:search.id`, 'ID'),\n t(`manage-class:search.name`, 'Name')\n ];\n const dispatch = useDispatch();\n const { levels } = useSelector(state => state.levels);\n const { classes, editClassResult } = useSelector(\n state => state.manageClasses\n );\n // Modal State\n const [showEditClassModal, setEditClassModal] = useState(false);\n const [selectedClass, setSelectedClass] = useState(null);\n // Search State\n const [searchTerm, setSearchTerm] = useState('');\n // Filter State\n const [filterLevel, setFilterLevel] = useState('');\n const [filterYear, setFilterYear] = useState(moment().year());\n const [filterType, setFilterType] = useState(\n t(`manage-class:search.name`, 'Name')\n );\n // Years Dropdown Options\n const years = generateYears();\n // Event handlers for popup modal\n const openEditClassModal = () => {\n dispatch(resetError());\n setEditClassModal(true);\n };\n const hideEditClassModal = () => {\n if (editClassResult === true) {\n dispatch(\n fetchClassesRequest({\n year: filterYear\n })\n );\n dispatch(resetEditClassResult());\n }\n setEditClassModal(false);\n };\n useEffect(() => {\n // for translating language in state\n if (filterType === t(`manage-class:search.id`)) {\n setFilterType(t(`manage-class:search.id`));\n } else {\n setFilterType(t(`manage-class:search.name`));\n }\n }, [filterType, searchTypes, t]);\n // useEffect to fetch classes data via redux saga\n useEffect(() => {\n dispatch(\n fetchClassesRequest({\n year: filterYear\n })\n );\n }, [dispatch, filterYear]);\n\n const schoolInfo = classes\n ? {\n logo: classes.SchoolLogo,\n name: classes.Name\n }\n : null;\n\n return (\n \n {classes && classes.length === 0 && (\n \n
No classes found \n \n )}\n {classes && (\n <>\n \n \n
\n
{t(`manage-class:header.year`, 'Year: ')}
\n
\n
\n
\n {classes.hasOwnProperty('ClassList') && (\n
{\n e.target.style.display = 'none';\n }}\n src={schoolInfo.logo}\n alt=\"school-logo\"\n />\n )}\n {schoolInfo.name}
\n \n
\n
{t(`manage-class:header.level`, 'Level:')}
\n
level.ID)}\n setValue={setFilterLevel}\n valueTemplate={LevelMenuOption}\n width=\"160px\"\n >\n {\n event.preventDefault();\n setFilterLevel('');\n }}\n >\n {t(`manage-class:header.all`, 'All')}\n \n \n \n
\n
\n {t(`manage-class:search.resetMsg`, 'You can click to ')}\n \n {t(`manage-class:search.resetMsg1`, `reset student's password`)}\n \n {t(`manage-class:search.resetMsg2`, `and edit other settings.`)}\n
\n
\n
\n )}\n \n )}\n \n );\n};\nexport default DisplayClass;\n","import styled from 'styled-components';\n\nexport const StudentTableContainer = styled.div`\n display: grid;\n grid-template-columns: repeat(16, 1fr);\n margin-top: 130px;\n margin-right: 20px;\n width: 100%;\n @media only screen and (max-width: 800px) {\n margin-top: 130px;\n }\n .table {\n grid-column: 1/17;\n tbody {\n height: 200px;\n overflow-y: auto;\n width: 100%;\n }\n td {\n vertical-align: middle;\n @media only screen and (max-width: 768px) {\n padding: 0px;\n }\n }\n .table-head {\n th {\n color: rgba($color: #0a0a0a, $alpha: 0.42);\n font-size: 14px;\n font-weight: 100;\n vertical-align: middle;\n text-align: center;\n @media only screen and (max-width: 1260px) {\n font-size: 12px;\n }\n @media only screen and (max-width: 1132px) {\n font-size: 10px;\n }\n @media only screen and (max-width: 768px) {\n font-size: 6px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n span {\n display: flex;\n justify-content: center;\n }\n }\n }\n .table-row {\n font-size: 14px;\n padding: 12px 5px;\n text-align: center;\n @media only screen and (max-width: 1132px) {\n font-size: 12px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n .plan {\n font-size: 11px;\n text-align: left;\n @media only screen and (max-width: 800px) {\n font-size: 8px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n img {\n grid-column: 1/3;\n height: 22px;\n width: 22px;\n margin-right: 5px;\n @media only screen and (max-width: 800px) {\n height: 0px;\n width: 0px;\n }\n }\n p {\n grid-column: 3/8;\n margin-top: 7px;\n margin-left: 0px;\n }\n }\n &--student {\n font-weight: 600;\n text-align: left;\n @media only screen and (max-width: 800px) {\n font-size: 8px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n img {\n margin-right: 10px;\n height: 40px;\n width: 40px;\n border-radius: 50%;\n @media only screen and (max-width: 800px) {\n height: 20px;\n width: 20px;\n margin-left: 5px;\n margin-right: 5px;\n }\n @media only screen and (max-width: 639px) {\n height: 0px;\n width: 0px;\n margin-left: 3px;\n margin-right: 0px;\n }\n }\n }\n &--student-id {\n text-align: left;\n @media only screen and (max-width: 768px) {\n font-size: 8px;\n text-align: center;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n }\n &--password {\n text-align: center;\n @media only screen and (max-width: 768px) {\n font-size: 8px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n button {\n background: none;\n border: none;\n color: #ff723d;\n font-size: 13px;\n text-decoration: underline;\n margin-left: 10px;\n @media only screen and (max-width: 768px) {\n font-size: 8px;\n margin-left: 3px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n }\n }\n &--active-date {\n @media only screen and (max-width: 768px) {\n font-size: 8px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n }\n .btn-details {\n width: 83px;\n height: 27px;\n padding: 0;\n border: 1px solid #d5d5d5;\n @media only screen and (max-width: 1044px) {\n font-size: 10px;\n width: 40px;\n height: 20px;\n }\n @media only screen and (max-width: 768px) {\n font-size: 8px;\n width: 35px;\n height: 15px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 2px;\n width: 15px;\n height: 5px;\n }\n }\n .btn-outline-primary:focus {\n background-color: transparent;\n color: #ff723d;\n }\n }\n //the container\n .container-checkbox {\n display: flex;\n justify-content: center;\n padding: 10px;\n margin-top: 5px;\n @media only screen and (max-width: 1440px) {\n margin-top: 10px;\n }\n @media only screen and (max-width: 1260px) {\n margin-top: 12px;\n }\n @media only screen and (max-width: 1132px) {\n margin-top: 14px;\n }\n @media only screen and (max-width: 1024px) {\n margin-top: 20px;\n }\n @media only screen and (max-width: 768px) {\n margin-top: 6px;\n }\n }\n //hide the browser's default check-box\n .container-checkbox input {\n opacity: 0;\n cursor: pointer;\n }\n //create a custom checkbox\n .container-checkbox .checkmark {\n position: absolute;\n left: 255px;\n height: 25px;\n width: 25px;\n border-radius: 4px;\n border: 1px solid #9e9e9e;\n background-color: white;\n @media only screen and (max-width: 1024px) {\n left: 90px;\n }\n @media only screen and (max-width: 1132px) {\n height: 17px;\n width: 17px;\n }\n @media only screen and (max-width: 768px) {\n height: 18px;\n width: 18px;\n left: 95px;\n }\n @media only screen and (max-width: 587px) {\n height: 10px;\n width: 10px;\n left: 95px;\n }\n }\n //on mouse hover\n .container-checkbox:hover input ~ .checkmark {\n background-color: #ffc400;\n border: none;\n }\n //when checkbox is checked\n .container-checkbox input:checked ~ .checkmark {\n background-color: #ef7836;\n border: none;\n }\n //create the checkmark/indicator (hidden when not checked)\n .container-checkbox .checkmark:after {\n content: '';\n position: absolute;\n display: none;\n }\n //show the checkmark when checked\n .container-checkbox input:checked ~ .checkmark:after {\n display: block;\n }\n //style the checkmark/indicator\n .container-checkbox .checkmark:after {\n left: 8px;\n top: 2px;\n width: 8px;\n height: 16px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n @media only screen and (max-width: 1132px) {\n width: 6px;\n height: 10px;\n border-width: 0 2px 2px 0;\n left: 6px;\n }\n @media only screen and (max-width: 768px) {\n width: 6px;\n height: 10px;\n border-width: 0 2px 2px 0;\n left: 6px;\n }\n @media only screen and (max-width: 587px) {\n width: 4px;\n height: 6px;\n border-width: 0 1.5px 1.5px 0;\n left: 3px;\n top: 1px;\n }\n }\n .student-check-box {\n position: inherit;\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { isNil } from 'ramda';\nimport {\n fetchStudentsRequest,\n resetPwResultAction,\n resetError\n} from 'stores/manage-class/actions';\nimport moment from 'moment';\nimport SchoolPlanIcon from 'assets/img/icon-manage-class-student-list-plan-school.svg';\nimport StandardPlanIcon from 'assets/img/icon-manage-class-student-list-plan-standard.svg';\nimport PremiumPlanIcon from 'assets/img/icon-manage-class-student-list-plan-premium.svg';\nimport LinkApp from 'assets/img/icon-manage-class-student-list-link.svg';\nimport avatarPlaceholder from 'assets/img/avatar.png';\nimport Spinner from 'components/Shared/Spinner';\nimport PopupModal from './PopupModal';\nimport StudentDetailsModalBody from './StudentDetailsModalBody';\nimport ResetPwModalBody from './ResetPwModalBody';\nimport { StudentTableContainer } from './StudentTable.styles';\n\n// Helpers\nconst setCheckboxesToChecked = check => {\n const checkboxes = document.getElementsByClassName('individual');\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < checkboxes.length; i++) {\n checkboxes[i].checked = check;\n }\n};\n\nconst getPlanIcon = planID => {\n switch (planID) {\n case 0:\n return SchoolPlanIcon;\n case 2:\n return StandardPlanIcon;\n case 3:\n return PremiumPlanIcon;\n case 5:\n return PremiumPlanIcon;\n case 6:\n return PremiumPlanIcon;\n default:\n return null;\n }\n};\n\nexport default function StudentTable({\n selectedStudentIDs,\n setSelectedStudentIDs,\n classID,\n currentPage,\n setPage\n}) {\n const { t } = useTranslation(['manage-class']);\n const dispatch = useDispatch();\n const { students, resetPwResult, isLoading } = useSelector(\n state => state.manageClasses\n );\n // Modal States\n const [showStudentDetailsModal, setShowStudentDetailsModal] = useState(false);\n const [showResetPwModal, setShowResetPwModal] = useState(false);\n // Stores selected studentID for reset pw & student details modal\n const [selectedStudentID, setSelectedStudentID] = useState(null);\n const openResetPwModal = () => {\n dispatch(resetError());\n setShowResetPwModal(true);\n };\n // Event handlers to hide popup modals\n const hideStudentDetailsModal = () => {\n setShowStudentDetailsModal(false);\n };\n const hideResetPwModal = () => {\n if (resetPwResult === true) {\n dispatch(\n fetchStudentsRequest({\n classID,\n pageNum: currentPage\n })\n );\n }\n dispatch(resetError());\n dispatch(resetPwResultAction());\n setShowResetPwModal(false);\n };\n\n const studentIDsArray = students?.hasOwnProperty('List')\n ? students.List.map(student => student.UserId)\n : [];\n\n const passwordFormat = (pass, username) => {\n if (isNil(pass)) {\n return 'N.A';\n }\n if (pass === username) {\n return t(`manage-class:studList.sameAsId`, 'Same as the login ID');\n }\n return pass;\n };\n\n // Effect to fetch data via redux saga\n useEffect(() => {\n dispatch(\n fetchStudentsRequest({\n classID,\n pageNum: currentPage\n })\n );\n // eslint-disable-next-line\n }, [currentPage, dispatch]);\n\n useEffect(() => {\n setPage(1);\n dispatch(\n fetchStudentsRequest({\n classID,\n pageNum: 1\n })\n );\n // eslint-disable-next-line\n }, [classID]);\n return (\n \n {isLoading && \n No students\n \n )}\n {!isLoading && students?.hasOwnProperty('List') && (\n <>\n \n \n \n \n \n \n \n {\n if (event.target.checked) {\n setCheckboxesToChecked(true);\n setSelectedStudentIDs(studentIDsArray);\n } else {\n setCheckboxesToChecked(false);\n setSelectedStudentIDs([]);\n }\n }}\n />\n
\n {t(`manage-class:studList.plan`, 'Plan')} \n \n {t(`manage-class:studList.studName`, 'Student Name')}\n \n \n {t(`manage-class:searchResult.loginId`, 'Login ID')}\n \n \n {t(`manage-class:searchResult.password`, 'Password')}\n \n \n {t(`manage-class:searchResult.activeDate`, 'Activation Date')}\n \n {t(`manage-class:searchResult.dateFormat`, '(dd/mm/yyyy)')}\n \n \n \n {t(\n `manage-class:searchResult.status`,\n 'Parent App Linking Status'\n )}\n \n \n \n \n \n {students?.hasOwnProperty('List') &&\n students.List.map(item => (\n \n \n {\n if (event.target.checked) {\n setSelectedStudentIDs([\n ...selectedStudentIDs,\n item.UserId\n ]);\n } else {\n setSelectedStudentIDs(\n selectedStudentIDs.filter(\n sth => sth !== item.UserId\n )\n );\n }\n }}\n />\n
\n \n {getPlanIcon(item.PlanId) !== null && (\n \n {\n e.target.src = avatarPlaceholder;\n }}\n src={item.ProfileImage}\n alt=\"profile\"\n />\n {item.DisplayName}\n \n \n {item.UserName}\n \n \n \n {passwordFormat(item.password, item.UserName)}\n \n {item.password !== item.UserName && (\n {\n setSelectedStudentID(item.UserId);\n openResetPwModal();\n }}\n >\n {t(`manage-class:studList.reset`, 'Reset')}\n \n )}\n \n \n {item.ActivationDate === null\n ? 'N.A'\n : moment(item.ActivationDate).format('DD/MM/YYYY')}\n \n \n {item.ParentAppLinkingStatus ? (\n \n {\n setSelectedStudentID(item.UserId);\n setShowStudentDetailsModal(true);\n }}\n >\n {t(`manage-class:searchResult.details`, 'Details')}\n \n \n \n ))}\n \n
\n \n )}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const ChangeClassModalContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: #060606;\n font-size: 0.875rem;\n .success-title {\n font-size: 1.125rem;\n color: #4dae30;\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n .btn-success-ok {\n width: 127px;\n color: #fffdfc;\n background: #5ed46a;\n margin-bottom: 1rem;\n }\n .change-class-selector {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 1rem;\n span {\n margin-right: 1rem;\n }\n .dropdown-menu {\n min-width: 200px;\n }\n }\n .selection-action-buttons {\n display: flex;\n flex-direction: row;\n border-top: solid 1px rgba(112, 112, 112, 0.22);\n justify-content: space-evenly;\n padding-top: 1rem;\n width: 100%;\n .btn-outline-cancel {\n color: #ff5b00;\n border: solid 1px #d5d5d5;\n width: 127px;\n &:hover {\n border-color: #ff5b00;\n background: #fff7f3;\n }\n }\n .btn-ok {\n width: 127px;\n color: #fffdfc;\n background: #ff5b00;\n }\n }\n #dropdown-change-class {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n border: solid 1px #707070;\n width: 200px;\n font-size: 0.875rem;\n }\n`;\n","import React, { useState } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { changeClassRequest } from 'stores/manage-class/actions';\nimport { Button, Dropdown, Spinner } from 'react-bootstrap';\nimport sortClasses from 'helpers/parseClassList';\nimport successIcon from 'assets/img/icon-manage-class-success-check.svg';\nimport { ChangeClassModalContainer } from './ChangeClassModalBody.styles';\n\nexport default function ChangeClassModalBody({\n hide,\n selectedStudentIDs,\n currentLevel,\n currentClassID\n}) {\n const dispatch = useDispatch();\n const { classes, changeClassResult, error, isLoading } = useSelector(\n state => state.manageClasses\n );\n const sortedClasses = Object.prototype.hasOwnProperty.call(\n classes,\n 'ClassList'\n )\n ? sortClasses(classes.ClassList)\n : [];\n // TODO: filter out the current class of selected student\n const [selectedLevel, setSelectedLevel] = useState(currentLevel);\n const selectedLevelIndex = sortedClasses.findIndex(\n item => item.level === selectedLevel\n );\n const [selectedClass, setSelectedClass] = useState(\n sortedClasses[selectedLevelIndex].classes.filter(\n classObject => classObject.ID !== currentClassID\n )[0]\n );\n return (\n \n {changeClassResult === true ? (\n <>\n \n \n \n {`The selected student(s) have been moved to Class ${selectedClass.Name}.`}\n \n {\n hide();\n }}\n >\n OK\n \n \n ) : (\n <>\n \n Move to another class\n
\n The student(s) you selected will move to
\n \n Level \n \n \n {sortedClasses.length ? `P${selectedLevel}` : 'Select level'}\n \n \n {sortedClasses.map(item => (\n {\n setSelectedLevel(item.level);\n const newLevelIndex = sortedClasses.findIndex(\n sortedObject => sortedObject.level === item.level\n );\n setSelectedClass(sortedClasses[newLevelIndex].classes[0]);\n }}\n >{`P${item.level}`}\n ))}\n \n \n
\n \n Class \n \n \n {selectedClass.Name}\n \n \n {sortedClasses[selectedLevelIndex].classes\n .filter(classObject => classObject.ID !== currentClassID)\n .map(item => (\n {\n setSelectedClass(item);\n }}\n >\n {item.Name}\n \n ))}\n \n \n
\n {error && {error} }\n \n {\n hide();\n }}\n >\n Cancel\n \n {\n dispatch(\n changeClassRequest({\n StudentIDs: selectedStudentIDs,\n classID: selectedClass.ID\n })\n );\n }}\n >\n OK\n {isLoading && (\n
\n \n )}\n \n );\n}\n","import styled from 'styled-components';\n\nexport const ActionButtonsContainer = styled.div`\n display: grid;\n grid-template-columns: repeat(16, 1fr);\n position: fixed;\n margin-top: 85px;\n z-index: 99;\n background-color: white;\n right: 50px;\n left: 245px;\n @media only screen and (max-width: 1024px) {\n right: 80px;\n left: 130px;\n }\n .buttons {\n grid-column: 1/17;\n margin: 10px 10px;\n @media only screen and (max-width: 768px) {\n margin: 8px 5px;\n }\n @media only screen and (max-width: 587px) {\n margin: 5px 0px;\n }\n button {\n font-size: 11px;\n img {\n margin-right: 6px;\n @media only screen and (max-width: 768px) {\n margin-right: 5px;\n width: 15px;\n height: 15px;\n }\n @media only screen and (max-width: 768px) {\n margin-right: 3px;\n width: 10px;\n height: 10px;\n }\n }\n &:hover {\n color: #e84b05;\n }\n @media only screen and (max-width: 768px) {\n font-size: 8px;\n margin-right: 3px;\n }\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n resetChangeClassResult,\n resetError\n} from 'stores/manage-class/actions';\nimport RemoveIcon from 'assets/img/icon-manage-class-remove.svg';\nimport MailIcon from 'assets/img/icon-manage-class-mail.svg';\nimport ChangeClassIcon from 'assets/img/icon-manage-class-change-class.svg';\nimport Notification from 'assets/img/icon-manage-class-notification.svg';\nimport { featureToggle } from 'constants/index';\nimport PopupModal from './PopupModal';\nimport ChangeClassModalBody from './ChangeClassModalBody';\nimport { ActionButtonsContainer } from './ActionButtons.styles';\n\nexport default function ActionButtons({\n selectedStudentIDs,\n classID,\n currentLevel\n}) {\n const { t } = useTranslation(['manage-class']);\n const dispatch = useDispatch();\n const { isSchoolAdmin } = useSelector(state => state.login);\n // Modal States\n const [showChangeClassModal, setShowChangeClassModal] = useState(false);\n\n const openChangeClassModal = () => {\n dispatch(resetError());\n dispatch(resetChangeClassResult());\n setShowChangeClassModal(true);\n };\n // Event handlers to hide popup modals\n const hideChangeClassModal = () => {\n setShowChangeClassModal(false);\n };\n\n return (\n \n \n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { PaginationContainer } from './Pagination.styles';\n\nexport default function Pagination({ currentPage, setPage }) {\n const { t } = useTranslation(['create-assign-saved']);\n const { maxStudentPages } = useSelector(state => state.manageClasses);\n const [debouncedCallback] = useDebouncedCallback(value => {\n setPage(value);\n }, 2000);\n return (\n \n \n setPage(currentPage - 1)}\n >\n < {t(`create-assign-saved:pagination.prev`, 'Prev')}\n \n {currentPage === 1 && (\n <>\n \n {currentPage}\n \n {maxStudentPages >= 2 && (\n setPage(currentPage + 1)}\n >\n {currentPage + 1}\n \n )}\n {maxStudentPages >= 3 && (\n setPage(currentPage + 2)}\n >\n {currentPage + 2}\n \n )}\n \n )}\n {currentPage > 1 && currentPage < maxStudentPages && (\n <>\n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n setPage(currentPage + 1)}\n >\n {currentPage + 1}\n \n \n )}\n {currentPage === 2 && currentPage === maxStudentPages && (\n <>\n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n \n )}\n {currentPage > 2 && currentPage === maxStudentPages && (\n <>\n setPage(currentPage - 2)}\n >\n {currentPage - 2}\n \n setPage(currentPage - 1)}\n >\n {currentPage - 1}\n \n \n {currentPage}\n \n \n )}\n = maxStudentPages}\n onClick={() => setPage(currentPage + 1)}\n >\n {t(`create-assign-saved:pagination.next`, 'Next')} >\n \n
\n \n {t(`create-assign-saved:pagination.page`, 'Page')}{' '}\n {\n e.preventDefault();\n if (\n e.target.value !== currentPage &&\n e.target.value >= 1 &&\n e.target.value <= maxStudentPages\n ) {\n debouncedCallback(parseInt(e.target.value));\n }\n }}\n />{' '}\n {t(`create-assign-saved:pagination.of`, 'of')} {maxStudentPages}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const StudentListPage = styled.div`\n display: flex;\n flex-direction: column;\n background-color: white;\n width: calc(100vw - 280px);\n margin-left: 245px;\n margin-right: 35px;\n -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);\n -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);\n box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);\n @media (max-width: 1024px) {\n width: calc(100vw - 106px);\n margin-left: 81px;\n margin-right: 25px;\n }\n .top-bar {\n display: grid;\n grid-template-columns: repeat(16, 1fr);\n padding: 20px 0px;\n border-bottom: solid 1px rgba(112, 112, 112, 0.11);\n position: fixed;\n z-index: 100;\n background-color: white;\n width: calc(100vw - 280px);\n @media only screen and (max-width: 1024px) {\n left: 81px;\n width: calc(100vw - 106px);\n }\n .navigation-back {\n grid-column: 1/5;\n @media only screen and (max-width: 768px) {\n font-size: 10px;\n }\n cursor: pointer;\n padding-left: 20px;\n margin: auto;\n margin-left: 0px;\n &:hover {\n color: #ff5b00;\n }\n }\n .dropdown {\n grid-column: 6/12;\n display: flex;\n @media only screen and (max-width: 768px) {\n grid-column: 6/13;\n }\n .dropdown-item {\n min-width: 200px;\n }\n #dropdown-custom {\n width: 200px;\n margin-left: 10px;\n border: 1px solid #c5c5c5;\n background-color: #ffffff;\n @media only screen and (max-width: 1132px) {\n width: 125px;\n margin-top: 3px;\n font-size: 14px;\n }\n @media only screen and (max-width: 768px) {\n width: 120px;\n margin-top: 5px;\n font-size: 10px;\n }\n }\n img {\n margin-right: 10px;\n @media only screen and (max-width: 1132px) {\n margin-right: 2px;\n }\n @media only screen and (max-width: 768px) {\n height: 25px;\n width: 25px;\n margin-right: 5px;\n margin-top: 5px;\n }\n }\n p {\n font-size: 16px;\n margin-top: 8px;\n margin-left: 5px;\n @media only screen and (max-width: 768px) {\n font-size: 14px;\n }\n }\n }\n .total-stud {\n margin-left: 10px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n }\n .total-count {\n color: #ff5b00;\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\nimport StudentTable from 'components/ManageClass/StudentTable';\nimport { LevelColors } from 'constants/index';\nimport sortClasses from 'helpers/parseClassList';\nimport ActionButtons from 'components/ManageClass/ActionButtons';\nimport Pagination from 'components/ManageClass/Pagination';\nimport DropdownMenu from 'components/Shared/DropdownMenu';\nimport { StudentListPage } from './StudentList.styles.js';\n\nexport default function StudentList({ match }) {\n const { t } = useTranslation(['manage-class']);\n const classID = parseInt(match.params.classID, 10);\n const { classes, students, isLoading } = useSelector(\n state => state.manageClasses\n );\n const currentClass = classes.hasOwnProperty('ClassList')\n ? classes.ClassList.find(classObject => classObject.ID === classID)\n : null;\n const sameLevelClasses = Object.prototype.hasOwnProperty.call(\n classes,\n 'ClassList'\n )\n ? sortClasses(classes.ClassList).find(\n classObject => classObject.level === currentClass.LevelId\n ).classes\n : [];\n const history = useHistory();\n // Stores selected student IDs as checked in the table\n const [selectedStudentIDs, setSelectedStudentIDs] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n\n // Event handler for dropdown menu item\n const handleSelectedClass = classObject => {\n history.push(`/manage-class/${classObject.ID}`);\n };\n\n return (\n \n \n
{\n history.push('/manage-class');\n }}\n >\n {t(`manage-class:studList.back`, '< Back')}\n \n {currentClass.IconUrl !== 'No Path found' ? (\n
\n ) : (\n
\n {currentClass.Name.slice(0, 1).toUpperCase()} \n {t(`manage-class:studModal.class`, 'Class')}
\n \n
{t(`manage-class:studList.total`, 'Total:')}
\n
\n {students.TotalCount +\n (students.TotalCount === 1\n ? t(`manage-class:studList.student`, ' student')\n : t(`manage-class:studList.students`, ' students'))}\n
\n
\n );\n}\n","import styled from 'styled-components';\n\nexport const ActionsMenu = styled.div`\n position: relative;\n display: inline-block;\n &:hover .actions-dropdown-content {\n display: block;\n }\n .more-options {\n font-size: 30px;\n position: relative;\n bottom: 0.5rem;\n border: none;\n background-color: transparent;\n &:hover {\n color: #ff5b00;\n }\n }\n`;\n\nexport const MenuContent = styled.div`\n display: none;\n position: absolute;\n left: -2.5rem;\n background: #fff;\n min-width: 104.4px;\n padding: 0.5rem 1rem 1rem 1rem;\n margin-right: 1rem;\n box-shadow: 0 3px 6px rgba(45, 45, 45, 0.37);\n z-index: 1;\n .actions-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 0.875rem;\n font-weight: 600;\n color: #727272;\n cursor: pointer;\n &:hover {\n color: #ff5b00;\n }\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport PopoverMenuItem from 'components/TrackAssignment/PopoverMenuItem';\nimport { ActionsMenu, MenuContent } from './GroupPopoverMenu.styles';\n\nexport default function GroupPopoverMenu({\n openDeleteModal,\n setIdNameForDelete,\n editGroup\n}) {\n const { t } = useTranslation(['manage-class-group']);\n return (\n \n \n ...\n \n \n \n \n {t(`manage-class-group:table.edit`, 'Edit')}\n \n \n \n {\n setIdNameForDelete();\n openDeleteModal();\n }}\n >\n {t(`manage-class-group:table.delete`, 'Delete')}\n \n \n {/* \n \n Email\n \n \n \n console.log('notification')}\n >\n Notification\n \n */}\n \n \n );\n}\n","import styled from 'styled-components';\n\nconst GroupDeleteModalContnainer = styled.div`\n display: flex;\n flex-direction: column;\n width: 550px;\n background: white;\n padding: 40px;\n align-items: center;\n .close-btn {\n position: absolute;\n right: 35px;\n top: 30px;\n border: none;\n font-size: 18px;\n background: none;\n }\n .title {\n color: #ff5b00;\n font-size: 18px;\n margin: 10px;\n }\n .text {\n color: #060606;\n margin: 10px 10px 30px 10px;\n font-size: 16px;\n }\n .btn-group {\n margin: 10px;\n button {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n }\n .no-btn {\n background: white;\n color: #ff5b00;\n border: 1px solid #d5d5d5;\n &:hover {\n background: #FFF7F3\n color: #f25008;\n border-color: #f25008;\n }\n }\n .yes-btn {\n background: #ff5b00;\n color: white;\n border: 1px solid #ff3d3d;\n &:hover {\n background: #f25008;\n }\n }\n }\n span {\n font-size: 16px;\n }\n .success-title {\n font-size: 18px;\n }\n .success-btn {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n background: #5ED46A;\n color: white;\n border: 1px solid #29C16A;\n }\n`;\n\nexport default GroupDeleteModalContnainer;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n deleteGroupRequest,\n resetDeleteRequest\n} from 'stores/createGroup/actions';\nimport successIcon from 'assets/img/icon-manage-class-success-check.svg';\nimport { Spinner } from 'react-bootstrap';\nimport GroupDeleteModalContnainer from './GroupDeleteModal.styles';\n\nconst GroupDeleteModal = ({ groupName, hide, groupId, deleteSuccess }) => {\n const { t } = useTranslation(['manage-class-group']);\n const dispatch = useDispatch();\n const { isDelLoading, deleteGroup, error } = useSelector(\n state => state.createGroups\n );\n\n const deleteGroupSuccess = () => {\n dispatch(resetDeleteRequest());\n deleteSuccess();\n };\n\n return (\n \n {deleteGroup === true ? (\n <>\n \n X\n \n \n \n \n \"{groupName}\"\n {t(\n `manage-class-group:deleteModal.delConfirmMsg`,\n ' has been deleted sucessfully!'\n )}\n \n \n {t(`manage-class-group:deleteModal.ok`, 'OK')}\n \n \n ) : (\n <>\n \n X\n \n \n {t(`manage-class-group:deleteModal.delGroup`, 'Delete Group')}\n
\n \n {t(\n `manage-class-group:deleteModal.delConfirm`,\n 'Are you sure you want to delete '\n )}\n \"{groupName}\"?\n
\n {t(\n `manage-class-group:deleteModal.actionUndone`,\n 'This action cannot be undone.'\n )}\n
\n \n {error && {error} }\n \n {\n dispatch(deleteGroupRequest(groupId));\n }}\n >\n {t(`manage-class-group:deleteModal.yes`, 'Yes')}\n \n \n {t(`manage-class-group:deleteModal.no`, 'No')}\n {isDelLoading && (\n \n
\n \n )}\n \n );\n};\n\nexport default GroupDeleteModal;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Polygon_33\",\n \"data-name\": \"Polygon 33\",\n d: \"M3.132,1.519a1,1,0,0,1,1.736,0L7.145,5.5A1,1,0,0,1,6.277,7H1.723A1,1,0,0,1,.855,5.5Z\",\n transform: \"translate(8 7) rotate(180)\",\n fill: \"currentColor\"\n});\n\nvar SvgTriangle = function SvgTriangle(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 8,\n height: 7,\n viewBox: \"0 0 8 7\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgTriangle, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/triangle.af2f501e.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components';\n\nexport const NoGroupList = styled.div`\n text-align: center;\n align-self: center;\n .no-group-text {\n margin: 10px 0;\n }\n .first-line {\n font-weight: 700;\n font-size: 16px;\n }\n`;\n\nexport const GroupLists = styled.div`\n width: 100%;\n padding: 20px 80px 20px 40px;\n .group-list-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .my-group-heading {\n margin-left: 100px;\n display: flex;\n align-items: flex-start;\n span {\n font-size: 19px;\n color: #545454;\n margin-left: 10px;\n }\n }\n }\n .group-list-body {\n margin-top: 20px;\n .header-grp-name {\n width: 39%;\n display: flex;\n align-items: center;\n }\n .header-members {\n justify-content: center;\n }\n .header-created-time,\n .header-members {\n text-align: center;\n width: 20%;\n display: flex;\n align-items: center;\n }\n\n .f1 {\n flex: 1;\n }\n .f2 {\n flex: 2;\n }\n .group-list-body-header {\n display: flex;\n margin-bottom: 4px;\n }\n .group-list-body-container {\n }\n }\n`;\n\nexport const GroupCard = styled.div`\n display: flex;\n border: 1px solid rgb(200, 200, 200);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 8px;\n background-color: #ffffff;\n margin-bottom: 15px;\n color: #1e1e1e;\n border-radius: 4px;\n .group-name {\n font-size: 18px;\n font-weight: 600;\n font-size: 17px;\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 5px 10px;\n border-right: 1px solid rgb(200, 200, 200);\n }\n .group-date,\n .group-stu,\n .group-more {\n display: flex;\n align-items: center;\n border-right: 1px solid rgb(200, 200, 200);\n padding: 5px 10px;\n justify-content: center;\n }\n .group-stu {\n text-decoration: underline;\n cursor: pointer;\n img {\n margin-right: 5px;\n }\n }\n .group-more {\n border-right: none;\n display: flex;\n justify-content: space-around;\n }\n .report-gtp-btn {\n background-color: transparent;\n color: #ff5b00;\n padding: 5px 25px 4px 6px;\n box-shadow: none !important;\n border: 1px solid rgb(200, 200, 200);\n font-size: 16px;\n img {\n margin-right: 5px;\n }\n }\n .group-text-stu {\n position: relative;\n }\n .show-added-students {\n position: absolute;\n max-height: 200px;\n width: 230px;\n padding: 10px;\n background-color: #707070;\n color: #ffffff;\n z-index: 9;\n top: 30px;\n left: -100%;\n transition: opacity 0.3s;\n visibility: hidden;\n opacity: 0;\n .scroll-list-stu {\n height: 100%;\n max-height: 160px;\n overflow: auto;\n ::-webkit-scrollbar {\n width: 8px !important;\n overscroll-behavior-y: none;\n }\n ::-webkit-scrollbar-thumb {\n background: #949494 !important;\n }\n }\n .list-class-title {\n span {\n margin-bottom: 10px;\n font-weight: 600;\n font-size: 15px;\n }\n margin-bottom: 20px;\n }\n }\n .show-added-students::before {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 10px;\n border-style: solid;\n border-color: transparent transparent #707070 transparent;\n }\n .group-text-stu:focus .show-added-students {\n visibility: visible;\n opacity: 1;\n }\n`;\nexport const StyledSortingBtnGroup = styled.div`\n display: flex;\n margin-right: 10px;\n`;\nexport const StyledSortingBtn = styled.div`\n cursor: pointer;\n padding: 9px 13px 7px;\n background: ${({ active }) => (active ? '#9A9A9A' : 'white')};\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid #e9e9e9;\n border-right: none;\n path {\n fill: ${({ active }) => (active ? 'white' : '#DBDBDB')};\n }\n &.up-btn {\n border-left: 1px solid #e9e9e9;\n svg {\n transform: rotate(180deg) translateY(2px);\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch } from 'react-redux';\n\nimport groupIcon from 'assets/img/Group_icon.svg';\nimport groupLogo from 'assets/img/group-logo-white.svg';\nimport smallGrpIcon from 'assets/img/icon-small-group.svg';\n// import reportIcon from 'assets/img/icon-report-group.svg';\n\nimport GroupPopoverMenu from 'components/ManageClass/GroupPopoverMenu';\nimport GroupDeleteModal from 'components/ManageClass/GroupDeleteModal';\nimport PopupModal from 'components/Shared/PopupModal';\nimport moment from 'moment';\nimport history from 'helpers/history';\nimport { fetchMyGroupRequest } from 'stores/createGroup/actions';\nimport { ReactComponent as Triangle } from './triangle.svg';\nimport {\n NoGroupList,\n GroupLists,\n GroupCard,\n StyledSortingBtnGroup,\n StyledSortingBtn\n} from './GroupList.styles';\n\nconst GroupList = ({ list }) => {\n const { t } = useTranslation(['manage-class-group']);\n const dispatch = useDispatch();\n\n const [showModal, setShowModal] = useState(false);\n const [selectedGroupID, setSelectedGroupID] = useState('');\n const [selectedGroupName, setSelectedGroupName] = useState('');\n const [selectSorting, setSelectSorting] = useState('name-asc'); // ['name-asc', 'name-desc','time-asc', 'time-desc']\n const showDeleteModal = () => setShowModal(true);\n\n const createSelectedList = val => {\n const finalObj = {};\n val.forEach(elem => {\n const keyName = elem.ClassID;\n if (finalObj[keyName] === undefined) {\n finalObj[keyName] = [\n {\n userId: elem.UserId,\n userName: elem.FullName,\n classname: elem.ClassName || ''\n }\n ];\n } else {\n finalObj[keyName].push({\n userId: elem.UserId,\n userName: elem.FullName,\n classname: elem.ClassName || ''\n });\n }\n });\n return finalObj;\n };\n\n const editGroup = user => {\n const Students = user.Students.map(elem => {\n return { userId: elem.UserId };\n });\n const selectedStudents = createSelectedList(user.Students);\n\n history.push({\n pathname: '/manage-class/create-group',\n state: {\n Students,\n selectedStudents,\n groupName: user.Name,\n id: user.ID\n }\n });\n };\n\n const goToCreateGroup = () => history.push('/manage-class/create-group');\n\n const deleteSuccess = () => {\n setShowModal(false);\n dispatch(fetchMyGroupRequest());\n };\n\n return (list && list.length) === 0 ? (\n \n \n
\n
\n
\n
{t(`manage-class-group:header.myGroup`, 'My Groups')} \n
\n
\n + {t(`manage-class-group:header.createGroup`, 'Create New Group')}\n \n \n
\n
\n \n setSelectSorting('name-desc')}\n active={selectSorting === 'name-desc'}\n >\n setSelectSorting('name-asc')}\n active={selectSorting === 'name-asc'}\n >\n \n {t(`manage-class-group:table.grpName`, 'Group name')}\n
\n
\n \n setSelectSorting('time-desc')}\n active={selectSorting === 'time-desc'}\n >\n setSelectSorting('time-asc')}\n active={selectSorting === 'time-asc'}\n >\n \n {t(`manage-class-group:table.creationTime`, 'Creation Time')}\n
\n
\n {t(`manage-class-group:table.members`, 'Members')}\n
\n
\n {(list || [])\n .toSorted((a, b) => {\n if (selectSorting === 'name-asc')\n return a.Name.localeCompare(b.Name);\n if (selectSorting === 'name-desc')\n return b.Name.localeCompare(a.Name);\n if (selectSorting === 'time-asc')\n return moment(a.CreateDate).isBefore(b.CreateDate) ? -1 : 1;\n if (selectSorting === 'time-desc')\n return moment(a.CreateDate).isBefore(b.CreateDate) ? 1 : -1;\n return 0;\n })\n .map(elem => (\n
\n {elem.Name}
\n \n {moment(elem.CreateDate).format('hh:mm a DD/MM/YYYY')}\n
\n \n
\n
\n {elem.Students.length}\n {t(`manage-class-group:table.students`, ' students')}\n \n
\n \n
\n {/*
\n */}\n
{\n setSelectedGroupID(elem.ID);\n setSelectedGroupName(elem.Name);\n }}\n editGroup={() => editGroup(elem)}\n />\n \n ))}\n
setShowModal(false)}>\n setShowModal(false)}\n deleteSuccess={deleteSuccess}\n groupId={selectedGroupID}\n groupName={selectedGroupName}\n />\n \n
\n );\n};\n\nexport default GroupList;\n\nconst NoGroupFound = ({ goToCreateGroup, t }) => (\n \n \n
\n
\n
\n {t(\n `manage-class-group:table.noGroupMsg`,\n `You haven't created any groups.`\n )}\n
\n
\n {t(\n `manage-class-group:table.noGroupDesc`,\n 'Click the button below to create new group.'\n )}\n
\n
\n {t(`manage-class-group:header.createGroup`, 'Create New Group')}\n \n \n);\n\nconst ShowList = ({ list }) => {\n return (\n \n {Object.keys(list).map(val => (\n
\n
\n {val && list[val] && list[val].length ? list[val][0].classname : ''}\n \n {list[val].map(elem => (\n
{elem.userName}
\n ))}\n
\n ))}\n
\n {isLoading && \n );\n};\n\nexport default ShowGroup;\n","import styled from 'styled-components';\nimport PopupModal from 'components/Shared/PopupModal';\n\nexport const CreateGroupWrapper = styled.div`\n padding-left: 190px;\n min-height: calc(100vh - 100px);\n @media (max-width: 1024px) {\n padding-left: 66px;\n }\n`;\n\nexport const CreateGroupHeaderStyle = styled.div`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: 1px solid #707070;\n padding: 30px;\n height: 100px;\n width: 100%;\n background-color: #ffffff;\n .back-list {\n font-size: 16px;\n flex: 2;\n span {\n cursor: pointer;\n }\n }\n .grp-name-container {\n flex: 6;\n span {\n font-size: 17px;\n font-weight: 700;\n }\n input {\n width: 360px;\n height: 40px;\n padding: 0 1.5rem;\n border: solid 1px rgba(112, 112, 112, 0.36);\n color: #202020;\n font-weight: 600;\n margin: 0 10px;\n }\n button {\n padding: 2px;\n height: 40px;\n min-width: 140px;\n border-radius: 3px;\n }\n .show-err {\n color: red;\n width: 50%;\n text-align: center;\n }\n }\n`;\n\nexport const CreateGroupBody = styled.div`\n display: flex;\n padding-left: 5px;\n min-height: calc(100vh - 160px);\n`;\nexport const StyledCreateSuccessModal = styled(PopupModal)`\n text-align: center;\n .modal-body {\n max-width: 500px;\n padding: 0 1rem;\n background: white;\n width: 100%;\n }\n h5 {\n color: #ff5b00;\n font-size: 20px;\n margin: 36px 0;\n font-weight: 400;\n }\n .btn-primary {\n padding: 8px 40px;\n margin-bottom: 50px;\n font-size: 18px;\n }\n`;\n","import React, { memo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport history from 'helpers/history';\nimport { useDispatch } from 'react-redux';\nimport { getStudentByClassReset } from 'stores/createGroup/actions';\nimport { CreateGroupHeaderStyle } from './CreateGroup.styles';\n\nconst CreateGroup = ({\n Name,\n changeNameHandler,\n callCreateGroup,\n showErr,\n buttonName\n}) => {\n const { t } = useTranslation(['manage-class-group']);\n const dispatch = useDispatch();\n const goBack = () => {\n history.goBack();\n dispatch(getStudentByClassReset());\n };\n\n return (\n \n \n \n < {t(`manage-class-group:createGroup.backList`, 'Back to list')}\n \n
\n \n \n );\n};\n\nexport default memo(CreateGroup);\n","import styled from 'styled-components';\n\nexport const CreateGroupLevelWrapper = styled.div`\n width: 30%;\n border-right: 1px solid #c4c4c4;\n height: calc(100vh - 160px);\n overflow: auto;\n background-color: #fbfbfb;\n .group-select-level {\n margin: 20px;\n button {\n background-color: #ffffff;\n width: 95% !important;\n }\n }\n .group-select-class {\n margin: 10px 0;\n div {\n font-weight: 600;\n font-size: 16px;\n padding: 10px 30px;\n cursor: pointer;\n position: relative;\n }\n .select-class-img {\n position: absolute;\n right: 15px;\n top: 15px;\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport DropdownMenu from 'components/Shared/DropdownMenu';\nimport { compareValues } from 'helpers/singleClassReport';\nimport sortClasses from 'helpers/parseClassList';\nimport { useSelector } from 'react-redux';\nimport temp from '../../../assets/img/icon-right-arrow.svg';\nimport { CreateGroupLevelWrapper } from './CreateGroupLevels.styles';\n\nlet sortData = null;\nconst CreateGroupLevels = ({ selectClass, callStudents }) => {\n const { t } = useTranslation(['manage-class-group']);\n const { levels } = useSelector(state => state.levels);\n const { classes } = useSelector(state => state.manageClasses);\n const [filterLevel, setFilterLevel] = useState();\n const [classId, setClassId] = useState('');\n const [classData, setClassData] = useState([]);\n const LevelMenuOption = value => `P${value}`;\n\n useEffect(() => {\n sortData =\n classes && classes.hasOwnProperty('ClassList')\n ? sortClasses(classes.ClassList).sort(compareValues('level', 'asc'))\n : [];\n\n setClassData(sortData && sortData[0].classes);\n setFilterLevel(sortData[0].level);\n }, [classes]);\n\n const changeLevel = e => {\n setFilterLevel(e);\n let tempClass = [...classData];\n tempClass = sortData.find(elem => elem.level === e)\n ? sortData.find(elem => elem.level === e).classes\n : [];\n setClassData(tempClass);\n };\n\n const showStudents = val => {\n setClassId(val);\n callStudents(val);\n };\n\n return (\n \n \n level.ID)}\n setValue={changeLevel}\n valueTemplate={LevelMenuOption}\n />\n
\n \n {classData.map(obj => (\n
{\n showStudents(obj.ID);\n selectClass(obj.Name, obj.ID);\n }}\n >\n {obj.Name}\n {classId === obj.ID && (\n \n );\n};\n\nexport default CreateGroupLevels;\n","import styled from 'styled-components';\n\nexport const CreateGroupStudentsWrapper = styled.div`\n width: 35%;\n border-right: 1px solid #c4c4c4;\n height: calc(100vh - 160px);\n overflow: auto;\n background-color: #fbfbfb;\n .crt-grp-classname {\n margin: 20px 10px 5px;\n font-weight: 700;\n font-size: 17px;\n color: #1e1e1e;\n }\n #search-student {\n background-image: ${props => `url(${props.searchIcon})`};\n background-repeat: no-repeat;\n text-indent: 20px;\n background-position: left;\n background-position-x: 10px;\n background-color: #ffffff;\n @media only screen and (max-width: 870px) {\n margin-top: 5px;\n font-size: 14px;\n }\n }\n #search-student:focus {\n border-color: #ffa200;\n }\n #search-student:focus {\n background-image: none;\n text-indent: 0px;\n }\n`;\n\nexport const GroupStudentsContainer = styled.div`\n margin-top: 10px;\n cursor: pointer;\n .no-student {\n font-size: 16px;\n color: #545454;\n text-align: center;\n }\n .active-student {\n background-color: #ffc400;\n }\n .group-students-lists {\n display: flex;\n padding: 5px 20px;\n align-items: center;\n margin-bottom: 5px;\n .check-container {\n position: relative;\n bottom: 10px;\n padding-left: 35px;\n cursor: pointer;\n user-select: none;\n }\n input {\n height: 23px;\n width: 25px;\n position: absolute;\n opacity: 0;\n cursor: pointer;\n left: 1px;\n }\n .group-checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 25px;\n width: 25px;\n background-color: transparent;\n border: 2px solid #707070;\n }\n input:checked ~ .group-checkmark {\n background-color: #ef7836;\n }\n .group-checkmark:after {\n content: '';\n position: absolute;\n display: none;\n }\n input:checked ~ .group-checkmark:after {\n display: block;\n }\n .group-checkmark:after {\n left: 7px;\n top: 1px;\n width: 9px;\n height: 16px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(25deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n img {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n border: 2px solid #fff;\n margin: 0 10px;\n }\n .grp-img-name {\n color: #1e1e1e;\n font-size: 15px;\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport avatarPlaceholder from 'assets/img/avatar.png';\nimport SearchIcon from 'assets/img/icon-manage-class-lup.svg';\nimport MatchedResult from 'components/ManageClass/MatchedResult';\nimport {\n CreateGroupStudentsWrapper,\n GroupStudentsContainer\n} from './CreateGroupStudents.styles';\n\nconst CreateGroupStudents = ({\n classSelected,\n classIdSelected,\n getStudents,\n selectedList,\n changeStudents,\n changeSelectedList,\n Students\n}) => {\n const { t } = useTranslation(['manage-class-group']);\n const [searchTerm, setSearchTerm] = useState('');\n const [showStudents, setShowStudents] = useState(getStudents);\n const [selectedStudents, setSelectedStudents] = useState(Students);\n\n useEffect(() => {\n setShowStudents(getStudents);\n }, [getStudents]);\n\n useEffect(() => {\n setSelectedStudents(Students);\n }, [Students]);\n\n const searchStudent = val => {\n setSearchTerm(val);\n const searchedStudents = getStudents.filter(\n student =>\n student.DisplayName.toLowerCase().indexOf(val.toLowerCase()) >= 0\n );\n setShowStudents(searchedStudents);\n };\n\n const isStudentSelected = UserId => {\n return selectedStudents.some(obj => obj.userId === UserId);\n };\n\n const selectStudent = (userId, userName) => {\n const tempStudents = [...selectedStudents];\n const stuIndex = tempStudents.findIndex(obj => obj.userId === userId);\n if (stuIndex === -1) tempStudents.push({ userId });\n else tempStudents.splice(stuIndex, 1);\n setSelectedStudents(tempStudents);\n changeStudents(tempStudents); // save in parent component\n changeList(userId, userName); // save for showing list in CreateGroupList\n };\n\n const changeList = (userId, userName) => {\n const tempList = { ...selectedList };\n if (tempList[classIdSelected]) {\n const tempListIndex = tempList[classIdSelected].findIndex(\n obj => obj.userId === userId\n );\n if (tempListIndex === -1)\n tempList[classIdSelected].push({\n userId,\n userName,\n classname: classSelected\n });\n else tempList[classIdSelected].splice(tempListIndex, 1);\n } else {\n tempList[classIdSelected] = [];\n tempList[classIdSelected].push({\n userId,\n userName,\n classname: classSelected\n });\n }\n changeSelectedList(tempList);\n };\n\n return (\n \n \n {classSelected ||\n t(`manage-class-group:createGroup.className`, 'Class name')}\n
\n \n \n {showStudents.length === 0 ? (\n \n {t(\n `manage-class-group:createGroup.noStudent`,\n 'No students in this class.'\n )}\n
\n ) : (\n showStudents.map(student => (\n \n \n \n selectStudent(student.UserId, student.DisplayName)\n }\n />\n
\n\n \n
(e.target.src = avatarPlaceholder)}\n />\n \n
\n \n ))\n )}\n \n \n );\n};\n\nexport default CreateGroupStudents;\n","import styled from 'styled-components';\n\nexport const CreateGroupListsWrapper = styled.div`\n width: 35%;\n border-right: 1px solid #c4c4c4;\n height: calc(100vh - 160px);\n overflow: auto;\n background-color: #fbfbfb;\n .no-student-container {\n margin: 60px 20px;\n }\n .no-studnet-selected {\n font-size: 16px;\n color: #545454;\n margin-bottom: 3px;\n }\n .group-list-title {\n margin: 20px;\n font-weight: 700;\n font-size: 17px;\n color: #1e1e1e;\n }\n .group-list-container {\n margin: 20px;\n }\n .list-class-title {\n color: #989898;\n margin-bottom: 20px;\n }\n .list-class-students {\n margin: 10px 0;\n color: #ff5b00;\n display: flex;\n align-items: center;\n }\n .delete-student {\n cursor: pointer;\n height: 15px;\n width: 15px;\n margin-left: 10px;\n background-color: #c4c4c4;\n color: #fff;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n font-size: 11px;\n }\n`;\n","import React, { memo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { CreateGroupListsWrapper } from './CreateGroupLists.styles';\n\nconst CreateGroupLists = ({\n grpName,\n Students,\n selectedList,\n deleteStudent\n}) => {\n const { t } = useTranslation(['manage-class-group']);\n return (\n \n {Students.length === 0 ? (\n \n
\n {t(\n `manage-class-group:createGroup.noSelected`,\n 'No student selected'\n )}\n
\n
\n {t(\n `manage-class-group:createGroup.selectMsg`,\n 'Select students from the list to add to this group'\n )}\n
\n
\n {grpName ||\n t(\n `manage-class-group:createGroup.nameList`,\n 'Name list of the group'\n )}\n
\n \n {Object.keys(selectedList).map(val => (\n
\n {val && selectedList[val] && selectedList[val].length\n ? selectedList[val][0].classname\n : ''}\n {selectedList[val].map(elem => (\n
\n {elem.userName}\n
deleteStudent(elem.userId)}\n >\n x\n \n
\n ))}\n
\n );\n};\n\nexport default memo(CreateGroupLists);\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n getStudentByClassRequest,\n createMyGroupRequest,\n createMyGroupReset,\n updateGroupRequest,\n updateGroupReset,\n getStudentByClassReset\n} from 'stores/createGroup/actions';\n\nimport { isEmpty, clone } from 'ramda';\nimport history from 'helpers/history';\nimport { useLocation } from 'react-router-dom';\nimport { Button } from 'react-bootstrap';\nimport CreateGroupHeader from './CreateGroupHeader';\nimport CreateGroupLevels from './CreateGroupLevels';\nimport CreateGroupStudents from './CreateGroupStudents';\nimport CreateGroupLists from './CreateGroupLists';\n\nimport {\n CreateGroupWrapper,\n CreateGroupBody,\n StyledCreateSuccessModal\n} from './CreateGroup.styles';\n\nconst CreateGroup = () => {\n const { t } = useTranslation(['manage-class-group']);\n const dispatch = useDispatch();\n const location = useLocation();\n\n const getSelectedStudents =\n location.state && location.state.Students ? location.state.Students : []; // get student while editing group\n const getSelectedList =\n location.state && location.state.selectedStudents\n ? location.state.selectedStudents\n : {}; // get selected list while editing group\n const name =\n location.state && location.state.groupName ? location.state.groupName : ''; // get groupname while editing group\n const groupID = location.state && location.state.id ? location.state.id : ''; // get group-id while editing group\n\n const { getStudents, error, createGroup, updateGroup } = useSelector(\n state => state.createGroups\n );\n\n const [grpName, setGrpName] = useState(name);\n const [Students, setStudents] = useState(getSelectedStudents);\n const [selectedList, setSelectedList] = useState(getSelectedList);\n const [classSelected, setClassSelected] = useState('');\n const [classIdSelected, setClassIdSelected] = useState('');\n const [showErr, setShowErr] = useState('');\n const [showSuccess, setShowSuccess] = useState(false);\n useEffect(() => {\n dispatch(getStudentByClassReset());\n // eslint-disable-next-line\n }, []);\n\n useEffect(() => {\n if (!isEmpty(error)) {\n setShowErr(error);\n }\n }, [error]);\n\n useEffect(() => {\n if (!isEmpty(createGroup)) {\n resetStates('create');\n }\n // eslint-disable-next-line\n }, [createGroup]);\n\n useEffect(() => {\n if (!isEmpty(updateGroup)) {\n resetStates('update');\n }\n // eslint-disable-next-line\n }, [updateGroup]);\n\n const resetStates = actionType => {\n if (actionType === 'create') {\n dispatch(createMyGroupReset());\n setShowSuccess(true);\n return;\n }\n dispatch(updateGroupReset());\n\n history.push('/manage-class/show');\n };\n\n const changeNameHandler = val => setGrpName(val);\n\n const callCreateGroup = async e => {\n e.preventDefault();\n if (Students.length === 0) {\n setShowErr('Please select at least one student.');\n return;\n }\n setShowErr('');\n const reqObj = {\n Name: grpName,\n Students\n };\n if (groupID) {\n reqObj.ID = groupID;\n dispatch(updateGroupRequest(reqObj));\n return;\n }\n dispatch(createMyGroupRequest(reqObj));\n };\n\n const setClassAndId = (name, id) => {\n setClassSelected(name);\n setClassIdSelected(id);\n };\n\n const callStudents = id => dispatch(getStudentByClassRequest(id));\n\n const changeStudents = val => setStudents(val);\n\n const changeSelectedList = value => {\n // for showing list in right panel(Name list of group) when selecting a student\n let tempList = { ...selectedList };\n tempList = value;\n setSelectedList(tempList);\n };\n\n const deleteSelectedStudent = userId => {\n const stuIndex = Students.findIndex(elem => elem.userId === userId);\n const tempStudents = [...Students];\n tempStudents.splice(stuIndex, 1);\n setStudents(tempStudents);\n\n const tempList = clone(selectedList);\n Object.keys(tempList).forEach(elem => {\n const listIndex = tempList[elem].findIndex(key => key.userId === userId);\n if (listIndex !== -1) tempList[elem].splice(listIndex, 1);\n });\n setSelectedList(tempList);\n };\n const hidePopup = () => {\n setShowSuccess(false);\n history.push('/manage-class/show');\n };\n return (\n <>\n \n \n {t(\n 'manage-class-group:successModal.title',\n 'Group Created Successfully!'\n )}\n \n \n {t('manage-class-group:successModal.btn', 'See My Groups')}\n \n \n \n \n \n \n \n );\n};\n\nexport default CreateGroup;\n","import styled from 'styled-components';\n\nconst GameSettingStudentTable = styled.div`\n display: grid;\n margin-top: 60px;\n margin-right: 20px;\n width: 100%;\n @media only screen and (max-width: 800px) {\n margin-top: 60px;\n }\n .table {\n tbody {\n height: 200px;\n overflow-y: auto;\n width: 100%;\n }\n td {\n vertical-align: middle;\n @media only screen and (max-width: 768px) {\n padding: 0px;\n }\n }\n .table-head {\n th {\n color: rgba($color: #0a0a0a, $alpha: 0.42);\n font-size: 14px;\n font-weight: 100;\n vertical-align: middle;\n text-align: center;\n border-bottom: none;\n @media only screen and (max-width: 1260px) {\n font-size: 12px;\n }\n @media only screen and (max-width: 1132px) {\n font-size: 10px;\n }\n @media only screen and (max-width: 768px) {\n font-size: 6px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n span {\n display: flex;\n justify-content: center;\n }\n }\n }\n .table-row {\n font-size: 14px;\n padding: 12px 5px;\n text-align: center;\n @media only screen and (max-width: 1132px) {\n font-size: 12px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n .plan {\n width: 1%;\n font-size: 11px;\n text-align: center;\n @media only screen and (max-width: 800px) {\n font-size: 8px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n img {\n height: 22px;\n width: 22px;\n @media only screen and (max-width: 800px) {\n height: 0px;\n width: 0px;\n }\n }\n }\n &--student {\n font-weight: 600;\n text-align: left;\n @media only screen and (max-width: 800px) {\n font-size: 8px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n img {\n margin-right: 10px;\n height: 40px;\n width: 40px;\n border-radius: 50%;\n @media only screen and (max-width: 800px) {\n height: 20px;\n width: 20px;\n margin-left: 5px;\n margin-right: 5px;\n }\n @media only screen and (max-width: 639px) {\n height: 0px;\n width: 0px;\n margin-left: 3px;\n margin-right: 0px;\n }\n }\n }\n }\n //the container\n .container-checkbox {\n position: relative;\n display: flex;\n align-items: center;\n }\n //hide the browser's default check-box\n .container-checkbox input {\n opacity: 0;\n cursor: pointer;\n }\n .container-checkbox label {\n margin-bottom: 0;\n margin-left: 35px;\n @media only screen and (max-width: 800px) {\n font-size: 8px;\n }\n @media only screen and (max-width: 587px) {\n font-size: 4px;\n }\n }\n //create a custom checkbox\n .container-checkbox .checkmark {\n position: absolute;\n height: 25px;\n width: 25px;\n border-radius: 4px;\n border: 1px solid #9e9e9e;\n background-color: white;\n @media only screen and (max-width: 1132px) {\n height: 17px;\n width: 17px;\n }\n @media only screen and (max-width: 768px) {\n height: 18px;\n width: 18px;\n }\n @media only screen and (max-width: 587px) {\n height: 10px;\n width: 10px;\n }\n }\n //on mouse hover\n .container-checkbox:hover input ~ .checkmark {\n background-color: #ffc400;\n border: none;\n }\n //when checkbox is checked\n .container-checkbox input:checked ~ .checkmark {\n background-color: #ef7836;\n border: none;\n }\n //create the checkmark/indicator (hidden when not checked)\n .container-checkbox .checkmark:after {\n content: '';\n position: absolute;\n display: none;\n }\n //show the checkmark when checked\n .container-checkbox input:checked ~ .checkmark:after {\n display: block;\n }\n //style the checkmark/indicator\n .container-checkbox .checkmark:after {\n left: 8px;\n top: 2px;\n width: 8px;\n height: 16px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n @media only screen and (max-width: 1132px) {\n width: 6px;\n height: 10px;\n border-width: 0 2px 2px 0;\n left: 6px;\n }\n @media only screen and (max-width: 768px) {\n width: 6px;\n height: 10px;\n border-width: 0 2px 2px 0;\n left: 6px;\n }\n @media only screen and (max-width: 587px) {\n width: 4px;\n height: 6px;\n border-width: 0 1.5px 1.5px 0;\n left: 3px;\n top: 1px;\n }\n }\n }\n`;\n\nexport default GameSettingStudentTable;\n","import React, { useCallback } from 'react';\nimport SchoolPlanIcon from 'assets/img/icon-manage-class-student-list-plan-school.svg';\nimport StandardPlanIcon from 'assets/img/icon-manage-class-student-list-plan-standard.svg';\nimport PremiumPlanIcon from 'assets/img/icon-manage-class-student-list-plan-premium.svg';\nimport avatarPlaceholder from 'assets/img/avatar.png';\nimport Spinner from 'components/Shared/Spinner';\nimport { useTranslation } from 'react-i18next';\nimport { Form } from 'react-bootstrap';\nimport GameSettingStudentTable from './GameSettingStudentList.styles';\n\nconst getPlanIcon = planID => {\n switch (planID) {\n case 0:\n return SchoolPlanIcon;\n case 2:\n return StandardPlanIcon;\n case 3:\n return PremiumPlanIcon;\n case 5:\n return PremiumPlanIcon;\n case 6:\n return PremiumPlanIcon;\n default:\n return null;\n }\n};\n\nconst GameSettingStudentList = ({\n students,\n allowedStudentIDs,\n setAllowedStudentIDs,\n isLoading\n}) => {\n const { t } = useTranslation(['manage-class']);\n\n const handleOnChange = useCallback(\n event => {\n const userID = parseInt(event.target.value, 10);\n if (event.target.checked) {\n setAllowedStudentIDs([...allowedStudentIDs, userID]);\n } else {\n setAllowedStudentIDs(\n allowedStudentIDs.filter(studentID => studentID !== userID)\n );\n }\n },\n [allowedStudentIDs, setAllowedStudentIDs]\n );\n return (\n \n {isLoading && \n No students\n \n )}\n {!isLoading && students && allowedStudentIDs && (\n \n \n \n {t(`manage-class:studList.plan`, 'Plan')} \n \n {t(`manage-class:studList.studName`, 'Student Name')}\n \n \n \n \n {students &&\n students.map(item => (\n \n \n {getPlanIcon(item.PlanId) !== null && (\n \n \n {\n e.target.src = avatarPlaceholder;\n }}\n src={item.ProfilePictureUrl}\n alt=\"profile\"\n />\n {item.Name}\n \n \n \n \n {t(`manage-class:gameSettings.allow`, 'Allow access')}\n \n
\n \n \n ))}\n \n
\n )}\n \n );\n};\n\nexport default React.memo(GameSettingStudentList);\n","import styled from 'styled-components';\n\nconst GameSettingContainer = styled.div`\n background-color: white;\n width: calc(100vw - 280px);\n margin-left: 245px;\n margin-right: 35px;\n box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);\n @media (max-width: 1024px) {\n width: calc(100vw - 106px);\n margin-left: 81px;\n margin-right: 25px;\n }\n span {\n font-size: 16px;\n }\n\n .navigation-back {\n color: #727272;\n text-decoration: none;\n @media only screen and (max-width: 768px) {\n font-size: 10px;\n }\n &:hover {\n color: #ff5b00;\n }\n }\n`;\n\nexport default GameSettingContainer;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport DropdownMenu from 'components/Shared/DropdownMenu';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport iconToga from 'assets/img/icon-toga.svg';\nimport GameSettingStudentList from 'components/ManageClass/GameSettingStudentList';\nimport {\n fetchGameSettingClassRequest,\n fetchGameSettingStudentRequest,\n resetError,\n saveGameSettingRequest\n} from 'stores/gameSetting/actions';\nimport AlertModal from 'components/Alert/AlertModal';\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport GameSettingContainer from './GameSetting.styles';\n\nconst GameSetting = () => {\n const { t } = useTranslation(['manage-class', 'common']);\n const dispatch = useDispatch();\n const {\n classes,\n students,\n error,\n isLoading,\n saveSettingResult\n } = useSelector(state => state.gameSetting);\n\n const [selectedClass, setSelectedClass] = useState(null);\n const [allowedStudentIDs, setAllowedStudentIDs] = useState([]);\n const [isShowModal, setIsShowModal] = useState(false);\n const [alertMessage, setAlertMessage] = useState('');\n\n const onModalClose = () => {\n setAlertMessage('');\n setIsShowModal(false);\n dispatch(resetError());\n };\n\n const handleSelectedClass = classObject => {\n setSelectedClass(classObject);\n };\n\n useEffect(() => {\n dispatch(fetchGameSettingClassRequest());\n }, [dispatch]);\n\n useEffect(() => {\n setSelectedClass(classes[0]);\n }, [classes]);\n\n useEffect(() => {\n if (selectedClass) {\n dispatch(fetchGameSettingStudentRequest(selectedClass.Id));\n }\n }, [dispatch, selectedClass]);\n\n useEffect(() => {\n if (students) {\n const allowed = students\n .filter(student => student.Access === true)\n .map(student => student.UserId);\n setAllowedStudentIDs(allowed);\n }\n }, [students]);\n\n useEffect(() => {\n if (!isNilOrEmpty(error)) {\n setIsShowModal(true);\n setAlertMessage(error);\n }\n }, [error]);\n\n useEffect(() => {\n if (saveSettingResult) {\n setIsShowModal(true);\n setAlertMessage(\n t(\n `manage-class:gameSettings.modal.desc`,\n 'Game Setting Change Successfully!'\n )\n );\n }\n }, [saveSettingResult, t]);\n\n const handleOnSave = useCallback(() => {\n const disallowed = students\n .map(student => student.UserId)\n .filter(id => !allowedStudentIDs.includes(id));\n const params = {\n Groupid: selectedClass.Id,\n AllowedUsers: allowedStudentIDs,\n DeniedUsers: disallowed\n };\n\n dispatch(saveGameSettingRequest(params));\n }, [dispatch, allowedStudentIDs, students, selectedClass]);\n\n return (\n <>\n \n {t('common:close', 'Close')}\n \n }\n >\n {alertMessage}
\n \n \n \n
\n < {t(`common:back`, 'Back')}\n \n\n
\n
\n
\n {t(`manage-class:studModal.class`, 'Class')}\n \n
\n
\n
\n {t(\n `manage-class:gameSettings.desc`,\n 'Math Games Setting for Individual Students'\n )}\n \n
\n\n
\n {t(`manage-class:editGroup.save`, 'Save')}\n \n \n
\n \n \n );\n};\nexport default React.memo(GameSetting);\n","import React, { useState } from 'react';\nimport { Route, Switch, useLocation } from 'react-router-dom';\nimport Sidebar from 'components/Sidebar/Sidebar';\nimport SidebarManageClass from 'components/Sidebar/SidebarManageClass';\nimport Overlay from 'components/Content/Overlay';\nimport Header from 'components/Header/Header';\nimport GroupAdd from './GroupAdd';\nimport GroupsList from './GroupsList';\nimport DisplayClass from './DisplayClass';\nimport StudentList from './StudentList';\nimport ShowGroup from './ShowGroup/ShowGroup';\nimport CreateGroup from './CreateGroup/CreateGroup';\nimport GameSetting from './GameSetting';\n\nexport default function ManageClass() {\n const [expanded, setExpanded] = useState(false);\n const toggleNavigation = () => setExpanded(!expanded);\n const { pathname } = useLocation();\n const getContentClassName = () =>\n `content ${\n pathname === '/manage-class/add'\n ? ' content-sidebar-small'\n : ' content-sidebar-none'\n }`;\n\n return (\n <>\n \n \n \n \n \n \n
\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const ProfileImageStyle = styled.div`\n position: relative;\n margin-bottom: 30px;\n .profile-img {\n width: auto;\n height: 90px;\n border-radius: 50%;\n }\n .camera-border {\n position: absolute;\n bottom: -4px;\n right: -4px;\n background: #ffffff;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161);\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n img {\n width: 20px;\n }\n }\n`;\n\nexport const ProfileModal = styled.div`\n .modal-content {\n max-width: 700px;\n }\n h5 {\n height: 60px;\n background: #ededed;\n text-align: center;\n color: #202020;\n font-size: 16px;\n font-weight: 600;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .img-modal-body {\n height: 300px;\n overflow: auto;\n padding: 20px 10px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n .imgs-container {\n transition: all 0.2s;\n margin: 10px 15px;\n border: 3px solid transparent;\n cursor: pointer;\n border: 3px solid transparent;\n }\n .img-active {\n border-color: #ff5b00;\n filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));\n }\n .all-imgs {\n width: 100px;\n height: 100px;\n }\n }\n .img-modal-footer {\n padding: 20px 30px;\n text-align: right;\n button {\n margin-left: 5px;\n }\n .btn-outline-light {\n color: #545454;\n border: 1px solid #c4c4c4;\n border-radius: 2px;\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Modal } from 'react-bootstrap';\nimport { ProfileModal } from './ProfileImage.style';\n\nconst ProfileImageModal = props => {\n const { t } = useTranslation(['profile-settings']);\n const { show, handleClose, avatarId, saveImage, resultImages } = props;\n const [selectedId, setSelectedId] = useState(avatarId);\n\n const setImage = () => {\n const altImg = resultImages[selectedId];\n saveImage(altImg, selectedId);\n handleClose();\n };\n\n return (\n \n \n \n {t(`profile-settings:profilePic.changePic`, 'Change Profile Picture')}\n \n \n {Object.keys(resultImages).map(item => (\n
setSelectedId(item)}\n className={`imgs-container ${selectedId === item &&\n 'img-active'}`}\n key={item}\n >\n \n \n {t(`profile-settings:profilePic.cancel`, 'Cancel')}\n \n \n {t(`profile-settings:profilePic.confirm`, 'Confirm')}\n \n
\n \n \n );\n};\n\nexport default ProfileImageModal;\n","import React, { useState, useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchAvatarsRequest } from 'stores/profileSettings/actions';\nimport defaultIcon from 'assets/img/defaulticon.svg';\nimport cameraIcon from 'assets/img/profile-camera.svg';\nimport Avatar from 'assets/img/avatar.png';\nimport ProfileImageModal from './ProfileImageModal';\nimport { ProfileImageStyle } from './ProfileImage.style';\n\nexport default function ProfileImage({\n profileImage,\n profileAvatarId,\n setProfileAvatarId,\n removeDisableButton\n}) {\n const dispatch = useDispatch();\n const { avatars } = useSelector(state => state.profileSettings);\n const [showModal, setShowModal] = useState(false);\n const [mainImage, setMainImage] = useState(profileImage);\n\n useEffect(() => {\n dispatch(fetchAvatarsRequest());\n }, [dispatch]);\n\n useEffect(() => {\n if (profileImage !== undefined) setMainImage(profileImage);\n }, [profileImage]);\n\n const openModal = () => setShowModal(true);\n\n const closeModal = () => setShowModal(false);\n\n const setImageAndId = (img, id) => {\n removeDisableButton();\n setMainImage(img);\n setProfileAvatarId(id);\n };\n\n return (\n \n {\n e.target.src = Avatar;\n }}\n />\n \n \n {showModal && (\n \n );\n}\n","import styled from 'styled-components';\n\nexport const ProfileFormContainer = styled.div`\n text-align: center;\n .edit-profile-field {\n display: flex;\n width: 100%;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 20px;\n font-size: 16px;\n .field-title {\n width: 210px;\n text-align: right;\n margin-right: 10px;\n color: #202020;\n }\n .profile-form-inp {\n width: 360px;\n height: 38px;\n padding: 0 1.5rem;\n border: solid 1px rgba(112, 112, 112, 0.36);\n color: #202020;\n font-weight: 600;\n }\n .password-button {\n display: flex;\n width: 360px;\n height: 38px;\n padding: 0 0.3rem 0 1.5rem;\n border: solid 1px rgba(112, 112, 112, 0.36);\n color: #202020;\n font-weight: 600;\n background-color: #fff;\n align-items: center;\n }\n .change-pswd-inp {\n flex-grow: 2;\n background: transparent;\n border: none;\n }\n .change-pswd {\n color: #ff5b00;\n cursor: pointer;\n }\n .show-hide {\n cursor: pointer;\n }\n }\n .cancel-pswd-container {\n margin-bottom: 20px;\n display: flex;\n justify-content: flex-end;\n .pswd-border-line {\n width: 60%;\n margin: 8px;\n border-color: #c4c4c4;\n }\n .cancel-pswd {\n color: #ff5b00;\n cursor: pointer;\n font-weight: 600px;\n }\n }\n .profile-err {\n color: red;\n margin-bottom: 5px;\n }\n .save-profile {\n font-weight: 600;\n font-size: 16px;\n padding: 5px 20px;\n min-width: auto;\n }\n .save-profile:disabled {\n background-color: #ff5b00;\n border-color: #ff5b00;\n opacity: 0.4;\n cursor: not-allowed;\n }\n`;\n","import styled from 'styled-components';\n\nconst ProfilSuccessModalContnainer = styled.div`\n display: flex;\n flex-direction: column;\n width: 550px;\n background: white;\n padding: 40px;\n align-items: center;\n .close-btn {\n position: absolute;\n right: 35px;\n top: 30px;\n border: none;\n font-size: 18px;\n background: none;\n }\n .title {\n color: #ff5b00;\n font-size: 18px;\n margin: 10px;\n }\n .text {\n color: #060606;\n margin: 10px 10px 30px 10px;\n font-size: 16px;\n }\n .btn-group {\n margin: 10px;\n button {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n }\n .no-btn {\n background: white;\n color: #ff5b00;\n border: 1px solid #d5d5d5;\n &:hover {\n background: #FFF7F3\n color: #f25008;\n border-color: #f25008;\n }\n }\n .yes-btn {\n background: #ff5b00;\n color: white;\n border: 1px solid #ff3d3d;\n &:hover {\n background: #f25008;\n }\n }\n }\n span {\n font-size: 16px;\n }\n .success-title {\n font-size: 18px;\n }\n .success-btn {\n width: 180px;\n padding: 8px;\n border-radius: 2px;\n font-size: 16px;\n margin: 0px 20px;\n background: #5ED46A;\n color: white;\n border: 1px solid #29C16A;\n }\n`;\n\nexport default ProfilSuccessModalContnainer;\n","import React from 'react';\nimport successIcon from 'assets/img/icon-manage-class-success-check.svg';\nimport ProfileSuccessModalContnainer from './ProfileSuccessModal.styles';\n\nconst ProfileSuccessModal = ({ hide }) => {\n return (\n \n \n X\n \n \n \n \n Your changes have been saved succesfully.\n \n \n OK\n \n \n );\n};\n\nexport default ProfileSuccessModal;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Spinner } from 'react-bootstrap';\nimport {\n fetchProfileDataRequest,\n updateProfileRequest,\n emptyUpdateProfile\n} from 'stores/profileSettings/actions';\nimport ShowPswd from 'assets/img/icon-show-pswd.svg';\nimport HidePswd from 'assets/img/icon-hide-pswd.svg';\nimport ProfileImage from './ProfileImage';\nimport { ProfileFormContainer } from './ProfileForm.style';\nimport { isEmpty } from 'ramda';\n\nimport ProfileSuccessModal from './ProfileSuccessModal';\nimport PopupModal from 'components/Shared/PopupModal';\n\nexport default function ProfileForm() {\n const { t } = useTranslation(['profile-settings']);\n const dispatch = useDispatch();\n const { isLoading } = useSelector(state => state.profileSettings);\n const { profileData } = useSelector(state => state.profileSettings);\n const { updateData } = useSelector(state => state.profileSettings);\n const { error } = useSelector(state => state.profileSettings);\n\n const [name, setName] = useState('');\n const [nameInClass, setNameInClass] = useState('');\n const [email, setEmail] = useState('');\n const [profileImage, setProfileImage] = useState('');\n const [profileAvatarId, setProfileAvatarId] = useState('');\n const [changePwd, setChangePwd] = useState(false);\n const [passwords, setPasswords] = useState({\n oldPassword: '',\n newPassword: '',\n confirmPassword: ''\n });\n const [showPswd, setShowPswd] = useState(false);\n const [showConfirmPswd, setShowConfirmPswd] = useState(false);\n const [showErr, setShowErr] = useState('');\n const [disableButton, setDisableButton] = useState(true);\n const [showSuccessModal, setShowSuccessModal] = useState(false);\n\n useEffect(() => {\n if (!profileData.error) {\n setName(profileData.FullName);\n setNameInClass(profileData.NameInClass);\n setEmail(profileData.TeacherEmail);\n setProfileImage(profileData.ProfileImage);\n setProfileAvatarId(profileData.ProfileAvatarId);\n }\n }, [profileData]);\n\n useEffect(() => {\n if (!isEmpty(updateData)) {\n if (updateData) setChangePwd(false);\n dispatch(fetchProfileDataRequest());\n dispatch(emptyUpdateProfile());\n setDisableButton(true);\n showModal();\n }\n // eslint-disable-next-line\n }, [updateData]);\n\n useEffect(() => {\n if (error) {\n setShowErr(error);\n }\n }, [error]);\n\n const changePassword = (val, type) => {\n setDisableButton(false);\n const tempPswd = { ...passwords };\n tempPswd[type] = val;\n setPasswords(tempPswd);\n };\n\n const createReqObj = () => {\n const obj = {\n UserId: profileData.UserId,\n FullName: name,\n NameInClass: nameInClass,\n TeacherEmail: email,\n ProfileAvatarId: profileAvatarId,\n CurrentPassword: changePwd ? passwords.oldPassword : null,\n NewPassword: changePwd ? passwords.newPassword : null,\n ConfirmPassword: changePwd ? passwords.confirmPassword : null\n };\n return obj;\n };\n\n const handleSubmit = e => {\n e.preventDefault();\n setShowErr('');\n if (changePwd) {\n if (passwords.newPassword !== passwords.confirmPassword) {\n setShowErr(\n t(\n `profile-settings:main.pswdErr`,\n 'New and confirm password should be same.'\n )\n );\n return;\n }\n }\n const obj = createReqObj();\n dispatch(updateProfileRequest(obj, changePwd));\n cancelChangePswd();\n };\n\n const setAvatarId = val => {\n setProfileAvatarId(val);\n };\n\n const cancelChangePswd = () => {\n setShowErr('');\n setChangePwd(false);\n setPasswords({\n ...passwords,\n oldPassword: '',\n newPassword: '',\n confirmPassword: ''\n });\n };\n\n const showModal = () => setShowSuccessModal(true);\n\n return (\n <>\n setDisableButton(false)}\n />\n \n \n setShowSuccessModal(false)}\n >\n setShowSuccessModal(false)} />\n \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const ProfileSettingHeader = styled.div`\n background: #ffffff;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161);\n padding: 25px;\n text-align: center;\n color: #202020;\n font-size: 16px;\n font-weight: bold;\n`;\n\nexport const ProfileFormWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n flex-direction: column;\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport Header from 'components/Header/Header';\nimport ProfileForm from './ProfileForm/ProfileForm';\nimport {\n ProfileSettingHeader,\n ProfileFormWrapper\n} from './ProfileSettings.style';\n\nexport default function ManageClass() {\n const { t } = useTranslation(['profile-settings']);\n return (\n <>\n \n \n {t(`profile-settings:main.profileSettings`, 'Profile and Settings')}\n \n \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const CPContainer = styled.div`\n background: white;\n grid-column: 1 / span 6;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: -53px;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n 'Helvetica Neue', sans-serif;\n\n @media only screen and (max-width: 1024px) {\n grid-column: 1 / span 5;\n }\n\n @media only screen and (max-width: 480px) {\n grid-column: 1 / span 10;\n justify-content: center;\n padding: 0 1rem 1rem;\n }\n\n .mascot {\n position: absolute;\n width: 60%;\n bottom: 0;\n @media only screen and (max-width: 1024px) {\n width: 50%;\n }\n }\n`;\n\nexport const RealTimeContainer = styled.div`\n width: 90%;\n margin-top: 25px;\n font-size: 16px;\n @media only screen and (min-width: 1920px) {\n font-size: 20px;\n }\n @media only screen and (max-width: 1024px) {\n font-size: 12px;\n padding: 2rem 1.5rem;\n }\n .title {\n font-size: 22px;\n color: #7486ff;\n margin-bottom: 1rem;\n font-family: 'Linotte Semibold', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n }\n .student-name {\n width: 28%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n @media only screen and (max-width: 1024px) {\n width: 18%;\n }\n }\n .school {\n display: flex;\n width: 21.5vw;\n @media only screen and (max-width: 1024px) {\n width: auto;\n }\n img {\n width: 21px;\n height: 21px;\n }\n span {\n margin-left: 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n }\n }\n .latest-CP {\n text-align: center;\n width: 12%;\n @media only screen and (max-width: 1024px) {\n width: 17%;\n }\n }\n .time {\n width: 19%;\n @media only screen and (max-width: 1024px) {\n width: 30%;\n }\n }\n .flag {\n width: 5%;\n img {\n width: 23px;\n height: 23px;\n @media only screen and (max-width: 1024px) {\n width: 18px;\n height: 18px;\n }\n }\n }\n\n table td {\n padding: 0.3rem;\n color: #707070;\n }\n .table-title {\n color: #7e7e7e;\n font-family: 'Linotte Semibold', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n tr {\n border-top: hidden;\n border-bottom: hidden;\n }\n @media only screen and (max-width: 1366px) {\n font-size: 14px;\n }\n }\n .table-body {\n td {\n border-top: none;\n font-family: 'Linotte Light', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n font-size: 0.8125rem;\n @media (min-width: 1920px) {\n font-size: 1rem;\n }\n }\n tr {\n border-bottom: 1px solid #858dff;\n width: 100%;\n }\n }\n`;\n","import React from 'react';\nimport { CPContainer, RealTimeContainer } from './CPSection.styles';\nimport Mascot from './mascot.svg';\n\nconst CPErrorFallback = () => {\n return (\n \n \n Latest CP Submitted
\n \n \n );\n};\n\nexport default CPErrorFallback;\n","import React, { useEffect, useState } from 'react';\nimport Mascot from './mascot.svg';\nimport { CPContainer, RealTimeContainer } from './CPSection.styles';\n\n// Reference to jquery\nconst { $ } = window;\n\n// Helpers\n// const compareArray = (arr1, arr2) => {\n// // Check if first item is the same\n// return JSON.stringify(arr1[0]) === JSON.stringify(arr2[0]);\n// };\n\n// Component\nconst CPSection = () => {\n // Component States\n const [connectionStatus, setConnectionStatus] = useState(false);\n const [submissionsData, setSubmissionsData] = useState([]);\n const [batchedData, setBatchedData] = useState([]);\n\n // UseEffects\n // Fetch latest submission\n useEffect(() => {\n $.connection.hub.url = process.env.REACT_APP_SIGNALR_ENDPOINT;\n $.connection.hub.logging = true;\n const psHub = $.connection.ProblemSumsBroadcast;\n // Connect to SignalR endpoint\n $.connection.hub\n .start()\n .done(() => {\n // console.log('Connected');\n setConnectionStatus(true);\n psHub.server\n .getLatestSubmissions()\n .done(data => {\n // console.log(JSON.parse(data));\n if (psHub.client.prevState.length === 0) {\n setSubmissionsData(JSON.parse(data));\n setBatchedData(JSON.parse(data));\n }\n })\n .fail(err => {\n console.log(err);\n });\n })\n .fail(err => {\n setConnectionStatus(false);\n console.log(err);\n });\n return () => $.connection.hub.stop();\n }, []);\n useEffect(() => {\n const psHub = $.connection.ProblemSumsBroadcast;\n if (submissionsData.length > 0) {\n psHub.client.prevState = [...submissionsData];\n // console.log('Set prevState', psHub.client.prevState);\n } else {\n psHub.client.prevState = [];\n }\n }, [submissionsData]);\n\n useEffect(() => {\n const psHub = $.connection.ProblemSumsBroadcast;\n psHub.client.broadCastLatestCP = data => {\n // console.log('Received broadcast', JSON.parse(data));\n const newData = [...psHub.client.prevState];\n // console.log('Function', newData);\n newData.unshift(JSON.parse(data));\n setSubmissionsData(newData.slice(0, 6));\n if (psHub.client.prevState.length === 3) {\n setBatchedData(newData.slice(0, 6));\n }\n };\n }, []);\n\n // Mock broadcast update\n // useEffect(() => {\n // const interval = setInterval(() => {\n // console.log('Broadcast update');\n // setSubmissionsData([\n // {\n // FullName: 'Penared******************',\n // School: 'Sacred Heart Academy Pasig',\n // SchoolCode: '1509934585',\n // Points: 2,\n // SDate: '11:31, 2020-Jul-04',\n // Flag: '/Content/images/flag/169.png',\n // CountryId: '169'\n // }\n // ]);\n // }, 1000);\n // return () => clearInterval(interval);\n // }, []);\n\n // Update data in batches every 3 seconds\n useEffect(() => {\n const interval = setInterval(() => {\n const { prevState } = $.connection.ProblemSumsBroadcast.client;\n // console.log('Interval batch');\n if (batchedData.length > 0) {\n setBatchedData(prevState);\n }\n }, 3000);\n return () => clearInterval(interval);\n }, [batchedData.length]);\n return (\n \n \n Latest CP Submitted
\n \n \n \n Name \n School \n Latest CP \n Submission Time \n \n \n \n {connectionStatus &&\n batchedData.slice(0, 4).map((item, index) => (\n \n {item.FullName} \n \n {\n e.target.style.display = 'none';\n }}\n src={`https://static.koobits.com/eduresources/schlogo/${item.SchoolCode}.png`}\n alt=\"school-logo\"\n />\n {item.School} \n \n {item.Points} \n {item.SDate} \n \n {\n e.target.style.display = 'none';\n }}\n src={`https://problemsums.koobits.com/Content/images/flag/${item.CountryId}.png`}\n alt=\"flag\"\n />\n \n \n ))}\n \n
\n \n \n );\n};\n\nexport default CPSection;\n","import styled from 'styled-components';\n\nexport const LoginButton = styled.div`\n width: 100%;\n .custom-button,\n .login-button {\n background: #ffae0c;\n color: #fff;\n font-size: calc(20 / 1366 * 100vw);\n font-family: 'Linotte Semibold', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n border: none;\n width: 100%;\n padding: 0.5rem 2rem;\n border-radius: 2rem;\n -webkit-box-shadow: 0px 9px 0px 0px #e39f16;\n -moz-box-shadow: 0px 9px 0px 0px #e39f16;\n box-shadow: 0px 9px 0px 0px #e39f16;\n margin-bottom: 1rem;\n cursor: pointer;\n @media only screen and (max-width: 1024px) {\n font-size: calc(20 / 1024 * 100vw);\n }\n }\n\n .custom-button:hover,\n .login-button:hover {\n background: #ff9e0c;\n box-shadow: 0px 9px 0px 0px #e39116;\n -webkit-box-shadow: 0px 9px 0px 0px #e39116;\n -moz-box-shadow: 0px 9px 0px 0px #e39116;\n }\n\n @media only screen and (max-width: 480px) {\n .custom-button,\n .login-button {\n width: 90%;\n font-size: 24px;\n position: relative;\n top: -4rem;\n }\n .login-button {\n position: static;\n align-self: center;\n }\n }\n`;\n","import React from 'react';\n\nimport { LoginButton } from './LoginButton.styles';\n\nconst CustomButton = ({ children, ...otherProps }) => (\n \n \n {children}\n \n \n);\n\nexport default CustomButton;\n","import styled from 'styled-components';\n\nexport const PasswordContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n @media only screen and (max-width: 480px) {\n width: 89%;\n }\n .show-password {\n display: flex;\n flex-direction: row;\n margin-left: 1rem;\n @media only screen and (max-width: 480px) {\n margin: 0.5rem;\n }\n @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {\n margin-left: 1.1rem;\n }\n span {\n margin-top: 0.2rem;\n margin-left: 1.5rem;\n font-size: 15px;\n color: #4852b5;\n opacity: 1;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n @media only screen and (min-width: 1920px) {\n font-size: 20px;\n }\n }\n }\n input[type='checkbox'] {\n width: 12px;\n height: 12px;\n position: absolute;\n z-index: 1;\n margin-top: 0.3rem;\n }\n .show-password input {\n cursor: pointer;\n /* Increase size of checkbox */\n -ms-transform: scale(2); /* IE */\n -moz-transform: scale(2); /* FF */\n -webkit-transform: scale(2); /* Safari and Chrome */\n -o-transform: scale(2); /* Opera */\n transform: scale(2);\n }\n #password {\n background: #fff;\n padding: 0.5rem 1.5rem;\n border: none;\n border-radius: 2rem;\n font-size: 1rem;\n color: #4852b5;\n width: calc(100% - 3rem);\n margin-bottom: 1rem;\n @media only screen and (min-width: 1920px) {\n padding: 0.8rem 1.5rem;\n font-size: 1.2rem;\n }\n @media only screen and (max-width: 1366px) {\n padding: 0.5rem 1.5rem;\n }\n @media only screen and (max-width: 480px) {\n padding: 0.5rem 1.5rem;\n font-size: 18px;\n margin-bottom: 1rem;\n }\n }\n #password::placeholder {\n color: #8b96c5;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n }\n`;\n\nexport const LoginFormContainer = styled.div`\n background-color: rgba(255, 255, 255, 0.22);\n width: 70%;\n border-radius: 1rem;\n padding: 2rem 2rem;\n @media only screen and (max-width: 480px) {\n background-color: rgba(255, 255, 255, 0);\n width: 100%;\n padding: 1.5rem 2rem;\n }\n @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {\n padding: 1.5rem 0rem;\n }\n .login-form {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n #login-id {\n background: #fff;\n padding: 0.5rem 1.5rem;\n border: none;\n border-radius: 2rem;\n font-size: 1rem;\n color: #4852b5;\n width: 100%;\n margin-bottom: 1rem;\n @media only screen and (min-width: 1920px) {\n font-size: 1.2rem;\n padding: 0.8rem 1.5rem;\n }\n @media only screen and (max-width: 480px) {\n width: 75%;\n padding: 0.5rem 1.5rem;\n font-size: 18px;\n margin-bottom: 1rem;\n }\n @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {\n width: 100%;\n }\n }\n #login-id::placeholder {\n color: #8b96c5;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n }\n .help-container {\n text-align: left;\n width: 100%;\n margin-bottom: 1rem;\n padding-left: 0.3rem;\n font-size: 15px;\n a {\n color: #4852b5;\n text-decoration: underline;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n }\n @media only screen and (min-width: 1920px) {\n font-size: 1.2rem;\n }\n @media only screen and (max-width: 480px) {\n padding-left: 4rem;\n }\n @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {\n padding-left: 2rem;\n }\n }\n`;\nexport const StyledErrorMessageContainer = styled.div`\n color: #ff2e35;\n padding-left: 1rem;\n margin-bottom: 0.5rem;\n text-align: left;\n a {\n color: #ff2e35;\n text-decoration: underline;\n }\n`;\n","import React, { useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { loginRequest } from 'stores/login/actions';\nimport LoginButton from '../LoginButton/LoginButton';\nimport {\n PasswordContainer,\n LoginFormContainer,\n StyledErrorMessageContainer\n} from './LoginForm.styles';\n\nconst Password = ({ password, handleChange }) => {\n const [type, setType] = useState('password');\n const togglePasswordHandler = e => {\n if (type === 'password') {\n setType('text');\n } else {\n setType('password');\n }\n };\n\n return (\n \n \n Show \n
\n \n );\n};\n\nconst LoginErrors = ({ error, username }) => {\n const errorTypes = {\n 'Invalid Password.': (\n <>\n Your Password is wrong.{' '}\n \n Forgot password?\n \n \n ),\n 'Invalid Username.': (\n <>\n Your Username is invalid.{' '}\n \n Check Login ID Format\n \n \n ),\n 'connection-issue': \"Sorry, we can't connect to internet or our server.\",\n \"You don't have permission to access\":\n 'Sorry, your account does not have permission to access.',\n 'account expired': (\n <>\n This teacher’s account has expired. You can contact{' '}\n support for assistance.\n \n )\n };\n\n return (\n \n {errorTypes[error] || error}\n \n );\n};\n\nconst LoginForm = () => {\n const dispatch = useDispatch();\n const { isLoading, error } = useSelector(state => state.login);\n // STATES\n // Stores user-entered fields\n const [username, setUsername] = useState('');\n const [password, setPassword] = useState('');\n\n // Event handler for when user changes the value in input fields\n const handleChange = event => {\n const { value, name } = event.target;\n if (name === 'login-id') {\n setUsername(value);\n } else {\n setPassword(value);\n }\n };\n\n // Event handler for when form is submitted by clicking Login button\n const handleSubmit = event => {\n event.preventDefault();\n // Clear any errors from the previous login attempt\n dispatch(loginRequest(username, password));\n };\n\n return (\n \n \n \n );\n};\n\nexport default LoginForm;\n","import styled from 'styled-components';\n\nexport const LoginSectionContainer = styled.div`\n grid-column: 7 / span 4;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n @media only screen and (max-width: 1024px) {\n grid-column: 6 / span 5;\n }\n\n .gradient-bg {\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n width: 63vw;\n background-image: radial-gradient(circle, #9adaff, #8077f6);\n z-index: -1;\n @media only screen and (max-width: 480px) {\n width: 100vw;\n }\n }\n\n .home-icon {\n width: calc(20 / 1366 * 100vw);\n height: calc(20 / 1366 * 100vw);\n }\n\n .home-text {\n color: white;\n margin-left: 0.5rem;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n @media only screen and (max-width: 1290px) {\n display: none;\n }\n }\n\n .brandname-container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n margin: 6rem 0 1rem;\n @media only screen and (max-width: 480px) {\n margin: 3rem 0 1rem;\n }\n }\n\n .brandname-container img {\n position: relative;\n top: 0.4rem;\n }\n\n .brandname-logo {\n width: calc(147 / 1366 * 100vw);\n height: calc(55 / 1366 * 100vw);\n @media only screen and (max-width: 1024px) {\n width: calc(147 / 1024 * 100vw);\n height: calc(55 / 1024 * 100vw);\n }\n }\n\n .brandname-divider {\n position: relative;\n top: 0.4rem;\n margin-right: 1rem;\n color: white;\n }\n\n .brandname-tagline {\n display: flex;\n flex-direction: row;\n height: 40px;\n position: relative;\n top: -0.1rem;\n }\n\n .brandname-tagline-text {\n font-size: 19px;\n color: #e5ffeb;\n align-self: flex-end;\n text-shadow: 3px 0px 6px rgba(0, 0, 0, 0.14);\n }\n\n .brandname-tagline-star {\n align-self: flex-start;\n width: 24.3px;\n height: 23.15px;\n }\n\n .stars {\n position: absolute;\n right: 0;\n bottom: 0;\n pointer-events: none;\n @media only screen and (max-width: 480px) {\n display: none;\n }\n }\n .mascot {\n position: relative;\n top: 2rem;\n pointer-events: none;\n }\n\n footer {\n color: #4852b5;\n font-size: 12px;\n position: fixed;\n bottom: 1rem;\n }\n\n @media (max-width: 480px) {\n grid-column: 1 / span 10;\n padding: 1.5rem 1rem 1rem;\n\n .login-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n .login-title {\n position: static;\n }\n\n .brandname-container img {\n position: relative;\n top: 0.4rem;\n }\n\n .brandname-logo {\n width: 134px;\n height: 49.94px;\n }\n\n .brandname-divider {\n margin-right: 0.5rem;\n }\n\n .home-icon {\n width: 23px;\n height: 23px;\n }\n .stars {\n margin-top: 2rem;\n right: -5.5rem;\n width: 140vw;\n height: 73vh;\n flex-shrink: 0;\n }\n }\n\n @media (min-width: 1920px) {\n .brandname-container {\n margin: 10rem 0 1rem;\n }\n .brandname-tagline {\n height: 50px;\n position: relative;\n top: -0.1rem;\n }\n .brandname-tagline-text {\n font-size: 26px;\n }\n .brandname-tagline-star {\n width: 32.42px;\n height: 30.89px;\n }\n\n footer {\n font-size: 16px;\n bottom: 2rem;\n }\n }\n`;\n\nexport const LoginHeader = styled.div`\n position: absolute;\n top: 1rem;\n right: 2.5rem;\n font-size: calc(15 / 1366 * 100vw);\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 35%;\n justify-content: space-between;\n @media (min-width: 1920px) {\n top: 2rem;\n }\n @media (max-width: 1024px) {\n top: 1.5rem;\n width: 42%;\n }\n @media (max-width: 480px) {\n width: 85%;\n }\n .links {\n a {\n .link-text {\n background: none;\n border: none;\n color: white;\n font-size: 14px;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont,\n 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n 'Droid Sans', 'Helvetica Neue', sans-serif;\n @media only screen and (min-width: 1920px) {\n font-size: 22px;\n }\n @media only screen and (max-width: 480px) {\n display: none;\n }\n }\n .link-icon {\n display: none;\n @media only screen and (max-width: 480px) {\n display: inline-block;\n }\n }\n }\n a:hover {\n color: white;\n }\n span {\n color: white;\n font-size: 18px;\n margin-left: 5px;\n margin-right: 5px;\n @media only screen and (max-width: 480px) {\n font-size: 15px;\n }\n }\n @media only screen and (min-width: 1920px) {\n span {\n font-size: 20px;\n }\n }\n }\n`;\n\nexport const SignupContainer = styled.div`\n color: white;\n margin-top: 15px;\n z-index: 100;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n 'Helvetica Neue', sans-serif;\n @media only screen and (min-width: 1920px) {\n font-size: 1.2rem;\n }\n @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {\n margin-top: 0px;\n }\n a {\n border: 1px solid white;\n background: none;\n color: white;\n padding: 0.5rem 0.75rem;\n border-radius: 5px;\n margin-left: 0.25rem;\n }\n a:hover {\n text-decoration: none;\n background: rgba(255, 255, 255, 0.2);\n }\n`;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0 0)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M-338.612,393.905l-12.025-10.939a1.787,1.787,0,0,0-2.4,0l-12.025,10.939a1.778,1.778,0,0,0-.113,2.51h0a1.808,1.808,0,0,0,1.318.579,1.77,1.77,0,0,0,1.205-.466l10.813-9.848,10.82,9.848a1.787,1.787,0,0,0,2.517-.113,1.772,1.772,0,0,0-.107-2.51Z\",\n transform: \"translate(365.643 -382.501)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M-345.442,396.784-355,405.446v11.133a.951.951,0,0,0,.481.831,1.423,1.423,0,0,0,.734.212h16.519a1.747,1.747,0,0,0,.821-.212,1.019,1.019,0,0,0,.568-.831V405.446Zm3.868,15.142h-7.73v-5.289h7.73Z\",\n transform: \"translate(359.33 -390.973)\",\n fill: \"#fff\"\n})));\n\nvar SvgHomeIcon = function SvgHomeIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 27.608,\n height: 26.649,\n viewBox: \"0 0 27.608 26.649\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgHomeIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/homeIcon.71de17ea.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"filter\", {\n id: \"a\",\n x: 77.858,\n y: 36.848,\n width: 39.834,\n height: 40.945,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"b\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"b\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"c\",\n x: 103.175,\n y: 36.848,\n width: 39.835,\n height: 40.945,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"d\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"d\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"e\",\n x: 129.528,\n y: 29.697,\n width: 38.978,\n height: 48.873,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"f\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"f\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"g\",\n x: 154.42,\n y: 29.445,\n width: 24.259,\n height: 24.076,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"h\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"h\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"i\",\n x: 154.939,\n y: 37.662,\n width: 23.308,\n height: 41.161,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"j\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"j\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"k\",\n x: 163.501,\n y: 30.51,\n width: 30.361,\n height: 48.313,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"l\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"l\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"m\",\n x: 176.872,\n y: 36.849,\n width: 36.644,\n height: 41.973,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"n\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"n\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"o\",\n x: 0,\n y: 0,\n width: 90.943,\n height: 90.864,\n filterUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dy: 3,\n input: \"SourceAlpha\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 3,\n result: \"p\"\n}), /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0.161\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n operator: \"in\",\n in2: \"p\"\n}), /*#__PURE__*/React.createElement(\"feComposite\", {\n in: \"SourceGraphic\"\n})));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(9 6)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -9, -6)\",\n filter: \"url(#a)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M249.9,150.638a10.582,10.582,0,0,0-3.806-4.217,11.2,11.2,0,0,0-11.4-.144,10.426,10.426,0,0,0-3.916,4.129,12.339,12.339,0,0,0-1.4,5.87,12.52,12.52,0,0,0,1.313,5.658,10.417,10.417,0,0,0,3.828,4.223,11.473,11.473,0,0,0,11.579.016,10.339,10.339,0,0,0,3.808-4.206,12.617,12.617,0,0,0,1.306-5.691A12.415,12.415,0,0,0,249.9,150.638Zm-4.036,5.618a10.63,10.63,0,0,1-.681,3.615,5.3,5.3,0,0,1-1.852,2.444,5.179,5.179,0,0,1-3.1.893,4.48,4.48,0,0,1-4.1-2.024,8.948,8.948,0,0,1-1.4-4.907,9.5,9.5,0,0,1,.676-3.666,5.358,5.358,0,0,1,1.9-2.431,5.082,5.082,0,0,1,3.008-.864,4.862,4.862,0,0,1,3,.9,5.576,5.576,0,0,1,1.888,2.48A9.411,9.411,0,0,1,245.864,156.256Z\",\n transform: \"translate(-142.52 -101.94)\",\n fill: \"#fff\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -9, -6)\",\n filter: \"url(#c)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M263.762,150.638a10.586,10.586,0,0,0-3.808-4.217,10.773,10.773,0,0,0-5.771-1.633,10.884,10.884,0,0,0-5.633,1.488,10.42,10.42,0,0,0-3.914,4.129,12.338,12.338,0,0,0-1.4,5.87,12.518,12.518,0,0,0,1.311,5.658,10.429,10.429,0,0,0,3.828,4.223,11.473,11.473,0,0,0,11.579.016,10.339,10.339,0,0,0,3.808-4.206,12.619,12.619,0,0,0,1.308-5.691A12.415,12.415,0,0,0,263.762,150.638Zm-4.036,5.618a10.674,10.674,0,0,1-.683,3.615,5.287,5.287,0,0,1-1.852,2.444,5.175,5.175,0,0,1-3.1.893,4.48,4.48,0,0,1-4.1-2.024,8.962,8.962,0,0,1-1.4-4.907,9.5,9.5,0,0,1,.674-3.666,5.358,5.358,0,0,1,1.9-2.431,5.086,5.086,0,0,1,3.008-.864,4.868,4.868,0,0,1,3,.9,5.6,5.6,0,0,1,1.888,2.48A9.413,9.413,0,0,1,259.726,156.256Z\",\n transform: \"translate(-131.07 -101.94)\",\n fill: \"#fff\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -9, -6)\",\n filter: \"url(#e)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M278.085,159.48a7.491,7.491,0,0,0-2.226-3.12,7.986,7.986,0,0,0-2.572-1.465,5.683,5.683,0,0,0,1-.884,7.3,7.3,0,0,0,1.527-2.645,9.287,9.287,0,0,0,.449-2.842,7.319,7.319,0,0,0-1.284-3.863,8.371,8.371,0,0,0-3.214-2.78,9.821,9.821,0,0,0-4.453-1.01h-6.922a2.772,2.772,0,0,0-1.907.681,2.565,2.565,0,0,0-.809,2.02v25.462a2.529,2.529,0,0,0,2.844,2.71h7.618a11.552,11.552,0,0,0,5.585-1.3A9.368,9.368,0,0,0,277.388,167a8.661,8.661,0,0,0,1.26-4.466A9.284,9.284,0,0,0,278.085,159.48Zm-7.664-8.208a3.559,3.559,0,0,1-1.439,1.421,4.754,4.754,0,0,1-2.362.553h-3.646v-7.705h4.078a3.588,3.588,0,0,1,2.823,1.107,4.044,4.044,0,0,1,.544,4.624ZM273.3,162.43a4.763,4.763,0,0,1-.677,2.354,4.344,4.344,0,0,1-1.925,1.646,7.886,7.886,0,0,1-3.384.648h-4.336v-9.324H267.7a6.692,6.692,0,0,1,3.149.674,4.379,4.379,0,0,1,1.836,1.717A4.546,4.546,0,0,1,273.3,162.43Z\",\n transform: \"translate(-119.14 -105.18)\",\n fill: \"#fff\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(154.42 29.445)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -163.42, -35.45)\",\n filter: \"url(#g)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M274.45,146.811a3.027,3.027,0,0,0,2.179-.9,2.933,2.933,0,0,0,0-4.281,3.147,3.147,0,0,0-4.4.013,2.9,2.9,0,0,0,.011,4.265A3.073,3.073,0,0,0,274.45,146.811Z\",\n transform: \"translate(-107.88 -105.29)\",\n fill: \"#fff\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -163.42, -35.45)\",\n filter: \"url(#i)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M276.065,145.9a2.765,2.765,0,0,0-1.85-.661,2.644,2.644,0,0,0-1.837.7,2.514,2.514,0,0,0-.794,1.94V165.83a2.43,2.43,0,0,0,.82,1.89,2.682,2.682,0,0,0,1.812.674,2.779,2.779,0,0,0,1.843-.658,2.413,2.413,0,0,0,.833-1.907V147.8A2.412,2.412,0,0,0,276.065,145.9Z\",\n transform: \"translate(-107.64 -101.57)\",\n fill: \"#fff\"\n}))), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -9, -6)\",\n filter: \"url(#k)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M287.945,148.569a2.569,2.569,0,0,0-1.861-.661h-.908v-4.038a2.353,2.353,0,0,0-.849-1.936,2.926,2.926,0,0,0-1.872-.615,2.764,2.764,0,0,0-1.808.619,2.292,2.292,0,0,0-.82,1.841v4.129h-.908a2.414,2.414,0,0,0-2.637,2.3l-.011.091.013.09a2.463,2.463,0,0,0,.82,1.552,2.619,2.619,0,0,0,1.815.636h.908V169a2.47,2.47,0,0,0,2.544,2.632,3,3,0,0,0,1.921-.647,2.356,2.356,0,0,0,.884-1.9v-16.5h1.087a2.321,2.321,0,0,0,1.7-.683,2.251,2.251,0,0,0,.665-1.605A2.333,2.333,0,0,0,287.945,148.569Z\",\n transform: \"translate(-103.77 -104.81)\",\n fill: \"#fff\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -9, -6)\",\n filter: \"url(#m)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M300.932,157.831a9.624,9.624,0,0,0-3.965-2.522c-.415-.183-1.118-.433-2.15-.767-.975-.316-1.815-.626-2.5-.92a6.271,6.271,0,0,1-1.671-1.047,2.234,2.234,0,0,1-.736-1.183,1.856,1.856,0,0,1,.8-1.3,4.3,4.3,0,0,1,2.583-.636,3.73,3.73,0,0,1,1.361.267c.42.192,1.094.539,2,1.035a10.5,10.5,0,0,0,2.325,1.016l.124.031.126-.011a2.694,2.694,0,0,0,1.662-.742,2.224,2.224,0,0,0,.736-1.633,3.224,3.224,0,0,0-1.171-2.263,9.291,9.291,0,0,0-3.178-1.651,13.471,13.471,0,0,0-4.376-.718H292.9a10.8,10.8,0,0,0-4.226.983,7.363,7.363,0,0,0-2.962,2.453,5.958,5.958,0,0,0-1.076,3.426,5.066,5.066,0,0,0,1.2,3.424,8.066,8.066,0,0,0,2.57,2c.891.435,2.163.964,3.779,1.576a22.359,22.359,0,0,1,3.238,1.426c1.361.747,1.361,1.529,1.361,1.784a1.629,1.629,0,0,1-1.006,1.593,6.429,6.429,0,0,1-2.884.641,6.889,6.889,0,0,1-2.878-.73l-.073-.035a6.838,6.838,0,0,1-1.028-.632,14.65,14.65,0,0,0-1.443-.9,2.674,2.674,0,0,0-3.191.327,2.331,2.331,0,0,0-.694,1.671l.007.1a3.06,3.06,0,0,0,1.326,2.263,12.381,12.381,0,0,0,8.009,2.6h.013a12.055,12.055,0,0,0,5-1.019,7.537,7.537,0,0,0,3.163-2.626,6.754,6.754,0,0,0,1.125-3.547A5.608,5.608,0,0,0,300.932,157.831Z\",\n transform: \"translate(-97.72 -101.94)\",\n fill: \"#fff\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n transform: \"matrix(1, 0, 0, 1, -9, -6)\",\n filter: \"url(#o)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M222.73,197.477c-6.639,0-13.176-.024-19.424-.071a16.529,16.529,0,0,1-11.534-4.836,16.272,16.272,0,0,1-4.92-11.455c-.135-12.956-.137-26.474-.006-40.172a16.281,16.281,0,0,1,4.816-11.322,16.1,16.1,0,0,1,11.263-4.891c6.107-.079,12.374-.117,19.152-.117,6.528,0,13.473.035,21.23.108a16.128,16.128,0,0,1,9.919,3.627,17.227,17.227,0,0,1,5.808,8.913,3.593,3.593,0,0,1-1,3.949c-2.758,2.758-5.5,5.616-8.148,8.392-1.806,1.887-3.671,3.837-5.527,5.731a12.005,12.005,0,0,0-2.981,4.024,54.344,54.344,0,0,0-1.337,8.034l-7.517-10.177,9.068-10.14a4.68,4.68,0,0,0-.369-6.608l-.82-.734a4.678,4.678,0,0,0-6.606.369L215.73,160.31V143.182a4.679,4.679,0,0,0-4.679-4.679h-3.51a4.679,4.679,0,0,0-4.679,4.679v37.07a4.679,4.679,0,0,0,4.679,4.679h3.51a4.721,4.721,0,0,0,4.5-4.9l.179-4.383a4.686,4.686,0,0,0,1.156-.935l8.515-9.525,11.479,15.534a4.7,4.7,0,0,0,3.768,1.9,4.618,4.618,0,0,0,2.776-.915l.889-.656a4.68,4.68,0,0,0,.983-6.544l-1.149-1.118c.11.029.29-.179.406-.179.152,0,.183-.312.329-.36.91-.274,1.852-.535,2.762-.787a57.462,57.462,0,0,0,6.217-1.982,13.149,13.149,0,0,0,4.687-3.748c.254-.27.517-.552.793-.842-.005,2.029.082,4.066.17,6.034a56.519,56.519,0,0,1-.349,12.31,16.347,16.347,0,0,1-5.6,9.687,16.543,16.543,0,0,1-10.5,3.885C236.054,197.453,229.214,197.477,222.73,197.477Z\",\n transform: \"translate(-177.75 -118.61)\",\n fill: \"#fff\"\n})), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M236.646,127.942c3.79-.09,8.422,3.927,8.853,7.516a4.211,4.211,0,0,1-1.07,2.878c-.97,1.428-2.758,2.188-3.158,4.117-.144.694-.747.3-1.1-.11a82.991,82.991,0,0,0-9.373-9.143c-.42-.351-.78-.964-.181-1.184,2.069-.756,3.149-2.782,5.039-3.722A7.147,7.147,0,0,1,236.646,127.942Z\",\n transform: \"translate(-150.763 -121.863)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M204.562,173.156c.042,1.538-.561,3.377-2.139,3.129.079-.813.223-2.741.225-3.554q.019-18.262.02-36.521a9.293,9.293,0,0,0-.405-2.971c2.088-.415,2.246-.289,2.285,1.872C204.548,140.394,204.562,171.085,204.562,173.156Z\",\n transform: \"translate(-173.93 -117.641)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M221.66,149.025c-3.834,3.835-7.2,8.087-10.854,12.083-1.374,1.558-2.778,3.087-4.108,4.679-.986,1.182-2.544,2.022-3.563.791.6-.557,1.872-1.768,2.409-2.376q12.093-13.687,24.169-27.38a9.346,9.346,0,0,0,1.662-2.495c1.839,1.07,1.87,1.269.479,2.911C228.485,141.2,224.845,144.916,221.66,149.025Z\",\n transform: \"translate(-173.209 -116.585)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M216.067,148.889a8.023,8.023,0,0,1,4.427,4.151s-3.627,1.9-4.361,1.414S214.6,150.4,216.067,148.889Z\",\n transform: \"translate(-163.201 -104.551)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M215.876,144.316,214.5,156.562s-.219,5.03,5,3.835,10.995-3.1,10.995-3.1,2.193-2.847,1-2.424-12.763,3.667-12.763,3.667l-1.9-3,1.536-12.5A2.467,2.467,0,0,0,215.876,144.316Z\",\n transform: \"translate(-163.819 -109.405)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n width: 13.444,\n height: 28.87,\n rx: 2,\n transform: \"translate(78.448 12.415) rotate(43.657)\",\n fill: \"#fff\"\n}));\n\nvar SvgKoobitsLogo = function SvgKoobitsLogo(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 213.516,\n height: 90.864,\n viewBox: \"0 0 213.516 90.864\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgKoobitsLogo, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/Koobits Logo.0b2b7bba.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip-path\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_569\",\n \"data-name\": \"Rectangle 569\",\n width: 768,\n height: 261,\n transform: \"translate(1152 827)\",\n fill: \"#fff\",\n stroke: \"#707070\",\n strokeWidth: 1\n})), /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip-path-2\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_541\",\n \"data-name\": \"Rectangle 541\",\n width: 890,\n height: 334,\n transform: \"translate(-0.222 0.44)\",\n fill: \"#fff\",\n stroke: \"#707070\",\n strokeWidth: 1\n})));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2264\",\n \"data-name\": \"Group 2264\",\n transform: \"translate(-530.991 13.552)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2262\",\n \"data-name\": \"Group 2262\",\n transform: \"translate(0 0)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10565\",\n \"data-name\": \"Path 10565\",\n d: \"M519.738,173.915a6.493,6.493,0,1,0,6.495-6.492A6.491,6.491,0,0,0,519.738,173.915Z\",\n transform: \"translate(1003.576 306.64)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10566\",\n \"data-name\": \"Path 10566\",\n d: \"M28.738,47.415a6.493,6.493,0,1,0,6.495-6.492A6.491,6.491,0,0,0,28.738,47.415Z\",\n transform: \"translate(39.805 58.336)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10568\",\n \"data-name\": \"Path 10568\",\n d: \"M268.908,97.962a6.492,6.492,0,1,0,6.492-6.495A6.494,6.494,0,0,0,268.908,97.962Z\",\n transform: \"translate(511.228 157.548)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10569\",\n \"data-name\": \"Path 10569\",\n d: \"M53.87,119.514a6.492,6.492,0,1,0,6.492-6.492A6.494,6.494,0,0,0,53.87,119.514Z\",\n transform: \"translate(89.136 199.857)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10571\",\n \"data-name\": \"Path 10571\",\n d: \"M250.535,150.992a3.653,3.653,0,1,0,3.656-3.653A3.655,3.655,0,0,0,250.535,150.992Z\",\n transform: \"translate(475.165 267.217)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10572\",\n \"data-name\": \"Path 10572\",\n d: \"M267.984,171.518a3.653,3.653,0,1,0,3.659-3.65A3.656,3.656,0,0,0,267.984,171.518Z\",\n transform: \"translate(509.415 307.513)\",\n fill: \"#48c4f5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10573\",\n \"data-name\": \"Path 10573\",\n d: \"M145.446,221.287a3.653,3.653,0,1,0,3.659-3.656A3.656,3.656,0,0,0,145.446,221.287Z\",\n transform: \"translate(268.888 405.192)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10574\",\n \"data-name\": \"Path 10574\",\n d: \"M231.595,281.033a3.652,3.652,0,1,0,3.656-3.656A3.653,3.653,0,0,0,231.595,281.033Z\",\n transform: \"translate(437.988 522.466)\",\n fill: \"#48c4f5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10575\",\n \"data-name\": \"Path 10575\",\n d: \"M43.709,310.388a3.653,3.653,0,1,0,3.653-3.65A3.656,3.656,0,0,0,43.709,310.388Z\",\n transform: \"translate(69.191 580.098)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10576\",\n \"data-name\": \"Path 10576\",\n d: \"M76.029,104.365a3.653,3.653,0,1,0,3.653-3.65A3.653,3.653,0,0,0,76.029,104.365Z\",\n transform: \"translate(132.631 175.7)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10578\",\n \"data-name\": \"Path 10578\",\n d: \"M335.348,144.85a2.51,2.51,0,1,0,2.507-2.513A2.507,2.507,0,0,0,335.348,144.85Z\",\n transform: \"translate(641.642 257.399)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10579\",\n \"data-name\": \"Path 10579\",\n d: \"M407.485,98.914A2.511,2.511,0,1,0,410,96.4,2.509,2.509,0,0,0,407.485,98.914Z\",\n transform: \"translate(783.238 167.238)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10580\",\n \"data-name\": \"Path 10580\",\n d: \"M412.1,130.731a2.511,2.511,0,1,0,2.513-2.507A2.507,2.507,0,0,0,412.1,130.731Z\",\n transform: \"translate(792.304 229.697)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10581\",\n \"data-name\": \"Path 10581\",\n d: \"M381.311,125.6a2.511,2.511,0,1,0,2.513-2.51A2.509,2.509,0,0,0,381.311,125.6Z\",\n transform: \"translate(731.861 219.622)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_526\",\n \"data-name\": \"Ellipse 526\",\n cx: 2.509,\n cy: 2.509,\n r: 2.509,\n transform: \"translate(1110.037 458.182)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10582\",\n \"data-name\": \"Path 10582\",\n d: \"M349.973,150.714a2.51,2.51,0,1,0,2.51-2.507A2.509,2.509,0,0,0,349.973,150.714Z\",\n transform: \"translate(670.349 268.921)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10583\",\n \"data-name\": \"Path 10583\",\n d: \"M391.171,144.439a3.763,3.763,0,1,0,3.763-3.763A3.763,3.763,0,0,0,391.171,144.439Z\",\n transform: \"translate(751.215 254.139)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10584\",\n \"data-name\": \"Path 10584\",\n d: \"M369.659,147.836a3.763,3.763,0,1,0,3.766-3.763A3.764,3.764,0,0,0,369.659,147.836Z\",\n transform: \"translate(708.99 260.807)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10585\",\n \"data-name\": \"Path 10585\",\n d: \"M363.659,161.836a3.763,3.763,0,1,0,3.766-3.763A3.764,3.764,0,0,0,363.659,161.836Z\",\n transform: \"translate(697.213 288.287)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10586\",\n \"data-name\": \"Path 10586\",\n d: \"M449.171,110.209a3.763,3.763,0,1,0,3.763-3.763A3.761,3.761,0,0,0,449.171,110.209Z\",\n transform: \"translate(865.062 186.95)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10587\",\n \"data-name\": \"Path 10587\",\n d: \"M421.659,127.606a3.763,3.763,0,1,0,3.766-3.763A3.762,3.762,0,0,0,421.659,127.606Z\",\n transform: \"translate(811.059 221.098)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10589\",\n \"data-name\": \"Path 10589\",\n d: \"M347.941,170.71a3.763,3.763,0,1,0,3.766-3.763A3.766,3.766,0,0,0,347.941,170.71Z\",\n transform: \"translate(666.36 305.705)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10590\",\n \"data-name\": \"Path 10590\",\n d: \"M329.564,189.107a3.763,3.763,0,1,0,3.766-3.763A3.764,3.764,0,0,0,329.564,189.107Z\",\n transform: \"translate(630.289 341.816)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10591\",\n \"data-name\": \"Path 10591\",\n d: \"M327.671,200.941a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,327.671,200.941Z\",\n transform: \"translate(626.573 365.039)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10592\",\n \"data-name\": \"Path 10592\",\n d: \"M300.159,218.333a3.763,3.763,0,1,0,3.766-3.76A3.764,3.764,0,0,0,300.159,218.333Z\",\n transform: \"translate(572.57 399.189)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10593\",\n \"data-name\": \"Path 10593\",\n d: \"M252.43,213.109a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,252.43,213.109Z\",\n transform: \"translate(478.884 388.923)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10594\",\n \"data-name\": \"Path 10594\",\n d: \"M100.991,259.167a3.763,3.763,0,1,0,3.766-3.763A3.766,3.766,0,0,0,100.991,259.167Z\",\n transform: \"translate(181.629 479.335)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10595\",\n \"data-name\": \"Path 10595\",\n d: \"M150.324,309.833a3.763,3.763,0,1,0,3.766-3.763A3.766,3.766,0,0,0,150.324,309.833Z\",\n transform: \"translate(278.463 578.786)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10596\",\n \"data-name\": \"Path 10596\",\n d: \"M226.671,209.441a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,226.671,209.441Z\",\n transform: \"translate(428.323 381.724)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10597\",\n \"data-name\": \"Path 10597\",\n d: \"M199.159,226.833a3.763,3.763,0,1,0,3.766-3.76A3.764,3.764,0,0,0,199.159,226.833Z\",\n transform: \"translate(374.32 415.874)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10598\",\n \"data-name\": \"Path 10598\",\n d: \"M178.992,253.109a3.763,3.763,0,1,0,3.766-3.766A3.761,3.761,0,0,0,178.992,253.109Z\",\n transform: \"translate(334.735 467.438)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10599\",\n \"data-name\": \"Path 10599\",\n d: \"M175.063,268.609a3.763,3.763,0,1,0,3.766-3.766A3.763,3.763,0,0,0,175.063,268.609Z\",\n transform: \"translate(327.023 497.863)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10600\",\n \"data-name\": \"Path 10600\",\n d: \"M168.659,301.414a3.763,3.763,0,1,0,3.766-3.76A3.764,3.764,0,0,0,168.659,301.414Z\",\n transform: \"translate(314.452 562.267)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10601\",\n \"data-name\": \"Path 10601\",\n d: \"M120.93,265.609a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,120.93,265.609Z\",\n transform: \"translate(220.766 491.974)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10602\",\n \"data-name\": \"Path 10602\",\n d: \"M254.171,226.941a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,254.171,226.941Z\",\n transform: \"translate(482.302 416.074)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10603\",\n \"data-name\": \"Path 10603\",\n d: \"M306.324,291.167a3.763,3.763,0,1,0,3.766-3.763A3.766,3.766,0,0,0,306.324,291.167Z\",\n transform: \"translate(584.671 542.147)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10604\",\n \"data-name\": \"Path 10604\",\n d: \"M478.659,318.188a3.763,3.763,0,1,0,3.766-3.763A3.762,3.762,0,0,0,478.659,318.188Z\",\n transform: \"translate(922.943 595.186)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10605\",\n \"data-name\": \"Path 10605\",\n d: \"M503.159,332.414a3.763,3.763,0,1,0,3.766-3.76A3.764,3.764,0,0,0,503.159,332.414Z\",\n transform: \"translate(971.034 623.116)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10611\",\n \"data-name\": \"Path 10611\",\n d: \"M278.93,79.609a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,278.93,79.609Z\",\n transform: \"translate(530.9 126.88)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10612\",\n \"data-name\": \"Path 10612\",\n d: \"M198.93,104.109a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,198.93,104.109Z\",\n transform: \"translate(373.87 174.97)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10613\",\n \"data-name\": \"Path 10613\",\n d: \"M486.389,59.108a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,486.389,59.108Z\",\n transform: \"translate(938.116 86.639)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10619\",\n \"data-name\": \"Path 10619\",\n d: \"M317.671,51.441a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,317.671,51.441Z\",\n transform: \"translate(606.944 71.59)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10620\",\n \"data-name\": \"Path 10620\",\n d: \"M290.159,68.833a3.763,3.763,0,1,0,3.766-3.76A3.764,3.764,0,0,0,290.159,68.833Z\",\n transform: \"translate(552.942 105.74)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10621\",\n \"data-name\": \"Path 10621\",\n d: \"M242.43,63.609a3.763,3.763,0,1,0,3.763-3.766A3.761,3.761,0,0,0,242.43,63.609Z\",\n transform: \"translate(459.256 95.474)\",\n fill: \"#48c4f5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10622\",\n \"data-name\": \"Path 10622\",\n d: \"M225.659,102.336a3.763,3.763,0,1,0,3.766-3.763A3.764,3.764,0,0,0,225.659,102.336Z\",\n transform: \"translate(426.336 171.496)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10623\",\n \"data-name\": \"Path 10623\",\n d: \"M236.889,91.565a3.763,3.763,0,1,0,3.763-3.763A3.761,3.761,0,0,0,236.889,91.565Z\",\n transform: \"translate(448.379 150.354)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10624\",\n \"data-name\": \"Path 10624\",\n d: \"M189.159,86.336a3.763,3.763,0,1,0,3.766-3.763A3.764,3.764,0,0,0,189.159,86.336Z\",\n transform: \"translate(354.691 140.09)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10625\",\n \"data-name\": \"Path 10625\",\n d: \"M147.992,110.377a3.763,3.763,0,1,0,3.766-3.763A3.764,3.764,0,0,0,147.992,110.377Z\",\n transform: \"translate(273.886 187.279)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10626\",\n \"data-name\": \"Path 10626\",\n d: \"M163.89,113.607a3.763,3.763,0,1,0,3.763-3.763A3.761,3.761,0,0,0,163.89,113.607Z\",\n transform: \"translate(305.091 193.619)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10627\",\n \"data-name\": \"Path 10627\",\n d: \"M92.326,100.44a3.763,3.763,0,1,0,3.766-3.763A3.766,3.766,0,0,0,92.326,100.44Z\",\n transform: \"translate(164.62 167.774)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10628\",\n \"data-name\": \"Path 10628\",\n d: \"M84.324,29.708a3.763,3.763,0,1,0,3.766-3.763A3.766,3.766,0,0,0,84.324,29.708Z\",\n transform: \"translate(148.913 28.936)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10629\",\n \"data-name\": \"Path 10629\",\n d: \"M123.722,19.1a3.763,3.763,0,1,0,3.763-3.763A3.763,3.763,0,0,0,123.722,19.1Z\",\n transform: \"translate(226.247 8.122)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10630\",\n \"data-name\": \"Path 10630\",\n d: \"M386.083,79.93a2.508,2.508,0,1,0,2.509-2.51A2.509,2.509,0,0,0,386.083,79.93Z\",\n transform: \"translate(741.228 129.975)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10631\",\n \"data-name\": \"Path 10631\",\n d: \"M400.708,85.8a2.508,2.508,0,1,0,2.51-2.51A2.509,2.509,0,0,0,400.708,85.8Z\",\n transform: \"translate(769.935 141.495)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10632\",\n \"data-name\": \"Path 10632\",\n d: \"M372.994,81.18a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,372.994,81.18Z\",\n transform: \"translate(715.536 132.429)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10633\",\n \"data-name\": \"Path 10633\",\n d: \"M321.083,66.43a2.508,2.508,0,1,0,2.509-2.51A2.509,2.509,0,0,0,321.083,66.43Z\",\n transform: \"translate(613.641 103.476)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10635\",\n \"data-name\": \"Path 10635\",\n d: \"M307.994,67.68a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,307.994,67.68Z\",\n transform: \"translate(587.949 105.93)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10636\",\n \"data-name\": \"Path 10636\",\n d: \"M89.083,85.93a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,89.083,85.93Z\",\n transform: \"translate(158.255 141.752)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10637\",\n \"data-name\": \"Path 10637\",\n d: \"M103.708,91.8a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,103.708,91.8Z\",\n transform: \"translate(186.962 153.273)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10638\",\n \"data-name\": \"Path 10638\",\n d: \"M75.994,87.18a2.511,2.511,0,1,0,2.513-2.51A2.509,2.509,0,0,0,75.994,87.18Z\",\n transform: \"translate(132.563 144.206)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10639\",\n \"data-name\": \"Path 10639\",\n d: \"M304.083,85.43a2.51,2.51,0,1,0,2.509-2.51A2.509,2.509,0,0,0,304.083,85.43Z\",\n transform: \"translate(580.273 140.771)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10640\",\n \"data-name\": \"Path 10640\",\n d: \"M318.708,91.3a2.51,2.51,0,1,0,2.509-2.51A2.509,2.509,0,0,0,318.708,91.3Z\",\n transform: \"translate(608.98 152.291)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10641\",\n \"data-name\": \"Path 10641\",\n d: \"M290.994,86.68a2.51,2.51,0,1,0,2.513-2.51A2.509,2.509,0,0,0,290.994,86.68Z\",\n transform: \"translate(554.581 143.225)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10642\",\n \"data-name\": \"Path 10642\",\n d: \"M330.93,124.777a2.51,2.51,0,1,0,2.507-2.51A2.506,2.506,0,0,0,330.93,124.777Z\",\n transform: \"translate(632.97 218.004)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10643\",\n \"data-name\": \"Path 10643\",\n d: \"M345.555,130.643a2.51,2.51,0,1,0,2.507-2.507A2.509,2.509,0,0,0,345.555,130.643Z\",\n transform: \"translate(661.677 229.524)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10644\",\n \"data-name\": \"Path 10644\",\n d: \"M282.083,190.43a2.51,2.51,0,1,0,2.509-2.51A2.509,2.509,0,0,0,282.083,190.43Z\",\n transform: \"translate(537.089 346.873)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10645\",\n \"data-name\": \"Path 10645\",\n d: \"M351.487,178.275a2.511,2.511,0,1,0,2.51-2.507A2.507,2.507,0,0,0,351.487,178.275Z\",\n transform: \"translate(673.321 323.02)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10646\",\n \"data-name\": \"Path 10646\",\n d: \"M255.153,162.441a2.509,2.509,0,1,0,2.507-2.507A2.508,2.508,0,0,0,255.153,162.441Z\",\n transform: \"translate(484.229 291.94)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10647\",\n \"data-name\": \"Path 10647\",\n d: \"M297.208,159.794a2.51,2.51,0,1,0,2.509-2.5A2.509,2.509,0,0,0,297.208,159.794Z\",\n transform: \"translate(566.778 286.75)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10648\",\n \"data-name\": \"Path 10648\",\n d: \"M228.083,186.93a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,228.083,186.93Z\",\n transform: \"translate(431.094 340.003)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10649\",\n \"data-name\": \"Path 10649\",\n d: \"M242.708,192.794a2.51,2.51,0,1,0,2.51-2.5A2.509,2.509,0,0,0,242.708,192.794Z\",\n transform: \"translate(459.801 351.525)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10650\",\n \"data-name\": \"Path 10650\",\n d: \"M214.994,188.18a2.51,2.51,0,1,0,2.512-2.51A2.509,2.509,0,0,0,214.994,188.18Z\",\n transform: \"translate(405.402 342.456)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10651\",\n \"data-name\": \"Path 10651\",\n d: \"M197.583,308.51a2.51,2.51,0,1,0,2.51-2.509A2.509,2.509,0,0,0,197.583,308.51Z\",\n transform: \"translate(371.227 578.651)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10652\",\n \"data-name\": \"Path 10652\",\n d: \"M212.208,314.375a2.51,2.51,0,1,0,2.51-2.5A2.509,2.509,0,0,0,212.208,314.375Z\",\n transform: \"translate(399.934 590.173)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10653\",\n \"data-name\": \"Path 10653\",\n d: \"M184.494,309.76a2.51,2.51,0,1,0,2.512-2.509A2.509,2.509,0,0,0,184.494,309.76Z\",\n transform: \"translate(345.534 581.104)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10654\",\n \"data-name\": \"Path 10654\",\n d: \"M302.208,313.375a2.51,2.51,0,1,0,2.509-2.5A2.509,2.509,0,0,0,302.208,313.375Z\",\n transform: \"translate(576.592 588.21)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10655\",\n \"data-name\": \"Path 10655\",\n d: \"M264.986,318.444a2.511,2.511,0,1,0,2.513-2.51A2.507,2.507,0,0,0,264.986,318.444Z\",\n transform: \"translate(503.53 598.148)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10656\",\n \"data-name\": \"Path 10656\",\n d: \"M183.735,194.277a2.511,2.511,0,1,0,2.51-2.51A2.506,2.506,0,0,0,183.735,194.277Z\",\n transform: \"translate(344.045 354.424)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10657\",\n \"data-name\": \"Path 10657\",\n d: \"M198.36,200.143a2.511,2.511,0,1,0,2.51-2.507A2.509,2.509,0,0,0,198.36,200.143Z\",\n transform: \"translate(372.752 365.944)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10658\",\n \"data-name\": \"Path 10658\",\n d: \"M170.646,195.527a2.511,2.511,0,1,0,2.513-2.51A2.507,2.507,0,0,0,170.646,195.527Z\",\n transform: \"translate(318.353 356.878)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10659\",\n \"data-name\": \"Path 10659\",\n d: \"M293.006,142.57a2.51,2.51,0,1,0,2.507-2.51A2.508,2.508,0,0,0,293.006,142.57Z\",\n transform: \"translate(558.53 252.93)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10660\",\n \"data-name\": \"Path 10660\",\n d: \"M216.568,167.685a2.513,2.513,0,1,0,2.513-2.51A2.511,2.511,0,0,0,216.568,167.685Z\",\n transform: \"translate(408.492 302.227)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10661\",\n \"data-name\": \"Path 10661\",\n d: \"M343.814,189.21a2.511,2.511,0,1,0,2.51-2.512A2.511,2.511,0,0,0,343.814,189.21Z\",\n transform: \"translate(658.26 344.472)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10662\",\n \"data-name\": \"Path 10662\",\n d: \"M280.688,227.187a2.511,2.511,0,1,0,2.513-2.512A2.512,2.512,0,0,0,280.688,227.187Z\",\n transform: \"translate(534.351 419.018)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10663\",\n \"data-name\": \"Path 10663\",\n d: \"M435.68,17.738a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,435.68,17.738Z\",\n transform: \"translate(838.581 7.894)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10664\",\n \"data-name\": \"Path 10664\",\n d: \"M231.934,51.185a2.508,2.508,0,1,0,2.507-2.51A2.506,2.506,0,0,0,231.934,51.185Z\",\n transform: \"translate(438.653 73.552)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10665\",\n \"data-name\": \"Path 10665\",\n d: \"M89.263,59.279a2.508,2.508,0,1,0,2.507-2.513A2.507,2.507,0,0,0,89.263,59.279Z\",\n transform: \"translate(158.608 89.434)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10666\",\n \"data-name\": \"Path 10666\",\n d: \"M65.9,69.279a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,65.9,69.279Z\",\n transform: \"translate(112.753 109.063)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10667\",\n \"data-name\": \"Path 10667\",\n d: \"M394.9,38.61a2.51,2.51,0,1,0,2.51-2.51A2.506,2.506,0,0,0,394.9,38.61Z\",\n transform: \"translate(758.539 48.869)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10668\",\n \"data-name\": \"Path 10668\",\n d: \"M273.083,14.487a2.508,2.508,0,1,0,2.509-2.513A2.508,2.508,0,0,0,273.083,14.487Z\",\n transform: \"translate(519.423 1.513)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10669\",\n \"data-name\": \"Path 10669\",\n d: \"M181.083,11.64a2.508,2.508,0,1,0,2.51-2.513A2.508,2.508,0,0,0,181.083,11.64Z\",\n transform: \"translate(338.839 -4.075)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10670\",\n \"data-name\": \"Path 10670\",\n d: \"M13.736,230.279a2.51,2.51,0,1,0,2.51-2.513A2.506,2.506,0,0,0,13.736,230.279Z\",\n transform: \"translate(10.358 425.085)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10671\",\n \"data-name\": \"Path 10671\",\n d: \"M69.236,249.279a2.51,2.51,0,1,0,2.51-2.512A2.506,2.506,0,0,0,69.236,249.279Z\",\n transform: \"translate(119.298 462.38)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10672\",\n \"data-name\": \"Path 10672\",\n d: \"M48.583,231.433a2.508,2.508,0,1,0,2.51-2.513A2.508,2.508,0,0,0,48.583,231.433Z\",\n transform: \"translate(78.758 427.351)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10673\",\n \"data-name\": \"Path 10673\",\n d: \"M480.583,328.514a2.508,2.508,0,1,0,2.51-2.513A2.508,2.508,0,0,0,480.583,328.514Z\",\n transform: \"translate(926.72 617.908)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10674\",\n \"data-name\": \"Path 10674\",\n d: \"M480.583,300.514a2.508,2.508,0,1,0,2.51-2.512A2.508,2.508,0,0,0,480.583,300.514Z\",\n transform: \"translate(926.72 562.948)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10675\",\n \"data-name\": \"Path 10675\",\n d: \"M112.835,44a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,112.835,44Z\",\n transform: \"translate(204.877 59.447)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10676\",\n \"data-name\": \"Path 10676\",\n d: \"M45.636,17.222a2.508,2.508,0,1,0,2.507-2.51A2.508,2.508,0,0,0,45.636,17.222Z\",\n transform: \"translate(72.974 6.887)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10677\",\n \"data-name\": \"Path 10677\",\n d: \"M23.054,97.342a2.51,2.51,0,1,0,2.507-2.51A2.508,2.508,0,0,0,23.054,97.342Z\",\n transform: \"translate(28.648 164.153)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10678\",\n \"data-name\": \"Path 10678\",\n d: \"M178.045,111.2a2.51,2.51,0,1,0,2.513-2.513A2.509,2.509,0,0,0,178.045,111.2Z\",\n transform: \"translate(332.876 191.35)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10679\",\n \"data-name\": \"Path 10679\",\n d: \"M359.211,91.183a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,359.211,91.183Z\",\n transform: \"translate(688.482 152.063)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10680\",\n \"data-name\": \"Path 10680\",\n d: \"M419.257,58.34a2.51,2.51,0,1,0,2.51-2.513A2.506,2.506,0,0,0,419.257,58.34Z\",\n transform: \"translate(806.345 87.591)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10683\",\n \"data-name\": \"Path 10683\",\n d: \"M473.416,65.613a2.51,2.51,0,1,0,2.51-2.513A2.506,2.506,0,0,0,473.416,65.613Z\",\n transform: \"translate(912.652 101.867)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10684\",\n \"data-name\": \"Path 10684\",\n d: \"M392.1,97.274a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,392.1,97.274Z\",\n transform: \"translate(753.039 166.055)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10685\",\n \"data-name\": \"Path 10685\",\n d: \"M385.433,71.528a1.471,1.471,0,1,0,1.472-1.473A1.47,1.47,0,0,0,385.433,71.528Z\",\n transform: \"translate(739.952 115.519)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10686\",\n \"data-name\": \"Path 10686\",\n d: \"M348.263,82.09a1.471,1.471,0,1,0,1.47-1.473A1.468,1.468,0,0,0,348.263,82.09Z\",\n transform: \"translate(666.992 136.251)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10687\",\n \"data-name\": \"Path 10687\",\n d: \"M346.1,101.094a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,346.1,101.094Z\",\n transform: \"translate(662.747 173.553)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10688\",\n \"data-name\": \"Path 10688\",\n d: \"M349.1,116.427a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,349.1,116.427Z\",\n transform: \"translate(668.635 203.65)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10689\",\n \"data-name\": \"Path 10689\",\n d: \"M380.263,97.09a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,380.263,97.09Z\",\n transform: \"translate(729.804 165.694)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10690\",\n \"data-name\": \"Path 10690\",\n d: \"M443.436,125.442a1.473,1.473,0,1,0,1.473-1.473A1.47,1.47,0,0,0,443.436,125.442Z\",\n transform: \"translate(853.805 221.345)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10691\",\n \"data-name\": \"Path 10691\",\n d: \"M436.769,99.695a1.473,1.473,0,1,0,1.476-1.473A1.473,1.473,0,0,0,436.769,99.695Z\",\n transform: \"translate(840.718 170.807)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10692\",\n \"data-name\": \"Path 10692\",\n d: \"M399.6,110.257a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,399.6,110.257Z\",\n transform: \"translate(767.76 191.539)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10693\",\n \"data-name\": \"Path 10693\",\n d: \"M431.6,125.257a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,431.6,125.257Z\",\n transform: \"translate(830.572 220.982)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10694\",\n \"data-name\": \"Path 10694\",\n d: \"M388.436,50.6a1.473,1.473,0,1,0,1.472-1.473A1.47,1.47,0,0,0,388.436,50.6Z\",\n transform: \"translate(745.847 74.449)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10695\",\n \"data-name\": \"Path 10695\",\n d: \"M381.769,24.858a1.472,1.472,0,1,0,1.475-1.473A1.472,1.472,0,0,0,381.769,24.858Z\",\n transform: \"translate(732.76 23.911)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10696\",\n \"data-name\": \"Path 10696\",\n d: \"M344.6,35.42a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,344.6,35.42Z\",\n transform: \"translate(659.802 44.643)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10697\",\n \"data-name\": \"Path 10697\",\n d: \"M376.6,50.42a1.471,1.471,0,1,0,1.47-1.473A1.467,1.467,0,0,0,376.6,50.42Z\",\n transform: \"translate(722.614 74.086)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10698\",\n \"data-name\": \"Path 10698\",\n d: \"M266.267,77.108a1.471,1.471,0,1,0,1.473-1.473A1.468,1.468,0,0,0,266.267,77.108Z\",\n transform: \"translate(506.045 126.472)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10699\",\n \"data-name\": \"Path 10699\",\n d: \"M259.6,51.361a1.472,1.472,0,1,0,1.472-1.473A1.47,1.47,0,0,0,259.6,51.361Z\",\n transform: \"translate(492.958 75.933)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10700\",\n \"data-name\": \"Path 10700\",\n d: \"M222.43,61.923a1.471,1.471,0,1,0,1.47-1.473A1.469,1.469,0,0,0,222.43,61.923Z\",\n transform: \"translate(419.998 96.665)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10701\",\n \"data-name\": \"Path 10701\",\n d: \"M254.43,76.923a1.471,1.471,0,1,0,1.47-1.473A1.469,1.469,0,0,0,254.43,76.923Z\",\n transform: \"translate(482.81 126.108)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10702\",\n \"data-name\": \"Path 10702\",\n d: \"M309.77,146.108a1.473,1.473,0,1,0,1.476-1.473A1.471,1.471,0,0,0,309.77,146.108Z\",\n transform: \"translate(591.435 261.91)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10703\",\n \"data-name\": \"Path 10703\",\n d: \"M303.1,120.362a1.474,1.474,0,1,0,1.476-1.473A1.473,1.473,0,0,0,303.1,120.362Z\",\n transform: \"translate(578.349 211.374)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10704\",\n \"data-name\": \"Path 10704\",\n d: \"M265.934,130.924a1.471,1.471,0,1,0,1.47-1.473A1.469,1.469,0,0,0,265.934,130.924Z\",\n transform: \"translate(505.391 232.105)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10705\",\n \"data-name\": \"Path 10705\",\n d: \"M297.934,145.924a1.471,1.471,0,1,0,1.47-1.473A1.469,1.469,0,0,0,297.934,145.924Z\",\n transform: \"translate(568.203 261.549)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10706\",\n \"data-name\": \"Path 10706\",\n d: \"M131.77,306.778a1.473,1.473,0,1,0,1.476-1.473A1.469,1.469,0,0,0,131.77,306.778Z\",\n transform: \"translate(242.044 577.285)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_527\",\n \"data-name\": \"Ellipse 527\",\n cx: 1.471,\n cy: 1.471,\n r: 1.471,\n transform: \"translate(354.063 806.306)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10707\",\n \"data-name\": \"Path 10707\",\n d: \"M87.934,291.594a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,87.934,291.594Z\",\n transform: \"translate(155.999 547.48)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10708\",\n \"data-name\": \"Path 10708\",\n d: \"M119.934,306.594a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,119.934,306.594Z\",\n transform: \"translate(218.811 576.923)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10709\",\n \"data-name\": \"Path 10709\",\n d: \"M247.273,289.774a1.473,1.473,0,1,0,1.473-1.473A1.471,1.471,0,0,0,247.273,289.774Z\",\n transform: \"translate(468.762 543.908)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_528\",\n \"data-name\": \"Ellipse 528\",\n cx: 1.471,\n cy: 1.471,\n r: 1.471,\n transform: \"translate(696.284 755.926)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10710\",\n \"data-name\": \"Path 10710\",\n d: \"M203.436,274.59a1.473,1.473,0,1,0,1.473-1.473A1.474,1.474,0,0,0,203.436,274.59Z\",\n transform: \"translate(382.715 514.104)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10711\",\n \"data-name\": \"Path 10711\",\n d: \"M235.436,289.59a1.473,1.473,0,1,0,1.473-1.473A1.474,1.474,0,0,0,235.436,289.59Z\",\n transform: \"translate(445.527 543.547)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10712\",\n \"data-name\": \"Path 10712\",\n d: \"M344.273,299.774a1.473,1.473,0,1,0,1.473-1.473A1.471,1.471,0,0,0,344.273,299.774Z\",\n transform: \"translate(659.161 563.537)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_529\",\n \"data-name\": \"Ellipse 529\",\n cx: 1.471,\n cy: 1.471,\n r: 1.471,\n transform: \"translate(983.683 785.555)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10713\",\n \"data-name\": \"Path 10713\",\n d: \"M300.436,284.59a1.473,1.473,0,1,0,1.473-1.473A1.474,1.474,0,0,0,300.436,284.59Z\",\n transform: \"translate(573.114 533.732)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10714\",\n \"data-name\": \"Path 10714\",\n d: \"M319.337,307.09a1.471,1.471,0,1,0,1.47-1.472A1.473,1.473,0,0,0,319.337,307.09Z\",\n transform: \"translate(610.214 577.899)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10715\",\n \"data-name\": \"Path 10715\",\n d: \"M419.27,294.278a1.473,1.473,0,1,0,1.476-1.473A1.469,1.469,0,0,0,419.27,294.278Z\",\n transform: \"translate(806.37 552.749)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_530\",\n \"data-name\": \"Ellipse 530\",\n cx: 1.471,\n cy: 1.471,\n r: 1.471,\n transform: \"translate(1205.89 769.27)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10716\",\n \"data-name\": \"Path 10716\",\n d: \"M375.434,279.094a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,375.434,279.094Z\",\n transform: \"translate(720.326 522.945)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10717\",\n \"data-name\": \"Path 10717\",\n d: \"M407.434,294.094a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,407.434,294.094Z\",\n transform: \"translate(783.137 552.388)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10718\",\n \"data-name\": \"Path 10718\",\n d: \"M175.27,96.278a1.473,1.473,0,1,0,1.475-1.473A1.469,1.469,0,0,0,175.27,96.278Z\",\n transform: \"translate(327.429 164.1)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_531\",\n \"data-name\": \"Ellipse 531\",\n cx: 1.471,\n cy: 1.471,\n r: 1.471,\n transform: \"translate(482.948 182.621)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10719\",\n \"data-name\": \"Path 10719\",\n d: \"M131.434,81.094a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,131.434,81.094Z\",\n transform: \"translate(241.384 134.295)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10720\",\n \"data-name\": \"Path 10720\",\n d: \"M163.434,96.094a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,163.434,96.094Z\",\n transform: \"translate(304.196 163.739)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10721\",\n \"data-name\": \"Path 10721\",\n d: \"M78.27,43.278a1.473,1.473,0,1,0,1.476-1.473A1.469,1.469,0,0,0,78.27,43.278Z\",\n transform: \"translate(137.03 60.067)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_532\",\n \"data-name\": \"Ellipse 532\",\n cx: 1.471,\n cy: 1.471,\n r: 1.471,\n transform: \"translate(195.55 25.589)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10722\",\n \"data-name\": \"Path 10722\",\n d: \"M34.434,28.094a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,34.434,28.094Z\",\n transform: \"translate(50.986 30.263)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10723\",\n \"data-name\": \"Path 10723\",\n d: \"M66.434,43.094a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,66.434,43.094Z\",\n transform: \"translate(113.798 59.706)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10724\",\n \"data-name\": \"Path 10724\",\n d: \"M313,227.425a1.471,1.471,0,1,0,1.473-1.473A1.47,1.47,0,0,0,313,227.425Z\",\n transform: \"translate(597.781 421.525)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_533\",\n \"data-name\": \"Ellipse 533\",\n cx: 1.471,\n cy: 1.471,\n r: 1.471,\n transform: \"translate(822.197 585.572)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10725\",\n \"data-name\": \"Path 10725\",\n d: \"M245.934,217.094a1.471,1.471,0,1,0,1.47-1.473A1.471,1.471,0,0,0,245.934,217.094Z\",\n transform: \"translate(466.133 401.246)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10726\",\n \"data-name\": \"Path 10726\",\n d: \"M429.416,46.613a2.51,2.51,0,1,0,2.51-2.513A2.506,2.506,0,0,0,429.416,46.613Z\",\n transform: \"translate(826.285 64.572)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10727\",\n \"data-name\": \"Path 10727\",\n d: \"M490.595,10.553A2.508,2.508,0,1,0,493.1,8.04,2.507,2.507,0,0,0,490.595,10.553Z\",\n transform: \"translate(946.372 -6.209)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10728\",\n \"data-name\": \"Path 10728\",\n d: \"M398.728,172.789a2.511,2.511,0,1,0,2.51-2.515A2.51,2.51,0,0,0,398.728,172.789Z\",\n transform: \"translate(766.049 312.236)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10729\",\n \"data-name\": \"Path 10729\",\n d: \"M422.817,169.227a2.51,2.51,0,1,0,2.51-2.512A2.508,2.508,0,0,0,422.817,169.227Z\",\n transform: \"translate(813.332 305.248)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10730\",\n \"data-name\": \"Path 10730\",\n d: \"M285.34,58.883a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,285.34,58.883Z\",\n transform: \"translate(543.482 88.663)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10731\",\n \"data-name\": \"Path 10731\",\n d: \"M253.488,92.723a2.511,2.511,0,1,0,2.51-2.51A2.509,2.509,0,0,0,253.488,92.723Z\",\n transform: \"translate(480.961 155.086)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10732\",\n \"data-name\": \"Path 10732\",\n d: \"M223.209,78.866a2.508,2.508,0,1,0,2.51-2.51A2.509,2.509,0,0,0,223.209,78.866Z\",\n transform: \"translate(421.527 127.887)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10733\",\n \"data-name\": \"Path 10733\",\n d: \"M217.05,117.36a2.51,2.51,0,1,0,2.507-2.513A2.506,2.506,0,0,0,217.05,117.36Z\",\n transform: \"translate(409.438 203.44)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10734\",\n \"data-name\": \"Path 10734\",\n d: \"M296.053,97.374a2.508,2.508,0,1,0,2.507-2.51A2.508,2.508,0,0,0,296.053,97.374Z\",\n transform: \"translate(564.511 164.216)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10735\",\n \"data-name\": \"Path 10735\",\n d: \"M397.222,14.688a2.508,2.508,0,1,0,2.507-2.51A2.509,2.509,0,0,0,397.222,14.688Z\",\n transform: \"translate(763.093 1.913)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10738\",\n \"data-name\": \"Path 10738\",\n d: \"M354.567,38.941a2.511,2.511,0,1,0,2.513-2.51A2.509,2.509,0,0,0,354.567,38.941Z\",\n transform: \"translate(679.366 49.519)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10739\",\n \"data-name\": \"Path 10739\",\n d: \"M399.9,30.274a2.511,2.511,0,1,0,2.513-2.51A2.509,2.509,0,0,0,399.9,30.274Z\",\n transform: \"translate(768.349 32.507)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10740\",\n \"data-name\": \"Path 10740\",\n d: \"M404.081,46.1a2.508,2.508,0,1,0,2.51-2.513A2.508,2.508,0,0,0,404.081,46.1Z\",\n transform: \"translate(776.556 63.559)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10741\",\n \"data-name\": \"Path 10741\",\n d: \"M325.414,10.761a2.509,2.509,0,1,0,2.512-2.51A2.509,2.509,0,0,0,325.414,10.761Z\",\n transform: \"translate(622.143 -5.795)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10742\",\n \"data-name\": \"Path 10742\",\n d: \"M100.748,16.1a2.508,2.508,0,1,0,2.51-2.513A2.508,2.508,0,0,0,100.748,16.1Z\",\n transform: \"translate(181.152 4.673)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10743\",\n \"data-name\": \"Path 10743\",\n d: \"M328.931,95.8a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,328.931,95.8Z\",\n transform: \"translate(629.046 161.13)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10744\",\n \"data-name\": \"Path 10744\",\n d: \"M407.934,75.819a2.51,2.51,0,1,0,2.509-2.51A2.507,2.507,0,0,0,407.934,75.819Z\",\n transform: \"translate(784.119 121.906)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10745\",\n \"data-name\": \"Path 10745\",\n d: \"M493.706,90.7a2.51,2.51,0,1,0,2.512-2.512A2.509,2.509,0,0,0,493.706,90.7Z\",\n transform: \"translate(952.479 151.119)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10746\",\n \"data-name\": \"Path 10746\",\n d: \"M461.854,124.542a2.51,2.51,0,1,0,2.51-2.51A2.509,2.509,0,0,0,461.854,124.542Z\",\n transform: \"translate(889.957 217.543)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10747\",\n \"data-name\": \"Path 10747\",\n d: \"M431.574,110.685a2.511,2.511,0,1,0,2.513-2.51A2.51,2.51,0,0,0,431.574,110.685Z\",\n transform: \"translate(830.521 190.343)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10748\",\n \"data-name\": \"Path 10748\",\n d: \"M425.416,149.179a2.508,2.508,0,1,0,2.509-2.513A2.509,2.509,0,0,0,425.416,149.179Z\",\n transform: \"translate(818.434 265.896)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10749\",\n \"data-name\": \"Path 10749\",\n d: \"M504.419,129.2a2.508,2.508,0,1,0,2.51-2.513A2.506,2.506,0,0,0,504.419,129.2Z\",\n transform: \"translate(973.507 226.672)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10750\",\n \"data-name\": \"Path 10750\",\n d: \"M448.543,180a2.51,2.51,0,1,0,2.512-2.51A2.511,2.511,0,0,0,448.543,180Z\",\n transform: \"translate(863.829 326.404)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10751\",\n \"data-name\": \"Path 10751\",\n d: \"M456.082,176.457a2.51,2.51,0,1,0,2.512-2.51A2.511,2.511,0,0,0,456.082,176.457Z\",\n transform: \"translate(878.627 319.445)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10752\",\n \"data-name\": \"Path 10752\",\n d: \"M465.263,181.946a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,465.263,181.946Z\",\n transform: \"translate(896.649 330.214)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10753\",\n \"data-name\": \"Path 10753\",\n d: \"M525.263,210.612a2.509,2.509,0,1,0,2.51-2.512A2.508,2.508,0,0,0,525.263,210.612Z\",\n transform: \"translate(1014.421 386.484)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10754\",\n \"data-name\": \"Path 10754\",\n d: \"M531.6,241.946a2.509,2.509,0,1,0,2.51-2.513A2.508,2.508,0,0,0,531.6,241.946Z\",\n transform: \"translate(1026.852 447.986)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10755\",\n \"data-name\": \"Path 10755\",\n d: \"M521.6,226.946a2.509,2.509,0,1,0,2.51-2.513A2.508,2.508,0,0,0,521.6,226.946Z\",\n transform: \"translate(1007.223 418.543)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10756\",\n \"data-name\": \"Path 10756\",\n d: \"M548.93,222.279a2.508,2.508,0,1,0,2.507-2.512A2.508,2.508,0,0,0,548.93,222.279Z\",\n transform: \"translate(1060.876 409.382)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10757\",\n \"data-name\": \"Path 10757\",\n d: \"M550.082,252.766a2.51,2.51,0,1,0,2.513-2.512A2.511,2.511,0,0,0,550.082,252.766Z\",\n transform: \"translate(1063.137 469.225)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10758\",\n \"data-name\": \"Path 10758\",\n d: \"M553.235,264.279a2.511,2.511,0,1,0,2.513-2.513A2.509,2.509,0,0,0,553.235,264.279Z\",\n transform: \"translate(1069.326 491.823)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10759\",\n \"data-name\": \"Path 10759\",\n d: \"M537.749,258.279a2.508,2.508,0,1,0,2.509-2.512A2.508,2.508,0,0,0,537.749,258.279Z\",\n transform: \"translate(1038.93 480.046)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10760\",\n \"data-name\": \"Path 10760\",\n d: \"M554.416,280.279a2.509,2.509,0,1,0,2.512-2.513A2.509,2.509,0,0,0,554.416,280.279Z\",\n transform: \"translate(1071.645 523.229)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10761\",\n \"data-name\": \"Path 10761\",\n d: \"M473.263,175.946a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,473.263,175.946Z\",\n transform: \"translate(912.351 318.437)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10762\",\n \"data-name\": \"Path 10762\",\n d: \"M485.6,179.612a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,485.6,179.612Z\",\n transform: \"translate(936.56 325.633)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10763\",\n \"data-name\": \"Path 10763\",\n d: \"M490.749,186.613a2.508,2.508,0,1,0,2.51-2.513A2.508,2.508,0,0,0,490.749,186.613Z\",\n transform: \"translate(946.674 339.375)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10764\",\n \"data-name\": \"Path 10764\",\n d: \"M492.749,199.946a2.51,2.51,0,1,0,2.513-2.513A2.509,2.509,0,0,0,492.749,199.946Z\",\n transform: \"translate(950.6 365.546)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10765\",\n \"data-name\": \"Path 10765\",\n d: \"M504.235,203.613a2.511,2.511,0,1,0,2.513-2.513A2.509,2.509,0,0,0,504.235,203.613Z\",\n transform: \"translate(973.146 372.743)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10766\",\n \"data-name\": \"Path 10766\",\n d: \"M483.6,217.612a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,483.6,217.612Z\",\n transform: \"translate(932.634 400.222)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10767\",\n \"data-name\": \"Path 10767\",\n d: \"M539.863,329.106a2.511,2.511,0,1,0,2.51-2.513A2.511,2.511,0,0,0,539.863,329.106Z\",\n transform: \"translate(1043.079 619.07)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10768\",\n \"data-name\": \"Path 10768\",\n d: \"M5.6,317.85a2.511,2.511,0,1,0,2.51-2.516A2.511,2.511,0,0,0,5.6,317.85Z\",\n transform: \"translate(-5.604 596.97)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10769\",\n \"data-name\": \"Path 10769\",\n d: \"M305.355,213.364a2.511,2.511,0,1,0,2.51-2.513A2.508,2.508,0,0,0,305.355,213.364Z\",\n transform: \"translate(582.769 391.883)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10770\",\n \"data-name\": \"Path 10770\",\n d: \"M279.806,257.112a2.51,2.51,0,1,0,2.507-2.512A2.507,2.507,0,0,0,279.806,257.112Z\",\n transform: \"translate(532.62 477.757)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10771\",\n \"data-name\": \"Path 10771\",\n d: \"M237.065,302.419a2.511,2.511,0,1,0,2.51-2.513A2.511,2.511,0,0,0,237.065,302.419Z\",\n transform: \"translate(448.725 566.687)\",\n fill: \"#48c4f5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10772\",\n \"data-name\": \"Path 10772\",\n d: \"M316.068,251.857a2.51,2.51,0,1,0,2.51-2.515A2.511,2.511,0,0,0,316.068,251.857Z\",\n transform: \"translate(603.798 467.434)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10773\",\n \"data-name\": \"Path 10773\",\n d: \"M385.417,244.157a2.51,2.51,0,1,0,2.513-2.513A2.509,2.509,0,0,0,385.417,244.157Z\",\n transform: \"translate(739.921 452.326)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10774\",\n \"data-name\": \"Path 10774\",\n d: \"M353.565,308.578a2.511,2.511,0,1,0,2.509-2.513A2.51,2.51,0,0,0,353.565,308.578Z\",\n transform: \"translate(677.399 578.776)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10775\",\n \"data-name\": \"Path 10775\",\n d: \"M323.285,264.141a2.51,2.51,0,1,0,2.513-2.515A2.511,2.511,0,0,0,323.285,264.141Z\",\n transform: \"translate(617.964 491.548)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10776\",\n \"data-name\": \"Path 10776\",\n d: \"M401.233,283.612a2.511,2.511,0,1,0,2.512-2.516A2.509,2.509,0,0,0,401.233,283.612Z\",\n transform: \"translate(770.966 529.765)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10777\",\n \"data-name\": \"Path 10777\",\n d: \"M317.127,333.212a2.51,2.51,0,1,0,2.509-2.513A2.511,2.511,0,0,0,317.127,333.212Z\",\n transform: \"translate(605.876 627.13)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10778\",\n \"data-name\": \"Path 10778\",\n d: \"M396.13,313.231a2.51,2.51,0,1,0,2.509-2.516A2.511,2.511,0,0,0,396.13,313.231Z\",\n transform: \"translate(760.949 587.904)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10779\",\n \"data-name\": \"Path 10779\",\n d: \"M434.686,250.829a2.51,2.51,0,1,0,2.509-2.513A2.508,2.508,0,0,0,434.686,250.829Z\",\n transform: \"translate(836.63 465.422)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10780\",\n \"data-name\": \"Path 10780\",\n d: \"M464.42,315.247a2.51,2.51,0,1,0,2.513-2.51A2.511,2.511,0,0,0,464.42,315.247Z\",\n transform: \"translate(894.994 591.873)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10781\",\n \"data-name\": \"Path 10781\",\n d: \"M434.141,301.394a2.51,2.51,0,1,0,2.507-2.515A2.508,2.508,0,0,0,434.141,301.394Z\",\n transform: \"translate(835.56 564.671)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10782\",\n \"data-name\": \"Path 10782\",\n d: \"M427.414,332.1a2.51,2.51,0,1,0,2.513-2.512A2.511,2.511,0,0,0,427.414,332.1Z\",\n transform: \"translate(822.356 624.939)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10783\",\n \"data-name\": \"Path 10783\",\n d: \"M506.984,319.9a2.511,2.511,0,1,0,2.513-2.516A2.511,2.511,0,0,0,506.984,319.9Z\",\n transform: \"translate(978.542 601)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10784\",\n \"data-name\": \"Path 10784\",\n d: \"M170.9,214.611a2.512,2.512,0,1,0,2.512-2.51A2.511,2.511,0,0,0,170.9,214.611Z\",\n transform: \"translate(318.853 394.337)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10785\",\n \"data-name\": \"Path 10785\",\n d: \"M129.8,249.771a2.51,2.51,0,1,0,2.51-2.515A2.511,2.511,0,0,0,129.8,249.771Z\",\n transform: \"translate(238.183 463.342)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10786\",\n \"data-name\": \"Path 10786\",\n d: \"M99.523,235.913a2.51,2.51,0,1,0,2.51-2.513A2.511,2.511,0,0,0,99.523,235.913Z\",\n transform: \"translate(178.747 436.144)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10787\",\n \"data-name\": \"Path 10787\",\n d: \"M93.364,304.985a2.511,2.511,0,1,0,2.513-2.513A2.509,2.509,0,0,0,93.364,304.985Z\",\n transform: \"translate(166.658 571.724)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10788\",\n \"data-name\": \"Path 10788\",\n d: \"M151.083,254.613A2.51,2.51,0,1,0,153.6,252.1,2.511,2.511,0,0,0,151.083,254.613Z\",\n transform: \"translate(279.953 472.85)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10789\",\n \"data-name\": \"Path 10789\",\n d: \"M54.393,132.789a2.51,2.51,0,1,0,2.51-2.513A2.51,2.51,0,0,0,54.393,132.789Z\",\n transform: \"translate(90.163 233.725)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10790\",\n \"data-name\": \"Path 10790\",\n d: \"M547.529,184.11a2.51,2.51,0,1,0,2.51-2.513A2.509,2.509,0,0,0,547.529,184.11Z\",\n transform: \"translate(1058.126 334.461)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10791\",\n \"data-name\": \"Path 10791\",\n d: \"M535.725,53.753a2.51,2.51,0,1,0,2.51-2.513A2.507,2.507,0,0,0,535.725,53.753Z\",\n transform: \"translate(1034.957 78.587)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10792\",\n \"data-name\": \"Path 10792\",\n d: \"M12.757,49.645a2.51,2.51,0,1,0,2.513-2.51A2.511,2.511,0,0,0,12.757,49.645Z\",\n transform: \"translate(8.436 70.53)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10793\",\n \"data-name\": \"Path 10793\",\n d: \"M178.077,53.238a2.511,2.511,0,1,0,2.513-2.51A2.511,2.511,0,0,0,178.077,53.238Z\",\n transform: \"translate(332.939 77.582)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10794\",\n \"data-name\": \"Path 10794\",\n d: \"M146.226,87.08a2.51,2.51,0,1,0,2.51-2.513A2.506,2.506,0,0,0,146.226,87.08Z\",\n transform: \"translate(270.419 144.004)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10795\",\n \"data-name\": \"Path 10795\",\n d: \"M552.082,103.624a2.51,2.51,0,1,0,2.513-2.51A2.509,2.509,0,0,0,552.082,103.624Z\",\n transform: \"translate(1067.063 176.484)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10796\",\n \"data-name\": \"Path 10796\",\n d: \"M480.43,199.779a2.51,2.51,0,1,0,2.51-2.513A2.506,2.506,0,0,0,480.43,199.779Z\",\n transform: \"translate(926.42 365.218)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10797\",\n \"data-name\": \"Path 10797\",\n d: \"M442.749,164.947a2.51,2.51,0,1,0,2.513-2.513A2.506,2.506,0,0,0,442.749,164.947Z\",\n transform: \"translate(852.456 296.847)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10798\",\n \"data-name\": \"Path 10798\",\n d: \"M504.235,219.613a2.511,2.511,0,1,0,2.513-2.512A2.506,2.506,0,0,0,504.235,219.613Z\",\n transform: \"translate(973.146 404.149)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10799\",\n \"data-name\": \"Path 10799\",\n d: \"M550.082,13.291a2.51,2.51,0,1,0,2.513-2.51A2.509,2.509,0,0,0,550.082,13.291Z\",\n transform: \"translate(1063.137 -0.829)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10800\",\n \"data-name\": \"Path 10800\",\n d: \"M144.082,63.933a2.51,2.51,0,1,0,2.512-2.513A2.509,2.509,0,0,0,144.082,63.933Z\",\n transform: \"translate(266.211 98.569)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10801\",\n \"data-name\": \"Path 10801\",\n d: \"M79.582,12.791a2.51,2.51,0,1,0,2.512-2.51A2.509,2.509,0,0,0,79.582,12.791Z\",\n transform: \"translate(139.605 -1.81)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10802\",\n \"data-name\": \"Path 10802\",\n d: \"M115.946,73.223a2.511,2.511,0,1,0,2.51-2.513A2.509,2.509,0,0,0,115.946,73.223Z\",\n transform: \"translate(210.983 116.804)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10803\",\n \"data-name\": \"Path 10803\",\n d: \"M124.749,97.277a2.51,2.51,0,1,0,2.512-2.51A2.509,2.509,0,0,0,124.749,97.277Z\",\n transform: \"translate(228.263 164.025)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10804\",\n \"data-name\": \"Path 10804\",\n d: \"M188.79,91.731a2.511,2.511,0,1,0,2.513-2.513A2.511,2.511,0,0,0,188.79,91.731Z\",\n transform: \"translate(353.967 153.133)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10805\",\n \"data-name\": \"Path 10805\",\n d: \"M391.544,207.686a2.508,2.508,0,1,0,2.509-2.513A2.511,2.511,0,0,0,391.544,207.686Z\",\n transform: \"translate(751.948 380.738)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10806\",\n \"data-name\": \"Path 10806\",\n d: \"M415.119,142.024a2.51,2.51,0,1,0,2.513-2.509A2.509,2.509,0,0,0,415.119,142.024Z\",\n transform: \"translate(798.222 251.858)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10807\",\n \"data-name\": \"Path 10807\",\n d: \"M481.837,107.063a2.51,2.51,0,1,0,2.513-2.513A2.509,2.509,0,0,0,481.837,107.063Z\",\n transform: \"translate(929.181 183.228)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10808\",\n \"data-name\": \"Path 10808\",\n d: \"M78.568,268.945a2.51,2.51,0,1,0,2.51-2.516A2.508,2.508,0,0,0,78.568,268.945Z\",\n transform: \"translate(137.615 500.976)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10809\",\n \"data-name\": \"Path 10809\",\n d: \"M52.568,290.277a2.51,2.51,0,1,0,2.51-2.515A2.511,2.511,0,0,0,52.568,290.277Z\",\n transform: \"translate(86.58 542.85)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10810\",\n \"data-name\": \"Path 10810\",\n d: \"M231.934,320.926a2.508,2.508,0,1,0,2.507-2.512A2.508,2.508,0,0,0,231.934,320.926Z\",\n transform: \"translate(438.653 603.016)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10811\",\n \"data-name\": \"Path 10811\",\n d: \"M239.086,217.954a2.51,2.51,0,1,0,2.513-2.518A2.513,2.513,0,0,0,239.086,217.954Z\",\n transform: \"translate(452.692 400.883)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10812\",\n \"data-name\": \"Path 10812\",\n d: \"M310.423,192.8a2.508,2.508,0,1,0,2.507-2.512A2.513,2.513,0,0,0,310.423,192.8Z\",\n transform: \"translate(592.717 351.523)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10813\",\n \"data-name\": \"Path 10813\",\n d: \"M69.789,301.422a2.508,2.508,0,1,0,2.51-2.51A2.511,2.511,0,0,0,69.789,301.422Z\",\n transform: \"translate(120.383 564.736)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10814\",\n \"data-name\": \"Path 10814\",\n d: \"M74.407,333.246a2.511,2.511,0,1,0,2.513-2.515A2.511,2.511,0,0,0,74.407,333.246Z\",\n transform: \"translate(129.448 627.193)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10815\",\n \"data-name\": \"Path 10815\",\n d: \"M64.624,232.9a2.51,2.51,0,1,0,2.513-2.518A2.513,2.513,0,0,0,64.624,232.9Z\",\n transform: \"translate(110.245 430.226)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10816\",\n \"data-name\": \"Path 10816\",\n d: \"M163.915,174.46a2.51,2.51,0,1,0,2.513-2.513A2.514,2.514,0,0,0,163.915,174.46Z\",\n transform: \"translate(305.141 315.52)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10817\",\n \"data-name\": \"Path 10817\",\n d: \"M58.98,99.975a2.508,2.508,0,1,0,2.507-2.513A2.506,2.506,0,0,0,58.98,99.975Z\",\n transform: \"translate(99.166 169.315)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10818\",\n \"data-name\": \"Path 10818\",\n d: \"M143.179,132.273a2.51,2.51,0,1,0,2.507-2.51A2.508,2.508,0,0,0,143.179,132.273Z\",\n transform: \"translate(264.438 232.718)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10819\",\n \"data-name\": \"Path 10819\",\n d: \"M70.751,59.4a2.51,2.51,0,1,0,2.51-2.513A2.511,2.511,0,0,0,70.751,59.4Z\",\n transform: \"translate(122.271 89.668)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10820\",\n \"data-name\": \"Path 10820\",\n d: \"M13.93,145.78a2.51,2.51,0,1,0,2.507-2.515A2.509,2.509,0,0,0,13.93,145.78Z\",\n transform: \"translate(10.739 259.221)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10821\",\n \"data-name\": \"Path 10821\",\n d: \"M80.833,165.03a2.51,2.51,0,1,0,2.51-2.513A2.508,2.508,0,0,0,80.833,165.03Z\",\n transform: \"translate(142.061 297.01)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10822\",\n \"data-name\": \"Path 10822\",\n d: \"M124.583,198.436a2.51,2.51,0,1,0,2.51-2.518A2.51,2.51,0,0,0,124.583,198.436Z\",\n transform: \"translate(227.937 362.572)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10823\",\n \"data-name\": \"Path 10823\",\n d: \"M124.235,160.032a2.511,2.511,0,1,0,2.51-2.518A2.507,2.507,0,0,0,124.235,160.032Z\",\n transform: \"translate(227.254 287.19)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10824\",\n \"data-name\": \"Path 10824\",\n d: \"M259.735,118.782a2.511,2.511,0,1,0,2.51-2.518A2.508,2.508,0,0,0,259.735,118.782Z\",\n transform: \"translate(493.223 206.221)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10825\",\n \"data-name\": \"Path 10825\",\n d: \"M203.735,153.782a2.511,2.511,0,1,0,2.51-2.518A2.507,2.507,0,0,0,203.735,153.782Z\",\n transform: \"translate(383.302 274.922)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10826\",\n \"data-name\": \"Path 10826\",\n d: \"M439.083,213.436a2.51,2.51,0,1,0,2.509-2.518A2.51,2.51,0,0,0,439.083,213.436Z\",\n transform: \"translate(845.26 392.015)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10827\",\n \"data-name\": \"Path 10827\",\n d: \"M512.735,266.783a2.511,2.511,0,1,0,2.509-2.518A2.508,2.508,0,0,0,512.735,266.783Z\",\n transform: \"translate(989.83 496.726)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10828\",\n \"data-name\": \"Path 10828\",\n d: \"M359.583,242.936a2.51,2.51,0,1,0,2.509-2.518A2.51,2.51,0,0,0,359.583,242.936Z\",\n transform: \"translate(689.212 449.92)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10829\",\n \"data-name\": \"Path 10829\",\n d: \"M390.748,295.793a2.51,2.51,0,1,0,2.51-2.515A2.51,2.51,0,0,0,390.748,295.793Z\",\n transform: \"translate(750.385 553.677)\",\n fill: \"#ffe358\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10830\",\n \"data-name\": \"Path 10830\",\n d: \"M95.6,274.947a2.51,2.51,0,1,0,2.507-2.518A2.509,2.509,0,0,0,95.6,274.947Z\",\n transform: \"translate(171.037 512.751)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10831\",\n \"data-name\": \"Path 10831\",\n d: \"M11.583,181.936a2.51,2.51,0,1,0,2.51-2.518A2.51,2.51,0,0,0,11.583,181.936Z\",\n transform: \"translate(6.132 330.184)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10832\",\n \"data-name\": \"Path 10832\",\n d: \"M142.088,11.611A2.51,2.51,0,1,0,144.6,9.1,2.508,2.508,0,0,0,142.088,11.611Z\",\n transform: \"translate(262.297 -4.132)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10833\",\n \"data-name\": \"Path 10833\",\n d: \"M463.009,143.292a3.652,3.652,0,1,0,3.65-3.65A3.651,3.651,0,0,0,463.009,143.292Z\",\n transform: \"translate(892.224 252.109)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10834\",\n \"data-name\": \"Path 10834\",\n d: \"M405.015,179.732a3.65,3.65,0,1,0,3.65-3.653A3.648,3.648,0,0,0,405.015,179.732Z\",\n transform: \"translate(778.389 323.63)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10835\",\n \"data-name\": \"Path 10835\",\n d: \"M116.587,242.342a3.653,3.653,0,1,0,3.65-3.65A3.655,3.655,0,0,0,116.587,242.342Z\",\n transform: \"translate(212.242 446.532)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10836\",\n \"data-name\": \"Path 10836\",\n d: \"M27.8,329.379a3.653,3.653,0,1,0,3.653-3.653A3.653,3.653,0,0,0,27.8,329.379Z\",\n transform: \"translate(37.964 617.368)\",\n fill: \"#48c4f5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10837\",\n \"data-name\": \"Path 10837\",\n d: \"M408.607,313.467a3.652,3.652,0,1,0,3.653-3.65A3.656,3.656,0,0,0,408.607,313.467Z\",\n transform: \"translate(785.44 586.141)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10838\",\n \"data-name\": \"Path 10838\",\n d: \"M339.731,219.081a6.492,6.492,0,1,0,6.495-6.495A6.492,6.492,0,0,0,339.731,219.081Z\",\n transform: \"translate(650.245 395.289)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_534\",\n \"data-name\": \"Ellipse 534\",\n cx: 2.841,\n cy: 2.841,\n r: 2.841,\n transform: \"translate(520.576 182.413)\",\n fill: \"#d55549\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_536\",\n \"data-name\": \"Ellipse 536\",\n cx: 2.841,\n cy: 2.841,\n r: 2.841,\n transform: \"translate(706.25 457.095)\",\n fill: \"#d55549\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10839\",\n \"data-name\": \"Path 10839\",\n d: \"M228.218,175.28a7.545,7.545,0,1,0,7.546-7.546A7.547,7.547,0,0,0,228.218,175.28Z\",\n transform: \"translate(431.359 307.25)\",\n fill: \"#d55549\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_537\",\n \"data-name\": \"Ellipse 537\",\n cx: 2.841,\n cy: 2.841,\n r: 2.841,\n transform: \"translate(541.195 827.331)\",\n fill: \"#d55549\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_538\",\n \"data-name\": \"Ellipse 538\",\n cx: 2.841,\n cy: 2.841,\n r: 2.841,\n transform: \"translate(1073.525 853.011)\",\n fill: \"#d55549\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Ellipse_539\",\n \"data-name\": \"Ellipse 539\",\n cx: 2.841,\n cy: 2.841,\n r: 2.841,\n transform: \"translate(138.365 245.62)\",\n fill: \"#d55549\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10840\",\n \"data-name\": \"Path 10840\",\n d: \"M440.238,315.5A6.492,6.492,0,1,0,446.733,309,6.493,6.493,0,0,0,440.238,315.5Z\",\n transform: \"translate(847.528 584.543)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10841\",\n \"data-name\": \"Path 10841\",\n d: \"M357.4,291.1a6.492,6.492,0,1,0,6.495-6.492A6.5,6.5,0,0,0,357.4,291.1Z\",\n transform: \"translate(684.933 536.665)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_540\",\n \"data-name\": \"Ellipse 540\",\n cx: 6.493,\n cy: 6.493,\n rx: 6.493,\n ry: 6.493,\n transform: \"translate(130.764 154.071)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_541\",\n \"data-name\": \"Ellipse 541\",\n cx: 6.493,\n cy: 6.493,\n rx: 6.493,\n ry: 6.493,\n transform: \"translate(1603.313 655.711)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_542\",\n \"data-name\": \"Ellipse 542\",\n cx: 6.493,\n cy: 6.493,\n rx: 6.493,\n ry: 6.493,\n transform: \"translate(77.433 503.69)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10842\",\n \"data-name\": \"Path 10842\",\n d: \"M107.93,333.83a6.492,6.492,0,1,0,6.492-6.495A6.489,6.489,0,0,0,107.93,333.83Z\",\n transform: \"translate(195.249 620.527)\",\n fill: \"#b9e0f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10843\",\n \"data-name\": \"Path 10843\",\n d: \"M256.524,303.414a10.62,10.62,0,1,0,10.622-10.619A10.618,10.618,0,0,0,256.524,303.414Z\",\n transform: \"translate(486.92 552.729)\",\n fill: \"#b9e0f1\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2263\",\n \"data-name\": \"Group 2263\",\n transform: \"translate(170.83 50.736)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10844\",\n \"data-name\": \"Path 10844\",\n d: \"M167.636,60.892a6.6,6.6,0,0,0,5.855-5.852c.2-2.453,1.837-13.259,1.837-13.259s1.4,10.835,1.84,13.259c.652,3.591,2.791,5.425,5.855,5.849,2.438.335,13.256,1.846,13.256,1.843s-10.817,1.523-13.256,1.846a6.26,6.26,0,0,0-5.846,5.849c-.329,2.435-1.849,13.259-1.849,13.259s-1.6-10.812-1.849-13.259a6.4,6.4,0,0,0-5.843-5.852c-2.447-.273-13.259-1.843-13.259-1.843S165.191,61.173,167.636,60.892Z\",\n transform: \"translate(115.588 9.284)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10845\",\n \"data-name\": \"Path 10845\",\n d: \"M435.728,247.928a10.371,10.371,0,0,0,9.188-9.185c.308-3.846,2.88-20.8,2.88-20.8s2.2,17,2.889,20.8c1.019,5.641,4.376,8.512,9.182,9.179,3.822.524,20.8,2.895,20.8,2.895s-16.968,2.385-20.8,2.889c-6.11.812-8.575,4.711-9.173,9.179-.516,3.822-2.9,20.8-2.9,20.8s-2.5-16.957-2.895-20.8a10.059,10.059,0,0,0-9.173-9.188c-3.837-.421-20.8-2.886-20.8-2.88S431.894,248.37,435.728,247.928Z\",\n transform: \"translate(627.019 355.076)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10846\",\n \"data-name\": \"Path 10846\",\n d: \"M77.981,286.992a7.327,7.327,0,0,0,6.5-6.5c.219-2.72,2.038-14.714,2.038-14.714s1.561,12.026,2.047,14.714c.717,3.991,3.093,6.024,6.492,6.495,2.705.367,14.72,2.047,14.72,2.047s-12.011,1.689-14.72,2.044a6.957,6.957,0,0,0-6.489,6.495c-.361,2.705-2.05,14.714-2.05,14.714s-1.772-12-2.047-14.714a7.123,7.123,0,0,0-6.489-6.5c-2.714-.3-14.72-2.042-14.72-2.035S75.267,287.306,77.981,286.992Z\",\n transform: \"translate(-63.261 448.968)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10847\",\n \"data-name\": \"Path 10847\",\n d: \"M330.326,41.129a4.059,4.059,0,0,0,3.594-3.6c.124-1.508,1.129-8.142,1.129-8.142s.862,6.655,1.132,8.142a4,4,0,0,0,3.594,3.594c1.5.2,8.142,1.132,8.142,1.132s-6.643.933-8.142,1.132a3.853,3.853,0,0,0-3.594,3.594c-.2,1.5-1.132,8.142-1.132,8.142s-.981-6.64-1.132-8.142a3.942,3.942,0,0,0-3.591-3.6c-1.5-.163-8.145-1.132-8.145-1.129S328.824,41.3,330.326,41.129Z\",\n transform: \"translate(585.954 -29.39)\",\n fill: \"#fff\"\n})));\n\nvar SvgStars = function SvgStars(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 768,\n height: 261,\n viewBox: \"0 0 768 261\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Mask_Group_16\",\n \"data-name\": \"Mask Group 16\",\n transform: \"translate(-1152 -827)\",\n clipPath: \"url(#clip-path)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Mask_Group_3\",\n \"data-name\": \"Mask Group 3\",\n transform: \"translate(1217.223 906.56)\",\n clipPath: \"url(#clip-path-2)\",\n style: {\n mixBlendMode: \"color-dodge\",\n isolation: \"isolate\"\n }\n }, _ref3)));\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgStars, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/stars.df42e9a5.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip-path\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_569\",\n \"data-name\": \"Rectangle 569\",\n width: 375,\n height: 302,\n transform: \"translate(0 510)\",\n fill: \"#fff\",\n stroke: \"#707070\",\n strokeWidth: 1\n})), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"linear-gradient\",\n x1: 0.965,\n y1: 0.247,\n x2: 0.245,\n y2: 0.884,\n gradientUnits: \"objectBoundingBox\"\n}, /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0,\n stopColor: \"#fff3d5\"\n}), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#ffefc9\"\n})), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"linear-gradient-2\",\n x1: 1.314,\n y1: 0.439,\n x2: 0,\n y2: 0.577,\n gradientUnits: \"objectBoundingBox\"\n}, /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0,\n stopColor: \"#acb2fa\"\n}), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#798df3\"\n})), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"linear-gradient-3\",\n x1: 0.351,\n y1: 0.619,\n x2: 0.722,\n y2: 0.572,\n gradientUnits: \"objectBoundingBox\"\n}, /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0,\n stopColor: \"#848dff\"\n}), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#d2c9ef\"\n})), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"linear-gradient-4\",\n x1: 0.5,\n x2: 0.5,\n y2: 1,\n gradientUnits: \"objectBoundingBox\"\n}, /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0,\n stopColor: \"#f6f6f6\"\n}), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#c9e1ff\"\n})));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2214\",\n \"data-name\": \"Group 2214\",\n transform: \"matrix(0.469, 0.883, -0.883, 0.469, 278.97, 603.154)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9153\",\n \"data-name\": \"Path 9153\",\n d: \"M7.337,231.709A180.835,180.835,0,0,1,130.066,7.336c95.847-28.067,196.342,26.87,224.41,122.718a180.853,180.853,0,0,1-301.15,179A180.413,180.413,0,0,1,7.337,231.709Z\",\n transform: \"translate(0.003 0)\",\n fill: \"#8077f6\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9154\",\n \"data-name\": \"Path 9154\",\n d: \"M0,177.61a131.887,131.887,0,0,0,14.646-9.658c50.422-39.015,38.2-104.6,71.737-151.19,20.5-28.476,50.822-15.5,74.846.932,25.954,17.806,48.848,27.136,77.208,40.188,26.01,11.922,46.413,28.135,61.274,47A180.584,180.584,0,0,1,178.381,223a179.9,179.9,0,0,1-100.82.234A174.706,174.706,0,0,1,59.029,216.8,182.181,182.181,0,0,1,0,177.61Z\",\n transform: \"translate(53.328 131.439)\",\n fill: \"#8481ec\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9155\",\n \"data-name\": \"Path 9155\",\n d: \"M7.34,231.709A180.8,180.8,0,0,1,61,45.45a178.79,178.79,0,0,1,44.672-29.027,181,181,0,0,1,24.4-9.088c95.847-28.067,196.342,26.87,224.41,122.718a179.969,179.969,0,0,1,6.994,39.97c-22.275-14.837-45.307-43.126-57.622-53.57C281.152,97.2,252.8,81.087,223.2,84.259c-28.115,3.029-53.356,23.06-81.582,21.2-11.114-.71-22.164-4.869-33.1-2.867-17.965,3.279-29.114,21.914-32.5,39.843-3.433,17.9-1.487,36.544-5.269,54.383-5.916,27.762-26.517,51.932-52.9,62.3A178.037,178.037,0,0,1,7.34,231.709Z\",\n transform: \"translate(0 0)\",\n fill: \"#7f7ffb\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9156\",\n \"data-name\": \"Path 9156\",\n d: \"M.379,15.277C-1.366,9.322,3.083,2.78,10.311.663s14.5,1,16.244,6.95-2.7,12.5-9.932,14.611S2.123,21.232.379,15.277Z\",\n transform: \"translate(125.095 301.721)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9157\",\n \"data-name\": \"Path 9157\",\n d: \"M.379,15.277C-1.366,9.322,3.079,2.78,10.307.663s14.5,1,16.244,6.95-2.7,12.5-9.928,14.611S2.123,21.232.379,15.277Z\",\n transform: \"translate(68.904 209.997)\",\n fill: \"#9f9fff\",\n opacity: 0.48\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9158\",\n \"data-name\": \"Path 9158\",\n d: \"M.377,15.279C-1.363,9.324,3.082,2.781,10.31.664s14.5,1,16.244,6.947-2.7,12.5-9.932,14.615S2.122,21.23.377,15.279Z\",\n transform: \"translate(160.245 144.86)\",\n fill: \"#9f9fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9159\",\n \"data-name\": \"Path 9159\",\n d: \"M.379,15.275C-1.366,9.32,3.079,2.778,10.307.665s14.5.991,16.244,6.947-2.7,12.5-9.928,14.615S2.119,21.231.379,15.275Z\",\n transform: \"translate(207.263 32.146)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9160\",\n \"data-name\": \"Path 9160\",\n d: \"M.19,7.639C-.683,4.662,1.538,1.391,5.153.332s7.248.5,8.12,3.473-1.352,6.249-4.964,7.307S1.058,10.617.19,7.639Z\",\n transform: \"translate(21.094 159.978)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9161\",\n \"data-name\": \"Path 9161\",\n d: \"M.884,35.01A21.761,21.761,0,0,1,0,29.027,178.789,178.789,0,0,1,44.672,0c8.854,2.446,15.9,8.441,18.35,16.811,4.132,14.119-6.439,29.65-23.564,34.665C22.3,56.5,5.019,49.125.884,35.01Z\",\n transform: \"translate(60.997 16.423)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9162\",\n \"data-name\": \"Path 9162\",\n d: \"M.191,6.079A4.745,4.745,0,1,1,6.079,9.3,4.75,4.75,0,0,1,.191,6.079Z\",\n transform: \"translate(98.384 304.472)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9163\",\n \"data-name\": \"Path 9163\",\n d: \"M.193,6.079A4.745,4.745,0,1,1,6.077,9.3,4.746,4.746,0,0,1,.193,6.079Z\",\n transform: \"translate(36.515 93.191)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9164\",\n \"data-name\": \"Path 9164\",\n d: \"M.191,6.077A4.745,4.745,0,1,1,6.079,9.3,4.744,4.744,0,0,1,.191,6.077Z\",\n transform: \"translate(45.616 141.157)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9165\",\n \"data-name\": \"Path 9165\",\n d: \"M0,4.746A4.744,4.744,0,1,1,4.742,9.492,4.743,4.743,0,0,1,0,4.746Z\",\n transform: \"translate(27.66 222.741)\",\n fill: \"#9f9fff\",\n opacity: 0.44\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9166\",\n \"data-name\": \"Path 9166\",\n d: \"M.193,6.077A4.745,4.745,0,1,1,6.077,9.3,4.74,4.74,0,0,1,.193,6.077Z\",\n transform: \"translate(91.096 162.658)\",\n fill: \"#9f9fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9167\",\n \"data-name\": \"Path 9167\",\n d: \"M.193,6.077A4.745,4.745,0,1,1,6.081,9.3,4.74,4.74,0,0,1,.193,6.077Z\",\n transform: \"translate(160.43 324.692)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9168\",\n \"data-name\": \"Path 9168\",\n d: \"M.193,6.077A4.745,4.745,0,1,1,6.08,9.3,4.74,4.74,0,0,1,.193,6.077Z\",\n transform: \"translate(151.061 217.219)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9169\",\n \"data-name\": \"Path 9169\",\n d: \"M.191,6.081A4.745,4.745,0,1,1,6.079,9.3,4.749,4.749,0,0,1,.191,6.081Z\",\n transform: \"translate(121.191 248.55)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9170\",\n \"data-name\": \"Path 9170\",\n d: \"M.191,6.079A4.745,4.745,0,1,1,6.079,9.3,4.75,4.75,0,0,1,.191,6.079Z\",\n transform: \"translate(287.344 234.012)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9171\",\n \"data-name\": \"Path 9171\",\n d: \"M0,4.746A4.744,4.744,0,1,1,4.742,9.492,4.746,4.746,0,0,1,0,4.746Z\",\n transform: \"translate(338.869 169.671)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9172\",\n \"data-name\": \"Path 9172\",\n d: \"M0,5.525A9.689,9.689,0,0,1,6.058.4a9.914,9.914,0,0,1,12.3,6.729,9.755,9.755,0,0,1,.174,4.825A174.709,174.709,0,0,1,0,5.525Z\",\n transform: \"translate(112.358 342.717)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9173\",\n \"data-name\": \"Path 9173\",\n d: \"M.193,6.079A4.745,4.745,0,1,1,6.081,9.3,4.746,4.746,0,0,1,.193,6.079Z\",\n transform: \"translate(137.259 43.285)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9174\",\n \"data-name\": \"Path 9174\",\n d: \"M.191,6.077A4.745,4.745,0,1,1,6.079,9.3,4.744,4.744,0,0,1,.191,6.077Z\",\n transform: \"translate(188.776 18.312)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9175\",\n \"data-name\": \"Path 9175\",\n d: \"M.262,8.283a6.466,6.466,0,1,1,8.021,4.389A6.463,6.463,0,0,1,.262,8.283Z\",\n transform: \"translate(158.52 55.239)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9176\",\n \"data-name\": \"Path 9176\",\n d: \"M.264,8.287a6.466,6.466,0,1,1,8.021,4.385A6.466,6.466,0,0,1,.264,8.287Z\",\n transform: \"translate(138.425 178.223)\",\n fill: \"#9f9fff\",\n opacity: 0.44\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9177\",\n \"data-name\": \"Path 9177\",\n d: \"M.389,12.264a9.571,9.571,0,1,1,11.875,6.495A9.565,9.565,0,0,1,.389,12.264Z\",\n transform: \"translate(31.676 188.757)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9178\",\n \"data-name\": \"Path 9178\",\n d: \"M.387,12.264a9.572,9.572,0,1,1,11.879,6.5A9.574,9.574,0,0,1,.387,12.264Z\",\n transform: \"translate(245.334 223.114)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9179\",\n \"data-name\": \"Path 9179\",\n d: \"M.193,6.081A4.745,4.745,0,1,1,6.081,9.3,4.746,4.746,0,0,1,.193,6.081Z\",\n transform: \"translate(60.102 73.579)\",\n fill: \"#6c64df\",\n opacity: 0.37\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9180\",\n \"data-name\": \"Path 9180\",\n d: \"M.271,8.587A6.7,6.7,0,1,1,8.59,13.139,6.7,6.7,0,0,1,.271,8.587Z\",\n transform: \"translate(108.685 283.797)\",\n fill: \"#7875f1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9181\",\n \"data-name\": \"Path 9181\",\n d: \"M.271,8.587A6.7,6.7,0,1,1,8.59,13.139,6.7,6.7,0,0,1,.271,8.587Z\",\n transform: \"translate(216.958 95.433)\",\n fill: \"#9f9fff\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_520\",\n \"data-name\": \"Ellipse 520\",\n cx: 41.5,\n cy: 9.5,\n rx: 41.5,\n ry: 9.5,\n transform: \"translate(154 707)\",\n fill: \"#6e6bcb\",\n opacity: 0.82\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2215\",\n \"data-name\": \"Group 2215\",\n transform: \"translate(99.467 526.658)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9194\",\n \"data-name\": \"Path 9194\",\n d: \"M3.386,4.161S.474,32.172,0,37.039c.821,2.448,8.027,4.294,11.208,1.755L17.372,0Z\",\n transform: \"translate(95.968 147.833) rotate(-13)\",\n fill: \"#e96524\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9203\",\n \"data-name\": \"Path 9203\",\n d: \"M3.386,35.852S.474,7.84,0,2.973C.821.525,8.027-1.321,11.208,1.218l6.164,38.795Z\",\n transform: \"translate(87.458 185.365) rotate(-167)\",\n fill: \"#e96524\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9195\",\n \"data-name\": \"Path 9195\",\n d: \"M1,0C.705,3.4.224,12.5,0,14.811c.821,2.448,8.027,4.294,11.208,1.756l2.7-14.944C11.519,4.292,3.067,3.426,1,0\",\n transform: \"translate(100.968 169.492) rotate(-13)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9204\",\n \"data-name\": \"Path 9204\",\n d: \"M1,17.784C.705,14.38.224,5.282,0,2.973.821.525,8.027-1.321,11.208,1.217l2.7,14.944C11.519,13.492,3.067,14.358,1,17.784\",\n transform: \"translate(87.458 185.365) rotate(-167)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9196\",\n \"data-name\": \"Path 9196\",\n d: \"M0,10.161c.635,3.289,13.088,8.375,21.537,6.226,4.08-6.787.974-12.7-3.627-14.693C12.2-.777,8.079.989,4.484,4.94,3.365,5.46,3.347,3.865,3.607,0,1.529,1.217.136,6.3,0,10.161\",\n transform: \"translate(99.876 178.851) rotate(-13)\",\n fill: \"#808251\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9205\",\n \"data-name\": \"Path 9205\",\n d: \"M0,6.739C.635,3.451,13.088-1.635,21.537.513c4.08,6.787.974,12.7-3.627,14.693-5.714,2.471-9.832.705-13.427-3.247-1.12-.519-1.137,1.075-.877,4.94C1.529,15.683.136,10.6,0,6.739\",\n transform: \"translate(88.749 193.864) rotate(-167)\",\n fill: \"#808251\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9197\",\n \"data-name\": \"Path 9197\",\n d: \"M2.1,9.959A12.263,12.263,0,0,1,0,9.194C.193,4.507,2.046.673,7.845.018a8.234,8.234,0,0,1,6.534,2.853,9.424,9.424,0,0,1,1.352,8.071c-5.057.093-9.9-.069-13.626-.982\",\n transform: \"translate(107.449 179.039) rotate(-13)\",\n fill: \"#ebe8e3\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9206\",\n \"data-name\": \"Path 9206\",\n d: \"M2.1,1.005A12.263,12.263,0,0,0,0,1.77c.193,4.687,2.046,8.521,7.845,9.176a8.234,8.234,0,0,0,6.534-2.853A9.424,9.424,0,0,0,15.731.023C10.674-.07,5.828.092,2.1,1.005\",\n transform: \"translate(82.512 188.268) rotate(-167)\",\n fill: \"#ebe8e3\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9198\",\n \"data-name\": \"Path 9198\",\n d: \"M1.845,8.725A10.722,10.722,0,0,1,0,8.056C.17,3.95,1.793.591,6.873.016a7.207,7.207,0,0,1,5.722,2.5,8.253,8.253,0,0,1,1.187,7.07A49.591,49.591,0,0,1,1.845,8.725\",\n transform: \"translate(109.097 178.758) rotate(-13)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9207\",\n \"data-name\": \"Path 9207\",\n d: \"M1.845.882A10.722,10.722,0,0,0,0,1.551c.17,4.106,1.793,7.464,6.873,8.04A7.207,7.207,0,0,0,12.6,7.09,8.253,8.253,0,0,0,13.782.02,49.591,49.591,0,0,0,1.845.882\",\n transform: \"translate(81.169 186.664) rotate(-167)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9199\",\n \"data-name\": \"Path 9199\",\n d: \"M0,3.96c.635,3.289,13.088,8.374,21.537,6.226a13.7,13.7,0,0,0,1.536-3.557c-5.061.092-9.907-.069-13.633-.984A21.068,21.068,0,0,1,.507,0,23.055,23.055,0,0,0,0,3.96\",\n transform: \"translate(101.271 184.893) rotate(-13)\",\n fill: \"#715f51\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9210\",\n \"data-name\": \"Path 9210\",\n d: \"M5.974,0,25.041,8.84l2.6,3.127.182,2.609L13.275,33.853l-5.531-3.54L17.7,14.6,0,9.735Z\",\n transform: \"translate(114.8 94.191) rotate(7)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9208\",\n \"data-name\": \"Path 9208\",\n d: \"M0,6.739C.635,3.451,13.088-1.635,21.537.513A13.7,13.7,0,0,1,23.074,4.07c-5.061-.092-9.907.069-13.633.984A21.068,21.068,0,0,0,.507,10.7,23.055,23.055,0,0,1,0,6.739\",\n transform: \"translate(88.749 193.864) rotate(-167)\",\n fill: \"#715f51\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9186\",\n \"data-name\": \"Path 9186\",\n d: \"M14.225,35.366c5.107,27.4,33.292,41.563,57.423,26,0,0,9.926-6.086,15.481-16.391,3.47-6.44-4.32-6.951-4.32-6.951s-10.26,11.226-22.643,8.794c-4.878-.958-8.822-13.234-11.215-19.337C41.372,8.16,32.376,6.894,32.376,6.894s4.7,6.259,2.4,7.928c0,0-12.5-16.617-34.776-14.663,0,0,8.272,7.128,9.531,10.689,0,0-5.523-1.778-8.571-.418C12.729,16.36,14.518,27.237,14.225,35.366\",\n transform: \"matrix(0.978, 0.208, -0.208, 0.978, 14.099, 70.566)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9187\",\n \"data-name\": \"Path 9187\",\n d: \"M19.374,16.682C20.809,23.24,29.408,28.322,32.9,30.7c-.356-3.691,2.091-8.626,1.254-10.783,4.795,1.1,14.127,9.185,13.332,7.066C40.286,7.777,31.521,6.6,31.521,6.6s4.524,6.2,2.261,7.891C33.782,14.492,21.756-1.973,0,.2c0,0,8,7.034,9.192,10.576,0,0-5.371-1.72-8.359-.332C9.756,14.973,13.55,22.926,13.564,32.807c1.633-5.139,5.5-11.94,5.81-16.125\",\n transform: \"translate(14.22 70.649) rotate(11)\",\n fill: \"#c4502b\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9191\",\n \"data-name\": \"Path 9191\",\n d: \"M1006.23,1109.5c.58,2.163-1.711,6.727-2.228,12.338a75.851,75.851,0,0,1-1.881,11.759s-11.979-.459-19.8-5.032c0,0,5.449-24.892,5.17-26.175s18.742,0,18.742,0\",\n transform: \"translate(-908.74 -971.359)\",\n fill: \"#4d412b\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9209\",\n \"data-name\": \"Path 9209\",\n d: \"M.287,13.163C-.861,16.13,1.435,23.937,7.2,24.189c5.3.232,10.944-17.56,11.777-19.226.878-1.756-8.544-5.115-12.2-4.958\",\n transform: \"matrix(-0.017, 1, -1, -0.017, 129.12, 91.3)\",\n fill: \"#ffc22b\",\n stroke: \"rgba(0,0,0,0)\",\n strokeMiterlimit: 10,\n strokeWidth: 1\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9192\",\n \"data-name\": \"Path 9192\",\n d: \"M1033.533,1102.264c-1.025,3.825,1.139,23.55,3.032,30.56,0,0,13.7-.459,21.527-5.032,0,0-6.742-25.861-6.463-27.144s-12.6,1.616-12.6,1.616\",\n transform: \"translate(-938.952 -970.587)\",\n fill: \"#4d412b\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9193\",\n \"data-name\": \"Path 9193\",\n d: \"M1029.946,1124.9c-.446-.191-3.78-1.163-4.385-1.843,1.522,2.022,3.177,1.981,4.012,3.229a142.667,142.667,0,0,0,2.226,21.446,18.475,18.475,0,0,0,15.947-3.11c-4.855,2.349-10.9,3.028-14.922,1.853-1.219-3.111-2.878-21.575-2.878-21.575\",\n transform: \"translate(-934.186 -986.125)\",\n fill: \"#3f3321\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9185\",\n \"data-name\": \"Path 9185\",\n d: \"M-2995.463,14.477s-3.354,43.3-2.624,47.179,46.4,2.262,43.111-1.616-.147-41.362-9.5-43.948S-2995.463,14.477-2995.463,14.477Z\",\n transform: \"translate(3074.096 71.636)\",\n fill: \"#ffc22b\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7494\",\n \"data-name\": \"Path 7494\",\n d: \"M0,24.64S6.156,6.881,8.737,5.4c0,0-1.88-3.071-.49-3.746s2.833,1.97,2.833,1.97S10.953-.029,12.329,0,13.58,4.095,13.58,4.095s1.977-2.7,3-.35c.348.8-2.084,2.943-2.084,2.943S22.86,17.369,20.42,35.662,0,24.64,0,24.64Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 124.453, 0)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7495\",\n \"data-name\": \"Path 7495\",\n d: \"M10.553,8.638a19.284,19.284,0,0,0-1.39-2.116s2.432-2.094,2.084-2.87c-1.026-2.289-3,.341-3,.341S8.369.029,6.993,0,5.745,3.536,5.745,3.536,4.3.955,2.912,1.614s.49,3.653.49,3.653A22.512,22.512,0,0,0,1.43,7.617L0,10.8,4.291,7.935l2.225,3.02L8.265,8.094l3.815,4.133Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 129.687, 1.883)\",\n fill: \"#ec6117\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7496\",\n \"data-name\": \"Path 7496\",\n d: \"M0,12.078S3.988-1.116,6.454.076s4.652,11.8,3.763,18.552S0,12.078,0,12.078Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 126.676, 16.585)\",\n fill: \"#a12814\",\n opacity: 0.21\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7497\",\n \"data-name\": \"Path 7497\",\n d: \"M27.575,11.825S11.077,2.571,7.91,3.178c0,0-.3-3.562-1.93-3.144S4.763,3.405,4.763,3.405,2.576.571,1.4,1.51,2.89,5.424,2.89,5.424-.518,4.713.068,7.162c.2.831,3.657.824,3.657.824S3.19,21.594,16.8,33.726,27.575,11.825,27.575,11.825Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 57.157, 6.248)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7498\",\n \"data-name\": \"Path 7498\",\n d: \"M4.082,11.426a20.344,20.344,0,0,1-.167-2.772S.28,8.661.071,7.761C-.545,5.107,3.038,5.877,3.038,5.877S.24,2.654,1.474,1.636,5.006,3.689,5.006,3.689,4.573.49,6.286.037,8.315,3.444,8.315,3.444A4.5,4.5,0,0,1,9.9,3.519l3.575,1.408-4.05.963L9.111,9.744,5.373,9.9v6.423Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 57.073, 5.881)\",\n fill: \"#ec6117\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7499\",\n \"data-name\": \"Path 7499\",\n d: \"M12.274,5.412S1.415-2.156.175.607,4.525,14.353,10,19.772,12.274,5.412,12.274,5.412Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 60.761, 20.185)\",\n fill: \"#a12814\",\n opacity: 0.21\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7555\",\n \"data-name\": \"Path 7555\",\n d: \"M24.795,9.21S17.715,6.865,20.7,4.45c1.529-1.236-3.839.744-4.666,3.118,0,0-2.779-3.15-.738-5.344-2.767.749-7.8,4.214-8.566,8.263,0,0-.047-9.228,3.48-10.488C1.309,3.179-.383,13.2.065,14.527c1.575,4.661,24.193,1.2,24.729-5.317\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 92.404, 7.989)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7556\",\n \"data-name\": \"Path 7556\",\n d: \"M10.3,58.267c7.941,18.127,14.392,15.365,32.574,9.962S77.529,59.411,73.97,39.944C70.233,19.509,58.134-7.271,27.282,1.828-8.51,12.385-2.725,41.3,8.983,59.25\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 76.832, 7.874)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7558\",\n \"data-name\": \"Path 7558\",\n d: \"M8.64,48.177S-7.781,28.726,4.654,13.92c5.613-6.683,15.009-3.727,16.264-3.031,0,0,5.59-17.39,22.823-8.216a19.6,19.6,0,0,1,8.642,8.192c3.465,5.77,7.9,15.108,4.347,20.536C51.315,39.664,8.64,48.177,8.64,48.177Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 80.681, 18.346)\",\n fill: \"url(#linear-gradient)\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_513\",\n \"data-name\": \"Ellipse 513\",\n cx: 0.53,\n cy: 0.568,\n rx: 0.53,\n ry: 0.568,\n transform: \"translate(85.242 57.758) rotate(14.684)\",\n fill: \"#fefefe\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7567\",\n \"data-name\": \"Path 7567\",\n d: \"M1.607,29.507s11.521-.428,13.952.647c0,0,13.388-11.225,24.695-11.166,0,0,17.323-13.553,26.345-8.984,0,0,6.243-8.863,10.234-10l.553,6.637,4.421-2.113-.419,6.207,4.692-1.412s-4.426,27.1-37.215,38.174S3.47,43.7,1.74,42.351s4.421-2.113,4.421-2.113L0,35.77s4.071-1.978,5.744-1.819S1.607,29.507,1.607,29.507Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 66.085, 31.253)\",\n fill: \"#ffe14e\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7568\",\n \"data-name\": \"Path 7568\",\n d: \"M.152,4.941c.621,1.387,4.433,2.04,5.595,1.52,1.122-.5,3.213-3.8,2.592-5.184S5.382-.414,3.122.6-.468,3.553.152,4.941\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 95.613, 58.862)\",\n fill: \"#d98c19\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_517\",\n \"data-name\": \"Ellipse 517\",\n cx: 6.118,\n cy: 1.733,\n rx: 6.118,\n ry: 1.733,\n transform: \"matrix(0.988, -0.154, 0.154, 0.988, 70.417, 68.106)\",\n fill: \"#fa9785\",\n opacity: 0.36\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_518\",\n \"data-name\": \"Ellipse 518\",\n cx: 5.625,\n cy: 2.061,\n rx: 5.625,\n ry: 2.061,\n transform: \"translate(112.844 64.406) rotate(9)\",\n fill: \"#fdc662\",\n opacity: 0.9\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7561\",\n \"data-name\": \"Path 7561\",\n d: \"M3.709,1.972a5.042,5.042,0,0,1,5.411-.18C7.286.047,4.861-.732,2.255.881-3.832,4.648,4.332,15.1,4.332,15.1s1.209.856,1.6.809C4.029,13.092-1.141,4.974,3.709,1.972Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 79.596, 44.309)\",\n fill: \"#58271b\",\n opacity: 0.59\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9182\",\n \"data-name\": \"Path 9182\",\n d: \"M3.709,1.972a5.042,5.042,0,0,1,5.411-.18C7.286.047,4.861-.732,2.255.881-3.832,4.648,4.332,15.1,4.332,15.1s.238-.013.632-.059C3.058,12.224-1.141,4.974,3.709,1.972Z\",\n transform: \"matrix(0.809, 0.588, -0.588, 0.809, 108.427, 42.778)\",\n fill: \"#58271b\",\n opacity: 0.59\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7562\",\n \"data-name\": \"Path 7562\",\n d: \"M4.583,15.1S-3.887,4.647,2.2.885s11.15,5.438,10.035,9.594S4.583,15.1,4.583,15.1Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 80.362, 45.389)\",\n fill: \"#fefefe\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9183\",\n \"data-name\": \"Path 9183\",\n d: \"M4.583,15.1S-3.887,4.647,2.2.885s11.15,5.438,10.035,9.594S4.583,15.1,4.583,15.1Z\",\n transform: \"matrix(0.809, 0.588, -0.588, 0.809, 108.888, 44.02)\",\n fill: \"#fefefe\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7564\",\n \"data-name\": \"Path 7564\",\n d: \"M6.051,3.456c1.318,2.372,1.269,5-.11,5.86-1.626,1.019-3.565-.358-4.883-2.731S-.41,1.091.969.227,4.733,1.084,6.051,3.456Z\",\n transform: \"matrix(0.934, 0.358, -0.358, 0.934, 84.581, 48.556)\",\n fill: \"#806351\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9184\",\n \"data-name\": \"Path 9184\",\n d: \"M6.051,3.456c1.318,2.372,1.269,5-.11,5.86-1.626,1.019-3.565-.358-4.883-2.731S-.41,1.091.969.227,4.733,1.084,6.051,3.456Z\",\n transform: \"matrix(0.809, 0.588, -0.588, 0.809, 112.12, 48.349)\",\n fill: \"#806351\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9188\",\n \"data-name\": \"Path 9188\",\n d: \"M-2982.5-21.333s4.251,8.725,14.024,4.133\",\n transform: \"translate(3070.932 89.053)\",\n fill: \"none\",\n stroke: \"#1a1a1a\",\n strokeLinecap: \"round\",\n strokeWidth: 2,\n opacity: 0.53\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9202\",\n \"data-name\": \"Path 9202\",\n d: \"M-2935.223,72.667l21.955.833-13.283,4.014Z\",\n transform: \"translate(3039.875 44.953)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9189\",\n \"data-name\": \"Path 9189\",\n d: \"M-3054,25.282h56.8l12.126,36.838h-58.719Z\",\n transform: \"translate(3094.678 61.963)\",\n fill: \"#616ca5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9190\",\n \"data-name\": \"Path 9190\",\n d: \"M-2971.689,1h3.727l12.005,36.2-2.89.637Z\",\n transform: \"translate(3068.361 86.245)\",\n fill: \"#c5c2c2\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7560\",\n \"data-name\": \"Path 7560\",\n d: \"M7.943,1.124S3.238-1.725,0,1.65\",\n transform: \"translate(108.886 34.376) rotate(16)\",\n fill: \"none\",\n stroke: \"#e9c785\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 3\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7559\",\n \"data-name\": \"Path 7559\",\n d: \"M5.577,0S.169,1.006,0,5.681\",\n transform: \"matrix(0.891, 0.454, -0.454, 0.891, 79.776, 36.278)\",\n fill: \"none\",\n stroke: \"#e9c785\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 3\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9201\",\n \"data-name\": \"Path 9201\",\n d: \"M-2924.958,69.6l16.5-2.262V69.6l-17.042,3.315Z\",\n transform: \"translate(3035.189 51.095)\",\n fill: \"#c5c2c2\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9211\",\n \"data-name\": \"Path 9211\",\n d: \"M3.169,0S-1.6,2.536.565,4.254s7.787,7.949,11.243,8.13,1.885-2.893,1.885-2.893L6.18,4.254Z\",\n transform: \"translate(117.232 124.065) rotate(3)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Union_1\",\n \"data-name\": \"Union 1\",\n d: \"M3.442,13.674.075,3.312a1.519,1.519,0,0,1,2.89-.94l1.9,5.859L8.484.817A1.454,1.454,0,1,1,11.1,2.092L8.874,6.652,14.4,9.592a1.4,1.4,0,1,1-1.313,2.47L7.647,9.168,6.218,12.1q-.027.056-.058.108l.172.529a1.519,1.519,0,1,1-2.89.939Z\",\n transform: \"matrix(0.995, 0.105, -0.105, 0.995, 66.427, 95.176)\",\n fill: \"#d9d9d9\",\n opacity: 0.97\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_528\",\n \"data-name\": \"Rectangle 528\",\n width: 2.576,\n height: 4.293,\n rx: 1.288,\n transform: \"matrix(0.788, -0.616, 0.616, 0.788, 63.214, 121.452)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9710\",\n \"data-name\": \"Path 9710\",\n d: \"M1.257,0a1.283,1.283,0,0,1,1.31,1.164l.142,6.064a1.154,1.154,0,0,1-1.257,1.11A1.283,1.283,0,0,1,.142,7.175L0,1.111A1.154,1.154,0,0,1,1.257,0Z\",\n transform: \"matrix(0.985, -0.174, 0.174, 0.985, 66.385, 116.57)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9709\",\n \"data-name\": \"Path 9709\",\n d: \"M1.261,0A1.283,1.283,0,0,1,2.568,1.182l.151,7.729a1.173,1.173,0,0,1-1.261,1.137A1.283,1.283,0,0,1,.151,8.866L0,1.137A1.173,1.173,0,0,1,1.261,0Z\",\n transform: \"matrix(0.985, -0.174, 0.174, 0.985, 69.516, 114.883)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_531\",\n \"data-name\": \"Rectangle 531\",\n width: 2.576,\n height: 8.586,\n rx: 1.288,\n transform: \"translate(73.608 115.467) rotate(-5)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_535\",\n \"data-name\": \"Rectangle 535\",\n width: 1.906,\n height: 6.355,\n rx: 0.953,\n transform: \"translate(131.821 134.406) rotate(116)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_532\",\n \"data-name\": \"Rectangle 532\",\n width: 1.717,\n height: 6.01,\n rx: 0.859,\n transform: \"matrix(0.995, 0.105, -0.105, 0.995, 77.62, 117.564)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9708\",\n \"data-name\": \"Path 9708\",\n d: \"M2136.833-459.234s.2,1.3,3.005,1.623a22.368,22.368,0,0,0,8.228-.325c3.1-.706,2.755-2.824,2.755-2.824l-4.4-2.24-6.582.828s.2,2.167-.823,2.581A5.861,5.861,0,0,1,2136.833-459.234Z\",\n transform: \"translate(-2071.898 582.866)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9711\",\n \"data-name\": \"Path 9711\",\n d: \"M4.476,0A4.315,4.315,0,0,1,8.953,4.132c0,2.282-3.923,5.608-6.395,5.608S0,6.414,0,4.132A4.315,4.315,0,0,1,4.476,0Z\",\n transform: \"translate(133.175 105.706) rotate(3)\",\n fill: \"#ff6f00\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle_533\",\n \"data-name\": \"Rectangle 533\",\n width: 2.542,\n height: 6.99,\n rx: 1.271,\n transform: \"translate(129.651 129.17) rotate(115)\",\n fill: \"#ff6f00\"\n}));\n\nvar _ref6 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2216\",\n \"data-name\": \"Group 2216\",\n transform: \"translate(58.145 673.566) rotate(-21)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9046\",\n \"data-name\": \"Path 9046\",\n d: \"M34.482,4.313c0,2.385-7.722,4.325-17.241,4.325S0,6.7,0,4.313,7.722,0,17.241,0,34.482,1.928,34.482,4.313Z\",\n transform: \"translate(0 0)\",\n fill: \"#b6bffa\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9047\",\n \"data-name\": \"Path 9047\",\n d: \"M34.482,0V53.149c0,2.238-7.722,4.048-17.241,4.048S0,55.387,0,53.149V0C0,2.238,7.722,4.059,17.241,4.059S34.482,2.238,34.482,0Z\",\n transform: \"translate(0 3.512)\",\n fill: \"url(#linear-gradient-2)\"\n}));\n\nvar _ref7 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2217\",\n \"data-name\": \"Group 2217\",\n transform: \"matrix(0.946, -0.326, 0.326, 0.946, 41.308, 627.669)\",\n opacity: 0.17\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_1060\",\n \"data-name\": \"Group 1060\",\n transform: \"translate(0 0)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_2811\",\n \"data-name\": \"Path 2811\",\n d: \"M9.6,0C4.371.075.073,3.985,0,8.735s4.11,8.541,9.341,8.467,9.529-3.983,9.6-8.734S14.832-.073,9.6,0ZM9.071,12.065A3.533,3.533,0,0,1,5.356,8.579,3.791,3.791,0,0,1,9.178,4.987a3.533,3.533,0,0,1,3.715,3.486A3.791,3.791,0,0,1,9.071,12.065Z\",\n fill: \"#fcfcff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_2812\",\n \"data-name\": \"Path 2812\",\n d: \"M9.6,0C4.371.075.073,3.985,0,8.735s4.11,8.541,9.341,8.467,9.53-3.983,9.6-8.734S14.833-.073,9.6,0ZM9.071,12.065A3.533,3.533,0,0,1,5.356,8.579,3.791,3.791,0,0,1,9.178,4.987a3.533,3.533,0,0,1,3.715,3.486A3.79,3.79,0,0,1,9.071,12.065Z\",\n transform: \"translate(18.661 18.286)\",\n fill: \"#fcfcff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_2813\",\n \"data-name\": \"Path 2813\",\n d: \"M.45,25.472C.639,25.19,24.726.742,26.214.131s3.646,1.063,3.843,1.977S4.586,28.479,3.52,29.084-1.279,28.052.45,25.472Z\",\n transform: \"translate(3.637 3.056)\",\n fill: \"#fcfcff\"\n})));\n\nvar _ref8 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_1957\",\n \"data-name\": \"Group 1957\",\n transform: \"translate(0 0)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_1955\",\n \"data-name\": \"Group 1955\",\n opacity: 0.4\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9223\",\n \"data-name\": \"Path 9223\",\n d: \"M452.751,302.257a14.19,14.19,0,0,1-1.647,6.851l-.008-.005-12.558-6.71-.1-.065-.182-14.14.559-.047A14.3,14.3,0,0,1,452.751,302.257Z\",\n transform: \"translate(-424.137 -288.133)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9224\",\n \"data-name\": \"Path 9224\",\n d: \"M414.908,349.531c-.034.07-.07.138-.109.208a14.31,14.31,0,0,1-25.439-.66l12.831-6.214.055-.114.1.065,12.558,6.71Z\",\n transform: \"translate(-387.94 -328.556)\",\n fill: \"#778cff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9225\",\n \"data-name\": \"Path 9225\",\n d: \"M398.577,288.121l-.559.047.182,14.14-.055.114-12.831,6.214a14.308,14.308,0,0,1,12.7-20.521C398.206,288.113,398.39,288.113,398.577,288.121Z\",\n transform: \"translate(-383.895 -288.114)\",\n fill: \"#778cff\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_1956\",\n \"data-name\": \"Group 1956\",\n opacity: 0.36\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9226\",\n \"data-name\": \"Path 9226\",\n d: \"M410.754,309.3a14.309,14.309,0,1,1-12.735-21.181\",\n transform: \"translate(-383.895 -288.118)\",\n fill: \"none\",\n stroke: \"#706969\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9227\",\n \"data-name\": \"Path 9227\",\n stroke: \"#706969\",\n d: \"M438.26,288.116c.187,0,.371,0,.559.005A14.306,14.306,0,0,1,451.1,309.088c-.034.07-.07.138-.109.208\",\n fill: \"none\",\n transform: \"translate(-424.137 -288.114)\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n strokeDasharray: 4\n}), /*#__PURE__*/React.createElement(\"line\", {\n id: \"Line_9\",\n \"data-name\": \"Line 9\",\n x2: 12.558,\n y2: 6.71,\n transform: \"translate(14.401 14.259)\",\n fill: \"none\",\n stroke: \"#706969\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9228\",\n \"data-name\": \"Path 9228\",\n d: \"M389.3,349.412l.016-.008,12.831-6.214\",\n transform: \"translate(-387.896 -328.882)\",\n fill: \"none\",\n stroke: \"#706969\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n id: \"Line_10\",\n \"data-name\": \"Line 10\",\n x1: 0.182,\n y1: 14.14,\n transform: \"translate(14.123 0.054)\",\n fill: \"none\",\n stroke: \"#706969\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2\n})));\n\nvar _ref9 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10546\",\n \"data-name\": \"Path 10546\",\n d: \"M341.211,248.247a1.564,1.564,0,0,0-1.979-.674l-.233.075a1.13,1.13,0,0,0-.554,1.886c-.066,2.116-4.485,3.29-5.893,3.791-1.87.665-3.88,1.328-5.229,2.8-1.755,1.917-2.223,4.608-.157,6.435.568.5,1.493.017,1.179-.713a3.059,3.059,0,0,1,1.073-4.04c1.6,3.03,4.684,9.03,3.749,9.207a1.351,1.351,0,0,0,.11,2.687c2.911.271,3.828-2.452,3.133-4.673a22.178,22.178,0,0,0-5.212-8.269c.805-.382,1.7-.729,2.629-1.072.324,3.939,5.059,13.773,10.025,9.958,1.536-1.181-.387-3.161-1.961-2.16-1.268.808-5.221-6.469-6.672-8.314C339.027,253.752,342.644,252.146,341.211,248.247Z\",\n transform: \"translate(-246.89 321.105)\",\n fill: \"#fff\",\n opacity: 0.23\n});\n\nvar _ref10 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2224\",\n \"data-name\": \"Group 2224\",\n transform: \"matrix(0.978, 0.208, -0.208, 0.978, 255.801, 536.158)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_1964\",\n \"data-name\": \"Group 1964\",\n transform: \"translate(0 0)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9238\",\n \"data-name\": \"Path 9238\",\n d: \"M8.909,48.324C.083,43.167-3.776,23.675,4.813,11.217S36.676-4.189,48.062,6.8s7.691,33.959-3,40.557S19,54.218,8.909,48.324Z\",\n transform: \"translate(0.979 0)\",\n fill: \"#6397ff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9239\",\n \"data-name\": \"Path 9239\",\n d: \"M2.679,0,0,12.86,12.456,3.405Z\",\n transform: \"translate(15.965 49.128)\",\n fill: \"#6397ff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9240\",\n \"data-name\": \"Path 9240\",\n d: \"M13.262,11.454A18.542,18.542,0,0,1,0,0S.067,5.023,3.483,8.071,13.262,11.454,13.262,11.454Z\",\n transform: \"translate(0 39.282)\",\n fill: \"#6397ff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9241\",\n \"data-name\": \"Path 9241\",\n d: \"M7.435,11.319A19.028,19.028,0,0,0,0,0S5.24,2.863,6.865,6.48,7.435,11.319,7.435,11.319Z\",\n transform: \"translate(49.143 4.921)\",\n fill: \"#6397ff\"\n})));\n\nvar _ref11 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2225\",\n \"data-name\": \"Group 2225\",\n transform: \"matrix(0.883, 0.469, -0.469, 0.883, 277.955, 552.918)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9221\",\n \"data-name\": \"Path 9221\",\n d: \"M12.576,1.758C10.836-.48,7.26-.169,4.794.457,1.8,1.217-.129,3.22.007,6.362a.823.823,0,0,0,1.645,0C1.828,3.956,5.07,2.808,7.159,3.093c1.054.144,2.993,1.12,3.14,2.426.069.612-1.167,1.75-1.609,2.178C6.881,9.441,4.559,10.42,3.229,12.664c-1.723,2.905-.712,7.72,3.278,7.67,1.315-.017,2.056-2.031.717-2.648-5.016-2.306,3.655-7.154,5.123-9.224C13.721,6.528,14.115,3.738,12.576,1.758Z\",\n transform: \"translate(0 0)\",\n fill: \"#ecf2ff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9222\",\n \"data-name\": \"Path 9222\",\n d: \"M2.738.242A1.789,1.789,0,0,0,.076,2.21,1.449,1.449,0,0,0,.5,2.874a1.564,1.564,0,0,0,1.128.7A1.816,1.816,0,0,0,2.738.242Z\",\n transform: \"translate(7.444 22.181)\",\n fill: \"#ecf2ff\"\n}));\n\nvar _ref12 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10543\",\n \"data-name\": \"Path 10543\",\n d: \"M49.947,74.369c0,4.851-11.173,8.767-24.974,8.767S0,79.219,0,74.369l.683-2.024L24.974,0l24.29,72.344Z\",\n transform: \"matrix(0.883, 0.469, -0.469, 0.883, 305.262, 640.6)\",\n fill: \"url(#linear-gradient-3)\"\n});\n\nvar _ref13 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2218\",\n \"data-name\": \"Group 2218\",\n transform: \"translate(259.788 623.36)\",\n opacity: 0.26\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2190\",\n \"data-name\": \"Group 2190\",\n transform: \"translate(0 0)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9712\",\n \"data-name\": \"Path 9712\",\n d: \"M33.381,134.226c-1.175-.758-1.654-2.24-1.654-4.081h0c.01-3.971,2.2-9.977,6.054-16.039h0c4.911-7.653,10.761-12.908,14.653-12.973h0a3.137,3.137,0,0,1,1.71.466h0c1.174.76,1.65,2.238,1.651,4.078h0c-.007,3.969-2.2,9.975-6.05,16.042h0c-4.914,7.653-10.766,12.908-14.653,12.971h-.02a3.131,3.131,0,0,1-1.69-.465Zm5.125-19.656c-3.8,5.948-5.93,11.907-5.92,15.574h0c0,1.723.458,2.861,1.257,3.356h0a2.316,2.316,0,0,0,1.249.333h0c3.162.064,9.156-5.017,13.928-12.572h0c3.795-5.964,5.925-11.918,5.917-15.584h0c0-1.716-.458-2.854-1.255-3.353h0a2.231,2.231,0,0,0-1.247-.331h-.06c-3.175,0-9.131,5.061-13.868,12.577Z\",\n transform: \"translate(-24.425 -100.619)\",\n fill: \"#808bf2\",\n stroke: \"#4852b5\",\n strokeWidth: 1\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9713\",\n \"data-name\": \"Path 9713\",\n d: \"M51.32,135.4c-3.9-.078-9.54-5.765-14.06-13.865h0c-3.263-5.922-5.059-11.7-5.064-15.662h0c0-2.2.553-3.922,1.925-4.693h0a3.042,3.042,0,0,1,1.5-.367h0c3.9.075,9.535,5.76,14.059,13.868h0l-.377.207-.378.209c-4.372-8.008-10.2-13.5-13.3-13.426h0a2.177,2.177,0,0,0-1.079.262h0c-.934.492-1.483,1.855-1.48,3.94h0c0,3.71,1.739,9.428,4.955,15.247h0c4.373,8,10.2,13.5,13.307,13.423h0a2.245,2.245,0,0,0,1.077-.261h0c.929-.5,1.483-1.861,1.48-3.943h0c0-3.708-1.738-9.425-4.957-15.242h0l.378-.209.377-.207c3.263,5.917,5.056,11.7,5.059,15.658h0c0,2.2-.549,3.917-1.92,4.7h0a3.033,3.033,0,0,1-1.477.365H51.32Z\",\n transform: \"translate(-24.13 -100.818)\",\n fill: \"#808bf2\",\n stroke: \"#4852b5\",\n strokeWidth: 1\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9714\",\n \"data-name\": \"Path 9714\",\n d: \"M33.074,119.283c-3.457-1.236-5.773-2.908-5.827-5.113h0c.054-2.209,2.37-3.881,5.827-5.115h0a42.186,42.186,0,0,1,13.511-1.977h0v.861a41.425,41.425,0,0,0-13.227,1.925h0c-3.387,1.177-5.3,2.836-5.25,4.306h0c-.051,1.469,1.863,3.126,5.25,4.3h0A41.426,41.426,0,0,0,46.585,120.4h0a41.4,41.4,0,0,0,13.224-1.925h0c3.389-1.177,5.3-2.835,5.252-4.3h0c.052-1.47-1.863-3.13-5.252-4.306h0a41.4,41.4,0,0,0-13.224-1.925h0v-.861A42.179,42.179,0,0,1,60.1,109.055h0c3.456,1.234,5.775,2.906,5.826,5.115h0c-.051,2.205-2.37,3.878-5.826,5.113h0a42.228,42.228,0,0,1-13.511,1.976h0a42.235,42.235,0,0,1-13.511-1.976Z\",\n transform: \"translate(-27.247 -96.874)\",\n fill: \"#808bf2\",\n stroke: \"#4852b5\",\n strokeWidth: 1\n})), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9715\",\n \"data-name\": \"Path 9715\",\n d: \"M37.519,112.345A2.261,2.261,0,1,1,39.78,114.6,2.26,2.26,0,0,1,37.519,112.345Z\",\n transform: \"translate(-20.776 -94.981)\",\n fill: \"#808bf2\",\n stroke: \"#4852b5\",\n strokeWidth: 1\n}));\n\nvar _ref14 = /*#__PURE__*/React.createElement(\"text\", {\n id: \"A\",\n transform: \"translate(315.066 642.081) rotate(11)\",\n fill: \"#dbdeff\",\n fontSize: 71,\n fontFamily: \"SegoeUI-Bold, Segoe UI\",\n fontWeight: 700,\n opacity: 0.25\n}, /*#__PURE__*/React.createElement(\"tspan\", {\n x: 0,\n y: 0\n}, \"A\"));\n\nvar _ref15 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2221\",\n \"data-name\": \"Group 2221\",\n transform: \"translate(357.864 598.354) rotate(157)\",\n opacity: 0.66\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7842\",\n \"data-name\": \"Path 7842\",\n d: \"M5.365.365l-.308,2.1A.318.318,0,0,0,5.23,2.8l1.9.942a.318.318,0,0,1-.088.6l-2.093.356a.318.318,0,0,0-.261.267l-.308,2.1a.318.318,0,0,1-.6.1L2.8,5.282a.318.318,0,0,0-.335-.166L.373,5.473a.318.318,0,0,1-.281-.536L1.576,3.419a.318.318,0,0,0,.054-.37L.645,1.168A.318.318,0,0,1,1.067.736l1.9.942a.318.318,0,0,0,.368-.062L4.823.1A.318.318,0,0,1,5.365.365Z\",\n transform: \"translate(39.105 0)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1736\",\n \"data-name\": \"Path 1736\",\n d: \"M4.323,2.161A2.161,2.161,0,1,1,2.162,0,2.161,2.161,0,0,1,4.323,2.161Z\",\n transform: \"translate(0 10.572)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1731\",\n \"data-name\": \"Path 1731\",\n d: \"M2.421,1.211A1.21,1.21,0,1,1,1.211,0,1.21,1.21,0,0,1,2.421,1.211Z\",\n transform: \"translate(68.398 6.748)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1732\",\n \"data-name\": \"Path 1732\",\n d: \"M3.458,1.729A1.729,1.729,0,1,1,1.729,0,1.729,1.729,0,0,1,3.458,1.729Z\",\n transform: \"translate(23.306 44.321)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_198\",\n \"data-name\": \"Ellipse 198\",\n cx: 1.643,\n cy: 1.643,\n rx: 1.643,\n ry: 1.643,\n transform: \"translate(16.196 11.194)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1733\",\n \"data-name\": \"Path 1733\",\n d: \"M2.594,1.3A1.3,1.3,0,1,1,1.3,0,1.3,1.3,0,0,1,2.594,1.3Z\",\n transform: \"translate(44.531 28.954)\",\n fill: \"#fff\"\n}));\n\nvar _ref16 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2226\",\n \"data-name\": \"Group 2226\",\n transform: \"translate(141.864 554.354) rotate(157)\",\n opacity: 0.66\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7842-2\",\n \"data-name\": \"Path 7842\",\n d: \"M5.365.365l-.308,2.1A.318.318,0,0,0,5.23,2.8l1.9.942a.318.318,0,0,1-.088.6l-2.093.356a.318.318,0,0,0-.261.267l-.308,2.1a.318.318,0,0,1-.6.1L2.8,5.282a.318.318,0,0,0-.335-.166L.373,5.473a.318.318,0,0,1-.281-.536L1.576,3.419a.318.318,0,0,0,.054-.37L.645,1.168A.318.318,0,0,1,1.067.736l1.9.942a.318.318,0,0,0,.368-.062L4.823.1A.318.318,0,0,1,5.365.365Z\",\n transform: \"translate(39.105 0)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1736-2\",\n \"data-name\": \"Path 1736\",\n d: \"M4.323,2.161A2.161,2.161,0,1,1,2.162,0,2.161,2.161,0,0,1,4.323,2.161Z\",\n transform: \"translate(0 10.572)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1731-2\",\n \"data-name\": \"Path 1731\",\n d: \"M2.421,1.211A1.21,1.21,0,1,1,1.211,0,1.21,1.21,0,0,1,2.421,1.211Z\",\n transform: \"translate(68.398 6.748)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1732-2\",\n \"data-name\": \"Path 1732\",\n d: \"M3.458,1.729A1.729,1.729,0,1,1,1.729,0,1.729,1.729,0,0,1,3.458,1.729Z\",\n transform: \"translate(23.306 44.321)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"Ellipse_198-2\",\n \"data-name\": \"Ellipse 198\",\n cx: 1.643,\n cy: 1.643,\n rx: 1.643,\n ry: 1.643,\n transform: \"translate(16.196 11.194)\",\n fill: \"#fff\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_1733-2\",\n \"data-name\": \"Path 1733\",\n d: \"M2.594,1.3A1.3,1.3,0,1,1,1.3,0,1.3,1.3,0,0,1,2.594,1.3Z\",\n transform: \"translate(44.531 28.954)\",\n fill: \"#fff\"\n}));\n\nvar _ref17 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2219\",\n \"data-name\": \"Group 2219\",\n transform: \"matrix(0.995, -0.105, 0.105, 0.995, -15.566, 629.949)\",\n opacity: 0.58\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9131\",\n \"data-name\": \"Path 9131\",\n d: \"M6.522,43.651,21.1,37.38,0,0Z\",\n transform: \"translate(20.329 0)\",\n fill: \"url(#linear-gradient-4)\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9132\",\n \"data-name\": \"Path 9132\",\n d: \"M20.329,0,0,41.335l26.851,2.316Z\",\n transform: \"translate(0 0)\",\n fill: \"#6b99eb\"\n}));\n\nvar _ref18 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2220\",\n \"data-name\": \"Group 2220\",\n transform: \"translate(25.209 699.216) rotate(-19)\",\n opacity: 0.74\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_1962\",\n \"data-name\": \"Group 1962\",\n transform: \"translate(0 0)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9235\",\n \"data-name\": \"Path 9235\",\n d: \"M4.479.761a2.513,2.513,0,0,1,.761,1.863,2.506,2.506,0,0,1-.761,1.86,2.522,2.522,0,0,1-1.86.761A2.521,2.521,0,0,1,.761,4.484,2.535,2.535,0,0,1,0,2.624,2.542,2.542,0,0,1,.761.761,2.535,2.535,0,0,1,2.62,0,2.536,2.536,0,0,1,4.479.761Z\",\n transform: \"translate(6.21 0)\",\n fill: \"#7082ee\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9236\",\n \"data-name\": \"Path 9236\",\n d: \"M4.488.761a2.539,2.539,0,0,1,.761,1.86,2.547,2.547,0,0,1-.761,1.863,2.532,2.532,0,0,1-1.86.758A2.552,2.552,0,0,1,.761,4.484,2.547,2.547,0,0,1,0,2.621,2.54,2.54,0,0,1,.761.761,2.541,2.541,0,0,1,2.628,0,2.521,2.521,0,0,1,4.488.761Z\",\n transform: \"translate(6.678 17.174)\",\n fill: \"#7082ee\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_9237\",\n \"data-name\": \"Path 9237\",\n d: \"M2.115,4.691A2.222,2.222,0,0,1,.531,3.836,2.261,2.261,0,0,1,.016,2.1,2.285,2.285,0,0,1,.889.517,2.216,2.216,0,0,1,2.622.02C4.028.163,11.9.208,15.367.153a2.262,2.262,0,0,1,1.679.653,2.195,2.195,0,0,1,.722,1.641,2.335,2.335,0,0,1-.671,1.68,2.136,2.136,0,0,1-1.644.7C11.791,4.908,3.72,4.859,2.115,4.691Z\",\n transform: \"translate(0 8.486)\",\n fill: \"#7082ee\"\n})));\n\nvar _ref19 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2222\",\n \"data-name\": \"Group 2222\",\n transform: \"translate(-3.547 691.083) rotate(-7)\",\n opacity: 0.21\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7607\",\n \"data-name\": \"Path 7607\",\n d: \"M16.6,7.92s-8.938-3.644-9.1-5.133.1-4.682,8.088-1.266,11,3.879,9.955,7.246S17.987,13.5,17.987,13.5s4.208,3.986,1.235,8.834-8.786,6.431-14.341,3.7C-1.136,23.08-1.1,15.389,2.345,15.006s4.325,6,7.448,6.027,5.031-3.215,2.978-4.409S4.74,13.743,8.195,12,16.6,7.92,16.6,7.92Z\",\n transform: \"translate(0 0)\",\n fill: \"#5369c5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7608\",\n \"data-name\": \"Path 7608\",\n d: \"M1.513.157A5.459,5.459,0,0,1,3.341,4.794C2.9,8.286,1.094,9.674.173,9.948S2.3,8.593,2.636,4.827C2.887,2.044,1.587.913,1.344.67.659-.012.9-.154,1.513.157Z\",\n transform: \"translate(16.021 14.26)\",\n fill: \"#5369c5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7609\",\n \"data-name\": \"Path 7609\",\n d: \"M.19,0S5.025,1.354,5.937,2.963s-.615,3.6-2.571,4.45.211-.667,1.22-1.58,1.557-2.361.205-3.318C4.267,2.143-1.061.171.19,0Z\",\n transform: \"translate(19.091 3.737)\",\n fill: \"#5369c5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_7610\",\n \"data-name\": \"Path 7610\",\n d: \"M.583.077s1.042.317.773.664S-.988-.34.583.077Z\",\n transform: \"translate(17.25 2.833)\",\n fill: \"#5369c5\"\n}));\n\nvar _ref20 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10544\",\n \"data-name\": \"Path 10544\",\n d: \"M10.006.062S.631.937.655,3.87,6.884,8,7.741,7.552-.677,31,.04,32.128,6.5,35.87,7.345,34.8,18.7,3.31,17.952,2.563,13.124-.4,10.006.062Z\",\n transform: \"matrix(0.914, -0.407, 0.407, 0.914, 364.688, 690.982)\",\n fill: \"#6666f3\",\n opacity: 0.39\n});\n\nvar _ref21 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path_10545\",\n \"data-name\": \"Path 10545\",\n d: \"M12.213.831l-.7,4.783a.724.724,0,0,0,.4.753l4.332,2.145a.724.724,0,0,1-.2,1.362l-4.766.811a.723.723,0,0,0-.595.608l-.7,4.783a.724.724,0,0,1-1.357.231L6.376,12.026a.724.724,0,0,0-.762-.377L.848,12.46a.724.724,0,0,1-.639-1.219L3.588,7.783a.724.724,0,0,0,.123-.842L1.468,2.66a.723.723,0,0,1,.962-.984L6.762,3.82A.723.723,0,0,0,7.6,3.678L10.98.22A.724.724,0,0,1,12.213.831Z\",\n transform: \"translate(382.58 601.013) rotate(128)\",\n fill: \"#fff\",\n opacity: 0.61\n});\n\nvar SvgMascotMobile = function SvgMascotMobile(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 375,\n height: 302,\n viewBox: \"0 0 375 302\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Mask_Group_16\",\n \"data-name\": \"Mask Group 16\",\n transform: \"translate(0 -510)\",\n clipPath: \"url(#clip-path)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_3754\",\n \"data-name\": \"Group 3754\"\n }, _ref3, _ref4, _ref5, _ref6, _ref7, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2223\",\n \"data-name\": \"Group 2223\",\n transform: \"translate(29.705 574.407)\",\n opacity: 0.58,\n style: {\n mixBlendMode: \"luminosity\",\n isolation: \"isolate\"\n }\n }, _ref8), _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21)));\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgMascotMobile, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/mascot-mobile.85990575.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport LoginForm from '../LoginForm/LoginForm';\nimport {\n LoginSectionContainer,\n LoginHeader,\n SignupContainer\n} from './LoginSection.styles';\n// Import assets\nimport { ReactComponent as Icon } from './homeIcon.svg';\nimport { ReactComponent as KoobitsLogo } from './Koobits Logo.svg';\nimport { ReactComponent as Stars } from './stars.svg';\nimport { ReactComponent as Mascot } from './mascot-mobile.svg';\nimport Partners from './icon-login-partners.svg';\nimport SchoolSignup from './icon-login-school-signup.svg';\nimport App from './icon-login-parent-app.svg';\n\nimport shootingStar from './Shooting Star.png';\n\nconst LoginSection = ({ isMobile }) => {\n return (\n \n
\n \n
\n \n \n Homepage \n
\n \n
\n
\n
| \n
\n
Love Learning \n
\n
\n
\n If you don't have account, you can{' '}\n \n Sign up \n \n \n {isMobile ? \n );\n};\n\nexport default LoginSection;\n","import styled from 'styled-components';\n\nexport const LoginPage = styled.div`\n height: calc(100vh - 53px);\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n @media (max-width: 480px) {\n overflow: hidden;\n }\n`;\n","import React from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport CPSectionFallback from 'components/Login/CPSection/CPSectionFallback';\nimport CPSection from '../components/Login/CPSection/CPSection';\nimport LoginSection from '../components/Login/LoginSection/LoginSection';\nimport { LoginPage } from './LoginNew.styles';\n\nexport default function LoginNew() {\n const isMobile = useMediaQuery({\n query: '(max-width: 480px)'\n });\n\n return (\n \n {isMobile ? (\n \n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const PrintAssignmentPage = styled.div`\n padding: 0 1rem;\n\n .top {\n display: flex;\n width: 100%;\n padding: 0 2rem;\n margin-bottom: 2rem;\n justify-content: flex-end;\n }\n\n .question-item-body,\n .media-body {\n border-right: none;\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n }\n\n @media all {\n .page-break {\n display: none;\n }\n }\n @media print {\n html,\n body {\n height: initial !important;\n overflow: visible !important;\n -webkit-print-color-adjust: exact;\n }\n .print-btn {\n display: none;\n }\n }\n\n @media print {\n .page-break {\n margin-bottom: 10mm;\n display: block;\n page-break-inside: auto;\n }\n .question-item-body {\n margin-top: 10mm;\n page-break-inside: avoid;\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { Button } from 'react-bootstrap';\nimport { isNil } from 'ramda';\nimport HTMLReactParser from 'html-react-parser';\nimport questionParser from 'helpers/questionParser';\nimport convertTagsToHTML from 'helpers/text/convertTagsToHTML';\nimport { McqOptionsList } from 'components/Question/QuestionContent.styles';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n fetchSingleClassReportRequest,\n clearSingleClassReport\n} from 'stores/assignments/actions';\nimport Spinner from 'components/Shared/Spinner';\nimport { PrintAssignmentPage } from './PrintAssignment.styles';\n\nconst QuestionContent = ({ data, qnNumber }) => {\n const { Payload } = data;\n // States\n const [questionTitle, setQuestionTitle] = useState(null);\n\n const [mcqOptionsParsed, setMCQOptionsParsed] = useState([]);\n // Effects\n useEffect(() => {\n if (!isNil(Payload)) {\n const { title, mcqOptions } = questionParser({\n Payload\n });\n const renderOptions = mcqOptions.map(option =>\n HTMLReactParser(convertTagsToHTML(option, false), {\n replace: domNode => {\n if (domNode.name === 'img') {\n domNode.attribs.style = 'width: 68%';\n return domNode;\n }\n return domNode;\n }\n })\n );\n setMCQOptionsParsed(renderOptions);\n setQuestionTitle(\n HTMLReactParser(convertTagsToHTML(title), {\n replace: domNode => {\n if (domNode.name === 'img' && !isNil(domNode.attribs?.url)) {\n return (\n \n {domNode.children[0]?.data ?? ''}\n \n );\n }\n if (domNode.name === 'input') {\n return \n
\n
\n
\n
\n
\n
\n
\n Question {qnNumber} \n
\n
\n
\n
\n
\n {questionTitle}\n {mcqOptionsParsed.length > 0 && (\n \n {mcqOptionsParsed.map(option => (\n {option} \n ))}\n \n )}\n
\n
\n
\n
\n
\n
\n {this.props.title} \n \n
Name: ________________
\n
Class: ________________
\n
\n {this.props.questions.length > 0 &&\n this.props.questions.map((question, index) => (\n <>\n
\n \n ))}\n \n \n );\n }\n}\n\nconst PrintAssignment = ({ match }) => {\n const homeworkID = parseInt(match.params.homeworkID, 10);\n const dispatch = useDispatch();\n const { singleClassReport, isSingleClassReportLoading } = useSelector(\n state => state.assignments\n );\n\n useEffect(() => {\n dispatch(\n fetchSingleClassReportRequest({\n homeworkID\n })\n );\n return () => {\n dispatch(clearSingleClassReport());\n };\n }, [dispatch, homeworkID]);\n return (\n \n \n {\n window.print();\n }}\n >\n Print Assignment\n \n
\n {isSingleClassReportLoading && \n );\n};\n\nexport default PrintAssignment;\n","import React from 'react';\nimport IconWarning from 'assets/img/icon-warning.png';\n\nconst Forbidden = () => {\n return (\n \n
\n
Access Denied \n
\n Please contact your administrator for access.\n
\n
\n \n
\n
\n \n \n Student Report \n \n \n \n \n Report Card \n \n \n \n \n Insights \n \n \n \n
\n \n );\n}\n","import React from 'react';\nimport { Link, useLocation } from 'react-router-dom';\nimport showArrow from 'assets/img/icon-report-collapse-show.svg';\nimport schoolReport from 'assets/img/icon-report-school-report.svg';\nimport milestoneIcon from 'assets/img/icon-report-sidebar-milestone.svg';\nimport monthlyIcon from 'assets/img/icon-report-sidebar-monthly.svg';\nimport yearlyIcon from 'assets/img/icon-report-sidebar-yearly.svg';\nimport progressIcon from 'assets/img/icon-report-sidebar-progress.svg';\nimport insightsIcon from 'assets/img/icon-report-sidebar-insight.svg';\nimport { featureToggle } from 'constants/index';\nimport { useTranslation } from 'react-i18next';\nimport { SidebarContainer } from './AllReports.styles';\n\nexport default function SchoolReportSidebar() {\n const { pathname } = useLocation();\n const isActivePath = path => path === pathname;\n const { t } = useTranslation(['monthly-report']);\n return (\n <>\n \n \n
\n
\n \n \n \n {t(`monthly-report:sidebar.schollReport`, 'School Report')}\n \n \n \n {featureToggle.reportSidebarOptions && (\n \n \n \n {t(`monthly-report:sidebar.milestone`, 'Milestone')}\n \n \n \n )}\n \n \n \n {t(\n `monthly-report:sidebar.monthlyActivity`,\n 'Monthly Activity'\n )}\n \n \n \n {featureToggle.reportSidebarOptions && (\n <>\n \n \n \n {t(\n `monthly-report:sidebar.yearlyActivity`,\n 'Yearly Activity'\n )}\n \n \n \n \n \n \n {t(\n `monthly-report:sidebar.learningProgress`,\n 'Learning Progress'\n )}\n \n \n \n \n \n \n {t(`monthly-report:sidebar.insights`, 'Insights')}\n \n \n \n \n )}\n \n
\n \n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link, useLocation } from 'react-router-dom';\nimport classReport from 'assets/img/icon-report-class-report.svg';\nimport showArrow from 'assets/img/icon-report-collapse-show.svg';\nimport proficiencyIcon from 'assets/img/icon-report-sidebar-proficiency.svg';\nimport highScoreIcon from 'assets/img/icon-report-sidebar-high-score.svg';\nimport loginIcon from 'assets/img/icon-report-sidebar-login.svg';\nimport activeIcon from 'assets/img/icon-report-sidebar-active.svg';\nimport milestoneIcon from 'assets/img/icon-report-sidebar-milestone.svg';\nimport insightsIcon from 'assets/img/icon-report-sidebar-insight.svg';\nimport { featureToggle } from 'constants/index';\nimport { SidebarContainer } from './AllReports.styles';\n\nexport default function ClassReportSidebar() {\n const { t } = useTranslation(['proficiency-report']);\n const { pathname } = useLocation();\n const isActivePath = path =>\n path === '/report'\n ? pathname === path || pathname.includes('/proficiency-report')\n : pathname.includes(path);\n return (\n <>\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { featureToggle } from 'constants/index';\nimport StudentReportSidebar from './StudentReport-Sidebar';\nimport SchoolReportSidebar from './SchoolReport-Sidebar';\nimport ClassReportSidebar from './ClassReport-Sidebar';\n\nexport default function SidebarReport() {\n return (\n \n
\n \n
\n \n
\n {type === 'proficiency'\n ? t(\n `proficiency-report:header.stuProReport`,\n 'Student Proficiency Report'\n )\n : t(\n `proficiency-report:sidebar.highScoreReport`,\n 'High Score Report'\n )}\n
\n
\n {t(`proficiency-report:header.upTo`, 'up to ')}\n {moment().format('DD/MM/YYYY HH:mm')} \n
\n
\n
\n
\n
\n {t(`proficiency-report:header.classGroup`, 'Class/Group from')}\n
\n
\n \n {`P${selectedClassLevel}`}\n \n \n {classLevels &&\n classLevels.map(level => (\n {\n const findLevel = reportLevels.find(\n le => le.ID === level\n );\n if (findLevel) {\n dispatch(setReportLevel(findLevel));\n }\n changeItemLevel(level);\n }}\n >{`P${level}`}\n ))}\n \n \n
\n \n {selectedClassName}\n \n \n {classes.map(item => (\n {\n dispatch(setSelectedClass(item));\n }}\n >\n {item && item.Name}\n \n ))}\n \n \n
\n
\n {!isLeveless && (\n <>\n
\n {t(\n `proficiency-report:header.reportLevel`,\n 'Report Level from'\n )}\n
\n
\n \n {isHOTS\n ? `${t(`common:age`, 'Age')} ${\n AGE_GROUP[selectedLevel.ID]\n }`\n : `P${selectedLevel.ID} ${t(\n `proficiency-report:header.data`,\n 'Data'\n )}`}\n \n \n {reportLevels.map(level => (\n {\n dispatch(setReportLevel(level));\n }}\n >\n {isHOTS\n ? `${t(`common:age`, 'Age')} ${AGE_GROUP[level.ID]}`\n : `P${level.ID} ${t(\n `proficiency-report:header.data`,\n 'Data'\n )}`}\n \n ))}\n \n \n \n )}\n {isLeveless && (\n
\n {t(`proficiency-report:header.syllabus`, 'Syllabus')}\n
\n )}\n
\n \n {selectedSyllabus.curriculumName}\n \n \n {curriculums.map(syl => (\n {\n dispatch(setSyllabus(syl));\n dispatch(setReportLevel(getLevel(syl)));\n }}\n >\n {syl.curriculumName}\n \n ))}\n \n \n
\n
\n {detailType === 'skill' && (\n
{\n if (downloadSuccess) setDownloadSuccess(false);\n setOpenDownloadCsvModal(true);\n }}\n >\n {t(`common:download`, 'Download')} \n \n )}\n \n {detailType === 'skill' && (\n setOpenDownloadCsvModal(false)}\n >\n {downloadSuccess || err ? (\n \n \n \n \n {err ||\n t(\n 'proficiency-report:downloadCSVModal.succesMsg',\n 'Report downloaded successfully!'\n )}\n \n {\n setOpenDownloadCsvModal(false);\n }}\n >\n {t('common:ok', 'OK')}\n \n \n ) : (\n \n setOpenDownloadCsvModal(false)}\n />\n \n
\n
\n {t(\n `proficiency-report:downloadCSVModal.title`,\n 'Download CSV'\n )}\n \n
\n
\n {t(\n `proficiency-report:downloadCSVModal.content`,\n 'Do you want to download the raw data from'\n )}\n
\n
\n P{selectedClassLevel} {selectedClassName}{' '}\n {!isLeveless &&\n `- P${selectedLevel.ID} ${t(\n `proficiency-report:header.data`,\n 'Data'\n )} - ${selectedSyllabus.curriculumName}`}\n
\n
\n setOpenDownloadCsvModal(false)}\n >\n {t('common:cancel', 'Cancel')}\n \n \n {downloadIsLoading ? (\n
\n \n )}\n \n )}\n \n );\n}\n","import styled, { css } from 'styled-components';\nexport const StyledSwitchContainer = styled.div`\n position: absolute;\n left: 226px;\n top: 230px;\n background: #dddddd;\n color: #484848;\n padding: 3px 4px;\n border-radius: 4px;\n display: flex;\n z-index: 1;\n @media (max-width: 1024px) {\n left: 84px;\n }\n`;\nexport const StyledSwitch = styled.div`\n min-width: 142px;\n min-height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 4px 0 0 4px;\n background: white;\n border: 1px solid #cbcbcb;\n border-right: none;\n :last-child {\n border-radius: 0 4px 4px 0;\n }\n @media (max-width: 1223px) {\n min-width: 100px;\n }\n ${({ active }) =>\n active &&\n css`\n background: #fff7f2;\n border: 1px solid #ff5b00;\n color: #ff5b00;\n `}\n`;\n","import styled from 'styled-components';\n\nexport const ReportPage = styled.div`\n padding-left: 195px;\n text-align: center;\n .error {\n width: 100%;\n text-align: center;\n margin-top: 2rem;\n }\n @media (max-width: 1024px) {\n padding-left: 55px;\n }\n @media (max-width: 639px) {\n padding-left: 0px;\n }\n`;\nexport const LoadingContainer = styled.div`\n position: relative;\n top: 250px;\n width: ${({ width }) => width || '100%'};\n`;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Polygon_33\",\n \"data-name\": \"Polygon 33\",\n d: \"M5.241.886a1,1,0,0,1,1.519,0l3.826,4.463A1,1,0,0,1,9.826,7H2.174a1,1,0,0,1-.759-1.651Z\",\n transform: \"translate(12 7) rotate(180)\",\n fill: \"currentColor\"\n});\n\nvar SvgIconTriangle = function SvgIconTriangle(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 12,\n height: 7,\n viewBox: \"0 0 12 7\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconTriangle, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon-triangle.9d571edc.svg\";\nexport { ForwardRef as ReactComponent };","const calculatePercentageString = (num, total) => {\n const percentage = ((num / total) * 100).toFixed(1);\n return percentage.toString().concat('%');\n};\n\nexport default calculatePercentageString;\n","import styled from 'styled-components';\n\nexport const ProgressBarContainer = styled.div`\n .progress-visual-full {\n display: flex;\n height: ${props => props.height};\n border-radius: 50px;\n }\n\n .visualpart:first-of-type {\n border-top-left-radius: 25px;\n border-bottom-left-radius: 25px;\n }\n\n .visualpart:last-of-type {\n border-top-right-radius: 25px;\n border-bottom-right-radius: 25px;\n }\n`;\n\nexport const ProgressSection = styled.div`\n transition: width 2s;\n width: ${props => props.width};\n background: ${props => props.item.color};\n border: ${props =>\n props.singleWidth\n ? `1px solid ${props.item.borderColor}`\n : (props.index === 0 || props.isLastIndex) &&\n parseFloat(props.width.slice(0, -1)) <= 3.5\n ? `4px solid ${props.item.color}`\n : `1px solid ${props.item.borderColor}`};\n`;\n","import React, { useState, useEffect } from 'react';\nimport { ProgressBarContainer, ProgressSection } from './ProgressBar.styles';\n\nconst ProgressBar = ({ backgroundColor = '#e5e5e5', height, visualParts }) => {\n const [widths, setWidths] = useState(\n visualParts.map(item => {\n return item.percentage;\n })\n );\n\n // Update state on visualParts props change\n useEffect(() => {\n setWidths(\n visualParts.map(item => {\n return item.percentage;\n })\n );\n }, [visualParts]);\n\n return (\n <>\n \n {visualParts.length === widths.length && (\n \n {visualParts.map((item, index) => {\n return (\n
\n );\n })}\n
\n \n );\n};\n\nexport default ProgressBar;\n","import styled, { css } from 'styled-components';\nimport { proficiencyColors } from 'constants/index';\n\nexport const StudentTable = styled.div`\n margin: 0 30px;\n position: relative;\n top: 10.6rem;\n /* @media (max-width: 1365px) {\n top: 11rem;\n } */\n @media (max-width: 864px) {\n font-size: 12px;\n }\n td {\n vertical-align: middle;\n text-align: center;\n }\n .custom-td {\n width: 130px;\n }\n .table-bordered {\n tr {\n :nth-child(odd) {\n background-color: #ffffff;\n }\n :nth-child(even) {\n background-color: #f8f8f8;\n }\n position: relative;\n :hover:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: 0px 0px 0px 2px #ff5b00 inset;\n top: 0;\n left: 0;\n pointer-events: none;\n }\n }\n }\n\n .table thead th {\n border-top: none;\n border-bottom: none;\n padding: 0;\n }\n\n .student-name {\n vertical-align: middle;\n text-align: left;\n cursor: pointer;\n img {\n height: 40px;\n width: 40px;\n border-radius: 50%;\n margin-right: 10px;\n }\n }\n .progressbar {\n text-align: left;\n cursor: pointer;\n }\n\n .mastery {\n background-color: rgba(255, 245, 194, 0.67);\n }\n .competent {\n background-color: rgba(242, 255, 235, 0.34);\n }\n .developing {\n background-color: rgba(235, 252, 255, 0.31);\n }\n .beginning {\n background-color: rgba(255, 235, 235, 0.37);\n }\n .incomplete {\n background-color: rgba(255, 255, 255);\n }\n .gradeA {\n width: 300px;\n }\n .ratings-category {\n display: flex;\n align-items: center;\n font-weight: bold;\n font-size: 12px;\n justify-content: center;\n .grade {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n img {\n width: 28px;\n height: 28px;\n }\n .sub-text {\n color: #292929;\n font-size: 11px;\n margin-left: 3px;\n font-weight: normal;\n }\n .ratings-text {\n white-space: nowrap;\n font-size: 10px;\n transform: scale(0.9);\n }\n strong {\n color: #545454;\n }\n }\n`;\n\nexport const GradeACell = styled.div`\n display: flex;\n img {\n margin-right: 1rem;\n }\n strong {\n font-size: 1.125rem;\n color: #363636;\n }\n p {\n font-size: 0.6875rem;\n color: #828282;\n }\n .progress-part {\n flex-basis: 80%;\n }\n`;\nexport const SortButtonContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #e9e9e9;\n border-bottom: none;\n margin-top: 0.5rem;\n`;\nexport const SortButton = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 50%;\n padding: 8px 0;\n background: ${({ active }) => (active ? '#9A9A9A' : 'white')};\n svg {\n path {\n fill: ${({ active }) => (active ? 'white' : '#DBDBDB')};\n }\n }\n ${({ type }) =>\n type === 'asc' &&\n css`\n border-left: 1px solid #e9e9e9;\n svg {\n transform: rotate(180deg);\n }\n `}\n`;\nexport const ProficiencySkills = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n .icon {\n width: 7px;\n height: 7px;\n margin-right: 4px;\n margin-top: 3px;\n background: ${props => proficiencyColors[props.proficiency].color};\n border-radius: 50%;\n border: solid 1px\n ${props => proficiencyColors[props.proficiency].borderColor};\n }\n img {\n margin-bottom: 5px;\n }\n .skill-title {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n span {\n font-weight: 500;\n text-align: center;\n }\n .prof-desc {\n font-size: 12px;\n transform: scale(0.8);\n white-space: nowrap;\n color: #727272;\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { useDispatch } from 'react-redux';\nimport Avatar from 'assets/img/avatar.png';\nimport GradeAIcon from 'assets/img/icon-report-high-score-a.svg';\nimport GradeBIcon from 'assets/img/icon-report-high-score-b.svg';\nimport GradeCIcon from 'assets/img/icon-report-high-score-c.svg';\nimport GradeDIcon from 'assets/img/icon-report-high-score-d.svg';\nimport { ReactComponent as TriangleIcon } from 'assets/img/report/icon-triangle.svg';\nimport HighScoreIncompleteIcon from 'assets/img/icon-report-high-score-incomplete.svg';\nimport { proficiencyColors } from 'constants/index';\nimport calculatePercentageString from 'helpers/calculatePercentageString';\nimport { toggleReport } from 'stores/report/actions';\nimport ProgressBar from './ProgressBar';\nimport {\n StudentTable,\n GradeACell,\n ProficiencySkills,\n SortButtonContainer,\n SortButton\n} from './StudentTableReport.styles';\n\nexport const progressbarNumber = data => {\n const progressBarInput = [\n {\n percentage: '',\n color: proficiencyColors.mastery.color,\n borderColor: proficiencyColors.mastery.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.competent.color,\n borderColor: proficiencyColors.competent.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.beginning.color,\n borderColor: proficiencyColors.beginning.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.incomplete.color,\n borderColor: proficiencyColors.incomplete.borderColor\n }\n ];\n const proficiencyIndex = {\n Incomplete: 3,\n NeedImprove: 2,\n Passed: 1,\n Mastered: 0\n };\n\n for (const proficiency of Object.keys(data.CompetencyDetails)) {\n if (data.CompetencyDetails[proficiency] > 0) {\n // Calculate percentage string\n const percentageString = calculatePercentageString(\n data.CompetencyDetails[proficiency],\n data.TotalNoOfSkills\n );\n progressBarInput[\n proficiencyIndex[proficiency]\n ].percentage = percentageString;\n } else {\n progressBarInput[proficiencyIndex[proficiency]].percentage = '0%';\n }\n }\n return progressBarInput.filter(\n proficiency => proficiency.percentage !== '0%'\n );\n};\n\nconst parseHighScoreProgressBar = data => {\n const progressBarInput = [\n {\n percentage: '',\n color: '#FBDA38',\n borderColor: '#BE9E00'\n },\n {\n percentage: '',\n color: '#D9ECFF',\n borderColor: '#ADBED0'\n },\n {\n percentage: '',\n color: '#EDD592',\n borderColor: '#D5AC6A'\n },\n {\n percentage: '',\n color: '#FFF4D5',\n borderColor: '#DDC6A3'\n },\n {\n percentage: '',\n color: proficiencyColors.incomplete.color,\n borderColor: proficiencyColors.incomplete.borderColor\n }\n ];\n const masteryIndex = {\n A: 0,\n B: 1,\n C: 2,\n D: 3,\n Incomplete: 4\n };\n for (const mastery of Object.keys(data.MasteryLevels)) {\n if (data.MasteryLevels[mastery] > 0) {\n // Calculate percentage string\n const percentageString = calculatePercentageString(\n data.MasteryLevels[mastery],\n data.TotalNoOfSkills\n );\n progressBarInput[masteryIndex[mastery]].percentage = percentageString;\n } else {\n progressBarInput[masteryIndex[mastery]].percentage = '0%';\n }\n }\n return progressBarInput.filter(mastery => mastery.percentage !== '0%');\n};\nconst PROFICIENCY_THEAD = [\n {\n proficiencyType: 'mastery',\n number: `80-100`,\n title: 'mastery',\n upperCaseTitle: 'Mastery',\n content: 'proficiency',\n upperCaseContent: 'Proficiency',\n columnName: 'Mastered'\n },\n {\n proficiencyType: 'competent',\n number: `60-79`,\n title: 'competent',\n upperCaseTitle: 'Competent',\n content: 'proficiency',\n upperCaseContent: 'Proficiency',\n columnName: 'Passed'\n },\n {\n proficiencyType: 'beginning',\n number: `0-59`,\n title: 'beginning',\n upperCaseTitle: 'Beginning',\n content: 'proficiency',\n upperCaseContent: 'Proficiency',\n columnName: 'NeedImprove'\n },\n {\n proficiencyType: 'incomplete',\n number: `< 10`,\n title: 'incomplete',\n upperCaseTitle: 'Incomplete',\n content: 'question',\n upperCaseContent: 'Question',\n columnName: 'Incomplete'\n }\n];\nconst HIGH_SCORE_THEAD = [\n {\n gradeType: 'A',\n icon: GradeAIcon,\n fraction: '9-10'\n },\n {\n gradeType: 'B',\n icon: GradeBIcon,\n fraction: '6-8'\n },\n {\n gradeType: 'C',\n icon: GradeCIcon,\n fraction: '4-5'\n },\n {\n gradeType: 'D',\n icon: GradeDIcon,\n fraction: '1-3'\n },\n {\n gradeType: 'Incomplete',\n icon: HighScoreIncompleteIcon\n }\n];\nexport default function StudentTableReport({\n type,\n data,\n isLoading,\n sortClick,\n sortDetail\n}) {\n const { t } = useTranslation(['proficiency-report']);\n const history = useHistory();\n const dispatch = useDispatch();\n\n return (\n <>\n \n {!isLoading && (\n \n \n \n {type === 'proficiency' && (\n <>\n \n \n \n
\n
\n {t(\n `proficiency-report:legend.${title}`,\n upperCaseTitle\n )}\n \n
\n {t(\n `proficiency-report:legend.${content}`,\n upperCaseContent\n )}{' '}\n {number} \n \n \n \n \n sortClick({\n type: columnName,\n sortType: 'desc'\n })\n }\n >\n \n sortClick({ type: columnName, sortType: 'asc' })\n }\n >\n \n \n )\n )}\n \n )}\n {type === 'highscore' && (\n <>\n \n \n \n \n {fraction ? (\n <>\n {fraction}\n \n {' '}\n / 10\n {t(\n `proficiency-report:classReport.qnPerSkill`,\n ' Qn per skill'\n )}\n \n \n ) : (\n \n {t(\n `proficiency-report:classReport.toBeComplete`,\n 'To be completed'\n )}\n \n )}\n \n \n \n \n \n sortClick({\n type: gradeType,\n sortType: 'desc'\n })\n }\n >\n \n sortClick({ type: gradeType, sortType: 'asc' })\n }\n >\n \n \n );\n })}\n \n )}\n \n \n \n {type === 'proficiency' && (\n <>\n {data &&\n data.map(item => (\n \n {\n history.push(\n `/report/proficiency-report/${item.UserId}`\n );\n dispatch(toggleReport('proficiency'));\n }}\n >\n {\n e.target.src = Avatar;\n }}\n src={item.ProfilePictureUrl}\n alt=\"profile\"\n />\n {item.Fullname} \n \n {\n history.push(\n `/report/proficiency-report/${item.UserId}`\n );\n dispatch(toggleReport('proficiency'));\n }}\n >\n \n {item.CompetencyDetails.Mastered} {' '}\n {`${t(\n `proficiency-report:classReport.outOf`,\n ' out of '\n )} ${item.TotalNoOfSkills} ${\n item.TotalNoOfSkills >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )\n } ${t(\n `proficiency-report:classReport.mastery`,\n 'mastery'\n )}`}\n
\n \n \n {item.CompetencyDetails.Mastered} \n {item.CompetencyDetails.Mastered >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n {item.CompetencyDetails.Passed} \n {item.CompetencyDetails.Passed >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n {item.CompetencyDetails.NeedImprove} \n {item.CompetencyDetails.NeedImprove >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n {item.CompetencyDetails.Incomplete} \n {item.CompetencyDetails.Incomplete >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n ))}\n \n )}\n {type === 'highscore' && (\n <>\n {data &&\n data.map(item => (\n \n {\n history.push(\n `/report/class-report/high-score-report/${item.UserId}`\n );\n dispatch(toggleReport('high'));\n }}\n >\n {\n e.target.src = Avatar;\n }}\n src={item.ProfilePictureUrl}\n alt=\"profile\"\n />\n {item.Fullname} \n \n {\n history.push(\n `/report/class-report/high-score-report/${item.UserId}`\n );\n dispatch(toggleReport('high'));\n }}\n >\n \n {item.MasteryLevels.A > 0 ? (\n \n
\n {item.MasteryLevels.A} \n {` ${t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )} ${t(\n `proficiency-report:classReport.outOf`,\n ' out of '\n )}${item.TotalNoOfSkills} ${t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )}`}\n
\n
\n
\n \n \n {item.MasteryLevels.A} \n {item.MasteryLevels.A >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n {item.MasteryLevels.B} \n {item.MasteryLevels.B >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n {item.MasteryLevels.C} \n {item.MasteryLevels.C >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n {item.MasteryLevels.D} \n {item.MasteryLevels.D >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n {item.MasteryLevels.Incomplete} \n {item.MasteryLevels.Incomplete >= 2\n ? t(\n `proficiency-report:classReport.skills`,\n 'skills'\n )\n : t(\n `proficiency-report:classReport.skill`,\n 'skill'\n )}\n \n \n ))}\n \n )}\n \n
\n )}\n \n \n );\n}\n","import styled, { css } from 'styled-components';\n\nexport const NoReportStyle = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0 30px;\n position: relative;\n top: 13rem;\n color: #555555;\n font-size: 18px;\n img {\n width: 200px;\n }\n .no-report-title {\n font-weight: 900;\n margin: 30px 0 15px;\n }\n ${({ detail }) => {\n if (detail) {\n return css`\n width: calc(80% - 2rem);\n `;\n }\n }}\n`;\n","import React, { memo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport noReport from 'assets/img/no-reports.svg';\nimport { NoReportStyle } from './NoReport.styles';\n\nconst NoReport = ({ detail, message }) => {\n const { t } = useTranslation(['proficiency-report']);\n return (\n \n \n {t(`proficiency-report:noReports.title`, 'No reports found')}\n
\n {!detail && !message && (\n \n {t(\n `proficiency-report:noReports.desc`,\n 'Select another Class/Group to show reports.'\n )}\n
\n )}\n {message && {message}
}\n \n );\n};\n\nexport default memo(NoReport);\n","import React, { useState, useCallback } from 'react';\nimport StudentTable from 'components/Report/StudentTableReport';\nimport NoReport from 'components/Report/NoReport';\nimport cloneDeep from 'lodash.clonedeep';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { fetchClassProficiencyReportRequest } from 'stores/report/actions';\n\nimport useDeepCompareEffect from 'use-deep-compare-effect';\nimport Spinner from 'components/Shared/Spinner';\nimport { isEmpty, isNil } from 'ramda';\nimport { LoadingContainer } from './ReportPage.styles';\n\nconst ProficiencyReportByStudent = ({ visible }) => {\n const dispatch = useDispatch();\n // Redux States\n const {\n classProficiencyReport,\n selectedClass,\n reportLevel,\n selectedSyllabus,\n isLoading: reportsLoading\n } = useSelector(state => state.reports);\n const [sortDetail, setSortDetail] = useState(null);\n const isLeveless = isEmpty(selectedSyllabus.Levels);\n\n const sortedData = useCallback(() => {\n if (sortDetail) {\n const { type, sortType } = sortDetail;\n const hasData = classProficiencyReport.some(\n datum => datum.CompetencyDetails[type] > 0\n );\n if (hasData) {\n const result = cloneDeep(classProficiencyReport).sort((a, b) => {\n const c =\n a.CompetencyDetails[type] - b.CompetencyDetails[type] > 0 ? 1 : -1;\n return sortType === 'asc' ? c : c * -1;\n });\n return result;\n }\n return classProficiencyReport;\n }\n return classProficiencyReport;\n }, [classProficiencyReport, sortDetail]);\n\n useDeepCompareEffect(() => {\n if (selectedClass && selectedSyllabus && !isNil(reportLevel)) {\n dispatch(\n fetchClassProficiencyReportRequest({\n classID: selectedClass.ID,\n reportLevel: isLeveless ? -1 : reportLevel.ID,\n syllabusID: selectedSyllabus.CurriculumID\n })\n );\n }\n }, [dispatch, reportLevel, selectedClass, selectedSyllabus]);\n const handleSortClick = ({ type, sortType }) => {\n setSortDetail(prev => {\n if (prev) {\n return prev.type === type && prev.sortType === sortType\n ? null\n : { type, sortType };\n }\n return { type, sortType };\n });\n };\n const renderResult = () => {\n if (reportsLoading) {\n return (\n \n \n );\n }\n if (classProficiencyReport?.length) {\n return (\n \n {!isLoading && (\n \n \n \n {type === 'proficiency' && (\n <>\n \n \n \n
\n
\n {t(\n `proficiency-report:legend.${title}`,\n upperCaseTitle\n )}\n \n
\n \n \n sortClick({\n type: columnName,\n sortType: 'desc'\n })\n }\n >\n \n sortClick({ type: columnName, sortType: 'asc' })\n }\n >\n \n \n )\n )}\n \n )}\n {type === 'highscore' && (\n <>\n \n \n \n \n \n \n \n sortClick({\n type: gradeType,\n sortType: 'desc'\n })\n }\n >\n \n sortClick({ type: gradeType, sortType: 'asc' })\n }\n >\n \n \n );\n })}\n \n )}\n \n \n \n {type === 'proficiency' && (\n <>\n {data &&\n data.map(item => (\n \n handleClick(item)}\n >\n {t(\n `proficiency-report:studentReportSide.skillNumber`,\n { number: item.Display },\n `Skill ${item.Display}`\n )}\n \n handleClick(item)}\n title={item.SkillName}\n >\n {item.SkillName}\n \n \n \n {item.CompetencyDetails.Mastered} {' '}\n {`/${item.TotalNoOfStudents} ${\n item.TotalNoOfStudents >= 2\n ? t(\n `proficiency-report:classReport.students`,\n 'students'\n )\n : t(\n `proficiency-report:classReport.student`,\n 'student'\n )\n } ${t(\n `proficiency-report:classReport.mastery`,\n 'Mastery'\n )}`}\n
\n \n \n {item.CompetencyDetails.Mastered} \n \n \n {item.CompetencyDetails.Passed} \n \n \n {item.CompetencyDetails.NeedImprove} \n \n \n {item.CompetencyDetails.Incomplete} \n \n \n ))}\n \n )}\n {type === 'highscore' && (\n <>\n {data &&\n data.map(item => (\n \n handleClick(item)}\n >\n {t(\n `proficiency-report:studentReportSide.skillNumber`,\n { number: item.Display },\n `Skill ${item.Display}`\n )}\n \n handleClick(item)}\n title={item.SkillName}\n >\n {item.SkillName}\n \n \n \n {item.MasteryLevels.A} {' '}\n {`/${item.TotalNoOfUsers} ${\n item.TotalNoOfUsers >= 2\n ? t(\n `proficiency-report:classReport.students`,\n 'students'\n )\n : t(\n `proficiency-report:classReport.student`,\n 'student'\n )\n } ${t(`high-score-report:legend.AStar`, 'A Star')}`}\n
\n \n \n {item.MasteryLevels.A} {' '}\n {t(`proficiency-report:classReport.stu`, 'stu')}\n \n \n {item.MasteryLevels.B} {' '}\n {t(`proficiency-report:classReport.stu`, 'stu')}\n \n \n {item.MasteryLevels.C} {' '}\n {t(`proficiency-report:classReport.stu`, 'stu')}\n \n \n {item.MasteryLevels.D} {' '}\n {t(`proficiency-report:classReport.stu`, 'stu')}\n \n \n {item.MasteryLevels.Incomplete} {' '}\n {t(`proficiency-report:classReport.stu`, 'stu')}\n \n \n ))}\n \n )}\n \n
\n )}\n \n \n );\n}\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n margin: 0 30px;\n position: relative;\n top: 14.6rem;\n`;\nexport const SkillList = styled.div`\n background: white;\n text-align: left;\n width: 20%;\n border: 1px solid #e9e9e9;\n margin-bottom: 30px;\n`;\nexport const SkillItem = styled.div`\n padding: 21px 20px 21px 10px;\n color: #363636;\n cursor: pointer;\n position: relative;\n border-bottom: 1px solid #e9e9e9;\n &:nth-child(even) {\n background-color: #fbfbfb;\n }\n &:last-child {\n border-bottom: none;\n }\n :hover:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: 0px 0px 0px 2px #ff5b00 inset;\n top: 0;\n left: 0;\n pointer-events: none;\n }\n svg {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n }\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\nimport NoReport from 'components/Report/NoReport';\nimport Spinner from 'components/Shared/Spinner';\nimport { ReactComponent as SkillSelectIcon } from 'assets/img/report/icon-skill-select.svg';\nimport {\n fetchSyllabusRequest,\n fetchProficiencySkillReportRequest,\n cleanProficiencySkillReport\n} from 'stores/report/actions';\nimport useDeepCompareEffect from 'use-deep-compare-effect';\nimport { isEmpty, isNil } from 'ramda';\nimport SkillTableReport from 'components/Report/SkillTableReport';\nimport cloneDeep from 'lodash.clonedeep';\nimport { LoadingContainer } from './ReportPage.styles';\nimport {\n Container,\n SkillList,\n SkillItem\n} from './ProficiencyReportBySkills.styles';\n\nconst ProficiencyReportBySkills = ({ visible }) => {\n const dispatch = useDispatch();\n const { t } = useTranslation(['proficiency-report']);\n const [sortDetail, setSortDetail] = useState(null);\n const [selectedSkill, setSelectedSkill] = useState(null);\n\n const {\n selectedClass,\n reportLevel,\n selectedSyllabus,\n syllabus,\n proficiencySkill\n } = useSelector(state => state.reports);\n const isLevelLess = isEmpty(selectedSyllabus?.Levels);\n useDeepCompareEffect(() => {\n if (selectedClass && selectedSyllabus && !isNil(reportLevel)) {\n dispatch(\n fetchSyllabusRequest({\n CurriculumID: selectedSyllabus.CurriculumID,\n LevelID: isLevelLess ? -1 : reportLevel.ID\n })\n );\n }\n }, [dispatch, reportLevel, selectedClass, selectedSyllabus]);\n useEffect(() => {\n dispatch(cleanProficiencySkillReport());\n // eslint-disable-next-line\n }, []);\n useEffect(() => {\n if (syllabus.data?.length) {\n handleSkillClick(syllabus.data[0], true);\n }\n // eslint-disable-next-line\n }, [syllabus.data]);\n const sortedData = useCallback(() => {\n if (sortDetail) {\n const { type, sortType } = sortDetail;\n const hasData = proficiencySkill.data.some(\n datum => datum.CompetencyDetails[type] > 0\n );\n if (hasData) {\n const result = cloneDeep(proficiencySkill.data).sort((a, b) => {\n const c =\n a.CompetencyDetails[type] - b.CompetencyDetails[type] > 0 ? 1 : -1;\n return sortType === 'asc' ? c : c * -1;\n });\n return result;\n }\n return proficiencySkill.data;\n }\n return proficiencySkill.data;\n }, [proficiencySkill, sortDetail]);\n\n const handleSkillClick = (skill, isInitial) => {\n if (selectedSkill === skill.ID && !isInitial) {\n return;\n }\n setSelectedSkill(skill.ID);\n setSortDetail(null);\n const rawBody = {\n classID: selectedClass.ID,\n reportLevel: reportLevel.ID,\n curriculumID: selectedSyllabus.CurriculumID,\n topicID: skill.ID\n };\n dispatch(fetchProficiencySkillReportRequest(rawBody));\n };\n const handleSortClick = ({ type, sortType }) => {\n setSortDetail(prev => {\n if (prev) {\n return prev.type === type && prev.sortType === sortType\n ? null\n : { type, sortType };\n }\n return { type, sortType };\n });\n };\n const renderTable = () => {\n if (proficiencySkill.isLoading) {\n return (\n \n \n );\n }\n if (!proficiencySkill.data || proficiencySkill.data.length === 0) {\n return (\n \n \n );\n }\n if (isNil(syllabus.data) || isEmpty(syllabus.data)) {\n return \n \n {syllabus.data.map(skill => (\n handleSkillClick(skill)}\n >\n {skill.Name}\n {selectedSkill === skill.ID && \n {renderTable()}\n \n );\n };\n return visible ? renderResult() : null;\n};\n\nexport default ProficiencyReportBySkills;\n","import React, { useState, useEffect } from 'react';\nimport TopBar from 'components/Report/TopBar';\nimport { useDispatch, useSelector } from 'react-redux';\nimport generateLevels from 'helpers/reportLevels';\nimport { fetchClassRequest } from 'stores/utils/lookup/actions';\nimport { fetchUserCurriculumsRequest } from 'stores/curriculums/actions';\nimport { isEmpty, isNil } from 'ramda';\nimport { setReportLevel } from 'stores/report/actions';\nimport {\n StyledSwitchContainer,\n StyledSwitch\n} from './ProficiencyReport.styles';\nimport { ReportPage } from './ReportPage.styles';\nimport { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';\nimport ProficiencyReportByStudent from './ProficiencyReportByStudent';\nimport ProficiencyReportBySkills from './ProficiencyReportBySkills';\nconst TYPES = [\n {\n label: 'By Students',\n value: 'student'\n },\n {\n label: 'By Skills',\n value: 'skill'\n }\n];\nconst ProficiencyReport = ({ history }) => {\n const dispatch = useDispatch();\n\n const {\n selectedClass,\n sortOrder,\n reportLevel,\n selectedSyllabus,\n selectedClassLevel\n } = useSelector(state => state.reports);\n const { classes } = useSelector(state => state.lookup);\n const { curriculums, error } = useSelector(state => state.curriculums);\n const [type, setType] = useState(\n history.location.state?.type || TYPES[0].value\n );\n\n const isLeveless = isEmpty(selectedSyllabus?.Levels);\n\n const reportLevels = generateLevels();\n // Filter out only classes of type 1\n const filteredClasses =\n classes.length > 0\n ? classes.filter(classObject => classObject.Type === 1)\n : [];\n\n // UseEffect\n useEffect(() => {\n dispatch(fetchClassRequest(selectedClassLevel));\n }, [dispatch, selectedClassLevel]);\n useEffect(() => {\n if (error !== '') {\n dispatch(fetchUserCurriculumsRequest());\n }\n }, [dispatch, error]);\n useDeepCompareEffectNoCheck(() => {\n if (selectedSyllabus && isNil(reportLevel) && !isLeveless) {\n const firstLevel = selectedSyllabus.Levels[0];\n dispatch(setReportLevel(firstLevel));\n }\n }, [reportLevel, selectedSyllabus, isLeveless]);\n return (\n reportLevel && (\n \n {reportLevel && (\n \n {TYPES.map(item => (\n setType(item.value)}\n >\n {item.label}\n \n ))}\n \n \n )\n );\n};\n\nexport default ProficiencyReport;\n","import React, { useState, useCallback } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { isEmpty, isNil } from 'ramda';\nimport { fetchClassHighScoreReportRequest } from 'stores/report/actions';\nimport cloneDeep from 'lodash.clonedeep';\nimport NoReport from 'components/Report/NoReport';\nimport StudentTable from 'components/Report/StudentTableReport';\nimport useDeepCompareEffect from 'use-deep-compare-effect';\nimport { LoadingContainer } from './ReportPage.styles';\nimport Spinner from 'components/Shared/Spinner';\n\nconst HighScoreReportByStudent = ({ visible }) => {\n const dispatch = useDispatch();\n // Redux States\n const {\n classHighScoreReport,\n selectedClass,\n reportLevel,\n selectedSyllabus,\n isLoading: reportsLoading\n } = useSelector(state => state.reports);\n const [sortDetail, setSortDetail] = useState(null);\n const isLeveless = isEmpty(selectedSyllabus.Levels);\n\n const sortedData = useCallback(() => {\n if (sortDetail) {\n const { type, sortType } = sortDetail;\n const hasData = classHighScoreReport.some(\n datum => datum.MasteryLevels[type] > 0\n );\n if (hasData) {\n const result = cloneDeep(classHighScoreReport).sort((a, b) => {\n const c = a.MasteryLevels[type] - b.MasteryLevels[type] > 0 ? 1 : -1;\n return sortType === 'asc' ? c : c * -1;\n });\n return result;\n }\n return classHighScoreReport;\n }\n return classHighScoreReport;\n }, [classHighScoreReport, sortDetail]);\n\n useDeepCompareEffect(() => {\n if (selectedClass && selectedSyllabus && !isNil(reportLevel)) {\n dispatch(\n fetchClassHighScoreReportRequest({\n classID: selectedClass.ID,\n reportLevel: isLeveless ? -1 : reportLevel.ID,\n curriculumID: selectedSyllabus.CurriculumID\n })\n );\n }\n }, [dispatch, reportLevel, selectedClass, selectedSyllabus]);\n const handleSortClick = ({ type, sortType }) => {\n setSortDetail(prev => {\n if (prev) {\n return prev.type === type && prev.sortType === sortType\n ? null\n : { type, sortType };\n }\n return { type, sortType };\n });\n };\n const renderResult = () => {\n if (reportsLoading) {\n return (\n \n \n );\n }\n if (classHighScoreReport?.length) {\n return (\n \n \n );\n }\n if (!highScoreSkill.data || highScoreSkill.data.length === 0) {\n return (\n \n \n );\n }\n if (isNil(syllabus.data) || isEmpty(syllabus.data)) {\n return \n \n {syllabus.data.map(skill => (\n handleSkillClick(skill)}\n >\n {skill.Name}\n {selectedSkill === skill.ID && \n {renderTable()}\n \n );\n };\n return visible ? renderResult() : null;\n};\n\nexport default HighScoreReportBySkills;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { isEmpty, isNil } from 'ramda';\nimport { fetchClassRequest } from 'stores/utils/lookup/actions';\nimport { setReportLevel } from 'stores/report/actions';\nimport { fetchUserCurriculumsRequest } from 'stores/curriculums/actions';\nimport { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';\nimport TopBar from 'components/Report/TopBar';\nimport generateLevels from 'helpers/reportLevels';\nimport HighScoreReportByStudent from './HighScoreReportByStudent';\nimport HighScoreReportBySkills from './HighScoreReportBySkills';\nimport {\n StyledSwitchContainer,\n StyledSwitch\n} from './ProficiencyReport.styles';\nimport { ReportPage } from './ReportPage.styles';\nconst TYPES = [\n {\n label: 'By Students',\n value: 'student'\n },\n {\n label: 'By Skills',\n value: 'skill'\n }\n];\nconst HighScoreReport = ({ history }) => {\n const dispatch = useDispatch();\n // Redux States\n const {\n selectedClass,\n sortOrder,\n reportLevel,\n selectedSyllabus,\n selectedClassLevel\n } = useSelector(state => state.reports);\n const { classes } = useSelector(state => state.lookup);\n const { curriculums, error } = useSelector(state => state.curriculums);\n const isLeveless = isEmpty(selectedSyllabus?.Levels);\n const [type, setType] = useState(\n history.location.state?.type || TYPES[0].value\n );\n\n const reportLevels = generateLevels();\n // Filter out only classes of type 1\n const filteredClasses =\n classes.length > 0\n ? classes.filter(classObject => classObject.Type === 1)\n : [];\n\n // UseEffect\n useEffect(() => {\n dispatch(fetchClassRequest(selectedClassLevel));\n }, [dispatch, selectedClassLevel]);\n useEffect(() => {\n if (error !== '') {\n dispatch(fetchUserCurriculumsRequest());\n }\n }, [classes, classes.length, dispatch, error, selectedClass]);\n useDeepCompareEffectNoCheck(() => {\n if (selectedSyllabus && isNil(reportLevel) && !isLeveless) {\n const firstLevel = selectedSyllabus.Levels[0];\n dispatch(setReportLevel(firstLevel));\n }\n }, [reportLevel, selectedSyllabus, isLeveless]);\n return (\n reportLevel && (\n \n \n {TYPES.map(item => (\n setType(item.value)}\n >\n {item.label}\n \n ))}\n \n \n )\n );\n};\n\nexport default HighScoreReport;\n","import React from 'react';\nimport StarIcon from 'assets/img/icon-report-skill-star.svg';\n\nconst HighScoreStars = ({ numOfStars }) => {\n const generateStars = num => {\n const stars = [];\n if (num <= 0) {\n return null;\n }\n for (let i = 1; i <= numOfStars; i++) {\n stars.push({generateStars(numOfStars)} ;\n};\n\nexport default HighScoreStars;\n","import styled from 'styled-components';\nimport { proficiencyColors } from 'constants/index';\n\nexport const SkillDetailsContainer = styled.div`\n background: white;\n width: 360px;\n position: fixed;\n top: 119.19px;\n bottom: 0;\n right: 0;\n padding: 1rem 0.75rem;\n overflow-y: scroll;\n @media (max-width: 1024px) {\n width: 330px;\n }\n`;\n\nexport const SkillDetailsHeader = styled.div`\n border-bottom: solid 1px rgba(112, 112, 112, 0.29);\n .skill-name {\n font-size: 1.125rem;\n }\n .skill-number {\n font-size: 0.875rem;\n margin-right: 1rem;\n }\n .skill-description {\n font-size: 0.75rem;\n color: #828282;\n }\n .student-percentage {\n font-size: 1.125rem;\n color: black;\n margin-right: 2rem;\n }\n .class-avg-title {\n font-size: 0.625rem;\n margin-right: 0.5rem;\n }\n .class-avg-percentage {\n font-size: 0.9375rem;\n color: #060606;\n }\n p,\n span {\n font-family: 'Nunito';\n color: #202020;\n }\n`;\n\nexport const SkillBadge = styled.span`\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n background: ${props => proficiencyColors[props.proficiency].color};\n border-radius: 12px;\n border: ${props =>\n `solid 1px ${proficiencyColors[props.proficiency].borderColor}`};\n`;\n\nexport const QuestionContainer = styled.div`\n color: #202020;\n font-family: 'Nunito';\n margin-top: 1rem;\n .question-title {\n font-size: 0.875rem;\n }\n .question-content {\n font-weight: 600;\n font-size: 1rem;\n }\n`;\n\nexport const SolutionContainer = styled.div`\n margin-top: 2rem;\n color: #202020;\n font-weight: 600;\n font-family: 'Nunito';\n .solution-title {\n color: #5e925c;\n font-size: 0.875rem;\n }\n .solution-content {\n font-size: 1rem;\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchSampleQnRequest } from 'stores/report/actions';\nimport GradeAIcon from 'assets/img/icon-report-high-score-a.svg';\nimport GradeBIcon from 'assets/img/icon-report-high-score-b.svg';\nimport GradeCIcon from 'assets/img/icon-report-high-score-c.svg';\nimport GradeDIcon from 'assets/img/icon-report-high-score-d.svg';\nimport IncompleteIcon from 'assets/img/icon-report-high-score-incomplete.svg';\nimport { isNil } from 'ramda';\nimport HTMLReactParser from 'html-react-parser';\nimport { ProficiencyStatus, MasteryLevel } from 'constants/index';\nimport questionParser from 'helpers/questionParser';\nimport convertTagsToHTML from 'helpers/text/convertTagsToHTML';\nimport HighScoreStars from './HighScoreStars';\nimport {\n SkillDetailsContainer,\n SkillDetailsHeader,\n SkillBadge,\n QuestionContainer,\n SolutionContainer\n} from './SkillDetails.styles.js';\n\nconst SkillDetailsQuestion = ({ data }) => {\n const { t } = useTranslation(['proficiency-report']);\n // States\n const [questionTitle, setQuestionTitle] = useState(null);\n const [questionSolution, setQuestionSolution] = useState(null);\n\n // Effects\n useEffect(() => {\n if (!isNil(data.Payload)) {\n const { title, solution } = questionParser({\n Payload: data.Payload\n });\n setQuestionTitle(\n HTMLReactParser(convertTagsToHTML(title), {\n replace: domNode => {\n if (domNode.name === 'img' && !isNil(domNode.attribs?.url)) {\n return (\n \n {domNode.children[0]?.data ?? ''}\n \n );\n }\n if (domNode.name === 'input') {\n return \n \n {t(\n `proficiency-report:studentReportSide.sampleQs`,\n 'Sample Question'\n )}{' '}\n ( ID: {data.Id} )\n
\n {questionTitle}
\n \n \n \n {t(`proficiency-report:studentReportSide.solution`, 'Solution')}\n
\n {questionSolution}
\n \n \n );\n};\n\nexport default function SkillDetails({\n type,\n selectedSkill,\n selectedSkillTopic,\n selectedSkillNumber\n}) {\n const { t } = useTranslation(['proficiency-report']);\n const GradeIconMapping = {\n D: GradeDIcon,\n C: GradeCIcon,\n B: GradeBIcon,\n A: GradeAIcon,\n incomplete: IncompleteIcon\n };\n const dispatch = useDispatch();\n const { isLoading, sampleQn } = useSelector(state => state.reports);\n // useEffect\n useEffect(() => {\n dispatch(\n fetchSampleQnRequest({\n qnID: selectedSkill.SampleQuestionID\n })\n );\n }, [dispatch, selectedSkill.SampleQuestionID]);\n return (\n \n \n \n {selectedSkillTopic} \n
\n \n \n {t(`proficiency-report:studentReportSide.skill`, 'Skill')}{' '}\n {selectedSkillNumber}\n \n {type === 'highscore' && (\n \n {t(\n `proficiency-report:legend.${\n ProficiencyStatus[selectedSkill.ProficiencyStatus]\n }`,\n `${ProficiencyStatus[selectedSkill.ProficiencyStatus]\n .charAt(0)\n .toUpperCase() +\n ProficiencyStatus[selectedSkill.ProficiencyStatus].slice(1)}`\n )}\n \n ) : null}\n
\n {selectedSkill.SkillName}
\n \n {type === 'highscore' && (\n
\n )}\n {type === 'proficiency' && (\n <>\n
\n {`${Math.round(\n selectedSkill.Proficiency * 100\n )}%`} \n \n
\n {t(\n `proficiency-report:studentReportSide.classAvg`,\n 'Class Avg'\n )}\n \n
\n \n {`${Math.round(selectedSkill.ClassAverage * 100)}%`}\n \n \n \n )}\n
\n {!isLoading && sampleQn && \n );\n}\n","import styled from 'styled-components';\nimport { proficiencyColors } from 'constants/index';\n\nexport const SkillSection = styled.div`\n width: 100%;\n padding: 1rem 3rem;\n border-bottom: solid 1px #e9e9e9;\n background: ${props =>\n props.index === 0 || props.index % 2 === 0 ? '#fbfbfb' : 'white'};\n .skill-title {\n font-family: 'Nunito';\n font-size: 1.125rem;\n color: #202020;\n }\n .progressbar {\n max-width: 25%;\n p {\n margin: 10px 0px;\n width: ${props =>\n props.showSkillDetails ? 'calc(100vw - 385px)' : 'calc(100vw - 56px)'};\n }\n }\n .skill-badges {\n display: flex;\n flex-wrap: wrap;\n .badge {\n display: flex;\n flex-direction: column;\n justify-content: ${props =>\n props.type === 'highscore' ? 'flex-end' : 'center'};\n text-align: center;\n padding: 0.5rem 0.5rem;\n cursor: pointer;\n margin: 0 1rem 1rem 0;\n min-width: ${props => (props.type === 'highscore' ? '60.88px' : '49px')};\n min-height: 74px;\n .grade-icon {\n align-self: center;\n }\n &:hover {\n background: #eeeeee;\n }\n .skill-percentage {\n margin-top: 1rem;\n font-size: 0.875rem;\n color: #363636;\n }\n .skill-number {\n margin-top: 1rem;\n font-size: 0.8125rem;\n color: #363636;\n }\n }\n }\n`;\n\nconst proficiencyFontColors = {\n mastery: '#363636',\n competent: '#1B6316',\n developing: '#155575',\n beginning: 'white',\n incomplete: '#8B989E'\n};\n\nexport const ProficiencyBadge = styled.div`\n width: 32px;\n height: 31px;\n background: ${props => proficiencyColors[props.proficiency].color};\n border: solid 1px ${props => proficiencyColors[props.proficiency].borderColor};\n border-radius: 3px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n font-family: 'Nunito';\n font-size: 0.625rem;\n color: ${props => proficiencyFontColors[props.proficiency]};\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ProgressBar from 'components/Report/ProgressBar';\nimport GradeAIcon from 'assets/img/icon-report-high-score-a.svg';\nimport GradeBIcon from 'assets/img/icon-report-high-score-b.svg';\nimport GradeCIcon from 'assets/img/icon-report-high-score-c.svg';\nimport GradeDIcon from 'assets/img/icon-report-high-score-d.svg';\nimport IncompleteIcon from 'assets/img/icon-report-high-score-incomplete.svg';\nimport {\n proficiencyColors,\n ProficiencyStatus,\n MasteryLevel\n} from 'constants/index';\nimport calculatePercentageString from 'helpers/calculatePercentageString';\nimport { SkillSection, ProficiencyBadge } from './StudentReport.styles';\n\n// Helper for parsing api to input format for ProgressBar\nconst sortSkills = skills => {\n const progressBarInput = [\n {\n percentage: '',\n color: proficiencyColors.mastery.color,\n borderColor: proficiencyColors.mastery.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.competent.color,\n borderColor: proficiencyColors.competent.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.beginning.color,\n borderColor: proficiencyColors.beginning.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.incomplete.color,\n borderColor: proficiencyColors.incomplete.borderColor\n }\n ];\n const proficiencyIndex = {\n incomplete: 3,\n beginning: 2,\n competent: 1,\n mastery: 0\n };\n const sortedSkills = {\n incomplete: 0,\n beginning: 0,\n competent: 0,\n mastery: 0\n };\n let total = 0;\n // Sort skills by proficiency status\n for (const skill of skills) {\n const proficiency = ProficiencyStatus[skill.ProficiencyStatus];\n sortedSkills[proficiency] += 1;\n total += 1;\n }\n for (const proficiency of Object.keys(sortedSkills)) {\n if (sortedSkills[proficiency] > 0) {\n // Calculate percentage string\n const percentageString = calculatePercentageString(\n sortedSkills[proficiency],\n total\n );\n progressBarInput[\n proficiencyIndex[proficiency]\n ].percentage = percentageString;\n } else {\n progressBarInput[proficiencyIndex[proficiency]].percentage = '0%';\n }\n }\n return progressBarInput.filter(\n proficiency => proficiency.percentage !== '0%'\n );\n};\n\nconst StudentReport = ({\n setShowSkillDetails,\n type,\n selectedSkill,\n setSelectedSkill,\n setSelectedSkillTopic,\n setSelectedSkillNumber,\n data\n}) => {\n const { t } = useTranslation(['proficiency-report']);\n return (\n <>\n {data &&\n data.map((topic, index) => (\n \n \n {topic.TopicName} \n
\n {type === 'proficiency' && (\n \n
\n
\n {topic.SkillMastered} \n {` / ${topic.TotalNoOfSkill} ${t(\n 'proficiency-report:studentReport.skillsMastered',\n 'Skills mastered'\n )} ( ${t(\n 'proficiency-report:studentReport.classAvg',\n 'Class Avg'\n )} `}\n {topic.ClassAverage} \n {` / ${topic.TotalNoOfSkill} )`}\n
\n
\n {type === 'proficiency' &&\n topic.Skills.map((skill, index) => (\n
{\n setShowSkillDetails(true);\n setSelectedSkill(skill);\n setSelectedSkillTopic(topic.TopicName);\n setSelectedSkillNumber(index + 1);\n }}\n >\n {ProficiencyStatus[skill.ProficiencyStatus] ===\n 'mastery' && (\n \n \n {t(\n 'proficiency-report:studentReportSide.skill',\n 'Skill'\n )}\n \n {index + 1} \n \n )}\n {ProficiencyStatus[skill.ProficiencyStatus] ===\n 'competent' && (\n \n \n {t(\n 'proficiency-report:studentReportSide.skill',\n 'Skill'\n )}\n \n {index + 1} \n \n )}\n {ProficiencyStatus[skill.ProficiencyStatus] ===\n 'beginning' && (\n \n \n {t(\n 'proficiency-report:studentReportSide.skill',\n 'Skill'\n )}\n \n {index + 1} \n \n )}\n {ProficiencyStatus[skill.ProficiencyStatus] ===\n 'incomplete' && (\n \n \n {t(\n 'proficiency-report:studentReportSide.skill',\n 'Skill'\n )}\n \n {index + 1} \n \n )}\n \n {`${Math.round(\n skill.Proficiency * 100\n )}%`} \n
\n {\n setShowSkillDetails(true);\n setSelectedSkill(skill);\n setSelectedSkillTopic(topic.TopicName);\n setSelectedSkillNumber(index + 1);\n }}\n >\n {MasteryLevel[skill.MasteryLevel] === 'A' && (\n \n \n {t(\n 'proficiency-report:studentReportSide.skill',\n 'Skill'\n )}{' '}\n {index + 1}\n \n
\n \n ))}\n \n \n ))}\n \n );\n};\n\nexport default StudentReport;\n","import styled from 'styled-components';\n\nexport const ToggleReportStyle = styled.div``;\n\nexport const ReportButton = styled.button`\n background: #ffffff;\n border: 0.5px solid #c4c4c4;\n color: #c4c4c4;\n padding: 8px 15px;\n border-radius: ${props =>\n props.proficiency ? '2px 0 0 2px' : '0 2px 2px 0'};\n border-width: ${props => props.high && '0.5px 0.5px 0.5px 0'};\n\n ${({ active }) =>\n active &&\n `\n background: #FFF3EC;\n color: #FF5B00;\n `}\n`;\n","import React, { memo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { toggleReport } from 'stores/report/actions';\nimport { ToggleReportStyle, ReportButton } from './ToggleReport.style';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\n\nconst ToggleReport = ({ studentID }) => {\n const { t } = useTranslation(['proficiency-report']);\n const { activeToggle } = useSelector(state => state.reports);\n const dispatch = useDispatch();\n const history = useHistory();\n\n const onToggle = val => {\n dispatch(toggleReport(val));\n if (val === 'high') {\n history.push(`/report/class-report/high-score-report/${studentID}`);\n } else {\n history.push(`/report/proficiency-report/${studentID}`);\n }\n };\n\n return (\n \n onToggle('proficiency')}\n >\n {t(\n `proficiency-report:sidebar.proficiencyReport`,\n 'Proficiency Report'\n )}\n \n onToggle('high')}\n >\n {t(`proficiency-report:sidebar.highScoreReport`, 'High Score Report')}\n \n \n );\n};\n\nexport default memo(ToggleReport);\n","import styled from 'styled-components';\nimport { proficiencyColors } from 'constants/index';\n\nexport const StudentReportPage = styled.div`\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media (max-width: 639px) {\n padding-left: 0;\n }\n .error {\n width: 100%;\n text-align: center;\n margin-top: 2rem;\n }\n`;\n\nexport const Header = styled.div`\n background: white;\n position: fixed;\n width: calc(100vw - 195px);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0.5rem 1rem;\n box-shadow: 0 3px 6px rgba(129, 129, 129, 0.16);\n z-index: 10;\n .back-button {\n color: #545454;\n cursor: pointer;\n flex: 1.5;\n /* flex-basis: 45%; */\n &:hover {\n color: #ff5b00;\n }\n }\n .student-details {\n font-size: 1rem;\n color: #363636;\n flex: 1;\n }\n\n .skill-detail {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n }\n @media (max-width: 1024px) {\n width: calc(100vw - 56px);\n }\n @media (max-width: 639px) {\n width: 100vw;\n }\n`;\n\nexport const Content = styled.div`\n background: #fbfbfb;\n width: ${props =>\n props.showSkillDetails ? 'calc(100vw - 555px)' : 'calc(100vw - 195px)'};\n position: relative;\n top: 4rem;\n bottom: 0;\n overflow-y: scroll;\n overflow-x: hidden;\n @media (max-width: 1024px) {\n width: ${props =>\n props.showSkillDetails ? 'calc(100vw - 385px)' : 'calc(100vw - 56px)'};\n }\n @media (max-width: 639px) {\n width: ${props =>\n props.showSkillDetails ? 'calc(100vw - 329px)' : '100vw'};\n }\n .section-container {\n font-size: 0.75rem;\n padding: 1.5rem 3rem 1rem 3rem;\n border-bottom: solid 1px #e9e9e9;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n flex-direction: column;\n .report-level-dropdown {\n margin-right: 1rem;\n margin-bottom: 0.5rem;\n span {\n width: 120px;\n }\n }\n .report-level-dropdown,\n .syllabus-dropdown {\n display: flex;\n }\n @media screen and (max-width: 895px) {\n padding: 1rem 0 1rem 0.5rem;\n }\n }\n .skills-section {\n display: flex;\n margin: 10px 0;\n @media (max-width: 1366px) {\n margin-top: 11px;\n }\n }\n .legend-section {\n display: flex;\n align-items: center;\n font-family: 'Muli', 'sans-serif';\n margin-bottom: 10px;\n .ratings-category {\n display: flex;\n align-items: center;\n font-weight: bold;\n font-size: 12px;\n margin-right: 20px;\n img {\n width: 13px;\n margin-right: 3px;\n }\n .sub-text {\n color: #afacac;\n font-size: 11px;\n margin-left: 3px;\n font-weight: normal;\n }\n }\n }\n\n .dropdown-section {\n display: flex;\n margin-left: ${props =>\n props.showSkillDetails\n ? props.type === 'proficiency'\n ? '0px'\n : '15px'\n : '0px'};\n margin-top: ${props => (props.showSkillDetails ? '15px' : '0px')};\n @media (max-width: 1024px) {\n margin-top: 15px;\n }\n }\n .dropdown-item:active {\n color: #212529;\n background-color: transparent;\n }\n .dropdown-label {\n margin-top: 10px;\n }\n .dropdown-select-syllabus {\n width: 300px;\n margin-left: 10px;\n border: 1px solid rgba(112, 112, 112, 0.48);\n background-color: #ffffff;\n font-size: 14px;\n text-align: left;\n span {\n display: inline-block;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 93%;\n }\n :after {\n bottom: 4px;\n }\n @media (max-width: 1024px) {\n font-size: 12px;\n width: 280px;\n }\n }\n .dropdown-custom {\n width: 75px;\n margin-left: 10px;\n border: 1px solid rgba(112, 112, 112, 0.48);\n background-color: #ffffff;\n font-size: 14px;\n text-align: left;\n @media (max-width: 1024px) {\n font-size: 12px;\n }\n }\n .dropdown-toggle::after {\n position: relative;\n left: 10px;\n @media (max-width: 744px) {\n left: 3px;\n width: 6px;\n vertical-align: 1px;\n }\n }\n`;\n\nexport const ProficiencySkills = styled.div`\n display: flex;\n margin-right: 15px;\n .icon {\n width: 7px;\n height: 7px;\n margin-top: 5px;\n background: ${props => proficiencyColors[props.proficiency].color};\n border-radius: 50%;\n border: solid 1px\n ${props => proficiencyColors[props.proficiency].borderColor};\n }\n span {\n font-size: 12px;\n color: #363636;\n margin-left: 5px;\n }\n .prof-descricption {\n font-size: 10px;\n display: flex;\n align-items: flex-end;\n color: #727272;\n margin-right: 15px;\n }\n @media screen and (max-width: 895px) {\n margin-right: 0 !important;\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { Dropdown } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { isEmpty, isNil } from 'ramda';\nimport {\n fetchStudentProficiencyReportRequest,\n setReportLevel,\n setSyllabus\n} from 'stores/report/actions';\nimport { fetchUserCurriculumsRequest } from 'stores/curriculums/actions';\nimport Spinner from 'components/Shared/Spinner';\nimport SkillDetails from 'components/Report/SkillDetails';\nimport StudentReport from 'components/Report/StudentReport';\nimport ToggleReport from 'components/Report/ToggleReport';\nimport avatarPlaceholder from 'assets/img/avatar.png';\nimport PrintIcon from 'assets/img/icon-report-print.svg';\nimport ArrowIcon from 'assets/img/icon-report-print-arrow.svg';\nimport GradeAIcon from 'assets/img/icon-report-high-score-a.svg';\nimport GradeBIcon from 'assets/img/icon-report-high-score-b.svg';\nimport GradeCIcon from 'assets/img/icon-report-high-score-c.svg';\nimport GradeDIcon from 'assets/img/icon-report-high-score-d.svg';\nimport { PrintButton } from 'components/Report/TopBar.styles';\nimport { featureToggle } from 'constants/index';\nimport {\n Header,\n Content,\n StudentReportPage\n} from './StudentHighScoreReport.styles.js';\n\nconst StudentHighScoreReport = ({ match }) => {\n const { t } = useTranslation(['proficiency-report']);\n const studentID = parseInt(match.params.studentID, 10);\n const history = useHistory();\n const dispatch = useDispatch();\n // Redux States\n const {\n studentProficiencyReport,\n isLoading,\n selectedClass,\n reportError,\n reportLevel,\n selectedSyllabus\n } = useSelector(state => state.reports);\n const { curriculums, error } = useSelector(state => state.curriculums);\n // Component States\n const [showSkillDetails, setShowSkillDetails] = useState(false);\n const [selectedSkill, setSelectedSkill] = useState(null);\n const [selectedSkillTopic, setSelectedSkillTopic] = useState(null);\n const [selectedSkillNumber, setSelectedSkillNumber] = useState(null);\n\n // const reportLevels = generateLevels();\n const isLeveless = isEmpty(selectedSyllabus.Levels);\n const levels = !isEmpty(selectedSyllabus.Levels)\n ? selectedSyllabus.Levels\n : [];\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const getLevel = syll => {\n const isSelectedLeveless = isEmpty(syll.Levels);\n const checkLevelAvailable =\n syll && syll.Levels.find(item => item.ID === reportLevel);\n if (!isSelectedLeveless) {\n if (isNil(checkLevelAvailable)) {\n return syll.Levels[0];\n // eslint-disable-next-line no-else-return\n } else {\n return reportLevel;\n }\n // eslint-disable-next-line no-else-return\n } else {\n return { ID: -1 };\n }\n };\n\n // UseEffect\n useEffect(() => {\n if (error !== '') {\n dispatch(fetchUserCurriculumsRequest());\n }\n }, [dispatch, error]);\n useEffect(() => {\n dispatch(\n fetchStudentProficiencyReportRequest({\n studentID,\n classID: selectedClass.ID,\n reportLevel: isLeveless ? -1 : reportLevel.ID,\n syllabusID: selectedSyllabus.CurriculumID\n })\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n dispatch,\n reportLevel,\n selectedClass.ID,\n selectedSyllabus,\n selectedSyllabus.CurriculumID,\n studentID\n ]);\n return (\n \n {isLoading && \n
{reportError} \n \n )}\n {!isLoading && studentProficiencyReport && (\n <>\n \n {\n history.push('/report/class-report/high-score-report');\n }}\n >\n {t(`proficiency-report:studentReport.back`, '< Back')}\n \n \n {\n e.target.src = avatarPlaceholder;\n }}\n alt=\"Student Profile\"\n border=\"0\"\n width=\"50px\"\n height=\"50px\"\n style={{\n marginRight: '0.5rem',\n borderRadius: '50%'\n }}\n />\n {studentProficiencyReport.Username} \n \n \n \n \n \n \n \n )}\n \n \n \n
\n
\n \n {' '}\n / 10\n {t(\n `proficiency-report:classReport.qnPerSkill`,\n ' Qn per skill'\n )}\n \n \n
\n \n {' '}\n / 10\n {t(\n `proficiency-report:classReport.qnPerSkill`,\n ' Qn per skill'\n )}\n \n \n
\n \n {' '}\n / 10\n {t(\n `proficiency-report:classReport.qnPerSkill`,\n ' Qn per skill'\n )}\n \n \n
\n \n {' '}\n / 10\n {t(\n `proficiency-report:classReport.qnPerSkill`,\n ' Qn per skill'\n )}\n \n \n
\n
\n {!isLeveless && (\n
\n \n {t(\n `proficiency-report:header.reportLevel`,\n 'Report Level from'\n )}\n \n \n \n {`P${reportLevel.ID}`}\n \n \n {levels.map(level => (\n {\n dispatch(setReportLevel(level));\n setShowSkillDetails(false);\n }}\n >\n {`P${level.ID}`}\n \n ))}\n \n \n
\n )}\n\n
\n \n {t(`proficiency-report:header.syllabus`, 'Syllabus')}\n \n \n \n {selectedSyllabus.curriculumName} \n \n \n {curriculums.map(syl => (\n {\n dispatch(setSyllabus(syl));\n dispatch(setReportLevel(getLevel(syl)));\n setShowSkillDetails(false);\n }}\n >\n {syl.curriculumName}\n \n ))}\n \n \n
\n
\n
\n \n )}\n {showSkillDetails && (\n \n );\n};\n\nexport default StudentHighScoreReport;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { Dropdown } from 'react-bootstrap';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { isEmpty, isNil } from 'ramda';\nimport Spinner from 'components/Shared/Spinner';\nimport {\n fetchStudentProficiencyReportRequest,\n setReportLevel,\n setSyllabus\n} from 'stores/report/actions';\nimport { fetchUserCurriculumsRequest } from 'stores/curriculums/actions';\nimport SkillDetails from 'components/Report/SkillDetails';\nimport StudentReport from 'components/Report/StudentReport';\nimport ToggleReport from 'components/Report/ToggleReport';\nimport avatarPlaceholder from 'assets/img/avatar.png';\nimport PrintIcon from 'assets/img/icon-report-print.svg';\nimport ArrowIcon from 'assets/img/icon-report-print-arrow.svg';\nimport { PrintButton } from 'components/Report/TopBar.styles';\nimport { featureToggle } from 'constants/index';\nimport {\n Header,\n Content,\n ProficiencySkills,\n StudentReportPage\n} from './StudentHighScoreReport.styles';\n\nconst StudentProficiencyReport = ({ match }) => {\n const { t } = useTranslation(['proficiency-report']);\n const studentID = parseInt(match.params.studentID, 10);\n const history = useHistory();\n const dispatch = useDispatch();\n // Redux States\n const {\n studentProficiencyReport,\n isLoading,\n selectedClass,\n reportError,\n reportLevel,\n selectedSyllabus\n } = useSelector(state => state.reports);\n const { curriculums, error } = useSelector(state => state.curriculums);\n // Component states\n const [showSkillDetails, setShowSkillDetails] = useState(false);\n const [selectedSkill, setSelectedSkill] = useState(null);\n const [selectedSkillTopic, setSelectedSkillTopic] = useState(null);\n const [selectedSkillNumber, setSelectedSkillNumber] = useState(null);\n\n // const reportLevels = generateLevels();\n const isLeveless = isEmpty(selectedSyllabus.Levels);\n const levels = !isEmpty(selectedSyllabus.Levels)\n ? selectedSyllabus.Levels\n : [];\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const getLevel = syll => {\n const isSelectedLeveless = isEmpty(syll.Levels);\n const checkLevelAvailable =\n syll && syll.Levels.find(item => item.ID === reportLevel);\n if (!isSelectedLeveless) {\n if (isNil(checkLevelAvailable)) {\n return syll.Levels[0];\n // eslint-disable-next-line no-else-return\n } else {\n return reportLevel;\n }\n // eslint-disable-next-line no-else-return\n } else {\n return { ID: -1 };\n }\n };\n\n useEffect(() => {\n if (error !== '') {\n dispatch(fetchUserCurriculumsRequest());\n }\n }, [dispatch, error]);\n useEffect(() => {\n dispatch(\n fetchStudentProficiencyReportRequest({\n studentID,\n classID: selectedClass.ID,\n reportLevel: isLeveless ? -1 : reportLevel.ID,\n syllabusID: selectedSyllabus.CurriculumID\n })\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n dispatch,\n reportLevel,\n selectedClass.ID,\n selectedSyllabus,\n selectedSyllabus.CurriculumID,\n studentID\n ]);\n return (\n \n {isLoading && \n
{reportError} \n \n )}\n {!isLoading && studentProficiencyReport && (\n <>\n \n {\n history.push('/report');\n }}\n >\n {t(`proficiency-report:studentReport.back`, '< Back')}\n \n \n {\n e.target.src = avatarPlaceholder;\n }}\n alt=\"Student Profile\"\n border=\"0\"\n width=\"50px\"\n height=\"50px\"\n style={{\n marginRight: '0.25rem',\n borderRadius: '50%'\n }}\n />\n {studentProficiencyReport.Username} \n \n \n \n \n \n \n \n )}\n \n \n \n
\n
\n
\n \n {t(`proficiency-report:legend.mastery`, 'Mastery')}\n \n \n {t(`proficiency-report:legend.proficiency`, 'Proficiency')}{' '}\n 80-100 \n \n \n
\n
\n \n {t(`proficiency-report:legend.competent`, 'Competent')}\n \n \n {t(`proficiency-report:legend.proficiency`, 'Proficiency')}{' '}\n 60-79 \n \n \n
\n
\n \n {t(`proficiency-report:legend.beginning`, 'Beginning')}\n \n \n {t(`proficiency-report:legend.proficiency`, 'Proficiency')}{' '}\n 0-59 \n \n \n
\n
\n \n {t(`proficiency-report:legend.incomplete`, 'Incomplete')}\n \n \n {t(`proficiency-report:legend.question`, 'Question')} <\n 10 \n \n \n
\n
\n {!isLeveless && (\n
\n
\n {t(\n `proficiency-report:header.reportLevel`,\n 'Report Level from'\n )}\n
\n
\n \n {`P${reportLevel.ID}`}\n \n \n {levels.map(level => (\n {\n dispatch(setReportLevel(level));\n setShowSkillDetails(false);\n }}\n >\n {`P${level.ID}`}\n \n ))}\n \n \n
\n )}\n
\n
\n {t(`proficiency-report:header.syllabus`, 'Syllabus')}\n
\n
\n \n {selectedSyllabus.curriculumName} \n \n \n {curriculums.map(syl => (\n {\n dispatch(setSyllabus(syl));\n dispatch(setReportLevel(getLevel(syl)));\n setShowSkillDetails(false);\n }}\n >\n {syl.curriculumName}\n \n ))}\n \n \n
\n
\n
\n \n )}\n {showSkillDetails && (\n \n );\n};\n\nexport default StudentProficiencyReport;\n","import React from 'react';\nimport moment from 'moment';\n\nimport LoginIcon from 'assets/img/icon-login-report-login-pdf.png';\nimport NotLoginIcon from '../../assets/img/icon-login-report-not-login-pdf.png';\nimport NotLoginYetIcon from 'assets/img/icon-login-report-login-not-active-pdf.png';\n\nimport Muli from 'assets/fonts/Muli.ttf';\nimport MuliB from 'assets/fonts/MuliB.ttf';\n\nimport {\n Page,\n Text,\n Document,\n StyleSheet,\n Image,\n View,\n Font\n} from '@react-pdf/renderer';\n\nconst LoginReportPDF = ({\n data,\n weekId,\n selectedLevel,\n selectedClass,\n date\n}) => {\n Font.register({\n family: 'Muli',\n fonts: [{ src: Muli }, { src: MuliB, fontWeight: 700 }]\n });\n\n const styles = StyleSheet.create({\n body: {\n paddingHorizontal: '35px',\n fontFamily: 'Muli'\n },\n title: {\n fontSize: 14,\n textAlign: 'center',\n color: '#FF5B00',\n fontWeight: 700,\n marginTop: '35px'\n },\n category: {\n fontSize: 10,\n color: '#727272'\n },\n content: {\n fontSize: 12,\n color: '#363636',\n fontWeight: 700\n },\n items: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n marginTop: '20px',\n marginBottom: '20px'\n },\n table: {\n display: 'table',\n width: 'auto',\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: '#333',\n borderRightWidth: 0,\n borderBottomWidth: 0\n },\n tableRow: { margin: 'auto', flexDirection: 'row' },\n tableColHead: {\n width: '25%',\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: '#333',\n borderLeftWidth: 0,\n borderTopWidth: 0,\n backgroundColor: '#FFF2CF'\n },\n tableCol: {\n width: '25%',\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: '#333',\n borderLeftWidth: 0,\n borderTopWidth: 0\n },\n tableColDaysHead: {\n width: '9.35%',\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: '#333',\n borderLeftWidth: 0,\n borderTopWidth: 0,\n backgroundColor: '#FFF2CF'\n },\n tableColDays: {\n width: '9.37%',\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: '#333',\n borderLeftWidth: 0,\n borderTopWidth: 0\n },\n tableCell: {\n margin: 'auto',\n marginTop: 5,\n marginBottom: 5,\n fontSize: 10,\n color: '#545454',\n fontWeight: 700\n },\n tableCellHead: {\n margin: 'auto',\n marginTop: 10,\n marginBottom: 5,\n fontSize: 10,\n color: '#545454'\n },\n tableCellDay: {\n margin: 'auto',\n marginTop: 5,\n fontSize: 10,\n color: '#FF5B00',\n textTransform: 'uppercase'\n },\n tableCellDate: {\n margin: 'auto',\n marginBottom: 5,\n fontSize: 10,\n color: '#FF5B00'\n },\n tableCellStu: {\n margin: 5,\n fontSize: 10,\n textAlign: 'left',\n color: '#363636',\n fontWeight: 700\n },\n pageNumber: {\n fontFamily: 'Muli',\n borderStyle: 'solid',\n borderWidth: 1,\n borderLeftWidth: 0,\n borderTopWidth: 0,\n textAlign: 'center',\n borderColor: '#333',\n fontSize: 10\n }\n });\n\n const icon = day => {\n if (day === 1) {\n return \n \n \n Login Report\n \n \n \n Level \n {`Primary ${selectedLevel}`} \n \n \n Class \n {selectedClass} \n \n \n Date \n {date} \n \n \n {/* Table */}\n \n \n \n Student Name \n \n \n Total \n \n {days.map(day => (\n \n \n {moment(day).format('ddd')}\n \n \n {moment(day)\n .subtract(weekId * 7, 'days')\n .format('DD/MM')}\n \n \n ))}\n \n {data &&\n data.map(item => (\n \n \n {item.Name} \n \n \n {item.Total} \n \n {item.LoginStatus.map(status => (\n \n {icon(status)} \n \n ))}\n \n ))}\n \n `${pageNumber} / ${totalPages}`\n }\n fixed\n />\n \n \n \n );\n};\n\nexport default LoginReportPDF;\n","import styled from 'styled-components';\n\nexport const LoginReportTableStyle = styled.div`\n margin: 0 30px 30px;\n .empty-result {\n display: flex;\n justify-content: center;\n margin-top 100px;\n }\n .table {\n vertical-align: middle;\n text-align: center;\n border: 1px solid #e9e9e9;\n thead {\n position:sticky;\n top: 215px;\n @media (max-width: 882px) {\n top: 200px;\n }\n @media (max-width: 768px) {\n top: 215px;\n }\n @media (max-width: 767px) {\n top: 0;\n }\n }\n .date {\n width: 100px;\n text-transform: uppercase;\n color: #ff5b00;\n font-weight: normal;\n padding: 0.5rem;\n }\n .student,\n .total {\n color: #000000;\n font-weight: normal;\n padding: 0.5rem;\n\n }\n .student {\n text-align: left;\n padding-left: 30px;\n @media (max-width: 1024px) {\n width: 500px;\n }\n }\n .total {\n width: 100px;\n }\n thead {\n background-color: #fff2cf;\n font-size: 16px;\n th {\n vertical-align: middle;\n }\n }\n tbody {\n tr:nth-child(odd) {\n background-color: #ffffff;\n }\n tr:nth-child(even) {\n background-color: #f8f8f8;\n }\n td {\n vertical-align: middle;\n text-align: center;\n }\n }\n .student-name {\n display: flex;\n align-items: center;\n border-top: none;\n padding-left: 30px;\n text-align: left;\n img {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n }\n span {\n font-weight: bold;\n font-size: 14px;\n margin-left: 15px;\n color: #363636;\n }\n }\n .total-number {\n color: #545454;\n font-weight: bold;\n }\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport moment from 'moment';\nimport Avatar from 'assets/img/avatar.png';\nimport LoginIcon from 'assets/img/icon-login-report-active.svg';\nimport NotLoginIcon from 'assets/img/icon-login-report-not-login.svg';\nimport NotLoginYetIcon from 'assets/img/icon-login-report-not-active.svg';\nimport EmptyResult from 'assets/img/empty-search-results.svg';\nimport { LoginReportTableStyle } from './LoginReportTable.styles';\n\nconst LoginReportTable = ({ data, weekId, weekItems }) => {\n // login report status icon\n const { t } = useTranslation(['login-report']);\n const Login = \n {data && data.length === 0 ? (\n \n
\n
\n \n \n \n {t(`login-report:report.studName`, 'Student Name')}\n \n \n {t(`login-report:report.total`, 'Total')}\n \n {days &&\n days.map((day, index) => (\n \n {t(\n `login-report:report.${day.format('ddd')}`,\n day.format('ddd')\n )}{' '}\n {day.format('D')}\n \n ))}\n \n \n \n {data &&\n data.map((item, index) => (\n \n \n {\n e.target.src = Avatar;\n }}\n src={item.ProfileImage}\n alt=\"avatar\"\n />\n {item.Name} \n \n {item.Total} \n {item.LoginStatus.map((status, index) => (\n {icon(status)} \n ))}\n \n ))}\n \n
\n )}\n \n );\n};\n\nexport default LoginReportTable;\n","import styled from 'styled-components';\n\nexport const LoginReportContainer = styled.div`\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media (max-width: 639px) {\n padding-left: 0px;\n }\n .top-bar {\n display: flex;\n flex-direction: column;\n background: white;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161);\n position: sticky;\n right: 0;\n left: 195px;\n z-index: 100;\n top: 53px;\n @media (max-width: 1024px) {\n left: 56px;\n }\n @media (max-width: 639px) {\n left: 0px;\n }\n .title {\n text-align: center;\n margin: 25px 0px 10px;\n font-weight: bold;\n font-size: 16px;\n line-height: 20px;\n color: #202020;\n }\n .top-bar-content {\n display: flex;\n justify-content: space-between;\n padding: 0px 40px;\n margin-bottom: 5px;\n align-items: baseline;\n @media (max-width: 1038px) {\n padding: 0px 20px;\n }\n .dropdown-section {\n display: flex;\n .dropdown-label {\n margin-top: 5px;\n @media (max-width: 1038px) {\n margin-top: 8px;\n }\n }\n .dropdown-custom {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n width: 160px;\n margin-left: 10px;\n border: 1px solid rgba(112, 112, 112, 0.48);\n background-color: #ffffff;\n font-size: 14px;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n @media (max-width: 882px) {\n font-size: 12px;\n width: 120px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n width: 110px;\n }\n }\n .level {\n width: 75px;\n }\n .class {\n width: 190px;\n }\n }\n .weekly-date-section {\n display: flex;\n margin-right: 200px;\n @media (max-width: 1375px) {\n margin-right: 300px;\n }\n @media (max-width: 1300px) {\n margin-right: 100px;\n }\n @media (max-width: 1000px) {\n margin-right: 0;\n }\n .nav-btn {\n border: none;\n background: none;\n margin: 0px 5px;\n &:hover {\n color: #ff5b00;\n }\n }\n .nav-btn:disabled {\n color: #d8d8d8;\n }\n .week,\n .date {\n margin-block-start: 1em;\n margin-block-end: 1em;\n border: 0.5px solid #c4c4c4;\n border-radius: 2px;\n padding: 8px 15px;\n }\n .week {\n border-bottom-right-radius: 0px;\n border-top-right-radius: 0px;\n font-size: 16px;\n color: #545454;\n @media (max-width: 882px) {\n font-size: 12px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n }\n }\n .date {\n border-left: none;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n font-weight: 600;\n font-size: 16px;\n color: #ff5b00;\n @media (max-width: 882px) {\n font-size: 12px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n }\n }\n }\n .action-button {\n button {\n padding: 10px;\n background: none;\n border: 0.5px solid #c4c4c4;\n box-sizing: border-box;\n border-radius: 2px;\n color: #545454;\n &:hover {\n color: #ff5b00;\n }\n @media (max-width: 882px) {\n font-size: 12px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n }\n }\n span {\n margin-right: 10px;\n color: #545454;\n &:hover {\n color: #ff5b00;\n }\n img {\n @media (max-width: 882px) {\n width: 18px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n }\n }\n }\n }\n }\n }\n`;\n\nexport const SeparationBar = styled.div`\n height: 30px;\n width: 100%;\n position: sticky;\n z-index: 99;\n background: #f1f1f1;\n top: 186px;\n box-shadow: inset 0px 0px -3px 6px rgba(0, 0, 0, 0.161);\n @media (max-width: 882px) {\n top: 172px;\n }\n @media (max-width: 768px) {\n top: 186px;\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { fetchClassRequest } from 'stores/utils/lookup/actions';\nimport { Dropdown } from 'react-bootstrap';\nimport moment from 'moment';\nimport PrintIcon from 'assets/img/print-icon.svg';\nimport { PDFDownloadLink } from '@react-pdf/renderer';\nimport LoginReportPDF from 'components/Report/LoginReportPDF';\nimport LoginReportTable from 'components/Report/LoginReportTable';\nimport generateLevels from 'helpers/reportLevels';\nimport Spinner from 'components/Shared/Spinner';\nimport {\n fetchLoginReportRequest,\n fetchWeekItemsRequest,\n setSelectedClass,\n setClassLevel\n} from 'stores/report/actions';\nimport useDeepCompareEffect from 'use-deep-compare-effect';\nimport { LoginReportContainer, SeparationBar } from './LoginReport.styles';\n\nconst LoginReport = () => {\n const { t } = useTranslation(['login-report']);\n const dispatch = useDispatch();\n // Redux States\n const {\n loginReport,\n weekItems,\n selectedClass,\n selectedClassLevel,\n isLoading\n } = useSelector(state => state.reports);\n const { classes } = useSelector(state => state.lookup);\n const reportLevels = generateLevels();\n const [weekId, setWeekId] = useState(0);\n\n // Filter out only classes of type 1\n const filteredClasses =\n classes.length > 0\n ? classes.filter(classObject => classObject.Type === 1)\n : [];\n\n useEffect(() => {\n dispatch(fetchClassRequest(selectedClassLevel));\n }, [dispatch, selectedClassLevel]);\n\n useEffect(() => {\n dispatch(fetchWeekItemsRequest({ numberOfPreviousWeek: 3 }));\n }, [dispatch]);\n\n useDeepCompareEffect(() => {\n if (selectedClass) {\n dispatch(\n fetchLoginReportRequest({\n classID: selectedClass && selectedClass.ID,\n weekID: weekId\n })\n );\n }\n }, [dispatch, selectedClass, weekId]);\n\n return (\n \n \n
\n {t(`login-report:header.loginReport`, 'Login Report')}\n
\n
\n
\n
\n {t(`login-report:header.class`, 'Class')}\n
\n
\n \n {`P${selectedClassLevel}`}\n \n \n {reportLevels.map(level => (\n {\n dispatch(setClassLevel(level));\n }}\n >{`P${level}`}\n ))}\n \n \n
\n \n {selectedClass && selectedClass.Name ? selectedClass.Name : '-'}\n \n \n {filteredClasses.map(item => (\n {\n event.preventDefault();\n dispatch(setSelectedClass(item));\n }}\n >\n {item.Name}\n \n ))}\n \n \n
\n
\n
{\n setWeekId(weekId + 1);\n }}\n >{`<`}\n {`${t(`login-report:header.week`, 'Week')} ${\n weekItems\n ? moment(\n weekItems[weekId].Display.split(' - ')[1],\n 'DD MMM YYYY'\n ).isoWeek()\n : ''\n }`}
\n \n {isLoading\n ? 'Loading...'\n : weekItems && weekItems[weekId].Display}\n
\n {\n setWeekId(weekId - 1);\n }}\n >{`>`}\n \n {!isLoading && (\n
\n }\n fileName={`KooBits Login Report - ${weekItems &&\n weekItems[weekId].Display} - ${selectedClass &&\n selectedClass.Name}.pdf`}\n >\n
\n
\n \n \n {t(`login-report:header.print`, 'Print')}\n \n
\n \n )}\n
\n
\n
\n ) : (\n weekItems && (\n \n );\n};\n\nexport default LoginReport;\n","import styled from 'styled-components';\n\nexport const MonthlyReportStyle = styled.div`\n background-color: #ffffff;\n display: grid;\n grid-template-columns: repeat(6, 120px);\n grid-column-gap: 71px;\n grid-row-gap: 51px;\n padding: 47px 114px;\n justify-content: center;\n margin: 100px 38px 50px 38px;\n @media (max-width: 1450px) {\n grid-template-columns: repeat(4, 120px);\n grid-column-gap: 50px;\n padding: 47px 80px;\n }\n @media (max-width: 850px) {\n grid-template-columns: repeat(3, 120px);\n grid-column-gap: 50px;\n padding: 47px 60px;\n }\n .monthlyContainer {\n align-self: flex-start;\n border: none;\n background-color: transparent;\n }\n .reportName {\n font-size: 12px;\n }\n .monthlyImage {\n width: 78px;\n height: 78px;\n margin-bottom: 17px;\n }\n .available {\n text-align: center;\n margin-top: -15px;\n color: #f79a41;\n font-size: 12px;\n }\n`;\n","import React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { useDispatch } from 'react-redux';\nimport { nextStep } from 'stores/utils/step/actions';\nimport { MonthlyReportStyle } from './MonthlyReport.styles';\n\nconst images = {\n ava_1: require('assets/img/report/report_icon_1.png'),\n ava_2: require('assets/img/report/report_icon_2.png'),\n ava_3: require('assets/img/report/report_icon_3.png'),\n ava_4: require('assets/img/report/report_icon_4.png'),\n ava_5: require('assets/img/report/report_icon_5.png'),\n ava_6: require('assets/img/report/report_icon_6.png'),\n ava_7: require('assets/img/report/report_icon_7.png'),\n ava_8: require('assets/img/report/report_icon_8.png'),\n ava_9: require('assets/img/report/report_icon_9.png'),\n ava_10: require('assets/img/report/report_icon_10.png'),\n ava_11: require('assets/img/report/report_icon_11.png'),\n ava_12: require('assets/img/report/report_icon_12.png'),\n no_1: require('assets/img/report/report_icon_no_1.png'),\n no_2: require('assets/img/report/report_icon_no_2.png'),\n no_3: require('assets/img/report/report_icon_no_3.png'),\n no_4: require('assets/img/report/report_icon_no_4.png'),\n no_5: require('assets/img/report/report_icon_no_5.png'),\n no_6: require('assets/img/report/report_icon_no_6.png'),\n no_7: require('assets/img/report/report_icon_no_7.png'),\n no_8: require('assets/img/report/report_icon_no_8.png'),\n no_9: require('assets/img/report/report_icon_no_9.png'),\n no_10: require('assets/img/report/report_icon_no_10.png'),\n no_11: require('assets/img/report/report_icon_no_11.png'),\n no_12: require('assets/img/report/report_icon_no_12.png')\n};\nconst MONTHLY = {\n 1: { name: 'Jan' },\n 2: { name: 'Feb' },\n 3: { name: 'Mar' },\n 4: { name: 'Apr' },\n 5: { name: 'May' },\n 6: { name: 'Jun' },\n 7: { name: 'Jul' },\n 8: { name: 'Aug' },\n 9: { name: 'Sep' },\n 10: { name: 'Oct' },\n 11: { name: 'Nov' },\n 12: { name: 'Dec' }\n};\n\nconst MonthlyReport = props => {\n const { data } = props;\n const { t } = useTranslation(['monthly-report']);\n const history = useHistory();\n const dispatch = useDispatch();\n\n const handlePress = useCallback(\n e => () => {\n dispatch(nextStep());\n history.push(\n `/report/teacherreport/monthlyreport?year=${e.Year}&month=${e.Month}`\n );\n },\n [dispatch, history]\n );\n return (\n \n {data &&\n data.map((e, index) => {\n return (\n \n {e.Month === index + 1 && (\n \n {t(\n `monthly-report:report.titleReport`,\n {\n month: t(`monthly-report:month.${MONTHLY[e.Month].name}`)\n },\n `${MONTHLY[e.Month].name} Report`\n )}\n
\n {e.IsAvailable && (\n \n {t(`monthly-report:report.Available`, 'Available')}\n
\n )}\n \n );\n })}\n \n );\n};\nexport default MonthlyReport;\n","import styled from 'styled-components';\n\nexport const MonthlyActivity = styled.div`\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media (max-width: 639px) {\n padding-left: 0px;\n }\n .top-bar {\n display: flex;\n background: #ffffff;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161);\n position: fixed;\n right: 0;\n left: 195px;\n z-index: 100;\n justify-content: center;\n top: 53px;\n @media (max-width: 1024px) {\n left: 56px;\n }\n @media (max-width: 639px) {\n left: 0px;\n }\n .title {\n margin: 20px 30px 20px 0px;\n font-size: 20px;\n }\n .dropdown-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n .dropdown-label {\n margin-top: 15px;\n font-size: 13px;\n font-weight: 600;\n }\n .dropdown-custom {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n width: 75px;\n margin-left: 10px;\n border: 1px solid rgba(112, 112, 112, 0.48);\n background-color: #ffffff;\n font-size: 14px;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n @media (max-width: 882px) {\n font-size: 12px;\n width: 120px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n width: 110px;\n }\n }\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Dropdown } from 'react-bootstrap';\nimport MonthlyReport from 'components/Report/MonthlyReport';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { fetchTeacherReportMonthRequest } from 'stores/report/actions';\nimport Spinner from 'components/Shared/Spinner';\nimport moment from 'moment';\nimport { MonthlyActivity } from './TeacherMonthlyReport.styles';\n\nconst years = () => {\n const dataYears = [];\n const dateStart = moment().subtract(1, 'y');\n const dateEnd = moment();\n while (dateEnd.diff(dateStart, 'years') >= 0) {\n dataYears.push(dateStart.format('YYYY'));\n dateStart.add(1, 'year');\n }\n return dataYears.reverse();\n};\n\nconst TeacherMonthlyReport = () => {\n const { t } = useTranslation(['monthly-report']);\n const [yearSelected, setYearSelected] = useState(new Date().getFullYear());\n const dispatch = useDispatch();\n\n const { isLoading, teacherMonthReport } = useSelector(state => state.reports);\n\n useEffect(() => {\n dispatch(fetchTeacherReportMonthRequest(yearSelected));\n }, [dispatch, yearSelected]);\n\n return (\n \n \n
\n {t(`monthly-report:header.monthlyReport`, 'Monthly Report')}\n
\n
\n
\n {t(`monthly-report:header.year`, 'Year')}\n
\n
\n \n {yearSelected}\n \n \n {years().map(e => (\n setYearSelected(e)}>\n {e}\n \n ))}\n \n \n
\n
\n );\n};\n\nexport default TeacherMonthlyReport;\n","import styled from 'styled-components';\n\n// eslint-disable-next-line import/prefer-default-export\nexport const MonthlyReportChartStyle = styled.div`\n .printChart {\n background-color: #000;\n }\n background-color: #ffffff;\n padding: 30px 100px;\n display: block;\n text-align: center;\n margin: 80px 150px 50px 150px;\n @page {\n margin: 20mm 20mm 20mm 0mm;\n }\n @media (max-width: 1400px) {\n margin: 80px 80px 50px 80px;\n padding: 30px 80px;\n }\n @media (max-width: 900px) {\n margin: 80px 50px 50px 50px;\n padding: 30px 50px;\n }\n .koobitsTitle {\n font-size: 36px;\n color: #4a4a4a;\n align-self: center;\n }\n .monthlyText {\n font-size: 26px;\n color: #e26717;\n align-self: center;\n }\n .reportContainer {\n height: 300px;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n align-items: center;\n margin-bottom: 30px;\n display: -webkit-box;\n -webkit-box-orient: block-axis;\n -webkit-box-lines: multiple;\n @media (max-width: 1450px) {\n height: 400px;\n }\n @media (max-width: 1300px) {\n height: auto;\n }\n }\n .renderReport {\n display: flex;\n margin: 10px 0px;\n width: 500px;\n @media (max-width: 1650px) {\n width: 400px;\n }\n @media (max-width: 1450px) {\n width: 300px;\n }\n @media (max-width: 1300px) {\n width: 500px;\n }\n @media (max-width: 1200px) {\n width: 400px;\n }\n @media (max-width: 900px) {\n width: 350px;\n }\n }\n .reportName {\n font-size: 22px;\n margin-left: 10px;\n }\n .number {\n min-width: 23px;\n max-width: 23px;\n height: 23px;\n background-color: #424242;\n color: white;\n border: 1px solid #424242;\n border-radius: 1000px;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 4px;\n }\n .renderLevel {\n display: grid;\n grid-template-columns: repeat(3, 80px);\n grid-column-gap: 30px;\n grid-row-gap: 20px;\n }\n .levelButton {\n border: none;\n background-color: transparent;\n }\n .levelText {\n color: #337ab7;\n font-size: 14px;\n }\n .reportNameChart {\n display: flex;\n justify-content: center;\n margin-bottom: 10px;\n }\n .levelChartName {\n display: flex;\n justify-content: center;\n font-size: 14px;\n color: #333;\n }\n .chart {\n margin: 30px 0px;\n }\n .chartReportContainer {\n text-align: center;\n }\n`;\n","import { isNil } from 'ramda';\nimport React, { useEffect, useCallback, useState } from 'react';\nimport { Bar, PolarArea } from 'react-chartjs-2';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport { MonthlyReportChartStyle } from './MonthlyReportChart.styles';\n\nconst MonthlyReportChart = props => {\n const { isLoading, classes } = useSelector(state => state.manageClasses);\n const { data, reportName } = props;\n const [barChart, setBarChart] = useState(null);\n const [polarChart, setPolarChart] = useState(null);\n const [horizontalChart, setHorizontalChart] = useState([]);\n const [tiltedChart, setTiltedChart] = useState([]);\n\n const { t } = useTranslation(['monthly-report']);\n const monthName = t(\n `monthly-report:month.${reportName.ReportName.slice(0, 3)}`,\n reportName.ReportName.slice(0, 3)\n );\n const handleClick = useCallback(\n (index, levelIndex) => () => {\n document\n .getElementById(`refPrimary_${index}_${levelIndex}`)\n .scrollIntoView();\n },\n []\n );\n\n const bar = useCallback(() => {\n const totalLoginData =\n data &&\n data.totalPercentLoginByMonthReportData.data.map(d => d.totallogindata);\n const loginPercentageData =\n data &&\n data.totalPercentLoginByMonthReportData.data.map(\n d => d.loginpercentageData\n );\n const chartData = {\n labels: [\n t('monthly-report:longMonths.January', 'January'),\n t('monthly-report:longMonths.February', 'February'),\n t('monthly-report:longMonths.March', 'March'),\n t('monthly-report:longMonths.April', 'April'),\n t('monthly-report:longMonths.May', 'May'),\n t('monthly-report:longMonths.June', 'June'),\n t('monthly-report:longMonths.July', 'July'),\n t('monthly-report:longMonths.August', 'August'),\n t('monthly-report:longMonths.September', 'September'),\n t('monthly-report:longMonths.October', 'October'),\n t('monthly-report:longMonths.November', 'November'),\n t('monthly-report:longMonths.December', 'December')\n ],\n datasets: [\n {\n type: 'line',\n label: t(\n 'monthly-report:SpecificMonthlyReport.loginPercentage',\n 'Login Percentage (%)'\n ),\n data: loginPercentageData,\n borderWidth: 2,\n borderColor: '#0D97E5',\n fill: true,\n yAxisID: 'yAxisLine',\n lineTension: 0.5\n },\n {\n type: 'bar',\n label: t(\n 'monthly-report:SpecificMonthlyReport.totalLogin',\n 'Total Login'\n ),\n data: totalLoginData,\n backgroundColor: '#ff6384',\n yAxisID: 'yAxisBar'\n }\n ]\n };\n setBarChart(chartData);\n }, [data, t]);\n\n const polar = useCallback(() => {\n const percentage =\n data &&\n data.loginComparisionByLevelReportData.data.map(d => d.percentage);\n const chartData = {\n labels: ['P1 (%)', 'P2 (%)', 'P3 (%)', 'P4 (%)', 'P5 (%)', 'P6 (%)'],\n datasets: [\n {\n data: percentage,\n label: 'Login % By Level',\n backgroundColor: [\n 'rgba(255,136,193,0.5)',\n 'rgba(255,203,158,0.5)',\n 'rgba(255,232,169,0.5)',\n 'rgba(127,227,223,0.5)',\n 'rgba(127,205,245,0.5)',\n 'rgba(219,127,255,0.5)'\n ],\n borderWidth: 1\n }\n ]\n };\n setPolarChart(chartData);\n }, [data]);\n\n const horizontalBar = useCallback(() => {\n const temp = data && data.loginComparisionByLevelAndClassReportData.data;\n const percentage = temp.map(e =>\n !isNil(e.classes) ? e.classes.map(e => e.percentage) : []\n );\n const label = temp.map(e =>\n !isNil(e.classes) ? e.classes.map(e => e.className) : []\n );\n const chartData = [];\n temp.forEach((e, i) => {\n chartData[i] = {\n labels: label[i],\n datasets: [\n {\n data: percentage[i],\n label: t(\n 'monthly-report:SpecificMonthlyReport.loginPercentage',\n 'Login Percentage (%)'\n ),\n backgroundColor: 'rgba(255,136,193,0.5)',\n borderWidth: 1,\n yAxisID: 'yAxisBar'\n }\n ]\n };\n });\n setHorizontalChart(chartData);\n }, [data, t]);\n\n const tiltedBar = useCallback(() => {\n const temp =\n data && data.averageHomeworkQuestionsPerStudentPerclassReportData.data;\n const homeworkQuestionData = temp.map(e =>\n !isNil(e.classes) ? e.classes.map(e => e.homeworkQuestionData) : []\n );\n const SDLQuestionData = temp.map(e =>\n !isNil(e.classes) ? e.classes.map(e => e.sdlQuestionData) : []\n );\n const label = temp.map(e =>\n !isNil(e.classes) ? e.classes.map(e => e.className) : []\n );\n const chartData = [];\n temp.forEach((e, i) => {\n chartData[i] = {\n labels: label[i],\n datasets: [\n {\n data: homeworkQuestionData[i],\n label: t(\n 'monthly-report:SpecificMonthlyReport.averageHw',\n 'Average homework questions per student per class per month'\n ),\n backgroundColor: 'rgba(255,136,193,0.5)',\n borderWidth: 1\n },\n {\n data: SDLQuestionData[i],\n label: t(\n 'monthly-report:SpecificMonthlyReport.averageSelf',\n 'Average self-directed learning questions per student'\n ),\n backgroundColor: 'rgba(127,205,245,0.5)',\n borderWidth: 1\n }\n ]\n };\n });\n setTiltedChart(chartData);\n }, [data, t]);\n\n useEffect(() => {\n if (data) {\n bar();\n polar();\n horizontalBar();\n tiltedBar();\n }\n }, [data, bar, polar, horizontalBar, tiltedBar]);\n\n return (\n \n \n {!isLoading && classes !== null && (classes.Name || '')}\n
\n \n {t(\n `monthly-report:SpecificMonthlyReport.MonthlyReportTitle`,\n {\n month: monthName,\n year: reportName.Year\n },\n `Monthly Report - ${monthName} ${reportName.Year}`\n )}\n
\n \n {data &&\n Object.entries(data).map((e, index) => {\n if (index > 1) {\n return (\n
\n
{index - 1}
\n
\n
\n {t(\n `monthly-report:SpecificMonthlyReport.${e[1].reportName}`,\n `${e[1].reportName}`\n )}\n
\n
\n {!isNil(e[1].data) &&\n e[1].data.map((level, levelIndex) => {\n if (index > 3) {\n return (\n
\n \n {t(\n `monthly-report:SpecificMonthlyReport.${level.levelName}`,\n `${level.levelName}`\n )}\n
\n \n );\n }\n return null;\n })}\n \n
\n
\n );\n }\n return null;\n })}\n
\n {data &&\n Object.entries(data).map((e, index) => {\n if (index > 1) {\n return (\n
\n
\n
{index - 1}
\n
\n {t(\n `monthly-report:SpecificMonthlyReport.${e[1].reportName}`,\n `${e[1].reportName}`\n )}\n
\n
\n
\n {index - 2 === 0 ? (\n <>\n
\n
\n \n ) : null}\n {index - 2 === 1 ? (\n <>\n
\n
\n \n ) : null}\n {e[1].data.map((d, levelIndex) => {\n if (index - 2 === 2) {\n return (\n <>\n
\n \n {' '}\n {t(\n `monthly-report:SpecificMonthlyReport.${d.levelName}`,\n `${d.levelName}`\n )}\n
\n\n \n
\n \n );\n }\n if (index - 2 === 3) {\n return (\n <>\n
\n \n {' '}\n {t(\n `monthly-report:SpecificMonthlyReport.${d.levelName}`,\n `${d.levelName}`\n )}\n
\n \n
\n \n );\n }\n return null;\n })}\n
\n );\n};\nexport default MonthlyReportChart;\n","import styled from 'styled-components';\n\n// eslint-disable-next-line import/prefer-default-export\nexport const SpecificMonthlyReportStyle = styled.div`\n padding-left: 195px;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media (max-width: 639px) {\n padding-left: 0px;\n }\n .top-bar {\n display: flex;\n background: #ffffff;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161);\n position: fixed;\n right: 0;\n left: 195px;\n z-index: 100;\n justify-content: space-between;\n top: 53px;\n padding: 10px 100px 10px 50px;\n @media (max-width: 1024px) {\n left: 56px;\n }\n @media (max-width: 639px) {\n left: 0px;\n }\n .backButtonWrapper {\n align-self: center;\n }\n .headerRight {\n display: flex;\n }\n .dropdown-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n .dropdown-label {\n margin-top: 15px;\n font-size: 16pxpx;\n font-weight: 700;\n }\n .dropdown-custom {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n width: 100px;\n margin-left: 10px;\n border: 1px solid rgba(112, 112, 112, 0.48);\n background-color: #ffffff;\n font-size: 14px;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n @media (max-width: 882px) {\n font-size: 12px;\n width: 120px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n width: 110px;\n }\n }\n }\n .back-button {\n color: #545454;\n cursor: pointer;\n flex: 1.5;\n /* flex-basis: 45%; */\n &:hover {\n color: #ff5b00;\n }\n border: none;\n background-color: transparent;\n }\n .action-button {\n button {\n padding: 10px;\n margin-left: 30px;\n background: none;\n border: 1px solid rgba(112, 112, 112, 0.48);\n box-sizing: border-box;\n border-radius: 1px;\n color: #545454;\n &:hover {\n color: #ff5b00;\n }\n @media (max-width: 882px) {\n font-size: 12px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n }\n }\n .printIcon {\n margin-right: 10px;\n color: #545454;\n img {\n @media (max-width: 882px) {\n width: 18px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n }\n }\n }\n }\n }\n`;\n","import React, {\n useEffect,\n useState,\n useRef,\n useCallback,\n useMemo\n} from 'react';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { Dropdown } from 'react-bootstrap';\nimport PrintIcon from 'assets/img/print-icon.svg';\nimport MonthlyReportChart from 'components/Report/MonthlyReportChart';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n fetchTeacherReportMonthRequest,\n fetchTeacherReportSpecificMonthRequest\n} from 'stores/report/actions';\nimport Spinner from 'components/Shared/Spinner';\nimport { useReactToPrint } from 'react-to-print';\nimport { useTranslation } from 'react-i18next';\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport { find, propEq } from 'ramda';\nimport { SpecificMonthlyReportStyle } from './SpecificMonthlyReport.styles';\n\nconst useQuery = () => {\n return new URLSearchParams(useLocation().search);\n};\n\nclass MonthlyReportChartComponent extends React.PureComponent {\n render() {\n const { data, reportName } = this.props;\n\n return \n \n
\n {\n history.push('/report/school-report/monthly-activity');\n }}\n >\n < {t(`common:back`, 'Back')}\n \n
\n
\n
\n
\n {t(`monthly-report:specificHeader.chooseMonth`, 'Choose Month')}\n
\n
\n \n {t(\n `monthly-report:month.${name && name.ReportName.slice(0, 3)}`,\n `${name && name.ReportName.slice(0, 3)}`\n )}\n \n \n {!isNilOrEmpty(teacherMonthReport) &&\n teacherMonthReport\n .filter(e => e.IsAvailable)\n .map(e => (\n \n {t(\n `monthly-report:month.${e.ReportName.slice(0, 3)}`,\n `${e.ReportName.slice(0, 3)}`\n )}\n \n ))}\n \n \n
\n
\n
\n \n
\n
\n
\n );\n};\n\nexport default SpecificMonthlyReport;\n","import styled from 'styled-components';\n\nexport const Header = styled.div`\n background: white;\n position: fixed;\n width: calc(100vw - 195px);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.2rem 0;\n box-shadow: 0 3px 6px rgba(129, 129, 129, 0.16);\n z-index: 10;\n .back-button {\n color: #545454;\n cursor: pointer;\n width: 100px;\n font-size: 0.94rem;\n position: absolute;\n margin-left: 1.5rem;\n &:hover {\n color: #ff5b00;\n }\n }\n\n @media (max-width: 1024px) {\n width: calc(100vw - 56px);\n }\n @media (max-width: 639px) {\n width: 100vw;\n }\n`;\n\nexport const SkillInfo = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n row-gap: 10px;\n padding-left: 10%;\n width: -webkit-fill-available;\n padding-right: 5%;\n\n .skill-label {\n flex-grow: 0.8;\n margin-bottom: 0;\n font-weight: 700;\n color: #363636;\n max-width: 450px;\n }\n\n .dropdown-container {\n flex-grow: 1;\n max-width: 415px;\n @media (max-width: 882px) {\n max-width: 250px;\n }\n }\n\n .dropdown-custom {\n width: 100%;\n margin-left: 10px;\n border: 1px solid rgba(112, 112, 112, 0.48);\n background-color: #ffffff;\n font-size: 14px;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n justify-content: space-between;\n align-items: center;\n @media (max-width: 882px) {\n font-size: 12px;\n }\n @media (max-width: 744px) {\n font-size: 10px;\n }\n }\n\n .skills {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n position: relative;\n max-width: 380px;\n &::after {\n position: absolute;\n top: 50%;\n right: 6px;\n transform: translateY(-50%);\n }\n }\n\n .menu-custom {\n width: -webkit-fill-available;\n }\n\n .item-custom {\n white-space: break-spaces;\n display: block;\n position: relative;\n }\n\n .right {\n flex-grow: 0.5;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n .right-progress-bar {\n width: 118px;\n margin-right: 0.8rem;\n }\n .progress-label {\n color: #363636;\n font-size: 0.625rem;\n span {\n font-weight: bold;\n }\n }\n }\n`;\n","import React from 'react';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { useTranslation } from 'react-i18next';\nimport { Dropdown } from 'react-bootstrap';\n\nimport ProgressBar from 'components/Report/ProgressBar';\nimport { Header, SkillInfo } from './SkillTopbar.styles';\n\nconst Topbar = ({\n type,\n item,\n progressBar,\n skillList,\n back,\n setSortDetail\n}) => {\n const { t } = useTranslation(['proficiency-report', 'high-score-report']);\n const history = useHistory();\n const { topicID } = useParams();\n\n return (\n \n );\n};\n\nexport default Topbar;\n","import styled, { css } from 'styled-components';\nimport { proficiencyColors, masteryColors } from 'constants/index';\n\nexport const Content = styled.div`\n /* margin-top: 7rem; */\n overflow-y: scroll;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 1.5rem 5% 2.5rem 10%;\n border-bottom: ${props => !props.isLast && '1px solid #e9e9e9'};\n table {\n width: 100%;\n\n td {\n width: 50%;\n }\n }\n .incomplete-desc {\n margin-bottom: 0.4rem;\n color: #ff0303;\n font-size: 0.625rem;\n position: relative;\n left: 50%;\n }\n`;\n\nexport const TableTitle = styled.div`\n display: flex;\n align-items: flex-end;\n font-size: 0.625rem;\n font-family: 'Nunito';\n p {\n margin-bottom: 0;\n }\n .student-count {\n font-size: 1.75rem;\n font-weight: 700;\n margin-right: 0.5rem;\n color: #363636;\n line-height: 1.2rem;\n }\n .student-detail {\n color: #363636;\n }\n`;\n\nexport const TableContent = styled.table`\n margin-top: ${({ sortBtn }) => !sortBtn && '0.8rem'};\n tr:nth-child(odd) {\n background: ${({ level, report }) =>\n report === 'proficiency'\n ? proficiencyColors[level].tableOddColor\n : masteryColors[level].tableOddColor};\n }\n\n tr:nth-child(even) {\n background: ${({ level, report }) =>\n report === 'proficiency'\n ? proficiencyColors[level].tableEvenColor\n : masteryColors[level].tableEvenColor};\n }\n\n td {\n border: solid 1px\n ${({ level, report }) =>\n report === 'proficiency'\n ? proficiencyColors[level].tableBorderColor\n : masteryColors[level].tableBorderColor};\n padding: 0.5rem 0.8rem;\n font-weight: 700;\n font-family: 'Nunito';\n li {\n font-weight: 600;\n font-family: 'Muli';\n }\n }\n\n .percentage {\n font-weight: 700;\n color: ${({ level }) => level === 'incomplete' && '#CCCCCC'};\n }\n`;\n\nexport const ProficiencySkills = styled.div`\n display: flex;\n align-items: baseline;\n margin-left: 15px;\n margin-right: 15px;\n .icon {\n width: 13px;\n height: 13px;\n background: ${props => proficiencyColors[props.proficiency].color};\n border-radius: 3px;\n border: solid 1px\n ${props => proficiencyColors[props.proficiency].borderColor};\n }\n .prof-name {\n font-family: 'Nunito';\n font-weight: 700;\n text-transform: capitalize;\n color: #363636;\n font-size: 0.625rem;\n margin-left: 0.5rem;\n }\n .prof-descricption {\n font-size: 0.5rem;\n display: flex;\n align-items: baseline;\n color: #727272;\n margin-left: 0.25rem;\n span {\n font-weight: 700;\n margin-left: 0.2rem;\n }\n }\n @media screen and (max-width: 895px) {\n margin-right: 0 !important;\n }\n`;\n\nexport const MasterySkills = styled.div`\n display: flex;\n align-items: flex-end;\n img {\n margin: 0 0.5rem 0 1rem;\n width: 35px;\n }\n .skill-detail {\n color: #727272;\n span {\n font-weight: 700;\n }\n }\n`;\n\nexport const SortButtonContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #e9e9e9;\n border-bottom: none;\n width: 80px;\n position: relative;\n left: 50%;\n margin-top: -0.8rem;\n\n @media (max-width: 600px) {\n margin-top: 0.5rem;\n }\n`;\nexport const SortButton = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 50%;\n padding: 8px 0;\n background: ${({ active }) => (active ? '#9A9A9A' : 'white')};\n svg {\n path {\n fill: ${({ active }) => (active ? 'white' : '#DBDBDB')};\n }\n }\n ${({ type }) =>\n type === 'asc' &&\n css`\n border-left: 1px solid #e9e9e9;\n svg {\n transform: rotate(180deg);\n }\n `}\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { isEmpty, isNil } from 'ramda';\n\nimport { ProficiencyStatus, MasteryLevelRange } from 'constants/index';\n\nimport { ReactComponent as TriangleIcon } from 'assets/img/report/icon-triangle.svg';\n\nimport {\n Content,\n TableTitle,\n TableContent,\n ProficiencySkills,\n MasterySkills,\n SortButtonContainer,\n SortButton\n} from './SkillDetailContent.styles';\n\nconst ProficiencyLegend = ({ data }) => {\n const { t } = useTranslation(['proficiency-report']);\n const profScore = {\n mastery: '80-100',\n competent: '60-79',\n beginning: '0-59',\n incomplete: '< 10'\n };\n return (\n \n
\n \n {t(\n `proficiency-report:legend.${\n ProficiencyStatus[data.CompetencyLevel]\n }`,\n ProficiencyStatus[data.CompetencyLevel]\n )}\n
\n \n {ProficiencyStatus[data.CompetencyLevel] === 'incomplete'\n ? t(`proficiency-report:legend.question`, 'Question')\n : t(`proficiency-report:legend.proficiency`, 'Proficiency')}\n {profScore[ProficiencyStatus[data.CompetencyLevel]]} \n
\n \n );\n};\n\nconst MasteryLegend = ({ data }) => {\n const { t } = useTranslation(['high-score-report']);\n return (\n \n \n \n {data.MasteryLevelName !== 'Incomplete' ? (\n \n {MasteryLevelRange[data.MasteryLevelName]?.noQn} / 10\n {t(`high-score-report:perSkill`, 'Qn per skill')}\n
\n ) : (\n \n {t(`high-score-report:beCompleted`, 'To be completed')}\n
\n )}\n \n );\n};\n\nconst SkillDetailContent = ({\n data,\n reportType,\n isLast,\n isSorting,\n descSortHandler,\n descActive,\n ascSortHandler,\n ascActive,\n level\n}) => {\n const { t } = useTranslation(['proficiency-report']);\n return (\n \n \n {data.Counts}
\n Students
\n {reportType === 'proficiency' && \n {!isEmpty(data.Data) && (\n <>\n {isSorting &&\n ProficiencyStatus[data.CompetencyLevel] !== 'incomplete' && (\n \n \n \n \n \n )}\n {isSorting &&\n ProficiencyStatus[data.CompetencyLevel] === 'incomplete' && (\n \n {t(\n `proficiency-report:skillReports.lessQn`,\n 'Completed less than 10 questions, so the proficiency is grey.'\n )}\n
\n )}\n\n \n \n {data.Data.map(student => (\n \n \n {student.FullName} \n \n \n {reportType === 'proficiency' && (\n <>\n {isNil(student.Proficiency)\n ? '0%'\n : `${(student.Proficiency * 100).toFixed()}%`}\n \n )}\n {reportType === 'high-score' && (\n <>\n \n \n ))}\n \n \n \n )}\n \n );\n};\n\nexport default SkillDetailContent;\n","import styled from 'styled-components';\n\nconst SkillDetailPage = styled.div`\n background-color: #ffffff;\n padding-left: 195px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n @media (max-width: 1024px) {\n padding-left: 56px;\n }\n @media (max-width: 639px) {\n padding-left: 0;\n }\n .error {\n width: 100%;\n text-align: center;\n margin-top: 2rem;\n }\n .content-detail {\n margin-top: 6rem;\n }\n`;\n\nexport default SkillDetailPage;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\nimport { isNil } from 'ramda';\nimport useDeepCompareEffect from 'use-deep-compare-effect';\nimport cloneDeep from 'lodash.clonedeep';\n\nimport { compareValues } from 'helpers/singleClassReport';\nimport { ProficiencyStatus, proficiencyColors } from 'constants/index';\nimport calculatePercentageString from 'helpers/calculatePercentageString';\nimport {\n fetchSkillProficiencyDetailReportRequest,\n fetchProficiencySkillReportRequest,\n setReportLevel\n} from 'stores/report/actions';\n\nimport Spinner from 'components/Shared/Spinner';\nimport SkillTopbar from 'components/Report/SkillReportDetail/SkillTopbar';\nimport SkillDetailContent from 'components/Report/SkillReportDetail/SkillDetailContent';\nimport NoReport from 'components/Report/NoReport';\n\nimport SkillDetailPage from './SkillProficiencyReport.styles';\n\nconst SkillProficiencyReport = () => {\n const { t } = useTranslation(['proficiency-report']);\n const history = useHistory();\n const dispatch = useDispatch();\n const { topicID, skillID } = useParams();\n const {\n selectedClass,\n reportLevel,\n selectedSyllabus,\n skillDetailReport,\n proficiencySkill\n } = useSelector(state => state.reports);\n const [sortDetail, setSortDetail] = useState(null);\n const pageLoading =\n proficiencySkill.isLoading || skillDetailReport?.isLoading;\n useEffect(() => {\n dispatch(\n fetchSkillProficiencyDetailReportRequest({\n classID: selectedClass.ID,\n reportLevel: reportLevel?.ID,\n curriculumID: selectedSyllabus.CurriculumID,\n topicID,\n skillID\n })\n );\n dispatch(\n fetchProficiencySkillReportRequest({\n classID: selectedClass.ID,\n reportLevel: reportLevel?.ID,\n curriculumID: selectedSyllabus.CurriculumID,\n topicID\n })\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch, skillID, reportLevel]);\n useDeepCompareEffect(() => {\n if (selectedSyllabus && isNil(reportLevel) && selectedSyllabus.Levels) {\n const firstLevel = selectedSyllabus.Levels[0];\n dispatch(setReportLevel(firstLevel));\n }\n }, [reportLevel, selectedSyllabus]);\n const progressbarNumber = data => {\n const progressBarInput = [\n {\n percentage: '',\n color: proficiencyColors.mastery.color,\n borderColor: proficiencyColors.mastery.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.competent.color,\n borderColor: proficiencyColors.competent.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.beginning.color,\n borderColor: proficiencyColors.beginning.borderColor\n },\n {\n percentage: '',\n color: proficiencyColors.incomplete.color,\n borderColor: proficiencyColors.incomplete.borderColor\n }\n ];\n const proficiencyIndex = {\n Incomplete: 3,\n NeedImprove: 2,\n Passed: 1,\n Mastered: 0\n };\n\n // eslint-disable-next-line no-restricted-syntax\n for (const proficiency of Object.keys(data?.CompetencyDetails)) {\n if (data?.CompetencyDetails[proficiency] > 0) {\n // Calculate percentage string\n const percentageString = calculatePercentageString(\n data?.CompetencyDetails[proficiency],\n data?.TotalNoOfStudents\n );\n progressBarInput[\n proficiencyIndex[proficiency]\n ].percentage = percentageString;\n } else {\n progressBarInput[proficiencyIndex[proficiency]].percentage = '0%';\n }\n }\n return progressBarInput.filter(\n proficiency => proficiency.percentage !== '0%'\n );\n };\n\n // note: proficiency from backend is always sorted desc\n const handleSortClick = ({ level, order }) => {\n setSortDetail(prev => {\n if (prev) {\n return prev.level === level && prev.order === order\n ? null\n : { level, order };\n }\n return { level, order };\n });\n };\n\n const parseProfSkill = [];\n\n for (let i = 0; i <= 4; i += 1) {\n if (i !== 2) {\n const findItem = skillDetailReport?.data?.findIndex(\n item => item.CompetencyLevel === i\n );\n if (findItem !== -1) {\n parseProfSkill.push(\n skillDetailReport?.data && skillDetailReport?.data[findItem]\n );\n } else {\n parseProfSkill.push({ Counts: 0, CompetencyLevel: i, Data: [] });\n }\n }\n }\n\n const sorted = useCallback(() => {\n const clonedData = cloneDeep(parseProfSkill);\n const result = [];\n if (!isNil(sortDetail)) {\n clonedData.forEach(item => {\n if (item.CompetencyLevel === sortDetail?.level) {\n item.Data.sort(compareValues('Proficiency', sortDetail?.order));\n result.push(item);\n } else {\n result.push(item);\n }\n });\n return result.sort(compareValues('CompetencyLevel', 'desc'));\n }\n return parseProfSkill.sort(compareValues('CompetencyLevel', 'desc'));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sortDetail, skillDetailReport?.data]);\n\n const skillData = proficiencySkill?.data?.find(\n skill => skill.SkillId === parseInt(skillID, 10)\n );\n\n return (\n \n {pageLoading && history.push('/report', { type: 'skill' })}\n setSortDetail={setSortDetail}\n />\n )}\n\n \n {!pageLoading &&\n skillDetailReport?.data &&\n sorted().map(data => (\n {\n handleSortClick({\n level: data.CompetencyLevel,\n order: 'desc'\n });\n }}\n ascActive={\n sortDetail?.level === data.CompetencyLevel &&\n sortDetail?.order === 'asc'\n }\n ascSortHandler={() => {\n handleSortClick({\n level: data.CompetencyLevel,\n order: 'asc'\n });\n }}\n isSorting\n level={ProficiencyStatus[data.CompetencyLevel]}\n />\n ))}\n
\n \n );\n};\n\nexport default SkillProficiencyReport;\n","import React, { useEffect } from 'react';\nimport { useParams, useHistory } from 'react-router-dom';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\n\nimport { compareValues } from 'helpers/singleClassReport';\nimport { proficiencyColors } from 'constants/index';\nimport calculatePercentageString from 'helpers/calculatePercentageString';\n\nimport {\n fetchSkillHighScoreDetailReportRequest,\n fetchHighScoreSkillReportRequest\n} from 'stores/report/actions';\n\nimport SkillTopbar from 'components/Report/SkillReportDetail/SkillTopbar';\nimport SkillDetailContent from 'components/Report/SkillReportDetail/SkillDetailContent';\nimport NoReport from 'components/Report/NoReport';\nimport Spinner from 'components/Shared/Spinner';\n\nimport { isNil } from 'ramda';\nimport SkillDetailPage from './SkillProficiencyReport.styles';\n\nconst SkillHighScoreReport = () => {\n const { t } = useTranslation(['proficiency-report']);\n const dispatch = useDispatch();\n const history = useHistory();\n const { topicID, skillID } = useParams();\n const {\n selectedClass,\n reportLevel,\n selectedSyllabus,\n skillDetailReport,\n highScoreSkill\n } = useSelector(state => state.reports);\n const pageLoading = highScoreSkill.isLoading || skillDetailReport?.isLoading;\n\n useEffect(() => {\n dispatch(\n fetchSkillHighScoreDetailReportRequest({\n classID: selectedClass.ID,\n reportLevel: reportLevel.ID,\n curriculumID: selectedSyllabus.CurriculumID,\n topicID,\n skillID\n })\n );\n dispatch(\n fetchHighScoreSkillReportRequest({\n classID: selectedClass.ID,\n reportLevel: reportLevel.ID,\n curriculumID: selectedSyllabus.CurriculumID,\n topicID\n })\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch, skillID]);\n\n const parseHighScoreProgressBar = data => {\n const progressBarInput = [\n {\n percentage: '',\n color: '#FFC219',\n borderColor: '#D2A905'\n },\n {\n percentage: '',\n color: '#FFEAAF',\n borderColor: '#E5D582'\n },\n {\n percentage: '',\n color: '#FFEAAF',\n borderColor: '#E5D582'\n },\n {\n percentage: '',\n color: '#FFEAAF',\n borderColor: '#E5D582'\n },\n {\n percentage: '',\n color: proficiencyColors.incomplete.color,\n borderColor: proficiencyColors.incomplete.borderColor\n }\n ];\n const masteryIndex = {\n A: 0,\n B: 1,\n C: 2,\n D: 3,\n Incomplete: 4\n };\n // eslint-disable-next-line no-restricted-syntax\n for (const mastery of Object.keys(data?.MasteryLevels)) {\n if (data?.MasteryLevels[mastery] > 0) {\n // Calculate percentage string\n const percentageString = calculatePercentageString(\n data?.MasteryLevels[mastery],\n data?.TotalNoOfUsers\n );\n progressBarInput[masteryIndex[mastery]].percentage = percentageString;\n } else {\n progressBarInput[masteryIndex[mastery]].percentage = '0%';\n }\n }\n return progressBarInput.filter(mastery => mastery.percentage !== '0%');\n };\n\n const skillData = highScoreSkill?.data?.find(\n skill => skill.SkillId === parseInt(skillID, 10)\n );\n\n const parseHighScoreSkill = [];\n for (let i = 0; i <= 4; i += 1) {\n const MasteryStatus = {\n 0: 'D',\n 1: 'C',\n 2: 'B',\n 3: 'A',\n 4: 'Incomplete'\n };\n const findItem = skillDetailReport?.data?.findIndex(\n item => item.MasteryLevelName === MasteryStatus[i]\n );\n\n if (findItem !== -1) {\n parseHighScoreSkill.push(\n skillDetailReport?.data && skillDetailReport?.data[findItem]\n );\n } else {\n parseHighScoreSkill.push({\n Counts: 0,\n MasteryLevelName: MasteryStatus[i],\n Data: []\n });\n }\n }\n\n return (\n \n {pageLoading && \n history.push('/report/class-report/high-score-report', {\n type: 'skill'\n })\n }\n />\n )}\n \n {!pageLoading &&\n skillDetailReport?.data &&\n parseHighScoreSkill\n .sort(compareValues('MasteryLevelName'))\n .map(data => (\n
\n \n );\n};\n\nexport default SkillHighScoreReport;\n","import React, { useState } from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Header from 'components/Header/Header';\nimport Sidebar from 'components/Sidebar/Sidebar';\nimport SidebarReport from 'components/Sidebar/SidebarReport/SidebarReport';\nimport Overlay from 'components/Content/Overlay';\nimport ProficiencyReport from './ProficiencyReport';\nimport HighScoreReport from './HighScoreReport';\nimport StudentHighScoreReport from './StudentHighScoreReport';\nimport StudentProficiencyReport from './StudentProficiencyReport';\nimport LoginReport from './LoginReport';\nimport TeacherMonthlyReport from './TeacherMonthlyReport';\nimport SpecificMonthlyReport from './SpecificMonthlyReport';\nimport SkillProficiencyReport from './SkillProficiencyReport';\nimport SkillHighScoreReport from './SkillHighScoreReport';\n\nexport default function Report() {\n const [expanded, setExpanded] = useState(false);\n const toggleNavigation = () => setExpanded(!expanded);\n\n return (\n <>\n \n \n \n \n \n \n
\n \n \n );\n}\n","// Helper to aggregate login report data to format for chart\nconst aggregateLoginReportData = data => {\n const classSize = data.length;\n const reducer = (accumulator, item) => {\n const result = accumulator.map((dayTotal, index) => {\n if (item?.LoginStatus[index] === 1) {\n return dayTotal + item?.LoginStatus[index];\n }\n return dayTotal;\n });\n return result;\n };\n const aggregatedLoginCountsTotal = data.reduce(reducer, Array(7).fill(0));\n const daysOfWeek = [\n {\n name: 'Sun',\n total: classSize\n },\n {\n name: 'Mon',\n total: classSize\n },\n {\n name: 'Tue',\n total: classSize\n },\n {\n name: 'Wed',\n total: classSize\n },\n {\n name: 'Thu',\n total: classSize\n },\n {\n name: 'Fri',\n total: classSize\n },\n {\n name: 'Sat',\n total: classSize\n }\n ];\n if (data.length <= 0) {\n return daysOfWeek.map(day => {\n return {\n ...day,\n loggedIn: 0,\n future: false\n };\n });\n }\n const aggregatedTotal = daysOfWeek.map((day, index) => {\n const isFuture = data[0].LoginStatus[index] === 2;\n if (isFuture) {\n return {\n ...day,\n total: 0,\n loggedIn: 0,\n future: day.total\n };\n }\n return {\n ...day,\n total: day.total - aggregatedLoginCountsTotal[index],\n loggedIn: aggregatedLoginCountsTotal[index],\n future: 0\n };\n });\n return aggregatedTotal;\n};\n\nexport default aggregateLoginReportData;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n background: white;\n border-radius: 4px;\n height: 350px;\n .dropdown-container {\n display: flex;\n align-items: center;\n margin-bottom: 0.5rem;\n .dropdown-custom {\n background: #f2f2f2;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .dropdown-label {\n width: 80px;\n padding-right: 0.5rem;\n text-align: right;\n white-space: nowrap;\n }\n .level-dropdown {\n margin: 0 1rem 0 0;\n }\n .week {\n width: 85%;\n > button {\n width: 100%;\n text-align: left;\n }\n .dropdown-menu {\n width: 100%;\n }\n }\n .class {\n width: 100%;\n > button {\n width: 100%;\n text-align: left;\n }\n .dropdown-menu {\n width: 100%;\n }\n }\n }\n`;\n\nexport const ClassAttendance = styled.div`\n .indicator {\n margin-left: 1.6rem;\n }\n .num-logged-in {\n margin-left: 0.5rem;\n font-size: 1.875rem;\n font-weight: 700;\n color: black;\n }\n .class-size {\n font-size: 1rem;\n color: #9a9a9a;\n margin-right: 1rem;\n }\n .logged-in-date {\n font-size: 0.75rem;\n color: #8a8a8a;\n }\n .recharts-bar-rectangles {\n cursor: pointer;\n }\n`;\n\nexport const BarContainer = styled.div`\n padding: 1rem;\n background: yellow;\n`;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport generateLevels from 'helpers/reportLevels';\nimport {\n fetchLoginReportRequest,\n fetchWeekItemsRequest,\n setSelectedClass,\n setClassLevel\n} from 'stores/report/actions';\nimport useDeepCompareEffect from 'use-deep-compare-effect';\nimport { fetchClassRequest } from 'stores/utils/lookup/actions';\nimport { Dropdown } from 'react-bootstrap';\nimport { BarChart, Bar, Cell, XAxis, YAxis } from 'recharts';\nimport moment from 'moment';\nimport { isNil } from 'ramda';\nimport { useTranslation } from 'react-i18next';\nimport aggregateLoginReportData from 'helpers/aggregateLoginReportData';\nimport { Container, ClassAttendance } from './LoginReportCard.styles';\n\nconst LoginReportCard = () => {\n const { t } = useTranslation(['dashboard']);\n const dispatch = useDispatch();\n const ref = useRef(null);\n // Redux States\n const {\n loginReport,\n weekItems,\n selectedClass,\n selectedClassLevel,\n isLoading,\n reportError\n } = useSelector(state => state.reports);\n const { classes } = useSelector(state => state.lookup);\n const currentDayOfWeek = moment().day();\n const reportLevels = generateLevels();\n const [weekId, setWeekId] = useState(0);\n const [selectedBarChartDay, setSelectedBarChartDay] = useState(\n currentDayOfWeek\n );\n const [barWidth, setBarWidth] = useState(0);\n // Filter out only classes of type 1\n const filteredClasses =\n classes.length > 0\n ? classes.filter(classObject => classObject.Type === 1)\n : [];\n\n let aggregatedData;\n if (loginReport) {\n aggregatedData = aggregateLoginReportData(loginReport);\n }\n\n // UseEffects\n useEffect(() => {\n dispatch(fetchClassRequest(selectedClassLevel));\n }, [dispatch, selectedClassLevel]);\n\n useEffect(() => {\n dispatch(fetchWeekItemsRequest({ numberOfPreviousWeek: 3 }));\n }, [dispatch]);\n\n useDeepCompareEffect(() => {\n if (selectedClass) {\n dispatch(\n fetchLoginReportRequest({\n classID: selectedClass && selectedClass.ID,\n weekID: weekId\n })\n );\n }\n }, [dispatch, selectedClass, weekId]);\n useEffect(() => {\n const handleResize = () => {\n if (ref.current) {\n if (ref.current.offsetWidth > 525) {\n setBarWidth(525);\n } else {\n setBarWidth(ref.current.offsetWidth);\n }\n }\n };\n window.addEventListener('resize', handleResize);\n window.addEventListener(\n 'DOMContentLoaded',\n setBarWidth(ref.current.offsetWidth)\n );\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n return (\n \n \n \n {t('dashboard:loginReport.classFrom', 'Class from')}\n \n \n \n {`P${selectedClassLevel}`}\n \n \n {reportLevels.map(level => (\n {\n dispatch(setClassLevel(level));\n }}\n >{`P${level}`}\n ))}\n \n \n \n \n {selectedClass && selectedClass.Name ? selectedClass.Name : '-'}\n \n \n {filteredClasses.map(item => (\n {\n event.preventDefault();\n dispatch(setSelectedClass(item));\n }}\n >\n {item.Name}\n \n ))}\n \n \n
\n \n \n {t('dashboard:loginReport.Time', 'Time')}\n \n \n \n {`Week ${\n !isNil(weekItems)\n ? moment(\n weekItems[weekId].Display.split(' - ')[1],\n 'DD MMM YYYY'\n ).isoWeek()\n : ''\n }`}\n \n \n {!isNil(weekItems) &&\n weekItems.map(week => (\n {\n event.preventDefault();\n setWeekId(week.Id);\n }}\n >\n {`Week ${moment(\n week.Display.split(' - ')[1],\n 'DD MMM YYYY'\n ).isoWeek()}`}\n \n ))}\n \n \n
\n\n \n \n \n \n {!isNil(aggregatedData)\n ? aggregatedData[selectedBarChartDay].loggedIn\n : ''}\n \n \n {!isNil(aggregatedData) &&\n ` /${aggregatedData[selectedBarChartDay]?.total +\n aggregatedData[selectedBarChartDay]?.loggedIn}`}\n \n {!isNil(weekItems) && (\n \n {t('dashboard:loginReport.loggedInOn', 'Logged in on')}{' '}\n {moment(weekItems[weekId].Display.split(' - ')[1], 'DD MMM YYYY')\n .subtract(6 - selectedBarChartDay, 'days')\n .format('DD/MM/YYYY, dddd')}\n \n )}\n {isLoading && Loading...
}\n {!isLoading && reportError !== null && {reportError}
}\n {!isLoading && reportError === null && !isNil(aggregatedData) && (\n \n \n {aggregatedData.map((entry, index) => (\n {\n setSelectedBarChartDay(index);\n }}\n />\n ))}\n \n \n {aggregatedData.map((entry, index) => (\n {\n setSelectedBarChartDay(index);\n }}\n />\n ))}\n \n \n {aggregatedData.map((entry, index) => (\n \n \n )}\n \n \n );\n};\n\nexport default LoginReportCard;\n","import styled from \"styled-components\";\n\nexport const EmptyAssignmentContainer = styled.div`\n color: #46535e;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-bottom: 1rem;\n h1 {\n font-size: 0.9rem;\n line-height: 2;\n }\n a {\n font-size: 1rem;\n line-height: 1.5;\n padding: 0.3em 4em;\n border-radius: 4px;\n }\n img {\n margin: 1rem 0;\n margin-left: 1rem;\n }\n\n .btn-primary {\n background-color: #ff5b00;\n border-color: #ff5b00;\n }\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { NoAssignmentSVG } from 'assets/img/dashboardv2';\nimport { EmptyAssignmentContainer } from './EmptyAssignment.styles';\n\nconst EmptyAssignment = () => {\n const { t } = useTranslation(['track-assignment-assigned-me']);\n return (\n \n \n \n {t(\n `track-assignment-assigned-me:emptyState.emptyMsg`,\n `You haven't assigned any homework yet.`\n )}\n \n \n \n );\n};\n\nexport default EmptyAssignment;\n","import styled from 'styled-components';\n\nexport const StyledContainer = styled.div`\n margin-bottom: 2rem;\n`;\n\nexport const StyledLink = styled.div`\n margin-top: 1rem;\n text-align: right;\n\n .more-link {\n color: #ff5b00;\n font-size: 16px;\n text-decoration: underline;\n }\n`;\n\nexport const StyledCard = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border-radius: 5px;\n margin-bottom: 1rem;\n border: solid 1px #dfdfdf;\n color: #1e1e1e;\n padding: 0.5rem 1rem;\n box-shadow: 0 1px 3px 0px rgb(0 0 0 / 16%);\n .track-row {\n display: flex;\n align-items: center;\n }\n .hw-link {\n font-family: 'Muli', sans-serif;\n color: #000000;\n font-weight: 600;\n font-size: 15px;\n word-break: break-all;\n }\n .hw-type-icon {\n width: 31px;\n height: 31px;\n border-radius: 50%;\n padding: 0.5rem;\n font-family: Helvetica, sans-serif;\n font-size: 19px;\n font-weight: 100;\n color: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-right: 0.7rem;\n\n img {\n width: 31px;\n height: 31px;\n }\n }\n .hw-assign-date {\n font-size: 12px;\n color: #8a8a8a;\n margin-right: 2rem;\n }\n .open-track-btn {\n color: #ff5b00;\n background-color: #ffffff;\n padding: 0.3rem 1.5rem;\n text-decoration: none;\n\n :hover {\n opacity: 0.8;\n text-decoration: underline;\n }\n }\n`;\n","import React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport moment from 'moment-timezone';\nimport { FactualFluencyPNG } from 'assets/img/dashboardv2';\nimport { fetchAssignmentsRequest } from 'stores/assignments/actions';\nimport { homeworkTypes } from 'constants/index';\nimport { Button } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory, Link } from 'react-router-dom';\nimport { isEmpty } from 'ramda';\n\nimport EmptyAssignment from '../EmptyAssignment/EmptyAssignment';\nimport {\n StyledCard,\n StyledContainer,\n StyledLink\n} from './AssignmentTrackingCard.styles';\n\nconst getIcon = homeworkType => {\n if (homeworkType === 13) {\n return \n {isLoading && 'Loading...'}\n {!isLoading && isEmpty(filteredData) &&
}\n {!isLoading && !isEmpty(filteredData) && (\n
\n {filteredData.map(assignment => (\n \n \n
\n {getIcon(assignment.HomeWorkType)}\n \n {assignment.HomeWorkTitle}
\n \n {\n history.push(\n // eslint-disable-next-line no-nested-ternary\n assignment.TrackingGroup.length > 0 &&\n (assignment.TrackingIndividual === null ||\n assignment.TrackingIndividual.TotalAssignee > 0)\n ? assignment.TrackingGroup.length === 1\n ? `/track-assignment/homework/${assignment.HomeWorkId}/${assignment.TrackingGroup[0].ClassID}`\n : `/track-assignment/homework/${assignment.HomeWorkId}`\n : `/track-assignment/homework/${assignment.HomeWorkId}/all`\n );\n }}\n >\n {t('dashboard:assignmentTracking.trackBtn', 'Track')}\n \n
\n \n ))}\n \n \n \n )}\n
\n \n \n {isLoading && 'Loading...'}\n {!isLoading && (\n \n {t('dashboard:greeting.hello', 'Hello')}, \n {profileData.FullName} \n {profileData.SchoolName} \n \n )}\n \n {dashboardCards.map(dashboardCard => (\n redirectToPage(dashboardCard)}\n style={{\n marginRight:\n dashboardCards.length !== dashboardCard.id && '15px'\n }}\n >\n \n \n \n {t(\n `dashboard:navigation.${dashboardCard.title}`,\n dashboardCard.title\n )}\n \n \n {t(\n `dashboard:navigation.${dashboardCard.subTitle}`,\n dashboardCard.subTitle\n )}\n \n \n \n \n ))}\n \n \n \n \n {t('dashboard:loginReport.title', 'Student Login')}\n \n \n \n \n \n {t(\n 'dashboard:assignmentTracking.title',\n 'Latest Assignment Tracking'\n )}\n \n \n \n
\n \n \n );\n};\n\nexport default DashboardV2;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n font-family: 'Linotte Regular';\n display: flex;\n flex-direction: column;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n text-align: left;\n`;\n\nexport const NoParticipant = styled.div`\n display: flex;\n flex-direction: column;\n align-self: center;\n background: #ffffff;\n width: 70%;\n height: 100%;\n padding: 20px 30px;\n text-align: center;\n`;\n","import styled from 'styled-components';\nimport HeaderBg from 'assets/img/leaderboard/leaderboard-bg.png';\n\nexport const Topbar = styled.div`\n height: 390px;\n background-image: url(${HeaderBg});\n background-repeat: no-repeat;\n background-size: cover;\n display: flex;\n padding: 0 20px;\n position: relative;\n .button-back {\n position: absolute;\n top: 20px;\n left: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(0, 74, 137, 0.61);\n color: #ffffff;\n border-radius: 2rem;\n border: none;\n padding: 0.3rem 1.2rem;\n font-weight: 600;\n cursor: pointer;\n font-size: 1rem;\n img {\n margin-right: 0.3rem;\n }\n }\n .badge-img {\n margin-left: 5%;\n }\n .middle-content {\n display: flex;\n width: 100%;\n align-items: center;\n }\n .scoring-period {\n color: #ffffff;\n font-size: 26px;\n display: flex;\n margin-top: 24px;\n font-weight: 700;\n span {\n font-size: 16px;\n margin-right: 5px;\n }\n }\n .rules {\n position: absolute;\n right: -3%;\n bottom: 40px;\n cursor: pointer;\n }\n`;\n\nexport const Container = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n`;\n\nexport const TitleHeading = styled.div`\n font-size: 1.6rem;\n width: 40%;\n text-align: center;\n color: #ffffff;\n margin-bottom: 20px;\n\n img {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n }\n`;\n\nexport const TitleMeta = styled.div`\n display: flex;\n width: 25%;\n justify-content: space-between;\n color: #ffffff;\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport {\n Topbar,\n Container,\n TitleHeading,\n TitleMeta\n} from './LeaderboardHeader.styles';\nimport iconFactualFluency from 'assets/img/icon-factual-fluency.png';\nimport BackIcon from 'assets/img/back-icon.svg';\n\nimport moment from 'moment';\n\nconst LeaderboardHeader = props => {\n const { homework } = props;\n const { t } = useTranslation(['leaderboard']);\n const history = useHistory();\n return (\n \n {\n history.goBack();\n }}\n >\n \n \n \n \n Assigned by: {homework.TeacherName} \n \n {`${moment(homework.StartDate).format('DD/MM/YYYY')}-${moment(\n homework.Deadline\n ).format('DD/MM/YYYY')}`}\n \n \n \n \n );\n};\n\nexport default React.memo(LeaderboardHeader);\n","import styled from 'styled-components';\nimport DefaultBadge from 'assets/img/leaderboard/default-pos.svg';\nimport FirstBadge from 'assets/img/leaderboard/first-pos.svg';\nimport SecondBadge from 'assets/img/leaderboard/second-pos.svg';\nimport ThirdBadge from 'assets/img/leaderboard/third-pos.svg';\n\nconst allBadge = {\n default: {\n bgImg: DefaultBadge,\n badgeColor: '#ffffff',\n gradinet: null,\n borderCol: null\n },\n first: {\n bgImg: FirstBadge,\n badgeColor: '#CC7900',\n gradinet:\n 'linear-gradient(to right, #FFDC5D, #FFFFFF, #FFC903, #FFC903, #FFC903, #FFC903, #FFC903, #FFC903, #FFCA07)',\n borderCol: '#fac500'\n },\n second: {\n bgImg: SecondBadge,\n badgeColor: '#849AB1',\n gradinet:\n 'linear-gradient(to right, #dfe5eb, #ffffff, #e4e9eb, #e4e9eb, #e4e9eb, #e4e9eb, #e4e9eb, #e4e9eb, #deecf4)',\n borderCol: '#a6bdc6'\n },\n third: {\n bgImg: ThirdBadge,\n badgeColor: '#D17D1F',\n gradinet:\n 'linear-gradient(to right, #fcd094, #f8f8f8, #fddfbb, #fddfbb, #fddfbb, #fddfbb, #fddfbb, #fddfbb, #fddfbb, #ffc37b)',\n borderCol: '#e3af70'\n }\n};\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n align-self: center;\n background: #ffffff;\n width: ${props => (props.challengeMode === 'hallOfFame' ? '100%' : '70%')};\n height: 100%;\n padding: 20px 30px;\n .list-headings {\n display: flex;\n width: 100%;\n padding: 0 5px 10px 35px;\n }\n .nearby-container {\n background-color: #f0fcff;\n border: 1px solid transparent;\n border-radius: 20px;\n margin: 5px 0 20px;\n display: flex;\n justify-content: center;\n .nearby {\n border: 1px solid #9adcf5;\n background-color: #dbf7ff;\n border-radius: 20px;\n color: #0081b1;\n font-size: 18px;\n padding: 5px 10px;\n width: 30%;\n text-align: center;\n cursor: pointer;\n }\n }\n .current-user {\n background-color: #fece18 !important;\n }\n`;\n\nexport const Headings = styled.div`\n margin-left: 10px;\n display: flex;\n flex-direction: column;\n color: #5ec0eb;\n flex: ${props => props.flex};\n font-weight: 700;\n`;\n\nexport const Lists = styled.div`\n display: flex;\n margin-bottom: 10px;\n border: 1px solid black;\n align-items: center;\n padding: 3px 10px 3px 45px;\n border: 1px solid;\n border-radius: 30px;\n position: relative;\n font-size: 14px;\n cursor: pointer;\n :nth-of-type(odd) {\n background-color: #ffffff;\n border-color: #d4ecf5;\n }\n :nth-of-type(even) {\n background-color: #def6ff;\n border-color: #b9e6f7;\n }\n border-color: ${props =>\n props.currPos !== 'default'\n ? allBadge[props.currPos].borderCol\n : 'auto'}!important;\n background-image: ${props => allBadge[props.currPos].gradinet};\n .postions {\n color: ${props => allBadge[props.currPos].badgeColor};\n background: url(${props => allBadge[props.currPos].bgImg});\n position: absolute;\n left: ${props => (props.currPos === 'default' ? '-8px' : '-12px')};\n height: ${props => (props.currPos === 'default' ? '30px' : '40px')};\n width: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 18px;\n font-weight: 700;\n background-repeat: no-repeat;\n background-size: 50px 100%;\n }\n .list-name {\n flex: 2;\n display: flex;\n }\n .list-class {\n flex: 2;\n display: flex;\n }\n .list-points {\n flex: 1;\n display: flex;\n font-size: 17px;\n font-weight: 700;\n\n .total-score {\n font-weight: normal;\n }\n }\n .list-achivement {\n flex: 1;\n display: flex;\n }\n`;\n\nexport const ClassList = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-around;\n margin-bottom: 20px;\n border: 1px solid black;\n padding: 3px 0px;\n font-size: 16px;\n border: 1px solid #fac500;\n border-radius: 30px;\n user-select: none;\n cursor: pointer;\n background-image: linear-gradient(\n to right,\n #ffdc5d,\n #ffffff,\n #ffc903,\n #ffc903,\n #ffc903,\n #ffc903,\n #ffca07\n );\n span {\n font-size: 18px;\n }\n .total-participants,\n .total-details {\n font-size: 14px;\n }\n .total-participants {\n span {\n font-weight: bold;\n }\n }\n`;\n","import React, { useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector } from 'react-redux';\nimport Spinner from 'components/Shared/Spinner';\nimport { Container, Headings, Lists } from './StudentList.styles';\nimport { milisecondToString } from 'helpers/timesParser';\n\nconst StudentList = ({ data, isTopFifty, challengeMode, isLoading }) => {\n const { t } = useTranslation(['leaderboard']);\n const { userID } = useSelector(state => state.login);\n const [list, setList] = useState(data);\n const showLabel = () => {\n return t('leaderboard:leaderboardRanking.class', 'Class');\n };\n const labels = [\n {\n name: t('leaderboard:leaderboardRanking.name', 'Name'),\n flex: 2\n },\n {\n name: showLabel(),\n flex: 2\n },\n {\n name: t('leaderboard:leaderboardRanking.score', 'Score'),\n flex: 1\n },\n {\n name: t('leaderboard:leaderboardRanking.totalTime', 'Total Time'),\n flex: 1\n }\n ];\n\n const showPosition = pos => {\n if (isTopFifty && pos < 4) {\n if (pos === 1) return 'first';\n if (pos === 2) return 'second';\n if (pos === 3) return 'third';\n }\n return 'default';\n };\n\n useEffect(() => {\n if (data && !isTopFifty) {\n let tempList = [...list];\n tempList = data.slice(2);\n setList(tempList);\n } else {\n setList(data);\n }\n // eslint-disable-next-line\n }, [data]);\n\n const cpValue = item => {\n return (\n <>\n {item.CurrentScore}/\n {item.TotalScore} \n \n );\n };\n\n return (\n \n \n {labels.map((item, index) => (\n \n {item.name}\n \n ))}\n
\n {isLoading && \n \n {isTopFifty && {i + 1}
}\n {item.UserName}
\n {item.ClassName}
\n {cpValue(item)}
\n \n {milisecondToString(item.TimeTaken)}\n
\n \n \n ))}\n \n );\n};\n\nexport default React.memo(StudentList);\n","import React, { useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Container, NoParticipant } from './Leaderboard.styles';\nimport LeaderboardHeader from 'components/Leaderboard/LeaderboardHeader';\nimport StudentList from 'components/Leaderboard/StudentList';\nimport Header from 'components/Header/Header';\n\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport {\n fetchFactualFluencyLeaderboardRequest,\n factualFluencyLeaderboardReset\n} from 'stores/factual-fluency/actions';\nimport {\n clearSingleClassReport,\n fetchSingleClassReportRequest\n} from 'stores/assignments/actions';\n\nconst Leaderboard = ({ match }) => {\n const homeworkID = parseInt(match.params.homeworkID, 10);\n const { t } = useTranslation(['leaderboard']);\n const dispatch = useDispatch();\n\n const { singleClassReport } = useSelector(state => state.assignments);\n\n const { isLoading, leaderboard } = useSelector(state => state.factualFluency);\n\n useEffect(() => {\n dispatch(\n fetchSingleClassReportRequest({\n homeworkID\n })\n );\n dispatch(fetchFactualFluencyLeaderboardRequest(homeworkID));\n return () => {\n dispatch(factualFluencyLeaderboardReset());\n dispatch(clearSingleClassReport());\n };\n }, [dispatch, homeworkID]);\n\n return (\n <>\n \n\n \n \n {t(\n 'leaderboard:banner.noParticipant',\n 'No participants at the moment.'\n )}\n \n )}\n \n \n );\n};\n\nexport default Leaderboard;\n","import styled from 'styled-components';\n\nexport const TopBarFixed = styled.div`\n background-color: #064da4;\n border-bottom: 0;\n padding: 0;\n color: #fff;\n\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1030;\n\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const LeftNav = styled.div`\n margin-left: 50px;\n flex-grow: 1;\n`;\n\nexport const RightNav = styled.div`\n width: 270px;\n margin-left: auto;\n`;\n\nexport const ButtonHeader = styled.button`\n width: 50%;\n float: left;\n border-radius: 0;\n background-color: #2167be;\n height: 100px;\n`;\n","import styled from 'styled-components';\nimport iconTimer from 'assets/img/factual-fluency/bg-timer.png';\n\nexport const TimerWrap = styled.div`\n display: inline-block;\n vertical-align: middle;\n font-size: 20px;\n`;\n\nexport const TimerCountdown = styled.span`\n border: 1px solid #fff;\n font-size: 42px;\n display: inline-block;\n vertical-align: middle;\n border-radius: 4px;\n line-height: 1;\n padding: 7px 20px;\n margin-left: 10px;\n min-width: 145px;\n`;\n\nexport const ProgressWrap = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n justify-content: center;\n`;\n\nexport const ProgressTime = styled.div`\n width: 440px;\n display: inline-block;\n vertical-align: middle;\n\n .progress {\n height: 46px;\n background-color: #fff;\n border: 6px solid #082b56;\n border-radius: 10px;\n display: flex;\n overflow: hidden;\n font-size: 0.75rem;\n\n .progress-bar {\n background-color: #ff7201;\n border-radius: 0 4px 4px 0;\n width: 100%;\n\n &.active {\n width: 0%;\n }\n }\n }\n`;\n\nexport const CountdownNumber = styled.div`\n background: url(${iconTimer}) no-repeat;\n width: 81px;\n height: 75px;\n color: #fff;\n font-size: 51px;\n text-align: center;\n line-height: 75px;\n margin-left: 30px;\n padding-right: 6px;\n`;\n","import React from 'react';\nimport {\n CountdownNumber,\n ProgressTime,\n ProgressWrap,\n TimerCountdown,\n TimerWrap\n} from './FactualFluencyTimer.style';\n\nconst FactualFluencyTimer = ({ timeType, time, intervalActive, limit }) => {\n const renderTime = (timeType, time) => {\n switch (timeType.value) {\n case 4:\n return (\n <>\n {timeType.name}\n \n {time.m} : {time.s < 10 ? `0${time.s}` : time.s}\n \n \n );\n case 5:\n return (\n \n \n \n \n \n {time.s} \n \n );\n default:\n break;\n }\n };\n return {renderTime(timeType, time)} ;\n};\n\nexport default React.memo(FactualFluencyTimer);\n","import 'assets/icons/icon.css';\nimport React, { useCallback } from 'react';\nimport {\n ButtonHeader,\n LeftNav,\n RightNav,\n TopBarFixed\n} from './FactualFluencyHeader.style';\nimport FactualFluencyTimer from './FactualFluencyTimer';\n\nconst FactualFluencyHeader = ({\n timeType,\n time,\n intervalActive,\n limit,\n mute,\n onMute\n}) => {\n const onClose = useCallback(() => {\n window.open('', '_self');\n window.close();\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default React.memo(FactualFluencyHeader);\n","import styled from 'styled-components';\n\nexport const QuestionWrap = styled.div`\n text-align: center;\n margin-top: 150px;\n\n &.have-pad {\n padding-right: 270px;\n }\n\n .question {\n display: inline-block;\n vertical-align: middle;\n }\n`;\n\nexport const QuestionNumber = styled.div`\n font-size: 72px;\n margin-right: 80px;\n color: #e06400;\n font-weight: 800;\n`;\n\nexport const QuestionText = styled.div`\n font-size: 131px;\n margin-right: 20px;\n font-weight: 800;\n color: #212529;\n`;\n\nexport const QuestionAnswer = styled.div`\n .form-control {\n background-color: #e4f0ff;\n border: 0;\n height: 137px;\n font-size: 131px;\n width: 200px;\n color: #212529;\n text-align: center;\n border-radius: 10px;\n padding: 0;\n }\n`;\n","import React from 'react';\nimport questionParser from 'helpers/questionParser';\nimport convertTagsToHTML from 'helpers/text/convertTagsToHTML';\nimport HTMLReactParser from 'html-react-parser';\nimport {\n QuestionAnswer,\n QuestionNumber,\n QuestionText,\n QuestionWrap\n} from './FactualFluencyQuestion.style';\n\nconst FactualFluencyQuestion = ({\n questionNumber,\n question,\n onChange,\n onSubmitAnswer,\n value\n}) => {\n const { title } = questionParser(question.CartQuestion);\n\n const renderQuestion = HTMLReactParser(convertTagsToHTML(title, false), {\n replace: domNode => {\n if (domNode.name === 'p') {\n return (\n \n {domNode.children[0]?.data.replace('__', '') ?? ''}\n \n );\n }\n if (domNode.name === 'input') {\n return (\n \n \n );\n }\n return domNode;\n }\n }).filter(el => el.type !== 'br');\n return (\n \n {`Q${questionNumber}:`} \n {renderQuestion}\n \n );\n};\n\nexport default React.memo(FactualFluencyQuestion);\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n padding-top: 100px;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n 'Helvetica Neue', sans-serif;\n }\n`;\n\nexport const FactualFluencyBody = styled.div``;\nexport const FactualFluencySideBar = styled.div`\n position: fixed;\n right: 0;\n bottom: 0;\n width: 270px;\n background-color: #4484d2;\n border-left: 0;\n top: 100px;\n`;\n\nexport const ButtonSkip = styled.button`\n font-size: 36px;\n margin-right: 0;\n margin-left: auto;\n background-color: #094a9b;\n color: #fff;\n border: 0;\n display: block;\n padding: 10px 20px 5px 30px;\n`;\n\nexport const ButtonPrev = styled.button`\n font-size: 36px;\n margin-right: 0;\n margin-left: auto;\n background-color: #094a9b;\n color: #fff;\n border: 0;\n display: block;\n position: fixed;\n left: 0;\n bottom: 80px;\n border-radius: 0 32px 32px 0;\n padding: 3px 30px 5px 20px;\n font-weight: 800;\n`;\n\nexport const ButtonNext = styled.button`\n font-size: 36px;\n margin-right: 0;\n margin-left: auto;\n background-color: #094a9b;\n color: #fff;\n border: 0;\n display: block;\n padding: 3px 20px 5px 30px;\n position: fixed;\n right: 0;\n bottom: 80px;\n border-radius: 32px 0 0 32px;\n font-weight: 800;\n`;\n\nexport const Backdrop = styled.div`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.65);\n z-index: 1040;\n`;\n\nexport const Countdown = styled.div`\n width: 484px;\n height: 484px;\n border-radius: 50%;\n background-color: #e06400;\n border: 40px solid #fff;\n position: fixed;\n top: 50%;\n left: 50%;\n margin: -242px 0 0 -242px;\n z-index: 1050;\n font-size: 210px;\n text-align: center;\n color: #fff;\n line-height: 404px;\n justify-content: center;\n font-weight: 700;\n`;\n","import React, { useCallback, useEffect } from 'react';\nimport FactualFluencyHeader from 'components/CreateAndAssign/FactualFluency/Preview/FactualFluencyHeader';\nimport FactualFluencyQuestion from 'components/CreateAndAssign/FactualFluency/Preview/FactualFluencyQuestion';\n\nimport {\n Backdrop,\n ButtonPrev,\n ButtonNext,\n Container,\n Countdown,\n FactualFluencyBody\n} from './FactualFluencyPreview.styles';\nimport { useState } from 'react';\nimport { getTimeType, secondsToTime } from 'helpers/timesParser';\nimport { useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\n\nconst FactualFluencyPreview = ({ onMute, mute }) => {\n const history = useHistory();\n const { assignmentType, timeLimit } = useSelector(state => state.worksheet);\n\n const { createFactualFluencyItems } = useSelector(\n state => state.factualFluency\n );\n\n const [isStart, setIsStart] = useState(true);\n const [intervalActive, setIntervalActive] = useState(false);\n const [countdown, setCountdown] = useState(3);\n const [time, setTime] = useState(secondsToTime(timeLimit));\n const [seconds, setSeconds] = useState(timeLimit);\n const [currentQuestion, setCurrentQuestion] = useState(0);\n const [inputValue, setInputValue] = useState('');\n\n const timeType = getTimeType(assignmentType);\n\n const resetInterval = useCallback(() => {\n setIntervalActive(false);\n setSeconds(timeLimit);\n setTime(secondsToTime(timeLimit));\n setTimeout(function() {\n setIntervalActive(true);\n }, 500);\n // eslint-disable-next-line\n }, []);\n\n const onChange = useCallback(e => {\n setInputValue(e.target.value);\n }, []);\n\n const onSkip = useCallback(() => {\n if (currentQuestion < createFactualFluencyItems.length - 1) {\n setInputValue('');\n setCurrentQuestion(currentQuestion + 1);\n\n if (timeType.value === 5) {\n resetInterval();\n }\n } else {\n history.push('/factual-fluency/result');\n }\n // eslint-disable-next-line\n }, [currentQuestion, timeType]);\n\n const onPrev = useCallback(() => {\n if (currentQuestion > 0) {\n setInputValue('');\n setCurrentQuestion(currentQuestion - 1);\n if (timeType.value === 5) {\n resetInterval();\n }\n }\n // eslint-disable-next-line\n }, [currentQuestion, timeType]);\n\n const onSubmitAnswer = useCallback(\n e => {\n if (e.key === 'Enter') {\n if (currentQuestion < createFactualFluencyItems.length - 1) {\n setInputValue('');\n setCurrentQuestion(prev => prev + 1);\n if (timeType.value === 5) {\n resetInterval();\n }\n } else {\n history.push('/factual-fluency/result');\n }\n }\n },\n // eslint-disable-next-line\n [inputValue, timeType]\n );\n\n useEffect(() => {\n let interval;\n let timeout;\n\n switch (timeType.value) {\n case 4:\n if (isStart) {\n interval = setInterval(() => {\n setSeconds(seconds - 1);\n setTime(secondsToTime(seconds - 1));\n }, 1000);\n if (seconds === 0) {\n clearInterval(interval);\n }\n }\n break;\n case 5:\n if (isStart) {\n timeout = setTimeout(function() {\n setIntervalActive(true);\n }, 500);\n }\n interval = setInterval(() => {\n setSeconds(seconds - 1);\n setTime(secondsToTime(seconds - 1));\n }, 1000);\n if (seconds <= 0) {\n if (currentQuestion < createFactualFluencyItems.length - 1) {\n setInputValue('');\n setCurrentQuestion(currentQuestion + 1);\n resetInterval();\n } else {\n clearInterval(interval);\n clearTimeout(timeout);\n history.push('/factual-fluency/result');\n }\n }\n break;\n default:\n break;\n }\n\n return () => {\n clearInterval(interval);\n clearTimeout(timeout);\n };\n // eslint-disable-next-line\n }, [seconds, timeType, isStart, currentQuestion, createFactualFluencyItems]);\n\n useEffect(() => {\n let interval;\n setIsStart(false);\n switch (timeType.value) {\n case 4:\n interval = setInterval(() => {\n setCountdown(countdown - 1);\n }, 1000);\n if (countdown === 0) {\n setIsStart(true);\n clearInterval(interval);\n }\n break;\n default:\n setIsStart(true);\n clearInterval(interval);\n break;\n }\n\n return () => clearInterval(interval);\n }, [countdown, timeType]);\n\n return (\n \n {!isStart && (\n <>\n {countdown} \n \n )}\n\n \n \n {currentQuestion > 0 && (\n \n \n )}\n \n \n \n );\n};\n\nexport default React.memo(FactualFluencyPreview);\n","import styled from 'styled-components';\nimport bgFactualFluency from 'assets/img/factual-fluency/bg-blue_hover.jpeg';\n\nexport const Container = styled.div`\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n 'Helvetica Neue', sans-serif;\n\n position: relative;\n margin-top: -53px;\n background: #0066b8 url(${bgFactualFluency});\n color: #fff;\n height: 100vh;\n\n .title-text {\n font-size: 60px;\n font-weight: 700;\n margin-bottom: 80px;\n\n .btn-close-rt {\n position: absolute;\n top: 20px;\n right: 20px;\n background-color: transparent;\n }\n`;\n\nexport const CenterMiddle = styled.div`\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n text-align: center;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n\n .title {\n font-family: 'Varela Round', sans-serif;\n font-size: 60px;\n font-weight: 700;\n margin-bottom: 80px;\n }\n`;\n\nexport const InfoGroup = styled.div`\n max-width: 720px;\n margin: 0 auto 30px;\n &::after {\n display: block;\n clear: both;\n content: '';\n }\n`;\n\nexport const InfoGroupBtn = styled.div`\n margin: 70px auto 0;\n max-width: 770px;\n\n .btn-xlg {\n font-size: 50px;\n font-weight: 700;\n text-transform: uppercase;\n line-height: 70px;\n border-radius: 40px;\n }\n`;\n\nexport const InfoLabel = styled.div`\n float: left;\n line-height: 50px;\n padding: 10px 20px;\n background-color: #0e8bff;\n color: #fff;\n width: 270px;\n text-align: center;\n border-radius: 10px 0 0 10px;\n font-size: 30px;\n`;\n\nexport const InfoDesc = styled.div`\n float: left;\n line-height: 50px;\n padding: 10px 20px;\n width: 450px;\n background-color: #fff;\n color: #212529;\n border-radius: 0 10px 10px 0;\n padding-left: 45px;\n padding-right: 45px;\n font-size: 36px;\n`;\n\nexport const CloseButton = styled.button`\n position: absolute;\n pointer-events: all;\n top: 20px;\n right: 20px;\n z-index: 100;\n`;\n","import { getTimeType, renderTimes, secondsToTime } from 'helpers/timesParser';\nimport React, { useCallback, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n Container,\n CenterMiddle,\n InfoGroup,\n InfoDesc,\n InfoLabel,\n InfoGroupBtn,\n CloseButton\n} from './FactualFluencyReady.styles';\n\nconst FactualFluencyReady = ({ onMute }) => {\n const { t, i18n } = useTranslation(['create-assign-question']);\n const timeUnit = unit => {\n return `${t(`create-assign-question:timeSetting.${unit}`, unit)}`;\n };\n const { title, assignmentType, timeLimit } = useSelector(\n state => state.worksheet\n );\n\n const { createFactualFluencyItems } = useSelector(\n state => state.factualFluency\n );\n\n const { profileData } = useSelector(state => state.profileSettings);\n\n const timeType = getTimeType(assignmentType);\n\n const times = secondsToTime(timeLimit);\n\n const history = useHistory();\n const onClose = useCallback(() => {\n window.open('', '_self');\n window.close();\n }, []);\n\n useEffect(() => {\n const lang = localStorage.getItem('current_locale');\n i18n.changeLanguage(lang);\n }, [i18n]);\n\n const onClick = useCallback(() => {\n onMute();\n history.push('/factual-fluency/preview');\n }, [history, onMute]);\n return (\n \n \n \n \n \n
{title} \n {/* \n Deadline \n Total 1 Min \n */}\n \n \n {t(`create-assign-question:readyFF.assignBy`, 'Assigned By')}\n \n {profileData.FullName} \n \n \n \n {t(`create-assign-question:readyFF.time`, 'Time')}\n \n \n {timeType.name}{' '}\n {timeType.value !== 6 && renderTimes(times, timeUnit)}\n \n \n \n \n {t(`create-assign-question:readyFF.noOfQn`, 'No. of Qns')}\n \n \n {createFactualFluencyItems.length}{' '}\n {t(`create-assign-question:readyFF.qn`, 'Qns')}\n \n \n \n \n {t(`create-assign-question:readyFF.ready`, 'Ready, Go!')}\n \n \n \n \n \n );\n};\n\nexport default React.memo(FactualFluencyReady);\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n padding-top: 100px;\n font-family: 'Linotte Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI',\n 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n 'Helvetica Neue', sans-serif;\n\n .wrap-button-right {\n width: 135px;\n margin: 0;\n\n .single-btn {\n width: 100%;\n }\n }\n`;\n\nexport const NavTitle = styled.div`\n font-size: 46px;\n font-weight: 700;\n padding-left: 135px;\n margin: 0 auto;\n\n span {\n font-size: 60px;\n text-align: center;\n }\n`;\n\nexport const ResultBody = styled.div`\n font-weight: 700;\n display: table;\n margin: 0 auto;\n`;\nexport const QuestionWrap = styled.div`\n margin-top: 20px;\n padding-right: 0px;\n display: table-row;\n\n .question-number {\n display: table-cell;\n vertical-align: middle;\n padding-right: 50px;\n font-size: 44px;\n color: #e06400;\n }\n\n .question-wrap {\n display: table-cell;\n vertical-align: middle;\n padding-right: 30px;\n\n .question-text {\n font-size: 54px;\n margin-right: 0;\n text-align: right;\n line-height: 1;\n color: #212529;\n\n &.answer {\n margin-left: 20px;\n color: #064da4;\n }\n }\n }\n`;\n","import React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport {\n ButtonHeader,\n RightNav,\n TopBarFixed\n} from 'components/CreateAndAssign/FactualFluency/Preview/FactualFluencyHeader.style';\nimport { useSelector } from 'react-redux';\nimport questionParser from 'helpers/questionParser';\nimport HTMLReactParser from 'html-react-parser';\nimport convertTagsToHTML from 'helpers/text/convertTagsToHTML';\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport {\n Container,\n NavTitle,\n QuestionWrap,\n ResultBody\n} from './FactualFluencyResult.styles';\n\nconst renderQuestionAnswer = (question, number) => {\n const { solution } = questionParser(question);\n const renderQuestion = HTMLReactParser(convertTagsToHTML(solution, false), {\n replace: domNode => {\n if (domNode.name === 'p') {\n let questionText = '';\n let answerText = '';\n const text = domNode.children[0]?.data ?? '';\n if (text) {\n const split = text.split('=');\n questionText = !isNilOrEmpty(split[0]) ? split[0].trim() : '';\n answerText = !isNilOrEmpty(split[1]) ? split[1].trim() : '';\n }\n return (\n \n {`Q${number}:`}
\n \n {questionText} \n
\n \n = \n
\n \n {answerText} \n
\n \n );\n }\n return domNode;\n }\n }).filter(el => el.type !== 'br');\n\n return renderQuestion;\n};\n\nconst FactualFluencyResult = () => {\n const { createFactualFluencyItems } = useSelector(\n state => state.factualFluency\n );\n const { t } = useTranslation(['create-assign-factual-fluency']);\n\n const onClose = useCallback(() => {\n window.open('', '_self');\n window.close();\n }, []);\n return (\n \n \n \n {t('create-assign-factual-fluency:answers', 'Answers')}:{' '}\n Q1 - Q{createFactualFluencyItems.length} \n \n \n \n \n \n \n \n {createFactualFluencyItems.map((question, key) => {\n return renderQuestionAnswer(question.CartQuestion, key + 1);\n })}\n \n \n );\n};\n\nexport default React.memo(FactualFluencyResult);\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Route, Switch, useLocation } from 'react-router-dom';\nimport useSound from 'use-sound';\nimport FactualFluencyPreview from './FactualFluencyPreview';\nimport FactualFluencyReady from './FactualFluencyReady';\nimport bgAudio from 'assets/audio/bg-music.mp3';\nimport FactualFluencyResult from './FactualFluencyResult';\n\nconst FactualFluencyGame = () => {\n const [mute, setMute] = useState(true);\n const { pathname } = useLocation();\n\n const onMute = useCallback(() => {\n setMute(!mute);\n }, [mute]);\n\n const [play, { stop }] = useSound(bgAudio, { interrupt: true });\n\n useEffect(() => {\n if (mute) {\n stop();\n } else {\n play();\n }\n return () => {\n stop();\n };\n // eslint-disable-next-line\n }, [mute]);\n\n useEffect(() => {\n if (\n pathname === '/factual-fluency/ready' ||\n pathname === '/factual-fluency/result'\n ) {\n setMute(true);\n } else {\n setMute(false);\n }\n }, [pathname]);\n\n return (\n \n (\n \n );\n};\n\nexport default React.memo(FactualFluencyGame);\n","import styled from 'styled-components';\n\nexport const MediaBody = styled.div`\n margin-right: 50px;\n p {\n line-height: 1.4285;\n font-size: 18px;\n color: #000;\n font-family: Arial, sans-serif;\n margin-bottom: -6px;\n }\n\n .question {\n margin-bottom: 10px;\n }\n`;\n\nexport const McqOptionsList = styled.ul`\n list-style-type: circle;\n li {\n line-height: 1.4285;\n font-size: 18px;\n color: #000;\n font-family: Arial, sans-serif;\n }\n`;\n\nexport const TableModal = styled.div`\n line-height: 1.4285;\n font-size: 18px;\n color: #000;\n font-family: Arial, sans-serif;\n table {\n width: 100%;\n margin-left: initial !important;\n margin: auto;\n }\n table tbody tr td {\n text-align: center;\n }\n table tbody tr td hr {\n margin-top: 0;\n margin-bottom: 3px;\n border-color: darkgray;\n }\n table tbody tr td input {\n max-width: 25px !important;\n height: 35px;\n text-align: center;\n }\n input {\n border-color: transparent;\n background-color: rgba(144, 144, 144, 0.2);\n }\n @media print {\n td {\n font-size: 18px;\n color: #000;\n font-family: Arial, sans-serif;\n }\n }\n`;\n","import React from 'react';\nimport { isNil } from 'ramda';\nimport HTMLReactParser from 'html-react-parser';\nimport questionParser from 'helpers/questionParser';\nimport convertTagsToHTML from 'helpers/text/convertTagsToHTML';\nimport {\n MediaBody,\n McqOptionsList,\n TableModal\n} from './QuestionContentPrint.styles';\n\nexport default function QuestionContentPrint({ question }) {\n // jsx renders\n const { title, mcqOptions } = questionParser(question);\n const renderOptions = mcqOptions.map(option =>\n HTMLReactParser(convertTagsToHTML(option, false), {\n replace: domNode => {\n if (domNode.name === 'img') {\n domNode.attribs.style = 'width: 68%';\n return domNode;\n }\n return domNode;\n }\n })\n );\n const renderQuestion = HTMLReactParser(convertTagsToHTML(title), {\n replace: domNode => {\n if (domNode.name === 'img' && !isNil(domNode.attribs?.url)) {\n return (\n \n {domNode.children[0]?.data ?? ''}\n \n );\n }\n if (domNode.name === 'table') {\n domNode.attribs.cellspacing = '0';\n domNode.attribs.cellpadding = '0';\n domNode.attribs.style = 'align-content: center;';\n return domNode;\n }\n if (domNode.name === 'td') {\n if (\n domNode.attribs.hasOwnProperty('style') &&\n !domNode.attribs.style.includes('border')\n ) {\n domNode.attribs.style = 'width: 20%';\n }\n return domNode;\n }\n return domNode;\n }\n });\n return (\n \n
\n {renderQuestion} \n {mcqOptions.length > 0 && (\n \n {renderOptions.map(option => (\n {option} \n ))}\n \n )}\n \n
\n Answer: \n
\n {!isEmpty(correctMCQAnswers) &&\n correctMCQAnswers.map(correctAnswer => {\n return HTMLReactParser(correctAnswer, {\n replace: domNode => {\n if (domNode.name === 'img' && !isNil(domNode.attribs?.url)) {\n return (\n {domNode.data}
;\n }\n\n return domNode;\n }\n });\n })}\n \n );\n }\n\n return (\n <>\n \n Answer: \n {!isEmpty(answer) && answer === '-' ? '-' : null}\n
\n {!isEmpty(answer) &&\n answer !== '-' &&\n answer.map(e => {\n return {e[1].Value}
;\n })}\n \n );\n }, [answer, correctMCQAnswers, type]);\n\n return (\n \n {renderAnswer}\n \n Solution: \n
\n {renderSolutions}
\n \n );\n}\n","const { default: styled } = require('styled-components');\n\nexport const ContainerPrint = styled.div`\n width: 210mm;\n height: 297mm;\n font-size: 12px;\n font-family: 'Verdana', Arial, Helvetica, sans-serif;\n color: #222;\n margin: 0 auto;\n @media all {\n .page-break {\n display: none;\n }\n .question-break {\n display: none;\n }\n }\n @media print {\n html,\n body {\n height: initial !important;\n overflow: initial !important;\n -webkit-print-color-adjust: exact;\n }\n }\n @media print {\n .page-break {\n margin-top: 0px;\n display: block;\n page-break-after: always;\n }\n }\n @page {\n margin: 20mm 0mm;\n size: 210mm 290mm;\n }\n`;\n\nexport const ContainerPaper = styled.div`\n color: #000;\n @media print {\n padding: 0px auto;\n }\n .worksheet-title {\n margin: 0 0 20px 0;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n .left-title {\n width: 50%;\n p {\n text-align: left;\n font-size: 30px;\n margin-bottom: 10px;\n margin-top: -10px;\n }\n }\n .right-title {\n width: 50%;\n text-align: right;\n p {\n span {\n border-bottom: 1px solid black;\n }\n }\n }\n .inputWrapper {\n margin-left: 5px;\n }\n }\n\n .header-text {\n padding: 15px 0;\n border-bottom: 1px solid #ebebeb;\n margin-bottom: 15px;\n }\n\n @media print {\n .question-break {\n margin-bottom: 10mm;\n display: block;\n page-break-inside: auto;\n }\n }\n`;\n\nexport const QuestionsList = styled.div`\n .question-item-body {\n margin-bottom: 50px;\n }\n\n @media print {\n .question-item-body {\n margin-top: 10mm;\n page-break-inside: avoid;\n }\n }\n`;\n\nexport const SolutionsList = styled.div`\n padding-top: 200px;\n .solution-header {\n font-size: 40px;\n text-align: center;\n margin-bottom: 30px;\n }\n\n .solution-item-body {\n margin-bottom: 10px;\n }\n\n @media print {\n padding-top: 0;\n .solution-item-body {\n page-break-inside: avoid;\n }\n }\n`;\n\nexport const Container = styled.div`\n .top {\n display: flex;\n width: 100%;\n padding: 0 2rem;\n margin-bottom: 2rem;\n justify-content: flex-end;\n }\n`;\n","import React, { useEffect, useRef } from 'react';\nimport QuestionContentPrint from 'components/Print/QuestionContentPrint';\nimport SolutionContentPrint from 'components/Print/SolutionContentPrint';\nimport isNilOrEmpty from 'helpers/isNilOrEmpty';\nimport { useReactToPrint } from 'react-to-print';\nimport { Button } from 'react-bootstrap';\n\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getWorksheet } from 'stores/worksheet/actions';\nimport {\n ContainerPaper,\n ContainerPrint,\n QuestionsList,\n SolutionsList,\n Container\n} from './WorksheetPrint.styles';\n\nclass WorksheetPrintComponent extends React.PureComponent {\n render() {\n const { selectedWorksheet, containerRef } = this.props;\n\n return (\n !isNilOrEmpty(selectedWorksheet) && (\n \n \n \n
\n
{selectedWorksheet.Title}
\n
\n
\n
\n Name:\n \n \n \n
\n
\n Class:\n \n \n \n
\n
\n
\n {selectedWorksheet.Questions.map((question, key) => {\n const order = key + 1;\n return (\n <>\n \n Question {order}
\n
\n \n );\n })}\n \n
\n \n Answers and Solutions
\n {selectedWorksheet.Questions.map((question, key) => {\n const order = key + 1;\n return (\n <>\n \n Question {order}
\n
\n \n );\n })}\n \n \n \n )\n );\n }\n}\n\nconst WorksheetPrint = ({ match }) => {\n const containerRef = useRef(null);\n const dispatch = useDispatch();\n const homeworkID = parseInt(match.params.homeworkID, 10);\n const { selectedWorksheet } = useSelector(state => state.worksheet);\n\n useEffect(() => {\n dispatch(getWorksheet(homeworkID));\n }, [dispatch, homeworkID]);\n\n const handlePrint = useReactToPrint({\n content: () => containerRef.current\n });\n\n console.log(selectedWorksheet, 'a');\n return (\n <>\n \n \n handlePrint()}>\n Print Worksheet\n \n
\n \n {selectedWorksheet && (\n \n \n {\n window.location.href = process.env.REACT_APP_MEMBERS_LOGIN_URL;\n }}\n />\n \n \n );\n}\n","import APP_STARTUP from './actionTypes';\n\nexport default () => {\n return { type: APP_STARTUP };\n};\n","import React, { useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\nimport { PersistGate } from 'redux-persist/lib/integration/react';\nimport createStore from 'stores';\nimport { isNil } from 'ramda';\nimport useSecret from 'hooks/useSecret';\nimport Routes from './Routes';\n\nconst { store, persistor } = createStore();\n\nconst App = () => {\n const { i18n } = useTranslation(['navigation']);\n const { localePreferences } = useSelector(state => state.login);\n const updatedLocale = localStorage.getItem('current_locale');\n\n useSecret();\n\n const onChangeLanguage = () => {\n const sameLocale =\n localePreferences &&\n localePreferences.Value === updatedLocale &&\n updatedLocale;\n // for reload\n if (!isNil(updatedLocale) && !sameLocale) {\n i18n.changeLanguage(updatedLocale);\n // for display lang on login\n } else if (!isNil(localePreferences) && localePreferences.Value !== '') {\n i18n.changeLanguage(localePreferences.Value);\n } else {\n i18n.changeLanguage('en');\n }\n };\n\n useEffect(() => {\n onChangeLanguage();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [localePreferences]);\n\n // expose store when run in Cypress\n if (window.Cypress) {\n window.store = store;\n }\n\n return (\n \n \n );\n};\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\nimport Backend from 'i18next-http-backend';\n\ni18n\n // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)\n // learn more: https://github.com/i18next/i18next-http-backend\n .use(Backend)\n // pass the i18n instance to react-i18next.\n .use(initReactI18next)\n // init i18next\n // for all options read: https://www.i18next.com/overview/configuration-options\n .init({\n fallbackLng: 'en',\n debug: true,\n lng: 'en',\n whitelist: ['en', 'ba', 'zh_CN', 'zh_TW'],\n\n interpolation: {\n escapeValue: false // not needed for react as it escapes by default\n },\n backend: {\n loadPath: '/locales/{{lng}}/{{ns}}.json'\n }\n });\n\nexport default i18n;\n","import React, { Suspense } from 'react';\nimport { Provider } from 'react-redux';\nimport ReactDOM from 'react-dom';\nimport createStore from 'stores';\nimport 'bootstrap/scss/bootstrap.scss';\nimport 'assets/scss/style.scss';\nimport { CookiesProvider } from 'react-cookie';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\nimport './i18n';\n\nconst { store } = createStore();\n\nReactDOM.render(\n \n \n \n \n \n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","module.exports = __webpack_public_path__ + \"static/media/icon-error.827b720a.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-student-list-plan-school.2467c838.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-student-list-plan-standard.80c4b3bf.svg\";","module.exports = __webpack_public_path__ + \"static/media/icons8-trash.d543d333.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-print-active.bcc6a434.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-download.e71fcf99.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-wrong-ans.9dbb6613.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-collapse-show.db5aa1eb.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-insight.b1023661.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-group.f1f53d58.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-play.2e06dcd6.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-topical-worksheet-white.7ec0a016.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-no-syllabus.3aeb2f03.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-calendar-white.fbb50a92.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-leaderboard.333c85ca.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-open-hw.c91ba277.svg\";","module.exports = __webpack_public_path__ + \"static/media/empty-search-results.7a1b613f.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-lup.e5348dcc.svg\";","module.exports = __webpack_public_path__ + \"static/media/mascot.8637edc6.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-milestone.ab5d88d6.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-print.4b02743b.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-print-arrow.6332e6bd.svg\";","module.exports = __webpack_public_path__ + \"static/media/print-icon.652cb9e3.svg\";","module.exports = __webpack_public_path__ + \"static/media/logo.9e756b7e.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-topic-revision.084ce570.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-check-orange.a5783ba3.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-show-pswd.9c788937.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-hide-pswd.28a45181.svg\";","module.exports = __webpack_public_path__ + \"static/media/download-csv.9840bdb4.svg\";","module.exports = __webpack_public_path__ + \"static/media/avatar.1acf810c.png\";","module.exports = __webpack_public_path__ + \"static/media/cube.f9f82fb2.svg\";","module.exports = __webpack_public_path__ + \"static/media/question.efc89efd.svg\";","module.exports = __webpack_public_path__ + \"static/media/video.416e20af.svg\";","module.exports = __webpack_public_path__ + \"static/media/worksheet.62d2d443.svg\";","module.exports = __webpack_public_path__ + \"static/media/no-track-assignment.667740a7.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAPKADAAQAAAABAAAAPAAAAACoF8tmAAAIYElEQVRoBeVae2xUVRr/vjO3U1rbhoJWq0GXR4RFeUQRlWJr10cMgrob8G0QiJpoghYD7RT/aJSkblaFhWiWRfBBllWJykZEgw9a1EARoyCixpoSNdBAbHXaebZzP78zdYZ779x759557Wz2JJN7zvf+zXfe9yLkqZDPNzZEdD0BTGMXtYBYA0Rj+FnLzzOfuKVWIOBJQjiBRH3EdQA6IQR8ERqOvb92zoq+fISGuTQaXL16HKnqYga0kIHNsLGtrmHANnw2QZ+xje0x9Lz0t9kP9drJuuHlBHDA55vPmVzBxhodOk8LOGGH7XInoLcZ/FPts5d3JuiZPrMCPNjScgMitrPzma4C4PSt+fO57n0TdTHwle2XL//IlT+NsHunrBxavfoCVVXXc/UmjS1XVe7SruR1wkRbwYuPtl+y/JSO7qBhO47M9Ad9viUM9ijzMgZrZtcVDfEeisK3zV3rb3Slx8KOM0xtbeWBcHgLd+Hb3DoxkXc8hk10dSQCWvv97NqV2/HWmI5h0XCUYQY7OhiJ7MkRWBmKI78WMevIvLQ1TezqfXfVx3+t1DEsGmkdB1pbawORyD7Wn21hIxOymomSlQ4iXCuUsk9a968720omQbcFTKtWVfKEupv7/ZSEQo6etn4z8cGgp6kg3mvbv77KTt/SMXdjJSjELgZ7sZ2BYuJJ0GGkt+4/uLHEKi5LwMFw+Fle8+ZaKeroFRWANTUApaU68n+jwWO6fmwsssHKtyngUGvrnQz2fislI91bXw9ljzwCnim57vlGT47bDzQf2HC3mXQK4HBLywSVaLOZcA5pOZ20zOISKm16rGvDeCMvBfAw4vMsNMoomON2it8c25c7jFExUDcZ7eocB5qbF/Ak1WgUykM77xkeiRmv8XWtm6+NPwmYTyVIQjypZeaxnvSbRx+/m8YntD6SjnmiWsTZnaplptQ9HgBFSf3xqV0WTMNPsVcQAs5sPrCuPuGKox8pvMFYmahbPUsXLQLP9OlWbPAuXBj/GQWi77wDwx/pTnSySyf/bClf5a2Amy9oMKqmbX/+87dwpK/bVk6o4mEW2CuF4oAjPt+UYYBZtlrMpMFBoP7+FDEsK+Npjue5QAAoGk3hQzhspOnASqZXKPDH6glGubTtHwZ708rwDcKClsPPVT85/cH+OGA+ZixOq8UC0Z07AeTPULzz5oEydy5EmBc7dMjAddb0RwOw9btU2+m0T4b60onII2EJhIcXsuCmOGBedxfwSSitYj4FouoQfN3fkzcXPGT/IgELamoaw2AvypunIjGMhFe37WlTRNDrvapIYspvGLwRCZVVXyFAiFn59VQ81oXAS+Rsab/2Fk+82UdCNEnhwTw52wkrumsXyJ+LkrIOu9DNWJQIJ8kMn5WxhcwVU9bhzE051+QL/fP4/Q6c4Vzlf1wSsVrwQZ+3SQUvBTot6XHxle4YXNbpl3tByzsgvUruWs8rjjZ3uXMoLREN81iiwdxaLWJriH5BAP8/gIH8crZMf9wo4qS5Co2wVwGCbj5OXOZKsZDCY/iFxzh+naXwYtKzBaDvQObekb6RGbY/PWduPjea45fxwjme77z53lsCz6YQHhUk8LNsbBRWN9sjbOygKItVfsBBu14Xq0qsnXuYVaFY8139ST18RR44BhA5BfDjK65UdcK8JMGQf188qqUdv37K+2nHp6ZzywU0zyyH936Kws4f9Fc6EuyDU8vgrDIB7Z8HIMTXKWal8Osw7cO6HXNG9rSIr5sFZUX7OazCiaAKt/yhFOaf702KJcDOGKvAN7/ELMEmFQpZQXxDuosDJlD+5cZ3hAfA2sNB6PbHkqC1YD88PgTbulMu7ty4yK2s7M4eeEEaTQ60pZ3+Dm40uPFUyn9X0/RymFTlgd6QCudwN3YK1rRLX/FvToHLN5CnOgC+k9/X2BSibTh3x11SYqRLyxrB3+XDTZGZ3nAkBGEepxJsz0Asu8y6BRsP9jQEy9hHPq2Ks5MZ5o01Lt3r7+b3qxMsFQ0MbTf2DxHImXvHsUjKRGZQizdNM2wmmC2NqIOz25gwc/rvQb7XA3w8wUj31IKV3dh3YFA3ptPpF4wvsE3r6zRgpm5uqHqJz4yfagXM6kawcoKKcLc2TmRmuoWl0as4581OrU8dYMlAUB4gAovVc0T1/AoBU6uVlAlKO3vXneOFUfzuLesi99Iznga49B8Asu60EJ8CS0WTUfz0GNZwlnb4V/CLCPZiXeTm4zivxWZFzt7lvNPqj/Lh06I4HsOXbuR99O/XboEegEOPWlg0knE+1r3xtpGakmEpsOXqqmd41n7LKKxtW4GVMjLTdmC1dtzVTfOTaoLgKTOwUtAUsGREqyvv4LUqi7OYtJKD4nYvTfQ+1CktVp5t/7J799BogQP7uXtPtjKQKd1xl3blgL6EiuCVOGN3wErNMsNS4cVG/EURnkYeiUetDBQNneArnnKvtQMrY7UFLAX+WX/GCVWtrCuK7i0DMitEB2GUUod1b540Y2tpaQFLYZnp6OiqPzHoV7XKxVGnF0GU1OOs7b86icd2DJsZWNY5wOs0reNxzd84ZF6yH8MU5JVkCW8bX3MThaMMaw1ubqjcGCvxyg9O92rpBa7/B0poiluwMkbXGdYCW7Z34HZQ1TX8umailu6knmGGj3DEK3m7+K4TH2YyrjOsNbK5vvKVcQ1VF6qIi5zswbW6ruoEe/g0N48npWnZgJU+s8qwMej7Ph64KBajJfxakj8gwfFGvradNsMEh1n+dfDQy3jljmNa3WzqOQWsDWTxJ+GJntjQdTyxTEZQa/hAUsMXhXy5HH8ffSYDlhttuYycZJmRJ8Bx/gBSrqe7nSwxWn9O678BKUmSp6SpDdoAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/Icon Select.a0a45965.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-ivm.52402847.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-questions.3ad22e95.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-trial-account.0dbf6ff1.png\";","module.exports = __webpack_public_path__ + \"static/media/icon-trial-account-expired.5d3d7635.png\";","module.exports = __webpack_public_path__ + \"static/media/icon-play-video.5be3a81a.svg\";","module.exports = __webpack_public_path__ + \"static/media/no-videos-found.4d56b44d.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-c1.c14b00c7.svg\";","module.exports = __webpack_public_path__ + \"static/media/logoTeacher.d02692e0.svg\";","module.exports = __webpack_public_path__ + \"static/media/logoAdmin.7534c94b.svg\";","module.exports = __webpack_public_path__ + \"static/media/arrow.545de504.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-tick-red.c177d488.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-question-cart.a0ed2771.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-topical-worksheet.43c6e319.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA1CAYAAAAOJMhOAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAANKADAAQAAAABAAAANQAAAABDF+aJAAAFo0lEQVRoBe2azYokRRSFp0QQFKYTRBcuNBcyuDMRBHcdG9fWI/gIunTV9QZdLyA9j9Bu3E5uxJVMzm4GhKzBlShMjfizs/xOdNzqrKzIrMjqSqp78MLpG3Hj/p2IqJjq1sm9A8pqtcpJ9wXIgAMSjQs/unevQi/DuAzj7yaTySLYjq8gcQrOQQ32lccEKsfpTRlN9k1AcUfsObDdV6qX4BIsQAkkK1CC38HnIAMSB3IwBSfApGLwNadWmmFULSLgETBZMJgDFyuM/e3g+FtsXTbFAuVQLpNHDFxXzEHsFNC1MFkymO1KjM9OQs0cygmU20S34LBC5gzonks8EbRdnd5i+A0ipGTKDZrEVDupXm8zIXlBshpIdCWKnUENB/wHE7Jw1Qo1Ub6HQbUtz1qTxIEXyoZUYPAuEbM3ITWimqE2yvfi1g0OGRCs3TEyD4fENn3JcSNClos8D4FEPQ07KQK0KzWQRMlgfxd8aAW7ND4HIaT86gVIapB+W3DWh1BS9TT67ZXL6vUun9DEwQiFfLr6ksd9dddrOM69+9UD0LkL+ByLkG7PIvQ4XzceG+DkguMSXcR8zMb6UQipvnoD6lGy0edr1mDQZ0HP+epRtdZuzTT0ZqcT/4cXps3TyXZ1j//RTki9UV9Xz07JbfXLoj0Es/YiayX4pYW/mEvads0/sxyMD/ooWF5pcs+AZP1A+BcKg2Ndd/E5xzlDt+U5hn9bxo+Yvwl+BvpG3ZR/mpP2mHoPsD1r23vmz+hL9TZEvZLrS4z6TDnmpXdgMgcSu5fe3vcD372vHLEPVGyAPO3qhRzbvWOsQ3LXFdi24783oXaum8zpw4Xer64dkzwYlkMSE3MrCKlnerHHIdezPQ1ELoO+i8p6n4pQHhgsgr6LynrPdFxluHJuDCbkHu3Ztn6p4QKHsv1NwXzurBahD0L3gx6FW8bYej/RlfMyVoMkH/3KqfdAYzXRYCwyx8irK6evNa+KPNFRleG43BisyD36laOGCxxezVeuCidTjHFCqTnZ4SnQrzC1xqlxwc8F7U9oESZHJUQPc6AecmC/OTNMkjx4LfUZyoHkRV8o6xl4o8uHtfdia9iTPkP4LYBJFcvVZSNIf6uT5N6HgSVzsSDW3wI/ge/BFils34A/wCfteGyphHTlKqBepu08XXN8HZBcbwKTuTf1/ILX8NkghV1kJD+C++3C2JIIteNS5+Tf7h2jsaz7EjWCPSnmvWSUC5+xCdXUkOjzdy0YdNyS2bV1e8S67chT791xMhaJT5RQiE1Wlq+pCZ6FBNfXzRxYsFPSBywze0yz/kNI9Cf6nZiP2VgfhRB5M2CPgbN6GxqHEkhmGwuNCWt2zX71nh0PhYXgEyVk6/tq9Rjql505cGie0uadJIp1I+MfAOZ2/TYeimYBfA5OiJwFMNnqs1lfTVuTNeP11WO8QcaCGv5RUqwnEcJvCnZ+U8AnA3bV5tZHryagAhL/pyH0fVCDrqdZm/A3+LSdGFsqoQW+Juu/hEbyibSkaq91znHWLliBCzkyfx9s/TtjSVjb+stmiNuHULRZalwAiXpb3x7roVcTUIAlkHhSvQEdi8SmEpriWwE1O22mY56BCyBRT0VzPXlMoAsJUP5+D9sVKhGXRKirKeJFxq6ZyLgu3yQ7CQqgXZPUYNDu4L83IdUC9gCoh0G1OwmSSLtUAYkKnIGk08JvMCHlBmfARLWT6nWSiC2QdG4V0J5YzK9pw28QIfzPQm6Ul3kz38HHlChAeVXL/6z5eQ5OY8Ww7ySkWKAcNTBRjcFXbBJrIsVGMYefdu/jhv+S8SVYgBKYlAzsfy87CUaHzsEUZMDkCYOv1v/xyqyJem9Clj8QU1MONMmZS4oWiRJc7kvEityYkCWShlyOsh13jCXafSOqxpcyIiXQWCQW6P8ltgP/AcZImqaAJbKKAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/empty-cart.dc516550.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-question-card-kebab.ec9a682c.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-question-card-kebab-active.9908a75c.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-list.76f2e8c4.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-list-active.be56e963.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-up.92ca93a7.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-up-active.efe04025.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-up-end.c49b6ce4.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-up-end-active.9698af8a.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-down.4a3b507b.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-down-active.547f06c5.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-down-end.a12061a9.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-menu-down-end-active.32be3841.svg\";","module.exports = __webpack_public_path__ + \"static/media/worksheet-type.3d6f3365.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-schedule-orange.1db281f1.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-assigned.3bdcb4f2.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-assign-now.afc5b7fb.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-saved-worksheet-grey.3e1c8e02.svg\";","module.exports = __webpack_public_path__ + \"static/media/empty-worksheet.769b739f.svg\";","module.exports = __webpack_public_path__ + \"static/media/empty-worksheet-navigator.b54a5c75.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-push-cart.68d0943b.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-right-purple.1b7ab7cf.svg\";","module.exports = __webpack_public_path__ + \"static/media/interval-time.66284d09.gif\";","module.exports = __webpack_public_path__ + \"static/media/total-time.55aa970e.png\";","module.exports = __webpack_public_path__ + \"static/media/no-time.745ef028.png\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-assigned-by-me.8b4dea8f.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-assigned-by-others.2625008f.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-assigned-by-me-active.abb1b2fc.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-assigned-by-others-active.657edd52.svg\";","module.exports = __webpack_public_path__ + \"static/media/empty-assignment.dd280b58.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-track-assignment-summary.1b9e699a.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-tick.447a23b8.svg\";","module.exports = __webpack_public_path__ + \"static/media/other-assignments-splash.bfd725c3.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-success-check.1f6bea9e.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-class.65df50e9.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-game-setting.93d33a67.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-student-list-plan-premium.015a200a.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-linked-active.97e5fb93.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-report.d0641628.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-edit.765c2164.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-student.c72ea052.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-student-list-link.83905d60.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-remove.39e3e2e4.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-mail.a27e8917.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-change-class.6aa2764d.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-manage-class-notification.d615c355.svg\";","module.exports = __webpack_public_path__ + \"static/media/Group_icon.06663f01.svg\";","module.exports = __webpack_public_path__ + \"static/media/group-logo-white.8a288011.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-small-group.87d04c2d.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-right-arrow.0c766d08.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-toga.2b033bfb.svg\";","module.exports = __webpack_public_path__ + \"static/media/defaulticon.4129a037.svg\";","module.exports = __webpack_public_path__ + \"static/media/profile-camera.2a1d2260.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-login-partners.2c3a590a.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-login-school-signup.fdcfb28e.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-login-parent-app.a1a2be4e.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAfCAYAAABplKSyAAAAAXNSR0IArs4c6QAAAt5JREFUWAm1V++V2jAMl0JfS/rl6ARlg9IJmi5QyAbcBGUENjiYADoB5DrAsQF0g94ER79crn1gVXKIY0ICTsL5PUC2/v0sy7JAaDAojuYA9BHaFCKG27qmvLqKWo+gA4ABxPhA8aJb11YzEAgb7RixB4Rr+rfoXQIiMvQc3dmyzUDYHhE7sJOI3A/t5ZSWdXpermHvrQFhBHuJYjLepMRVfgUI0Ixeohts96f6iMj7zmtD/nQA8eCGHtEPV6nP64JIrRJMKF6OOF+6vGseqXOheaA3SYjku9lxeN7GNnZMY/d4bs3e7efWDJqBULutbcyR/pG/zs1AQKvr6DgTa6mjoxBGrZxIEg7vONkGmXUHiuAXvg1PjrASCKJFB14k22GczzUHCJyQeBIF0culbbkp+vtzAGrPu8duudQFDtEGfPqaz4mLkUh2jwtQKqiAuRiNVNYYHpj52RZwS0zCP7ZSI5qBcA2Z2Tacj0OUOCEDIE+SMeCD/GQbqk7THP3BrehVAmE7So6pxYAoSG4J3th8Nxpv0f82rw3CdsJ9xYrnX+w1Z9rzwsLE1LuMcQZIU/uhOWN4xbxTEARTfN8fpXr6+U5fT2zx88+PmtptTkAcAHAG85PX5iuVG4khXag4lOFvzZY3RKm85CNfx7G9mCtUq5R3dDt0JeQuSQPwVZC/zxoA9wzcwHwwAMQS7yY1mP3SMK+f8Y4pA0I74O7oIgDEiEPcs80kgCi7xgSR4zFqMxqE2SEgh7AgAlItJQICwO8PbQAZjYdoMBhflchk0jblGQDsoBCAtGtKLc4D0CZX+ttrOR+DAcLVa5u07mbJELovjCPixnRiFksI2YyLXKG6jkQhRyokAyhoXBOHyzXzxyWq11vWtyVn7gDgiXe90dc5x68zrVQxddQkQUsSuA6ASjomAvqvXyXV6whLQ8N/XJ7KEvg6Xs5YMTfkFSNgKmY5Dn6q5SEqLVLlmq6c/9mSVnVTYGnSAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAALBElEQVR4nO2baZAV1RXHf6ffzHuzsQw7A4OsgimMWjGWWBVNQqpIqWilKtEUxnxKTJnkQ5QPTlwQkpiQqshHKqWVlApIRMsoRYyaADEuqIw6gAjDwDDDCFFwGJz9bX3y4b1+093vdr+eBcziv+pOd9/l3HP+59x7+95+A5/jc3yO/2eIc9OoWpXqpUEsVllKvQgdFmxJVbH+GpEBf8NTqlWDKRpEWAXMFYh5BALqa+N/LqmU4Vn9Vx16LiqDHlV2KjQsqZDmwL4aVavSvexEuNoCRMB13TNQyXI3CadUq5JpdgJXi1uQz8giAiIyID4GxHBvIsKd5ylXuiybyxZWSYe/LwtgsJeGAOMRWFY9yD3uRqkUDeSNd5Kakg4lWwPqGJKt3ramOu6+HdIEc0KotS0e9htfICBmsUp8QiznmiPiNk8rydcvYXRUg0umEJkeY8VRz0XMEAkrTASUAUhuzA8ZLkMC8wLqvfbnnj0h5xqLEH4/KjiCZMgBnhHjGyOucqMKFkB+wisY7RsCWMIJnw4dRR7iAqeQaMjb5I+El0wElOULtwisMY0jS0CELR4ClC0Ia/xed08+nnwf97FUL1MPbKbmo0YUoW/GlZy59Day8RpPW/9k6MDxfFg0FNorCHRms6wOksUbqpWJfnZawjLXuM9FgfBGTZxv1LtWgQ7VynSKnQrLQgkwDAuxs8x5ZS0VXcc8igzWLuDEdWtRK+ZVzkeEf3wX8nzjP69LN/BiJsPqRVXyoYkAC+AakYFkFctR1iEcFUgJHLWEtX7jAepFBsrjLAfWKRxVyLqND5sEJ7S+XGQ8QEXXMSa0/i10EsRQhquOKDuycFVvOYm5cZF5cZkwLy63BhnvJnFMcLhP6yjjdpRfAHF/ZMRSvSx86W5iqV5j+2x5NUdXbCCbGBfoaQic7XcsSMjK4epsDbdBGJZUy6klCfmtLayxobCmO+v61IPbAo0HiKX7mPrB04X3BufdwZFVtCziGl7CupHoPKYEFIRm2FQwgpyS5d0nqW3dXXJ6r23dRfzTEwXDbZ+xRUMt/5wux/iqW1LXUdgZCpsh422Fmfs3IZot2U7UZub+TR7vO0QURQJDJJSnWTwSPc8LASmL7zvK2QrjTjUy7qP9kRf5mo8PMu7UO8XeN4S+k59VHhyJrmNKwOE+rdvfr/corCt4zM5Qd+DJYcuq278JzaY93ndHg2HJvfFIUnc0p/Sqg6rxqP0UVoG2AZ2nMRos4XpVZirEoow9J8T9Iemkac3bmfX+1mETAHBy6SpOL15Z9L7veUnzlYEvz9dGoUeFnZqlYX6FNAvA8UFdIRbPADWeDY5pLS9hvHucxga7WfriXcQy/SMiIFtWycEVG8hUTvRu0kqQUIIAR9cuO8tlsbYBnScxdo/EeP/4tH359fseo+Zsy4iMB7DsDLF0P+dmfimX4fKw6b4A09uN+IqEShFmW7bQoFBjaBIKPxF+4yvOtTGl7ZXIE19QmtL2Dyq7Wj2ybShyxgixwrJiXG8Ij+F535dnA3P2PUHkI6AwqDKn6XFsdEx0UzxDQ8tUmTbc92F1XYvmBKC2Yw/jTh8KFmCVwRW3wIKv5AS0vgrvPQ12xli95pMj1Ha8RVf91YVlS/N/NOhcIBpesoCPw2qUYthfR7Ip6g+UmPWv+A4sXQmVE6GqFpbelMsLwZz9m5FM0tNXoe8QHUPQmcmw2gL+GmasH0Hed/JmHN5BovdM+NhecG2x4AXXhraJ93Uyo/mFQMPduvn19dXtBraVZbh8UZV8aEmW9QI9kUdriPfLB85S17y9tIx4tSGvqmSzuubnKe//JDAKDAz0K6xRZeH8OGXzE7kt8kVxuXV2fotsza2U4yJ8G+gJ67woKgxEzN63FSudDPe+Asm+4g6SfSXbWekks/dvCzTcV71fhOUXJ+SXiyrkmIgYNyIWwJxyednOcinwe+AEkC0INIwlExE1nS1MaX/dzJ4fpi1xykCKAVPaX6PmTLPRcA+E9Yvi8mYpeYW9wPxKaZ8XlzvnJ+SiBQkpy8QZr/AtGNpmmohw7uqbthhmooA0wghwPFLftLnQe5BOMSXSBiRwM7REpGdxQp5LJlgGFL6omDqc3JbzSmSYvG0iJQA1nUeZ3P56iEMglaDoK5AJJXeDXxTpQrwnqu6OrEySWQe2RelrCCZjQ06KTJjVtBUrPWjUCSCe9H7LCEKk7XAsnj9TNywVMz54nnjvJxHDN5+SBmMjD4FcivefZcYhw4qT19EW39esAEQiwHJesnyvWvH+TqY3vxBFhBdBc8AwMf3wDuJ9Z7yZzmcgpaGlX5eVkhGJgHTK+13N4WHWO5ujLXuRJsHeYcuxMmnq3nvSo5MLlbbFzpakPnh0UBeqaqy4SgQCDnXrZHToy6rTUfWZI0w88eYwLc+noCEwAlm17Xuozu87TCQorFWhpTVFpjWpvcdTurt9UAvH54EEtKiOb0nqLVacJmC2pwNV6hofi77snacIcNKsvY8jageR4M6rBr6qFtvbkvoQ5L8NAhxP6s0Id6lypUK1pnLyne9r7vlv0tHdVHW2BnFXGmM0Bzio7Gqj9tgrnFv4tUKe+yTIBBHubc/oHgugPanrRXgOuI4cS8UN8imWHmB607YReyswAgaHtwr40/R3txJL9Xu+FpWC2txtHU/qzSrcE7XR1APPUjZwLmLtAPSchkxy6DmTzOWNAmWD3Ux9/7lIdV2HP1daCHe5C/yHim6U95xm0gcvjs77CqRTsHsj9J3Npd0bIZMetdxJB18g3v1RkbH+w1FPeVtKe4h4IFq363fUnGiMxPJnhd45X+bU11dHPR3eFfnDSNW/DlLT3jh675/nVNO+l6qT+yPZJBYbLBsanfaBZ+tqM/Wtx6Ny9Zlj2ttPYNnZUO+j/GpumfzFwmZDKYETDv+dxLkThpgaRbroCrh9Yy7NuXxMZcc//ZDxR3aZTOkFdmFx49yEPEC+Ca1JfUiEe03H45Lso/7ZnxEbDD0wGj6+txGqJ+XV6oQtPxlb+XCWTOpi+emfO8MqWQDzE3KfbbES2E2OpQJqm54Ze+MvDCZRFr+/VKXQ5V8fvW02dqYVKB8ztRzUXw7X3pELs1cfgY59Y94FkMa258mdT58MqlAWVACAnbmB82E8QEcTbPnxeRHtQjkxuR54NKhCOAEWlZ5NwH8lpCKsNPw9wOafY6rLZwFLXgstDiuUHz31Lsgfx3T5u7DpD/KDP70XZmP4EACYmL2D7rJmVH8IzCP/jxH/wcgCx0Ef4eQlxp/IuxF1E1iEQ6qT4ymaFGY700Thqr5nV7tSU4oY7gtXKc533d83PyG/jqi+sb9IaFEdH0vxTeBhzZ8UuQ31GOsjwg1/nkkRv+FOXhEx+Tqi7MBiQ1UZe6eJRDpnDySgdVBvQnhAhMuAcs97NENvivjzXDL8EeGHkx2khN/jzr0pMtx5bj3yO9uMDQcFfrMwIU95+jB13DKoK0XY7t5IuDs3hXypcB/uamoaCu57v17O1WC8RzcbvrvYRYJ5FRDWOg38nvbsGl2KXPAJ3tBnKePzu8Cfu001rgIKF+MSWpDgZLpuHUIK+WP04hQYAQFed7oO+jc610HPQnc/xghQm0NG9qDotMjoGTF7aFTeDpDpOQ8pYXw+42BJAmzhftVcG2PydWQkwqd40Q8aQ5Il4Ub7DTc5xq+vc2/7flZvJOCSCnlZYKXa7FVI+Y0tCDV0GtmTYSlERlQ9wGN8CuVtG274QoWM4GPm/zD+DTT4Au5hVMXkAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/icon-report-student-report.d0b4f011.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-card.6c199e37.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-school-report.89c79b9b.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-monthly.1653fb7b.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-yearly.7bb95395.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-progress.4d65bd8d.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-class-report.aa3d3b0d.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-proficiency.171bfeba.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-high-score.c77f9d83.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-login.71ad79cc.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-sidebar-active.90d05248.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-closed.1b954019.svg\";","module.exports = __webpack_public_path__ + \"static/media/no-reports.bd0c922e.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-report-skill-star.94288273.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEgSURBVHgBfZFBTsMwEEVn7ASxYOEj5AhFZE98A67ADcqui6C4kD1wgnKE3sDpDokg5Qi5AVmwJJ16mrhNXakjRRl7nsd/vhGCmNm5ugalOP/Spg3reAQXSYTxilP3qbHYEuJnff+yPDlwZ/MHRFx58CwINrV+zTiNuPMlmAC6HuTcr4XEuBhgqrYETw5oT2CSutGm8XuRAMi4UGelHmYxa4m95SYhzGqEgxPvDv8d0DIYwukmL2KnBtPq+XeU1PzTn4Peu3AOhoHQENGHYHA0bBbhjfU3hfC4rISbbHks+0OLZICLNw+zGT+6XO/fIbW5AcRi0tjLUhO3bnk+wRu1Lo2z9HFiqYLDu1Dl4b2GswFtnm2dNIC+k3DVfE+c4tgBXgmEPy2pf1kAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE6SURBVHgBfZG9boMwFIWDA2ahSzqAGJKFLs2UFYoEqhj6Arxepy70ATIi6NQp3dulLCAhMbHw33ORqaKojSXL9r2f7z0+llZiRFHEdV3fT9NkrddrTZKktu/7inP+2TRNraqqZtv2l0RwHMeaLMtP2GqrKwMFXtk5PAxDgeDRdd3nPM9f0C1bYMr5vl/LaH0gGMnK87zjAkDeDrntcoZMg2QzRVE2osL7kkyS5I4x9kB7rCfMb9obhmGxcRznC2hX/AU7jvOBTrM0rBuS1EIOFy7tLmHxWA5uBa6VyTrSZ5rmIwLGJSwq72mFvQUDdKLDfzAkHoSDdRAEGRyV+bnXXdfdpGl6T3u8jyQawqXZFJLEcWn2maRhWohbAqJ4je5viym/P02fQiugLSrfonIDuCrLMgvDsF0U/ACOnqj44/ENTwAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEiSURBVHgBdZK7boQwEEVj82qokJCoUuUDoIqEhICCYn+AJn9Il4p0CAFF0qRKl2qbuKKiAfHIDPJovZbWkuXBPtczcw170kZVVbbv+zbGeZ5P+jmjoGkalzGWmKbpHcdhy+1p3/ffNE2/7wRd1z0jrID6+EuS5AMDTjc/giHDYhjGF31zgCOEt20TsH7COqmwZVl1HMcj7ZmgDvAgy7Ja9nIF0QUusnUYq+GwuuQOOQOZah1u2zYCQ0LW9/0blgRzFELUZVkueh8Ic85DYH74uq7nLVCCFwTBhTLpMMbzPAsOqpvHUoS1SrtfCUYziqK4nu8wDEMIjUeK8CyLrEZTYL5jf+pLv6DF4JqrliTt7ug3YXqDIAxA5AG4OI4zqk7h+Ad7aq5EcjO/xgAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/Muli.328d5579.ttf\";","module.exports = __webpack_public_path__ + \"static/media/MuliB.077ceb91.ttf\";","module.exports = __webpack_public_path__ + \"static/media/icon-login-report-active.92938913.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-login-report-not-login.2246d5d5.svg\";","module.exports = __webpack_public_path__ + \"static/media/icon-login-report-not-active.42af00c4.svg\";","module.exports = __webpack_public_path__ + \"static/media/leaderboard-bg.7f0d6d63.png\";","module.exports = __webpack_public_path__ + \"static/media/back-icon.c2befcca.svg\";","module.exports = __webpack_public_path__ + \"static/media/default-pos.3b5bb6d2.svg\";","module.exports = __webpack_public_path__ + \"static/media/first-pos.3a446375.svg\";","module.exports = __webpack_public_path__ + \"static/media/second-pos.4e0386c6.svg\";","module.exports = __webpack_public_path__ + \"static/media/third-pos.6f8f9950.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABLCAYAAAAIwmvLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NDhjN2Q5My0wODcyLTYwNGUtYjBiZS03MGRiODRlYjFjMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTA2NDI3MTYyODUwMTFFODg0QkVFNEVBMTMyODQ3QjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTA2NDI3MTUyODUwMTFFODg0QkVFNEVBMTMyODQ3QjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk1MjVhMTgtZDAzNi1lYjQwLTlmNDctOTJlMGMwMzcyYzM4IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NGI4ZDIyMmQtMWQyYy0xMWU4LTkwNTItZGQwZjNjNmE3NThmIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+04p3pgAABstJREFUeNrsnHtsFFUUxm8XigjSQi0IWqHFCrRqBWqRBAgogliNAQJqBE1FSWqiohAlxESFoEatFhJAY4QQhX/QRGKEgtaAxretRTHgo5oWFbCtFWhpS1u6fqd7Zrm9e2d3tvvq7sxJft3u3dl5fHvu45w7c5PcbreIgV0KbgR5IBdkgsvBcJCibHsWNIDjoAb8An4E33BZzC0pSiImg1ngdjAX5IRpv7WgHOwB+0BrIoo4ETwE7gXDInwt5LHvg63gU+COZxGTwJ3gSTAtyO+eAc2gCXSBS7h6pwa5n59ACdgJOuNNxHngRfZAf/Yf+Ax8xW0c8TtoN9m+H7eb45kCcDO4LMBxaJ9rwY6IeiaJGAbGgjK3f/sNPAvygStMx50AVoLKAMf+DhSE6Zg+hLoD8uRVoMXk5NvBNjA1UhcgkQteAc0m53IevAoG9iURR4JykxMmUTeAK6MgnspQ8AxoMDm3wyCnL4hInnXc5CTfjZF4KsPAZvZA1ZrAwliKeBdo05zYH2BOHxBPZRKoMPnBV8dCxGKTX/ZtMKQPCmiQDJ43EbKE2/aoiPiw5gQ6uFzECXeA05rr2BANEZdqDkwnMzuOBDS4FvyluZ61kRRxFg9VZKuP5LgrClDHV60Rcllv9hcoYhkDKkC6EprNAd+K+LYMjpqypLIOMJMjqbCEfZR5+RxMUQ5CWZiDIjFsHPiSU3OG/c0pusZwhH3rNe5eFMdV2IyZ3EHK9l442sTJoFPZ8RsJKKDBExqHWRxKm+gCX3OmxLCfweRYJT2jkRIEZeBWqewEZ4yaelOdizS/yvQE9kKDMeCsct0v9KY6DwDHlB1ttYGABk8p194KRgUrYrGyk1Mg3UYiUnh4VNGgNBgRXZw4lW2djQQ0i86aOSNkScRCzZfTbShif00087i/77ikPma50ue8yfO9djOa2HpZKVtuJWIZCv4BA6TPruNZMzsazTCeBBdLZfnge93GhifOVwSstLGARn5gt1K2yGxjQ8TblPIdwrF3lPeF/qozjdbrlSD8GnDE5iIO4vlxuYaOYK18PHGCIuAJR8Bua9GkxKabVecblLIDjn5e+0R5n8+vqdwZj6Y7M/rjz/XKhlU2FewisIsFSuWkxChlm6cZ2T4gEbOVwl9tKuI58CGPj60aJalXufhGIdns3B6+BT4OYvtSUE29M3UkI6UPaIDZZmMhR/MYeUiA7erA1TSmdCk9c6fNBSQ7RlXUwnZreFDePU6UU9s0LkpzOuXuTmW/8Mxq6qyKRzVdOhFrNW2kXS2Tq/VgzWczhGcmtEfYJwfejnmsBqzWlO+XBTQ8kW7xTZbaxGRHvx7VmrJbw6Uyn+wWeeK/0nsaNw50tPMaNXVLjLYP9pHQZLdcrLRsGY52PYzGjY8Jz50RC8xi5xqlLNfRzce2CE/OtcVMxGqlbJyjmdf68Zhxp78aSm3gD0rZJEc7rxUJz0NFZPcIT571qM4TK5SymxztvLZY6amztF24k9k2NRqlNIoLk1VdPNRp1HkideNq8nGu44Riqug521cpTO5ZNCKWMqV8qaNhj5ppRCrCrDrTqzPv7GsUM5ezR1ZzvHzSnyeeAnuVz5bZ3BPp+elpPLQZbyag7IlkNK+6R9kJZTIanJrt3+Qszj5l4D2Ywx27GY2TD3GYV2wpS6Hcbkxfel16f1p4JrLs4o1G8GGEvue4v2iz6olk28Cf0nuaOnzJRl74iJI7OC+sPLHv3LPtJU3z3N865+mB4EO8XdJ7mrDKMcvc+KvORnhTzK5sGN2vU5rgVZnaQnnlkpVWBNR1LLKtF763TDwAtid4qFfINXGv1S/Z/dk+mqC/hYd2h3u9FwsPyNRrnnOekgAdSYb0tEQXWNTbfbkCaFzLDW6HVJbCkU1BHHtgBtembClXuCAcEYuZHdTE0ekcnM+O0+wMXdNVSvmBSFXnRFsDgnhQcx0bndVIgmNGLFcjidd1cahzvB9kSWVL+Ie/z1mhKfByV69Ji4C0hHt5q0ReK0zwcKVec14rnFXrrJHCzynrziUvEscM1yKUY8Fm4VmE0swoKqAntejm8ipx4SahUCyb5z7aOXlA49k0zn8mSdt9AVbwjF34Lcy/yjxQ5Q5sjWA3L3g2n9uqARaPkcmLetQq+9wubbMGnAFHwN2h9r7R8sQe8bgIbU3ZVp6aoBOr4/idkqXNUrYlT/NdWi76ipgM3yPcPk0Em9jzQrHnpH02mWyzKVYjAVeEf6ND7EW0gC7dRL5RaG4IsmCDpP9LpP/pwaUt7PmPxiqOjNZi5br41cqK727O7S1U5n1H8GtdXwjG/xdgAJCdAcVFC/GVAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/bg-blue_hover.305bd1fe.jpeg\";","module.exports = __webpack_public_path__ + \"static/media/bg-music.d8c559ae.mp3\";"],"sourceRoot":""}