react-native-elearn-ui 0.1.23 → 0.1.28

package/src/screens/qbank/QBankQuestionScreen.tsx

@@ -0,0 +1,393 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  StatusBar,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon, Button } from '../../components';
+import type { QBankQuestionParams, QBankOption } from '../../types';
+
+interface QBankQuestionScreenProps {
+  params: QBankQuestionParams;
+  initialTimeSeconds?: number;
+  onTimeUp?: () => void;
+  onBack?: () => void;
+  onNext?: () => void;
+  onPrev?: () => void;
+  onPressOption?: (optionId: string) => void;
+  onPressReport?: () => void;
+  onPressUsers?: () => void;
+}
+
+const formatTime = (totalSeconds: number) => {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+export const QBankQuestionScreen: React.FC<QBankQuestionScreenProps> = ({
+  params,
+  initialTimeSeconds = 60,
+  onTimeUp,
+  onBack,
+  onNext,
+  onPrev,
+  onPressOption,
+  onPressReport,
+  onPressUsers,
+}) => {
+  const theme = useTheme();
+  const [timeLeft, setTimeLeft] = useState(initialTimeSeconds);
+
+  useEffect(() => {
+    if (timeLeft <= 0) {
+      onTimeUp?.();
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [timeLeft, onTimeUp]);
+
+  const progressPercentage = (params.questionNumber / params.totalQuestions) * 100;
+
+  const renderOption = (option: QBankOption, index: number) => {
+    const letters = ['A', 'B', 'C', 'D', 'E', 'F'];
+    const letter = letters[index] || '';
+
+    let borderColor = '#E5E7EB'; // Default grey
+    let backgroundColor = '#FFFFFF';
+    let iconName: 'check-circle' | 'x-circle' | undefined;
+    let iconColor = theme.textSecondary;
+    let statusText = '';
+    let statusColor = '';
+
+    if (option.status === 'correct') {
+      borderColor = theme.success;
+      backgroundColor = '#F0FDF4'; // light green bg
+      iconName = 'check-circle';
+      iconColor = theme.success;
+      statusText = 'Correct';
+      statusColor = theme.success;
+    } else if (option.status === 'incorrect') {
+      borderColor = '#EF4444';
+      backgroundColor = '#FEF2F2'; // light red bg
+      iconName = 'x-circle';
+      iconColor = '#EF4444';
+      statusText = 'InCorrect'; // matching user image
+      statusColor = '#EF4444';
+    }
+
+    return (
+      <TouchableOpacity 
+        key={option.id}
+        style={[styles.optionContainer, { borderColor, backgroundColor }]}
+        onPress={() => onPressOption?.(option.id)}
+        activeOpacity={0.7}
+      >
+        <View style={styles.optionContent}>
+          {iconName ? (
+            <Icon name={iconName} size={20} color={iconColor} />
+          ) : (
+            <View style={styles.emptyCircle} />
+          )}
+          <View style={styles.optionTextWrapper}>
+            <Typography variant="body" color={theme.textPrimary} style={styles.optionText}>
+              {letter}. {option.text}
+            </Typography>
+            {(option.status === 'correct' || option.status === 'incorrect') && (
+              <Typography variant="caption" color={statusColor} style={styles.optionStatusText}>
+                {statusText} <Typography variant="caption" color={theme.textSecondary}>[{option.percentage}%]</Typography>
+              </Typography>
+            )}
+            {option.status === 'default' && option.percentage !== undefined && (
+              <Typography variant="caption" color={theme.textSecondary} style={styles.optionStatusText}>
+                [{option.percentage}%]
+              </Typography>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor: '#E5E7EB' }]} edges={['top', 'bottom']}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+
+      <View style={styles.card}>
+        {/* Header */}
+        <View style={styles.header}>
+          <TouchableOpacity onPress={onBack} style={styles.headerIconBtnLeft}>
+            <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+          </TouchableOpacity>
+          <Typography variant="h3" color={theme.textPrimary} style={styles.headerTitle}>
+            {params.headerTitle}
+          </Typography>
+          <View style={styles.headerIconBtnRight} />
+        </View>
+
+        {/* Progress Bar */}
+        <View style={styles.progressTrack}>
+          <View style={[styles.progressFill, { width: `${progressPercentage}%`, backgroundColor: theme.success }]} />
+        </View>
+
+        <ScrollView 
+          contentContainerStyle={styles.scrollContent} 
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Top Bar: Question Number & Timer */}
+          <View style={styles.topBar}>
+            <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumber}>
+              QUESTION {params.questionNumber}/{params.totalQuestions}
+            </Typography>
+            <View style={styles.timerWrapper}>
+              <Icon name="clock" size={14} color={theme.textSecondary} />
+              <Typography variant="caption" color={theme.textSecondary} style={styles.timerText}>
+                {formatTime(timeLeft)}
+              </Typography>
+            </View>
+          </View>
+
+          {/* Question Text */}
+          <Typography variant="h3" bold color={theme.textPrimary} style={styles.questionText}>
+            {params.questionText}
+          </Typography>
+
+          {/* Options */}
+          <View style={styles.optionsList}>
+            {params.options.map((option, index) => renderOption(option, index))}
+          </View>
+
+          {/* Explanation Section */}
+          {params.explanation && (
+            <View style={styles.explanationContainer}>
+              <Typography variant="caption" bold color={theme.textPrimary} style={styles.explanationTitle}>
+                EXPLANATION
+              </Typography>
+              <Typography variant="body" color={theme.textSecondary} style={styles.explanationText}>
+                {params.explanation}
+              </Typography>
+              
+              {params.referenceId && (
+                <View style={styles.referenceContainer}>
+                  <Typography variant="caption" color={theme.textSecondary} style={styles.referenceText}>
+                    {params.referenceId}
+                  </Typography>
+                </View>
+              )}
+            </View>
+          )}
+        </ScrollView>
+
+        {/* Bottom Actions */}
+        <View style={styles.bottomActions}>
+          <View style={styles.leftActions}>
+            <TouchableOpacity style={styles.iconAction} onPress={onPressReport}>
+              <Icon name="alert-circle" size={20} color={theme.textSecondary} />
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.iconAction} onPress={onPressUsers}>
+              <Icon name="users" size={20} color={theme.textSecondary} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.rightActions}>
+            <TouchableOpacity style={styles.prevBtn} onPress={onPrev}>
+              <Typography variant="body" bold color={theme.textPrimary}>
+                Prev
+              </Typography>
+            </TouchableOpacity>
+            <Button 
+              title="Next" 
+              onPress={onNext || (() => {})} 
+              style={styles.nextBtn} 
+              textStyle={styles.nextBtnText}
+            />
+          </View>
+        </View>
+
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16, // Gray margin around the card
+  },
+  card: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  headerIconBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerRightActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerIconBtnRight: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+    textAlign: 'center',
+  },
+  progressTrack: {
+    height: 4,
+    backgroundColor: '#E5E7EB',
+    width: '100%',
+  },
+  progressFill: {
+    height: '100%',
+  },
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 40,
+  },
+  topBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  questionNumber: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+  },
+  timerWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  timerText: {
+    fontSize: 12,
+    marginLeft: 6,
+  },
+  questionText: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  optionsList: {
+    marginBottom: 32,
+  },
+  optionContainer: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 12,
+  },
+  optionContent: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  emptyCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+  },
+  optionTextWrapper: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  optionText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  optionStatusText: {
+    marginTop: 6,
+    fontSize: 12,
+  },
+  explanationContainer: {
+    marginTop: 16,
+  },
+  explanationTitle: {
+    fontSize: 12,
+    marginBottom: 12,
+  },
+  explanationText: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  referenceContainer: {
+    marginTop: 24,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#F3F4F6',
+    alignItems: 'center',
+  },
+  referenceText: {
+    fontSize: 12,
+  },
+  bottomActions: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#F3F4F6',
+    backgroundColor: '#FFFFFF',
+  },
+  leftActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconAction: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  rightActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  prevBtn: {
+    marginRight: 20,
+  },
+  nextBtn: {
+    backgroundColor: '#10B981',
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    height: 'auto',
+    minWidth: 80,
+  },
+  nextBtnText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/screens/qbank/QBankSubTopicScreen.tsx

@@ -6,12 +6,10 @@ import {
   TouchableOpacity,
   StatusBar,
   FlatList,
-  Modal,
-  TouchableWithoutFeedback,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from '../../context/ThemeContext';
-import { Typography, Icon } from '../../components';
+import { Typography, Icon, BottomSheet } from '../../components';
 import type { QBankSubTopicParams } from '../../types';
 
 interface QBankSubTopicScreenProps {
@@ -21,6 +19,7 @@ interface QBankSubTopicScreenProps {
   onPressModule?: (moduleId: string) => void;
   onPressFilter?: (filter: string) => void;
   onPressSearch?: () => void;
+  isProUser?: boolean;
 }
 
 export const QBankSubTopicScreen: React.FC<QBankSubTopicScreenProps> = ({
@@ -30,6 +29,7 @@ export const QBankSubTopicScreen: React.FC<QBankSubTopicScreenProps> = ({
   onPressModule,
   onPressFilter,
   onPressSearch,
+  isProUser = false,
 }) => {
   const theme = useTheme();
   const [activeFilter, setActiveFilter] = useState(params.activeFilter || params.filters[0]);
@@ -193,25 +193,27 @@ export const QBankSubTopicScreen: React.FC<QBankSubTopicScreenProps> = ({
                             </Typography>
                           </View>
                         )}
-                        {moduleItem.status === 'locked' && (
-                          <View style={styles.lockedBadge}>
-                            <Icon name="lock" size={12} color="#64748B" />
+                        {moduleItem.status === 'locked' && !isProUser && (
+                          <View style={styles.proBadge}>
+                            <Typography variant="caption" bold color="#FFFFFF" style={{fontSize: 7}}>
+                              PRO
+                            </Typography>
                           </View>
                         )}
                         {moduleItem.attemptStatus === 'resume' && (
-                          <Typography variant="caption" bold color="#F59E0B" style={{fontSize: 11}}>
+                          <Typography variant="caption" bold color="#F59E0B" style={{fontSize: 9}}>
                             RESUME
                           </Typography>
                         )}
                         {moduleItem.attemptStatus === 'completed' && (
                           <View style={{ alignItems: 'flex-end' }}>
                             <View style={styles.completedBadge}>
-                              <Typography variant="caption" bold color="#FFFFFF" style={{fontSize: 8}}>
+                              <Typography variant="caption" bold color="#FFFFFF" style={{fontSize: 7}}>
                                 COMPLETED
                               </Typography>
                             </View>
                             {moduleItem.correctPercentage !== undefined && (
-                              <Typography variant="caption" bold color={theme.success} style={{fontSize: 12, marginTop: 4}}>
+                              <Typography variant="caption" bold color={theme.success} style={{fontSize: 10, marginTop: 4}}>
                                 {moduleItem.correctPercentage}% Correct
                               </Typography>
                             )}
@@ -228,41 +230,34 @@ export const QBankSubTopicScreen: React.FC<QBankSubTopicScreenProps> = ({
       </ScrollView>
 
       {/* Table of Contents Bottom Sheet Modal */}
-      <Modal
+      <BottomSheet
         visible={showTOC}
-        transparent={true}
-        animationType="slide"
-        onRequestClose={() => setShowTOC(false)}
+        onClose={() => setShowTOC(false)}
+        height={400}
       >
-        <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => setShowTOC(false)}>
-          <TouchableWithoutFeedback>
-            <View style={styles.bottomSheet}>
-              <View style={styles.sheetHeader}>
-                <Typography variant="h3" bold color={theme.textPrimary}>
-                  Table of Contents
-                </Typography>
-                <TouchableOpacity onPress={() => setShowTOC(false)}>
-                  <Icon name="x" size={24} color={theme.textSecondary} />
-                </TouchableOpacity>
-              </View>
-              <ScrollView style={styles.sheetScroll}>
-                {params.sections.map((section) => (
-                  <TouchableOpacity 
-                    key={section.id} 
-                    style={styles.sheetItem}
-                    onPress={() => scrollToSection(section.id)}
-                  >
-                    <Typography variant="body" color={theme.textPrimary}>
-                      {section.title}
-                    </Typography>
-                    <Icon name="chevron-right" size={20} color={theme.textSecondary} />
-                  </TouchableOpacity>
-                ))}
-              </ScrollView>
-            </View>
-          </TouchableWithoutFeedback>
-        </TouchableOpacity>
-      </Modal>
+        <View style={styles.sheetHeader}>
+          <Typography variant="h3" bold color={theme.textPrimary}>
+            Table of Contents
+          </Typography>
+          <TouchableOpacity onPress={() => setShowTOC(false)}>
+            <Icon name="x" size={24} color={theme.textSecondary} />
+          </TouchableOpacity>
+        </View>
+        <ScrollView style={styles.sheetScroll}>
+          {params.sections.map((section) => (
+            <TouchableOpacity 
+              key={section.id} 
+              style={styles.sheetItem}
+              onPress={() => scrollToSection(section.id)}
+            >
+              <Typography variant="body" color={theme.textPrimary}>
+                {section.title}
+              </Typography>
+              <Icon name="chevron-right" size={20} color={theme.textSecondary} />
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </BottomSheet>
 
     </SafeAreaView>
   );
@@ -436,13 +431,11 @@ const styles = StyleSheet.create({
     borderColor: '#10B981',
     backgroundColor: '#FFFFFF',
   },
-  lockedBadge: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#F1F5F9',
-    justifyContent: 'center',
-    alignItems: 'center',
+  proBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: '#F59E0B',
   },
   completedBadge: {
     paddingHorizontal: 6,
@@ -450,18 +443,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: '#10B981',
   },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    justifyContent: 'flex-end',
-  },
-  bottomSheet: {
-    backgroundColor: '#FFFFFF',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    paddingBottom: 40,
-    maxHeight: '70%',
-  },
   sheetHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',

package/src/types/index.ts

@@ -239,6 +239,23 @@ export interface QBankSubTopicSection {
   modules: QBankSubTopicModule[];
 }
 
+export interface QBankOption {
+  id: string;
+  text: string;
+  status: 'default' | 'correct' | 'incorrect';
+  percentage?: number; // e.g. 20 for [20%]
+}
+
+export interface QBankQuestionParams {
+  headerTitle: string;
+  questionNumber: number;
+  totalQuestions: number;
+  questionText: string;
+  options: QBankOption[];
+  explanation?: string;
+  referenceId?: string;
+}
+
 export interface QBankSubTopicParams {
   header: {
     title: string;