@magmamath/students-features 1.4.1 → 1.4.2

package/src/features/fluency/shared/fluencySolving.types.ts

@@ -0,0 +1,37 @@
+import type { AttemptStatus, FluencyMode } from './fluency.constants'
+
+export type SolvingFact = {
+  id: string
+  mode: FluencyMode
+  numbers: readonly [number, number]
+  answer: number
+  difficulty: number
+  box: number
+  lastSeenMs: number | null
+  sessionStartBox: number
+  hasFailedThisSession: boolean
+  attemptsCount: number
+  correctCount: number
+}
+
+export type FluencyCardDisplayContent = {
+  fact: SolvingFact | null
+  answer: string
+}
+
+export type QuestionOutcome = {
+  factId: string
+  status: AttemptStatus
+  answer: string | null
+  numbers: readonly [number, number]
+  mode: FluencyMode
+}
+
+export type PickerParams = {
+  wDue: number
+  wWeak: number
+  wEase: number
+  wRand: number
+  numBoxes: number
+  boxIntervals: readonly number[]
+}

package/src/features/fluency-teacher/assets/PersonIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS, IconProps } from '@magmamath/react-native-ui'
+
+export const PersonIcon = ({ color = COLORS.NEUTRAL_9, size = 20 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 21" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M.053 18.678c.76-3.257 4-7.32 9.68-7.32 6.204 0 9.068 4.073 9.712 7.346.263 1.337-.866 2.299-1.997 2.299H2.018c-1.123 0-2.282-.967-1.965-2.325zm9.68-5.605c-4.74 0-7.396 3.366-8.01 5.995a.12.12 0 00-.002.063.143.143 0 00.035.056c.046.05.137.101.261.101h15.43c.124 0 .22-.05.27-.105a.154.154 0 00.045-.148c-.514-2.612-2.782-5.962-8.03-5.962zM9.732 1.715a3.431 3.431 0 00-3.429 3.429c0 1.921 1.359 3.429 3.424 3.429 2.072 0 3.444-1.514 3.434-3.425-.009-1.9-1.541-3.433-3.429-3.433zM4.59 5.144A5.145 5.145 0 019.732 0c2.842 0 5.13 2.306 5.144 5.14.014 2.822-2.088 5.147-5.149 5.147-3.067 0-5.138-2.33-5.138-5.143z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/features/fluency-teacher/assets/SortDefaultIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS, IconProps } from '@magmamath/react-native-ui'
+
+export const SortDefaultIcon = ({ color = COLORS.NEUTRAL_9, size = 10 }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 10 10" fill="none">
+    <Path d="M5 1 L8 4 H2 Z" fill={color} />
+    <Path d="M5 9 L2 6 H8 Z" fill={color} />
+  </Svg>
+)

package/src/features/fluency-teacher/components/FluencyTeacher.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { useGate } from 'effector-react'
+import { View, StyleSheet } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
+import { TeacherFluencyModel } from '../model/TeacherFluencyModel'
+import { FluencyTeacherStudentsTable } from './table/FluencyTeacherStudentsTable'
+import { FluencyTeacherFilters } from './table/FluencyTeacherFilters'
+import { FluencyTeacherHeader } from './header/FluencyTeacherHeader'
+import { FluencyTeacherDrawer } from './drawer/FluencyTeacherDrawer'
+import { FluencyTeacherFooter } from './FluencyTeacherFooter'
+import { FluencyStudent } from '../fluencyTeacher.types'
+import { TeacherFluencyProvider } from '../context/TeacherFluencyContext'
+
+type FluencyTeacherProps = {
+  model: TeacherFluencyModel
+  students: FluencyStudent[]
+  grade: number
+}
+
+export const FluencyTeacher = ({ model, students, grade }: FluencyTeacherProps) => {
+  useGate(model.gate, { students, grade })
+
+  return (
+    <TeacherFluencyProvider value={{ model }}>
+      <View style={styles.container}>
+        <FluencyTeacherHeader />
+        <FluencyTeacherFilters />
+        <FluencyTeacherStudentsTable />
+        <FluencyTeacherDrawer />
+        <FluencyTeacherFooter />
+      </View>
+    </TeacherFluencyProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    gap: SPACING[400],
+  },
+})

package/src/features/fluency-teacher/components/FluencyTeacherFooter.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  InfoIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../i18n/i18n'
+
+export const FluencyTeacherFooter = () => {
+  const t = useText()
+  return (
+    <View style={styles.footer}>
+      <View style={styles.hint}>
+        <InfoIcon size={13} color={COLORS.NEUTRAL_7} />
+        <Typography variant={HeadingVariants.H10} style={styles.text}>
+          {t('teacher.fluency.rowClickHint')}
+        </Typography>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  hint: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  text: {
+    color: COLORS.NEUTRAL_7,
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+  },
+})

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

@@ -0,0 +1,92 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import {
+  Button,
+  ButtonColor,
+  ButtonVariant,
+  COLORS,
+  CrossIcon,
+  FONT_FAMILY,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+
+import type { StudentResult } from '../../fluencyTeacher.types'
+
+type DrawerHeaderProps = {
+  student: StudentResult
+  onClose: () => void
+}
+
+export const DrawerHeader = ({ student, onClose }: DrawerHeaderProps) => {
+  const t = useText()
+  return (
+    <View style={styles.container}>
+      <View style={styles.left}>
+        <Typography variant={HeadingVariants.H9} style={styles.label}>
+          {t('teacher.fluency.studentFluency')}
+        </Typography>
+        <Text style={styles.name}>{student.name}</Text>
+      </View>
+      <View style={styles.right}>
+        <Text style={styles.masteryLabel}>{t('teacher.fluency.overallMastery')}</Text>
+        <Text style={styles.masteryValue}>{student.averagePercent}%</Text>
+      </View>
+      <Button
+        variant={ButtonVariant.SECONDARY}
+        colorScheme={ButtonColor.WHITE}
+        icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
+        onPress={onClose}
+        style={{ container: styles.closeButton }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: SPACING[500],
+    paddingHorizontal: SPACING[700],
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+  },
+  left: {
+    marginLeft: 48,
+  },
+  label: {
+    color: COLORS.GREEN_7,
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+  },
+  name: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
+    fontSize: 22,
+    color: COLORS.NEUTRAL_10,
+  },
+  right: {
+    alignItems: 'flex-end',
+    marginLeft: 'auto',
+  },
+  masteryLabel: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
+    fontSize: 13,
+    color: COLORS.NEUTRAL_7,
+  },
+  masteryValue: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
+    fontSize: 28,
+    color: COLORS.GREEN_7,
+  },
+  closeButton: {
+    alignSelf: 'center',
+    marginLeft: SPACING[600],
+  },
+})

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import type { TranslationKey } from '../../../../i18n/i18n'
+
+type MasteryLevelConfig = {
+  labelKey: TranslationKey
+  color: string
+}
+
+const MASTERY_LEVEL_CONFIG: MasteryLevelConfig[] = [
+  { labelKey: 'student.fluency.notStarted', color: COLORS.NEUTRAL_3 },
+  { labelKey: 'student.fluency.masteryLearning', color: COLORS.GREEN_2 },
+  { labelKey: 'student.fluency.masteryGrowing', color: COLORS.GREEN_3 },
+  { labelKey: 'student.fluency.masteryStrong', color: COLORS.GREEN_4 },
+  { labelKey: 'student.fluency.masteryMastered', color: COLORS.GREEN_7 },
+]
+
+export const DrawerMasteryLegend = () => {
+  const t = useText()
+  return (
+    <View style={styles.container}>
+      {MASTERY_LEVEL_CONFIG.map(({ labelKey, color }) => (
+        <View key={labelKey} style={styles.item}>
+          <View style={[styles.swatch, { backgroundColor: color }]} />
+          <Text style={styles.label}>{t(labelKey)}</Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    paddingVertical: SPACING[150],
+    paddingHorizontal: SPACING[300],
+    borderRadius: 999,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+    alignSelf: 'center',
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[150],
+  },
+  swatch: {
+    width: 14,
+    height: 14,
+    borderRadius: 4,
+  },
+  label: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontSize: 12,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_8,
+  },
+})

package/src/features/fluency-teacher/components/drawer/DrawerMatrixes.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 { DrawerOperatorBox } from './DrawerOperatorBox'
+import { FluencyMathOperatorSymbol, FluencyOperator } from '../../fluencyTeacher.constants'
+
+export const DrawerMatrixes = () => {
+  const t = useText()
+  return (
+    <View style={styles.grid}>
+      <DrawerOperatorBox
+        title={t('student.fluency.addition')}
+        symbol={FluencyMathOperatorSymbol.ADDITION}
+        iconBg={COLORS.GREEN_1}
+        iconColor={COLORS.GREEN_7}
+        operator={FluencyOperator.ADDITION}
+      />
+      <DrawerOperatorBox
+        title={t('student.fluency.subtraction')}
+        symbol={FluencyMathOperatorSymbol.SUBTRACTION}
+        iconBg={COLORS.ORANGE_1}
+        iconColor={COLORS.ORANGE_7}
+        operator={FluencyOperator.SUBTRACTION}
+      />
+      <DrawerOperatorBox
+        title={t('student.fluency.multiplication')}
+        symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
+        iconBg={COLORS.BLUE_1}
+        iconColor={COLORS.BLUE_7}
+        operator={FluencyOperator.MULTIPLICATION}
+      />
+      <DrawerOperatorBox
+        title={t('student.fluency.division')}
+        symbol={FluencyMathOperatorSymbol.DIVISION}
+        iconBg={COLORS.PURPLE_1}
+        iconColor={COLORS.PURPLE_7}
+        operator={FluencyOperator.DIVISION}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: SPACING[300],
+    marginTop: SPACING[300],
+    marginBottom: SPACING[600],
+  },
+})

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