@magmamath/students-features 1.5.0 → 1.5.1

package/src/features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import { useDrawerMatrix } from '../../hooks/useDrawerMatrix'
+import { DrawerMatrix } from '../matrix/DrawerMatrix'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+
+import { FluencyOperator } from '../../fluencyTeacher.constants'
+
+type DrawerOperatorBoxProps = {
+  title: string
+  symbol: string
+  iconBg: string
+  iconColor: string
+  operator: FluencyOperator
+}
+
+export const DrawerOperatorBox = ({
+  title,
+  symbol,
+  iconBg,
+  iconColor,
+  operator,
+}: DrawerOperatorBoxProps) => {
+  const t = useText()
+  const { model } = useTeacherFluency()
+  const isLoading = useUnit(model.api.getStudentDetailsFx.pending)
+  const matrixProps = useDrawerMatrix(operator)
+  const factsLabel = matrixProps.grid
+    ? t('teacher.fluency.factsGridLabel', {
+        cols: matrixProps.grid.colLabels.length,
+        rows: matrixProps.grid.rows.length,
+      })
+    : ''
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={[styles.iconBox, { backgroundColor: iconBg }]}>
+          <Text style={[styles.symbol, { color: iconColor }]}>{symbol}</Text>
+        </View>
+        <Text style={styles.title}>{title}</Text>
+        <View style={styles.spacer} />
+        <Text style={styles.factsLabel}>{factsLabel}</Text>
+      </View>
+      <View style={styles.content}>
+        {isLoading ? (
+          <View style={styles.loader}>
+            <ActivityIndicator size="large" color={COLORS.PRIMARY_BLUE} />
+          </View>
+        ) : (
+          <DrawerMatrix {...matrixProps} />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 315,
+    height: 315,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+    borderRadius: BORDER_RADIUS[300],
+    padding: SPACING[400],
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+    marginBottom: SPACING[300],
+  },
+  iconBox: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  symbol: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontSize: 20,
+    marginBottom: 2,
+  },
+  title: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '700',
+    fontSize: 15,
+    color: COLORS.NEUTRAL_10,
+  },
+  spacer: {
+    flex: 1,
+  },
+  factsLabel: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontSize: 13,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_7,
+  },
+  content: {
+    flex: 1,
+  },
+  loader: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+
+export type DrawerOperatorStatCardProps = {
+  title: string
+  value: number | string
+  symbol: string
+  color: string
+}
+
+export const DrawerOperatorStatCard = ({
+  title,
+  value,
+  symbol,
+  color,
+}: DrawerOperatorStatCardProps) => (
+  <View style={styles.container}>
+    <View style={[styles.iconContainer, { backgroundColor: color + '26' }]}>
+      <Text style={[styles.symbol, { color }]}>{symbol}</Text>
+    </View>
+    <View>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.value}>{value}%</Text>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    padding: SPACING[300],
+    borderRadius: SPACING[300],
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+    backgroundColor: COLORS.NEUTRAL_2,
+  },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: SPACING[200],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  symbol: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontSize: 28,
+    marginBottom: 2,
+  },
+  title: {
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '400',
+    fontSize: 12,
+    color: COLORS.NEUTRAL_7,
+  },
+  value: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
+    fontSize: 18,
+    color: COLORS.NEUTRAL_10,
+  },
+})

package/src/features/fluency-teacher/components/drawer/DrawerStats.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import { DrawerOperatorStatCard } from './DrawerOperatorStatCard'
+import type { StudentOperatorScores } from '../../fluencyTeacher.types'
+
+import { FluencyMathOperatorSymbol } from '../../fluencyTeacher.constants'
+
+type DrawerStatsProps = {
+  scores: StudentOperatorScores
+}
+
+export const DrawerStats = ({ scores }: DrawerStatsProps) => {
+  const t = useText()
+  return (
+    <View style={styles.container}>
+      <DrawerOperatorStatCard
+        title={t('student.fluency.addition')}
+        symbol={FluencyMathOperatorSymbol.ADDITION}
+        color={COLORS.PRIMARY_GREEN}
+        value={scores.addition}
+      />
+      <DrawerOperatorStatCard
+        title={t('student.fluency.subtraction')}
+        symbol={FluencyMathOperatorSymbol.SUBTRACTION}
+        color={COLORS.PRIMARY_ORANGE}
+        value={scores.subtraction}
+      />
+      <DrawerOperatorStatCard
+        title={t('student.fluency.multiplication')}
+        symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
+        color={COLORS.PRIMARY_BLUE}
+        value={scores.multiplication}
+      />
+      <DrawerOperatorStatCard
+        title={t('student.fluency.division')}
+        symbol={FluencyMathOperatorSymbol.DIVISION}
+        color={COLORS.PRIMARY_PURPLE}
+        value={scores.division}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SPACING[300],
+    paddingBottom: SPACING[300],
+  },
+})

package/src/features/fluency-teacher/components/drawer/FluencyTeacherDrawer.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect } from 'react'
+import { Animated, Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import { COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+
+import { DrawerHeader } from './DrawerHeader'
+import { DrawerStats } from './DrawerStats'
+import { DrawerMatrixes } from './DrawerMatrixes'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { DrawerMasteryLegend } from './DrawerMasteryLegend'
+
+const DRAWER_WIDTH = 700
+const BACKDROP_COLOR = 'rgba(0, 0, 0, 0.2)'
+
+const backdropOpacity = new Animated.Value(0)
+const drawerTranslateX = new Animated.Value(DRAWER_WIDTH)
+
+export const FluencyTeacherDrawer = () => {
+  const { model } = useTeacherFluency()
+  const student = useUnit(model.table.$studentInfoDrawer)
+  const isVisible = student !== null
+
+  useEffect(() => {
+    if (!isVisible) return
+    Animated.parallel([
+      Animated.timing(backdropOpacity, { toValue: 1, duration: 200, useNativeDriver: true }),
+      Animated.timing(drawerTranslateX, { toValue: 0, duration: 250, useNativeDriver: true }),
+    ]).start()
+  }, [isVisible])
+
+  if (!isVisible) return null
+
+  const closeDrawer = () => {
+    Animated.parallel([
+      Animated.timing(backdropOpacity, { toValue: 0, duration: 200, useNativeDriver: true }),
+      Animated.timing(drawerTranslateX, {
+        toValue: DRAWER_WIDTH,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start(() => model.table.setStudentInfoDrawer(null))
+  }
+
+  return (
+    <Modal visible={isVisible} transparent animationType="none" onRequestClose={closeDrawer}>
+      <View style={styles.root}>
+        <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
+          <Pressable style={StyleSheet.absoluteFill} onPress={closeDrawer} />
+        </Animated.View>
+
+        <Animated.View style={[styles.drawer, { transform: [{ translateX: drawerTranslateX }] }]}>
+          <DrawerHeader student={student} onClose={closeDrawer} />
+
+          <View style={styles.content}>
+            <DrawerStats scores={student.scores} />
+            <ScrollView showsVerticalScrollIndicator={false}>
+              <DrawerMatrixes />
+              <DrawerMasteryLegend />
+            </ScrollView>
+          </View>
+        </Animated.View>
+      </View>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: BACKDROP_COLOR,
+  },
+  drawer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: DRAWER_WIDTH,
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[3],
+  },
+  content: {
+    flex: 1,
+    paddingVertical: SPACING[500],
+    paddingHorizontal: SPACING[700],
+  },
+})

package/src/features/fluency-teacher/components/header/AverageTimePerStudent.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  TimerIcon,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { useUnit } from 'effector-react'
+import { useText } from '../../../../i18n/i18n'
+import { TEACHER_FLUENCY_GOAL_MINUTES } from '../../fluencyTeacher.constants'
+
+export const AverageTimePerStudent = () => {
+  const t = useText()
+  const { model } = useTeacherFluency()
+  const data = useUnit(model.table.$stats)
+
+  const students = data?.students ?? []
+  const totalWeeklyMs = students.reduce((sum, { weeklyTimeMs }) => sum + weeklyTimeMs, 0)
+  const currentMinutes = students.length > 0 ? Math.round(totalWeeklyMs / students.length / 60000) : 0
+  const fillPercent = Math.min(currentMinutes / TEACHER_FLUENCY_GOAL_MINUTES, 1)
+
+  return (
+    <View style={styles.container} testID="average-time-per-student">
+      <View style={styles.accentBar} />
+
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <TimerIcon size={16} color={COLORS.PRIMARY_PURPLE} />
+          <Typography variant={HeadingVariants.H9} style={styles.title}>
+            {t('teacher.fluency.avgTimeTitle')}
+          </Typography>
+        </View>
+
+        <View style={styles.divider} />
+
+        <View style={styles.data}>
+          <View style={styles.time}>
+            <Text style={styles.bigNumber}>{currentMinutes}</Text>
+            <Typography variant={HeadingVariants.H2} style={styles.goalText}>
+              {t('teacher.fluency.minGoal', { goal: TEACHER_FLUENCY_GOAL_MINUTES })}
+            </Typography>
+          </View>
+          <View style={styles.progressTrack}>
+            <View style={[styles.progressFill, { width: `${fillPercent * 100}%` }]} />
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 282,
+    height: 170,
+    flexDirection: 'row',
+    borderRadius: BORDER_RADIUS[300],
+    overflow: 'hidden',
+    ...SHADOWS[1],
+  },
+  accentBar: {
+    width: 6,
+    backgroundColor: COLORS.PRIMARY_PURPLE,
+  },
+  content: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    padding: SPACING[200],
+    gap: SPACING[100],
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+    padding: SPACING[100],
+  },
+  title: {
+    flex: 1,
+    color: COLORS.NEUTRAL_6,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.NEUTRAL_3,
+  },
+  data: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    gap: SPACING[200],
+  },
+  time: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: SPACING[200],
+    padding: SPACING[100],
+  },
+  bigNumber: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontSize: 64,
+    lineHeight: 64,
+    color: COLORS.PRIMARY_PURPLE,
+  },
+  goalText: {
+    color: COLORS.NEUTRAL_6,
+  },
+  progressTrack: {
+    height: 26,
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderRadius: 36,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: COLORS.PRIMARY_PURPLE,
+    borderRadius: 36,
+  },
+})

package/src/features/fluency-teacher/components/header/FluencyTeacherHeader.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+// import { AverageTimePerStudent } from './AverageTimePerStudent'
+// import { TopHardestFacts } from './TopHardestFacts'
+
+export const FluencyTeacherHeader = () => {
+  const t = useText()
+  return (
+    <View style={styles.container} testID="teacher-fluency-header">
+      <Typography variant={HeadingVariants.H2} style={styles.title}>
+        {t('teacher.fluency.factFluency')}
+      </Typography>
+
+      {/* TODO: it is ready code but commented out on purpose */}
+      {/*<TopHardestFacts />*/}
+      {/*<AverageTimePerStudent />*/}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: SPACING[400],
+  },
+  title: {
+    flex: 1,
+    color: COLORS.NEUTRAL_9,
+  },
+})

package/src/features/fluency-teacher/components/header/HardestFact.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { PersonIcon } from '../../assets/PersonIcon'
+import { FluencyMathOperatorSymbol, FluencyOperator } from '../../fluencyTeacher.constants'
+
+type Operator = { symbol: FluencyMathOperatorSymbol; color: string }
+
+const OPERATOR_CONFIG: Record<FluencyOperator, Operator> = {
+  [FluencyOperator.ADDITION]: {
+    symbol: FluencyMathOperatorSymbol.ADDITION,
+    color: COLORS.PRIMARY_GREEN,
+  },
+  [FluencyOperator.SUBTRACTION]: {
+    symbol: FluencyMathOperatorSymbol.SUBTRACTION,
+    color: COLORS.PRIMARY_ORANGE,
+  },
+  [FluencyOperator.MULTIPLICATION]: {
+    symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
+    color: COLORS.PRIMARY_BLUE,
+  },
+  [FluencyOperator.DIVISION]: {
+    symbol: FluencyMathOperatorSymbol.DIVISION,
+    color: COLORS.PRIMARY_PURPLE,
+  },
+}
+
+type HardestFactProps = {
+  symbol: FluencyOperator
+  leftOperand: number
+  rightOperand: number
+  studentsCount: number
+}
+
+export const HardestFact = ({
+  symbol,
+  leftOperand,
+  rightOperand,
+  studentsCount,
+}: HardestFactProps) => {
+  const { symbol: mathOperatorSymbol, color } = OPERATOR_CONFIG[symbol]
+  return (
+    <View style={styles.container}>
+      <View style={styles.equation}>
+        <Typography variant={HeadingVariants.H3} style={styles.operand}>
+          {leftOperand}
+        </Typography>
+        <Typography variant={HeadingVariants.H3} style={[styles.operator, { color }]}>
+          {mathOperatorSymbol}
+        </Typography>
+        <Typography variant={HeadingVariants.H3} style={styles.operand}>
+          {rightOperand}
+        </Typography>
+      </View>
+
+      <View style={styles.studentCount}>
+        <Typography variant={HeadingVariants.H3} style={styles.count}>
+          {studentsCount}
+        </Typography>
+        <PersonIcon size={16} color={COLORS.PRIMARY_RED} />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: SPACING[100],
+    borderRadius: BORDER_RADIUS[200],
+  },
+  equation: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    gap: SPACING[100],
+  },
+  operand: {
+    color: COLORS.NEUTRAL_9,
+  },
+  operator: {},
+  studentCount: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  count: {
+    color: COLORS.PRIMARY_RED,
+  },
+})

package/src/features/fluency-teacher/components/header/TopHardestFacts.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  InfoIcon,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { HardestFact } from './HardestFact'
+
+export const TopHardestFacts = () => {
+  const t = useText()
+  const { model } = useTeacherFluency()
+  const stats = useUnit(model.table.$stats)
+
+  return (
+    <View style={styles.container} testID="top-hardest-facts">
+      <View style={styles.accentBar} />
+
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <InfoIcon size={16} color={COLORS.PRIMARY_RED} />
+          <Typography variant={HeadingVariants.H9} style={styles.title}>
+            {t('teacher.fluency.hardestFactsTitle')}
+          </Typography>
+        </View>
+
+        <View style={styles.divider} />
+
+        {stats?.hardestFacts?.length ? (
+          stats.hardestFacts.map((fact) => (
+            <HardestFact
+              key={fact.factId}
+              symbol={fact.operator}
+              leftOperand={fact.numbers[0]}
+              rightOperand={fact.numbers[1]}
+              studentsCount={fact.strugglingStudentIds.length}
+            />
+          ))
+        ) : (
+          <View style={styles.empty}>
+            <Typography variant={HeadingVariants.H9} style={styles.emptyText}>
+              {t('teacher.fluency.hardestFactsEmpty')}
+            </Typography>
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 282,
+    height: 170,
+    flexDirection: 'row',
+    borderRadius: BORDER_RADIUS[300],
+    overflow: 'hidden',
+    ...SHADOWS[1],
+  },
+  accentBar: {
+    width: 6,
+    backgroundColor: COLORS.PRIMARY_RED,
+  },
+  content: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    padding: SPACING[200],
+    gap: SPACING[100],
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+    padding: SPACING[100],
+  },
+  title: {
+    flex: 1,
+    color: COLORS.NEUTRAL_6,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.NEUTRAL_3,
+  },
+  empty: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    color: COLORS.NEUTRAL_6,
+    textAlign: 'center',
+  },
+})