src/components/Assignment/AssignmentCards.tsx

+/* eslint-disable react-hooks/exhaustive-deps */
 import { DeleteIcon, ViewIcon } from "@chakra-ui/icons"
 import {
   useColorModeValue,
@@ -78,22 +79,22 @@ export const AssignmentCards = ({
     assignment_id
   )
   const { students, fetchStudent } = useFetchStudent(scholarship_id)
-  const [applicants, setApplicants] = useState(students.length)
-  const [submissions, setSubmissions] = useState(submissionFile.length)
+  const [applicants, setApplicants] = useState(students?.length || 0)
+  const [submissions, setSubmissions] = useState(submissionFile?.length || 0)
   useEffect(() => {
     const fetchData = async () => {
       await fetchFile()
       setSubmissions(submissionFile.length)
     }
     fetchData()
-  }, [submissionFile.length])
+  }, [submissionFile?.length])
   useEffect(() => {
     const fetchData = async () => {
       await fetchStudent()
-      setApplicants(students.length)
+      setApplicants(students?.length)
     }
     fetchData()
-  }, [students.length])
+  }, [students?.length])
   // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
   const [isOpenEditAssignment, setIsOpenEditAssignment] = useState(false)
   const [isOpenDeleteAssignment, setIsOpenDeleteAssignment] =

src/components/Assignment/Submission.tsx

@@ -119,6 +119,7 @@ export const Submissions = () => {
               </Flex>
             </AccordionButton>
             <Box display="flex" justifyContent="center" alignItems="center">
+              <Text fontWeight="bold" mr="5"> Grade: </Text>
               <Editable
                 defaultValue="Rasengan ⚡️"
                 isPreviewFocusable={true}