react-native-elearn-ui 0.1.31 → 0.1.32

package/src/screens/qbank/QBankOverviewScreen.tsx

@@ -0,0 +1,392 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon } from '../../components';
+import type { QBankOverviewScreenProps, QBankOverviewQuestion } from '../../types';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+type FilterType = 'all' | 'correct' | 'incorrect' | 'missed';
+
+export const QBankOverviewScreen: React.FC<QBankOverviewScreenProps> = ({
+  topicTitle,
+  moduleTitle,
+  totalQuestions,
+  correctCount,
+  incorrectCount,
+  missedCount,
+  questions,
+  onBack,
+  onPressQuestion,
+}) => {
+  const theme = useTheme();
+  const [filter, setFilter] = useState<FilterType>('all');
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  
+  // Animation value for Bottom Sheet
+  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const percentage = Math.round((correctCount / totalQuestions) * 100) || 0;
+  
+  const correctWidth = (correctCount / totalQuestions) * 100;
+  const incorrectWidth = (incorrectCount / totalQuestions) * 100;
+  const missedWidth = (missedCount / totalQuestions) * 100;
+
+  const filteredQuestions = questions.filter(q => filter === 'all' || q.status === filter);
+
+  useEffect(() => {
+    if (isSheetOpen) {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 0.5,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: SCREEN_HEIGHT,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [isSheetOpen, translateY, fadeAnim]);
+
+  const renderStatusBadge = (status: QBankOverviewQuestion['status']) => {
+    let color = '';
+    let text = '';
+    
+    switch (status) {
+      case 'correct':
+        color = theme.success;
+        text = 'Correct';
+        break;
+      case 'incorrect':
+        color = '#EF4444';
+        text = 'InCorrect';
+        break;
+      case 'missed':
+        color = '#F59E0B';
+        text = 'Missed';
+        break;
+    }
+    
+    return (
+      <View style={[styles.statusBadge, { borderColor: color }]}>
+        <Typography variant="caption" color={color} style={{ fontSize: 10, fontWeight: '600' }}>
+          {text}
+        </Typography>
+      </View>
+    );
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack} style={styles.headerBtn}>
+          <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h3" bold color={theme.textPrimary} style={styles.headerTitle}>
+          Overview
+        </Typography>
+        <View style={styles.headerBtn} />
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {/* Sub Header */}
+        <View style={styles.subHeader}>
+          <Typography variant="h3" bold color={theme.textPrimary}>
+            {topicTitle} <Typography variant="body" color={theme.textSecondary}>• {moduleTitle}</Typography>
+          </Typography>
+          <TouchableOpacity onPress={() => setIsSheetOpen(true)} style={styles.filterBtn}>
+            <Icon name="filter" size={20} color={theme.textSecondary} />
+          </TouchableOpacity>
+        </View>
+
+        {/* Summary Card */}
+        <View style={styles.card}>
+          <Typography variant="caption" color={theme.textSecondary} style={styles.totalText}>
+            Total Question {totalQuestions}
+          </Typography>
+          
+          <View style={styles.statsRow}>
+            <View style={styles.statsLabels}>
+              <Typography variant="caption" color={theme.success} style={styles.statLabel}>
+                {String(correctCount).padStart(2, '0')} Correct
+              </Typography>
+              <Typography variant="caption" color="#EF4444" style={styles.statLabel}>
+                {String(incorrectCount).padStart(2, '0')} Incorrect
+              </Typography>
+              <Typography variant="caption" color="#F59E0B" style={styles.statLabel}>
+                {String(missedCount).padStart(2, '0')} Missed
+              </Typography>
+            </View>
+            
+            <View style={styles.percentageBlock}>
+              <Typography variant="h3" bold color={theme.textPrimary}>
+                {percentage}%
+              </Typography>
+              <Typography variant="caption" color={theme.textSecondary} style={{fontSize: 10}}>
+                Correct
+              </Typography>
+            </View>
+          </View>
+          
+          <View style={styles.progressBarContainer}>
+            {correctWidth > 0 && <View style={[styles.progressSegment, { width: `${correctWidth}%`, backgroundColor: theme.success }]} />}
+            {incorrectWidth > 0 && <View style={[styles.progressSegment, { width: `${incorrectWidth}%`, backgroundColor: '#EF4444' }]} />}
+            {missedWidth > 0 && <View style={[styles.progressSegment, { width: `${missedWidth}%`, backgroundColor: '#F59E0B' }]} />}
+            {totalQuestions === 0 && <View style={[styles.progressSegment, { width: '100%', backgroundColor: '#E5E7EB' }]} />}
+          </View>
+        </View>
+
+        {/* Question List */}
+        <View style={styles.listContainer}>
+          {filteredQuestions.map((q) => (
+            <TouchableOpacity 
+              key={q.id} 
+              style={styles.listItem}
+              onPress={() => onPressQuestion?.(q.id)}
+            >
+              <View style={styles.listTextContainer}>
+                <Typography variant="body" bold color={theme.textPrimary} style={styles.listText}>
+                  {q.number}. {q.title}
+                </Typography>
+              </View>
+              {renderStatusBadge(q.status)}
+            </TouchableOpacity>
+          ))}
+        </View>
+      </ScrollView>
+
+      {/* Bottom Sheet Backdrop */}
+      {isSheetOpen && (
+        <Animated.View 
+          style={[styles.backdrop, { opacity: fadeAnim }]}
+          pointerEvents="auto"
+        >
+          <TouchableOpacity 
+            style={StyleSheet.absoluteFill} 
+            activeOpacity={1} 
+            onPress={() => setIsSheetOpen(false)} 
+          />
+        </Animated.View>
+      )}
+
+      {/* Bottom Sheet Modal */}
+      <Animated.View 
+        style={[
+          styles.bottomSheet, 
+          { transform: [{ translateY }] }
+        ]}
+      >
+        <View style={styles.sheetHandle} />
+        <Typography variant="h3" bold color={theme.textPrimary} style={styles.sheetTitle}>
+          Filter Questions
+        </Typography>
+
+        {(['all', 'correct', 'incorrect', 'missed'] as FilterType[]).map((type) => (
+          <TouchableOpacity 
+            key={type} 
+            style={styles.sheetOption}
+            onPress={() => {
+              setFilter(type);
+              setIsSheetOpen(false);
+            }}
+          >
+            <Typography variant="body" color={filter === type ? theme.primary : theme.textPrimary} style={{textTransform: 'capitalize'}}>
+              {type}
+            </Typography>
+            {filter === type && <Icon name="check" size={20} color={theme.primary} />}
+          </TouchableOpacity>
+        ))}
+      </Animated.View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+  },
+  headerBtn: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 18,
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 40,
+  },
+  subHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+    marginTop: 8,
+  },
+  filterBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  totalText: {
+    marginBottom: 12,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    marginBottom: 12,
+  },
+  statsLabels: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    flexWrap: 'wrap',
+  },
+  statLabel: {
+    marginRight: 16,
+    fontSize: 12,
+    marginBottom: 4,
+  },
+  percentageBlock: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  progressBarContainer: {
+    height: 8,
+    backgroundColor: '#E5E7EB',
+    borderRadius: 4,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  progressSegment: {
+    height: '100%',
+  },
+  listContainer: {
+    gap: 12,
+  },
+  listItem: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.02,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  listTextContainer: {
+    flex: 1,
+    paddingRight: 12,
+  },
+  listText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  statusBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  
+  // Bottom Sheet Styles
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#000',
+    zIndex: 10,
+  },
+  bottomSheet: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    padding: 24,
+    paddingBottom: Platform.OS === 'ios' ? 40 : 24,
+    zIndex: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 10,
+  },
+  sheetHandle: {
+    width: 40,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginBottom: 20,
+  },
+  sheetTitle: {
+    marginBottom: 16,
+  },
+  sheetOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+});

package/src/screens/qbank/QBankSuccessScreen.tsx

@@ -0,0 +1,292 @@
+import React, { useState } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon, Button } from '../../components';
+import type { QBankSuccessScreenProps } from '../../types';
+
+export const QBankSuccessScreen: React.FC<QBankSuccessScreenProps> = ({
+  moduleTitle,
+  completedDate,
+  totalQuestions,
+  correctCount,
+  incorrectCount,
+  missedCount,
+  onBack,
+  onSubmitFeedback,
+}) => {
+  const theme = useTheme();
+  const [rating, setRating] = useState(0);
+  const [feedback, setFeedback] = useState('');
+
+  const percentage = Math.round((correctCount / totalQuestions) * 100) || 0;
+  
+  // Calculate segments for the progress bar (percentages of the width)
+  const correctWidth = (correctCount / totalQuestions) * 100;
+  const incorrectWidth = (incorrectCount / totalQuestions) * 100;
+  const missedWidth = (missedCount / totalQuestions) * 100;
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <KeyboardAvoidingView 
+        style={styles.container} 
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+          {/* Header */}
+          <View style={styles.header}>
+            <TouchableOpacity onPress={onBack} style={styles.headerIconBtnLeft}>
+              <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+            </TouchableOpacity>
+          </View>
+
+          {/* Success Icon & Title */}
+          <View style={styles.successHeader}>
+            <View style={styles.iconCircle}>
+              <Icon name="check" size={40} color="#FFFFFF" />
+            </View>
+            <Typography variant="h2" bold color={theme.textPrimary} style={styles.successTitle}>
+              Module Completed
+            </Typography>
+          </View>
+
+          {/* Summary Card */}
+          <View style={styles.card}>
+            <View style={styles.cardHeader}>
+              <Typography variant="h3" bold color={theme.textPrimary}>
+                {moduleTitle}
+              </Typography>
+              <Typography variant="caption" color={theme.textSecondary} style={styles.dateText}>
+                Completed on {completedDate}
+              </Typography>
+            </View>
+            
+            <View style={styles.divider} />
+            
+            <View style={styles.statsSection}>
+              <Typography variant="caption" color={theme.textSecondary} style={styles.totalText}>
+                Total Question {totalQuestions}
+              </Typography>
+              
+              <View style={styles.statsRow}>
+                <View style={styles.statsLabels}>
+                  <Typography variant="caption" color={theme.success} style={styles.statLabel}>
+                    {String(correctCount).padStart(2, '0')} Correct
+                  </Typography>
+                  <Typography variant="caption" color="#EF4444" style={styles.statLabel}>
+                    {String(incorrectCount).padStart(2, '0')} Incorrect
+                  </Typography>
+                  <Typography variant="caption" color="#F59E0B" style={styles.statLabel}>
+                    {String(missedCount).padStart(2, '0')} Missed
+                  </Typography>
+                </View>
+                
+                <View style={styles.percentageBlock}>
+                  <Typography variant="h3" bold color={theme.textPrimary}>
+                    {percentage}%
+                  </Typography>
+                  <Typography variant="caption" color={theme.textSecondary} style={{fontSize: 10}}>
+                    Correct
+                  </Typography>
+                </View>
+              </View>
+              
+              {/* Multi-color Progress Bar */}
+              <View style={styles.progressBarContainer}>
+                {correctWidth > 0 && <View style={[styles.progressSegment, { width: `${correctWidth}%`, backgroundColor: theme.success }]} />}
+                {incorrectWidth > 0 && <View style={[styles.progressSegment, { width: `${incorrectWidth}%`, backgroundColor: '#EF4444' }]} />}
+                {missedWidth > 0 && <View style={[styles.progressSegment, { width: `${missedWidth}%`, backgroundColor: '#F59E0B' }]} />}
+                {/* Fallback empty bar if no questions */}
+                {totalQuestions === 0 && <View style={[styles.progressSegment, { width: '100%', backgroundColor: '#E5E7EB' }]} />}
+              </View>
+            </View>
+          </View>
+
+          {/* Feedback Section */}
+          <View style={styles.feedbackSection}>
+            <Typography variant="h3" bold color={theme.textPrimary} style={styles.feedbackTitle}>
+              How was your QBank{'\n'}taking experience?
+            </Typography>
+            <Typography variant="body" color={theme.textSecondary} style={styles.feedbackSubtitle}>
+              Your feedback will help us improve your QBank experience
+            </Typography>
+
+            <View style={styles.starsContainer}>
+              {[1, 2, 3, 4, 5].map((star) => (
+                <TouchableOpacity key={star} onPress={() => setRating(star)}>
+                  <Icon 
+                    name="star" 
+                    size={36} 
+                    color={star <= rating ? '#EAB308' : '#D1D5DB'} 
+                  />
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            <TextInput
+              style={styles.textInput}
+              placeholder="Type Your Feedback Here"
+              placeholderTextColor="#9CA3AF"
+              multiline
+              numberOfLines={4}
+              value={feedback}
+              onChangeText={setFeedback}
+            />
+
+            <Button 
+              title="Submit"
+              onPress={() => onSubmitFeedback?.(rating, feedback)}
+              style={styles.submitBtn}
+            />
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+  },
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 40,
+  },
+  header: {
+    marginBottom: 20,
+  },
+  headerIconBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  successHeader: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  iconCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#10B981', // Success green
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#10B981',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+    marginBottom: 16,
+  },
+  successTitle: {
+    fontSize: 20,
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#F3F4F6',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+    marginBottom: 40,
+  },
+  cardHeader: {
+    padding: 16,
+  },
+  dateText: {
+    marginTop: 4,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#F3F4F6',
+  },
+  statsSection: {
+    padding: 16,
+  },
+  totalText: {
+    marginBottom: 8,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    marginBottom: 12,
+  },
+  statsLabels: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    flexWrap: 'wrap',
+  },
+  statLabel: {
+    marginRight: 16,
+    fontSize: 12,
+    marginBottom: 4,
+  },
+  percentageBlock: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  progressBarContainer: {
+    height: 8,
+    backgroundColor: '#E5E7EB',
+    borderRadius: 4,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  progressSegment: {
+    height: '100%',
+  },
+  feedbackSection: {
+    alignItems: 'center',
+  },
+  feedbackTitle: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 8,
+    lineHeight: 26,
+  },
+  feedbackSubtitle: {
+    textAlign: 'center',
+    fontSize: 12,
+    marginBottom: 24,
+    paddingHorizontal: 20,
+  },
+  starsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 12, // Space between stars
+    marginBottom: 32,
+  },
+  textInput: {
+    width: '100%',
+    height: 120,
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#10B981', // Green border as in design
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 14,
+    color: '#1F2937',
+    marginBottom: 24,
+  },
+  submitBtn: {
+    backgroundColor: '#10B981',
+    paddingHorizontal: 40,
+    borderRadius: 8,
+  },
+});