Merge branch 'develop' of https://github.com/FYP-2024-IQMA/fyp2024 in…

…to SCRUM-156-Do-up-charts-in-Tableau
FYP-2024-IQMA · Oct 15, 2024 · 0538d4d · 0538d4d
2 parents 37e18df + 3940632
commit 0538d4d
Show file tree

Hide file tree

Showing 41 changed files with 704 additions and 397 deletions.
diff --git a/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx b/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx
@@ -5,6 +5,7 @@ import {useEffect, useState} from 'react';
 
 import {AuthProvider} from '@/context/AuthContext';
 import ChatbotDrawer from '@/components/ChatbotDrawer';
+import {Colors} from '@/constants/Colors';
 import HomeScreen from '../screens/Home';
 import {Ionicons} from '@expo/vector-icons';
 import {MaterialIcons} from '@expo/vector-icons';
@@ -22,11 +23,11 @@ export default function AppTabs() {
         <Tab.Navigator
             screenOptions={({route}) => ({
                 headerTitleAlign: 'center',
-                headerStyle: {backgroundColor: '#B199FF'},
-                tabBarActiveTintColor: '#FFFFFF',
+                headerStyle: {backgroundColor: Colors.default.purple100},
+                tabBarActiveTintColor: Colors.light.background,
                 tabBarInactiveTintColor: '#BBBBBB',
                 tabBarStyle: {
-                    backgroundColor: '#7654F2',
+                    backgroundColor: Colors.default.purple500,
                     justifyContent: 'center',
                     alignItems: 'center',
                     paddingHorizontal: 80,
@@ -69,7 +70,7 @@ export default function AppTabs() {
                     tabBarIcon: ({color, size}) => (
                         <Ionicons name="person" size={size} color={color} />
                     ),
-                    headerTintColor: '#fff'
+                    headerTintColor: '#fff',
                 }}
             />
             <Tab.Screen
@@ -79,7 +80,7 @@ export default function AppTabs() {
                     tabBarIcon: ({color, size}) => (
                         <Ionicons name="settings" size={size} color={color} />
                     ),
-                    headerTintColor: '#fff'
+                    headerTintColor: '#fff',
                 }}
             />
         </Tab.Navigator>

diff --git a/frontend/iQMA-Skills-Builder/app/Assessment.tsx b/frontend/iQMA-Skills-Builder/app/Assessment.tsx
@@ -1,22 +1,25 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import {ScrollView, StyleSheet, Text, Image, View} from 'react-native';
-import SectionCard from '@/components/SectionCard';
-import React, {useContext, useEffect, useLayoutEffect, useState} from 'react';
-import {useNavigation} from '@react-navigation/native';
-import ProgressBar from '@/components/ProgressBar';
-import {QuizCard} from '@/components/QuizCard';
-import {router, useLocalSearchParams} from 'expo-router';
-import {Question} from '@/constants/Quiz';
-import * as unitEndpoints from '@/helpers/unitEndpoints';
-import * as sectionEndpoints from '@/helpers/sectionEndpoints';
 import * as quizEndpoints from '@/helpers/quizEndpoints';
-import {formatUnit} from '@/helpers/formatUnitID';
-import {formatSection} from '@/helpers/formatSectionID';
-import {OverviewCard} from '@/components/OverviewCard';
-import { LoadingIndicator } from '@/components/LoadingIndicator';
 import * as resultEndpoints from '@/helpers/resultEndpoints';
+import * as sectionEndpoints from '@/helpers/sectionEndpoints';
+import * as unitEndpoints from '@/helpers/unitEndpoints';
+
+import {Image, ScrollView, StyleSheet, Text, View} from 'react-native';
+import React, {useContext, useEffect, useLayoutEffect, useState} from 'react';
+import {router, useLocalSearchParams} from 'expo-router';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import {AuthContext} from '@/context/AuthContext';
 import { useTimer } from '@/helpers/useTimer';
+import {Colors} from '@/constants/Colors';
+import {LoadingIndicator} from '@/components/LoadingIndicator';
+import {OverviewCard} from '@/components/OverviewCard';
+import ProgressBar from '@/components/ProgressBar';
+import {Question} from '@/constants/Quiz';
+import {QuizCard} from '@/components/QuizCard';
+import SectionCard from '@/components/SectionCard';
+import {formatSection} from '@/helpers/formatSectionID';
+import {formatUnit} from '@/helpers/formatUnitID';
+import {useNavigation} from '@react-navigation/native';
 
 export default function Assessment() {
     const navigation = useNavigation();
@@ -29,7 +32,15 @@ export default function Assessment() {
     const [sectionName, setSectionName] = useState<string>('');
     const [unitScenario, setUnitScenario] = useState<string>('');
     const [loading, setIsLoading] = useState<boolean>(true);
-    const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams();
+    const {
+        sectionID,
+        unitID,
+        currentUnit,
+        totalUnits,
+        isFinal,
+        currentProgress,
+        totalProgress,
+    } = useLocalSearchParams();
     const [finalScenario, setFinalScenario] = useState<string>('');
     const [checkFinal, setCheckFinal] = useState<boolean>(false);
     const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} Assessment`);
@@ -94,8 +105,10 @@ export default function Assessment() {
     }, [sectionID, unitID, checkFinal]);
 
     useLayoutEffect(() => {
-
-        let progress = checkFinal ? 1 : parseInt(currentProgress as string) / parseInt(totalProgress as string);
+        let progress = checkFinal
+            ? 1
+            : parseInt(currentProgress as string) /
+              parseInt(totalProgress as string);
 
         navigation.setOptions({
             headerTitle: () => (
@@ -110,7 +123,6 @@ export default function Assessment() {
             await AsyncStorage.setItem('currentQnsIdx', newIdx.toString());
             setCurrentQnsIdx(newIdx);
         } else {
-
             if (checkFinal) {
                 // final assessment don't have self-reflection
                 try {
@@ -143,7 +155,7 @@ export default function Assessment() {
                         isFinal,
                         currentProgress,
                         totalProgress,
-                    }
+                    },
                 });
             }
             stopTimer();
@@ -171,7 +183,7 @@ export default function Assessment() {
                         <Text
                             style={{
                                 fontSize: 14,
-                                color: '#4143A3',
+                                color: Colors.header.color,
                                 marginBottom: 10,
                             }}
                         >
@@ -214,7 +226,7 @@ export default function Assessment() {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         padding: 20,
         flex: 1,
     },

diff --git a/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx b/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx
@@ -5,14 +5,16 @@ import {Image, StyleSheet, Text, View} from 'react-native';
 import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {router, useLocalSearchParams, useRouter} from 'expo-router';
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {Colors} from '@/constants/Colors';
 import {CustomButton} from '@/components/CustomButton';
+import {LoadingIndicator} from '@/components/LoadingIndicator';
 import {OverviewCard} from '@/components/OverviewCard';
 import ProgressBar from '@/components/ProgressBar';
 import SectionCard from '@/components/SectionCard';
 import {formatSection} from '@/helpers/formatSectionID';
 import {formatUnit} from '@/helpers/formatUnitID';
 import {useNavigation} from '@react-navigation/native';
-import {LoadingIndicator} from '@/components/LoadingIndicator';
 import { useTimer } from '@/helpers/useTimer';
 
 export default function AssessmentIntroduction() {
@@ -23,7 +25,15 @@ export default function AssessmentIntroduction() {
     // const unitID = 'UNIT0001';
     // const currentUnit = "1";
     // const totalUnits = "1"
-    const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams();
+    const {
+        sectionID,
+        unitID,
+        currentUnit,
+        totalUnits,
+        isFinal,
+        currentProgress,
+        totalProgress,
+    } = useLocalSearchParams();
     const [sectionNumber, setSectionNumber] = useState<string>('');
     const [unitNumber, setUnitNumber] = useState<string>('');
     const [seconds, setSeconds] = useState<number>(0);
@@ -44,8 +54,9 @@ export default function AssessmentIntroduction() {
     }, []);
 
     useLayoutEffect(() => {
-
-        const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string);
+        const progress =
+            parseInt(currentProgress as string) /
+            parseInt(totalProgress as string);
 
         navigation.setOptions({
             headerTitle: () => (
@@ -105,8 +116,10 @@ export default function AssessmentIntroduction() {
                 currentUnit,
                 totalUnits,
                 isFinal,
-                currentProgress: (parseInt(currentProgress as string) + 1).toString(),
-                totalProgress
+                currentProgress: (
+                    parseInt(currentProgress as string) + 1
+                ).toString(),
+                totalProgress,
             },
         });
         stopTimer();
@@ -133,7 +146,7 @@ export default function AssessmentIntroduction() {
                             style={{
                                 fontSize: 14,
                                 fontWeight: 'bold',
-                                color: '#4143A3',
+                                color: Colors.header.color,
                                 marginBottom: 20,
                                 marginHorizontal: 10,
                             }}
@@ -195,7 +208,7 @@ export default function AssessmentIntroduction() {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         padding: 20,
         flex: 1,
     },

diff --git a/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx b/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx
@@ -1,14 +1,17 @@
-import {ScrollView, StyleSheet, Text, View, SafeAreaView} from 'react-native';
-import React, {useState, useLayoutEffect, useEffect} from 'react';
-import {CustomButton} from '@/components/CustomButton';
-import {router, useLocalSearchParams} from 'expo-router';
-import {useNavigation} from '@react-navigation/native';
-import ProgressBar from '@/components/ProgressBar';
-import {OverviewCard} from '@/components/OverviewCard';
 import * as lessonEndpoints from '@/helpers/lessonEndpoints';
-import {formatUnit} from '@/helpers/formatUnitID';
+
+import React, {useEffect, useLayoutEffect, useState} from 'react';
+import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {router, useLocalSearchParams} from 'expo-router';
+
+import {Colors} from '@/constants/Colors';
+import {CustomButton} from '@/components/CustomButton';
 import {LoadingIndicator} from '@/components/LoadingIndicator';
 import { useTimer } from '@/helpers/useTimer';
+import {OverviewCard} from '@/components/OverviewCard';
+import ProgressBar from '@/components/ProgressBar';
+import {formatUnit} from '@/helpers/formatUnitID';
+import {useNavigation} from '@react-navigation/native';
 
 const formatCheatSheet = (cheatsheet: any) => {
     if (Array.isArray(cheatsheet)) {
@@ -46,15 +49,24 @@ const formatCheatSheet = (cheatsheet: any) => {
 // where things show up
 export default function CheatSheet() {
     const navigation = useNavigation();
-    const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams();
+    const {
+        sectionID,
+        unitID,
+        currentUnit,
+        totalUnits,
+        isFinal,
+        currentProgress,
+        totalProgress,
+    } = useLocalSearchParams();
     const [lessons, setLessons] = useState<any[]>([]);
     const [unitNumber, setUnitNumber] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const { startTimer, stopTimer } = useTimer(`${sectionID} Cheat Sheet`);
 
     useLayoutEffect(() => {
-
-        const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string);
+        const progress =
+            parseInt(currentProgress as string) /
+            parseInt(totalProgress as string);
 
         navigation.setOptions({
             headerTitle: () => (
@@ -105,8 +117,10 @@ export default function CheatSheet() {
                 currentUnit,
                 totalUnits,
                 isFinal,
-                currentProgress: (parseInt(currentProgress as string) + 1).toString(),
-                totalProgress
+                currentProgress: (
+                    parseInt(currentProgress as string) + 1
+                ).toString(),
+                totalProgress,
             },
         });
         stopTimer();
@@ -156,13 +170,13 @@ export default function CheatSheet() {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         padding: 20,
     },
     title: {
         fontSize: 14,
         fontWeight: 'bold',
-        color: '#4143A3',
+        color: Colors.header.color,
         marginBottom: 20,
     },
     buttonContainer: {
@@ -176,7 +190,7 @@ const styles = StyleSheet.create({
         borderWidth: 2,
         padding: 10,
         marginBottom: 20,
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         // shadow properties
         shadowColor: '#000',
         shadowOffset: {width: 0, height: 4},