react-native-elearn-ui 0.1.28 → 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',
+  },
+});