react-native-elearn-ui 0.1.28 → 0.1.32

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,
+  },
+});

package/src/types/index.ts

@@ -239,23 +239,59 @@ export interface QBankSubTopicSection {
   modules: QBankSubTopicModule[];
 }
 
-export interface QBankOption {
+export interface QBankExamOption {
   id: string;
   text: string;
-  status: 'default' | 'correct' | 'incorrect';
+  isCorrect: boolean;
   percentage?: number; // e.g. 20 for [20%]
 }
 
-export interface QBankQuestionParams {
-  headerTitle: string;
-  questionNumber: number;
-  totalQuestions: number;
+export interface QBankExamQuestion {
+  id: string;
   questionText: string;
-  options: QBankOption[];
+  options: QBankExamOption[];
   explanation?: string;
   referenceId?: string;
 }
 
+export interface QBankExamData {
+  id: string;
+  title: string;
+  accessType: 'free' | 'pro';
+  timeLimitSeconds?: number;
+  questions: QBankExamQuestion[];
+}
+
+export interface QBankSuccessScreenProps {
+  moduleTitle: string;
+  completedDate: string;
+  totalQuestions: number;
+  correctCount: number;
+  incorrectCount: number;
+  missedCount: number;
+  onBack?: () => void;
+  onSubmitFeedback?: (rating: number, feedback: string) => void;
+}
+
+export interface QBankOverviewQuestion {
+  id: string;
+  number: number;
+  title: string;
+  status: 'correct' | 'incorrect' | 'missed';
+}
+
+export interface QBankOverviewScreenProps {
+  topicTitle: string;
+  moduleTitle: string;
+  totalQuestions: number;
+  correctCount: number;
+  incorrectCount: number;
+  missedCount: number;
+  questions: QBankOverviewQuestion[];
+  onBack?: () => void;
+  onPressQuestion?: (questionId: string) => void;
+}
+
 export interface QBankSubTopicParams {
   header: {
     title: string;