@magmamath/students-features 1.3.26-rc.12 → 1.3.26-rc.13

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,120 @@
+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 { TEACHER_FLUENCY_GOAL_MINUTES } from '../../fluencyTeacher.constants'
+
+export const AverageTimePerStudent = () => {
+  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}>
+            Avg Time / Student
+          </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}>
+              / {TEACHER_FLUENCY_GOAL_MINUTES} min goal
+            </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,28 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { AverageTimePerStudent } from './AverageTimePerStudent'
+import { TopHardestFacts } from './TopHardestFacts'
+
+export const FluencyTeacherHeader = () => (
+  <View style={styles.container} testID="teacher-fluency-header">
+    <Typography variant={HeadingVariants.H2} style={styles.title}>
+      Fact Fluency
+    </Typography>
+
+    <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.types'
+
+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,98 @@
+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 { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { HardestFact } from './HardestFact'
+
+export const TopHardestFacts = () => {
+  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}>
+            Top 3 Hardest Facts
+          </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}>
+              No hardest facts yet
+            </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',
+  },
+})

package/src/features/fluency-teacher/components/matrix/DrawerMatrix.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import type { LayoutChangeEvent } from 'react-native'
+import { MatrixHeaderRow } from './MatrixHeaderRow'
+import { MatrixRow } from './MatrixRow'
+import type { DrawerGrid } from '../../hooks/useDrawerGrid'
+
+type DrawerMatrixProps = {
+  grid: DrawerGrid | null
+  cellSize: number
+  fontSize: number
+  borderRadius: number
+  cellColorMap: Record<number, string>
+  onLayout: (e: LayoutChangeEvent) => void
+}
+
+export const DrawerMatrix = ({
+  grid,
+  cellSize,
+  fontSize,
+  borderRadius,
+  cellColorMap,
+  onLayout,
+}: DrawerMatrixProps) => (
+  <View style={styles.container} onLayout={onLayout}>
+    {grid && cellSize > 0 && (
+      <View style={styles.grid}>
+        <MatrixHeaderRow colLabels={grid.colLabels} cellSize={cellSize} fontSize={fontSize} />
+        {grid.rows.map((row) => (
+          <MatrixRow
+            key={row.label}
+            label={row.label}
+            cells={row.cells}
+            cellSize={cellSize}
+            borderRadius={borderRadius}
+            colorMap={cellColorMap}
+            fontSize={fontSize}
+          />
+        ))}
+      </View>
+    )}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  grid: {
+    gap: 2,
+  },
+})

package/src/features/fluency-teacher/components/matrix/MatrixCell.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { getCellColor } from '../../fluencyTeacher.helpers'
+
+export type MatrixCellProps = {
+  box: number | null
+  isEmpty: boolean
+  cellSize: number
+  borderRadius: number
+  colorMap: Record<number, string>
+  fontSize: number
+}
+
+export const MatrixCell = ({ box, isEmpty, cellSize, borderRadius, colorMap, fontSize }: MatrixCellProps) => (
+  <View
+    style={[
+      styles.cell,
+      { width: cellSize, height: cellSize, borderRadius },
+      { backgroundColor: isEmpty ? 'transparent' : getCellColor(box, colorMap) },
+    ]}
+  >
+    {isEmpty && <Text style={[styles.label, { fontSize }]}>-</Text>}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  cell: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    color: COLORS.NEUTRAL_7,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+})

package/src/features/fluency-teacher/components/matrix/MatrixHeaderRow.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+
+export type MatrixHeaderRowProps = {
+  colLabels: number[]
+  cellSize: number
+  fontSize: number
+}
+
+export const MatrixHeaderRow = ({ colLabels, cellSize, fontSize }: MatrixHeaderRowProps) => (
+  <View style={styles.row}>
+    <View style={{ width: cellSize, height: cellSize }} />
+    {colLabels.map((col) => (
+      <View key={col} style={[styles.labelCell, { width: cellSize, height: cellSize }]}>
+        <Text style={[styles.label, { fontSize }]}>{col}</Text>
+      </View>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: 2,
+  },
+  labelCell: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    color: COLORS.NEUTRAL_7,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+})

package/src/features/fluency-teacher/components/matrix/MatrixRow.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { MatrixCell } from './MatrixCell'
+import type { DrawerGridCell } from '../../hooks/useDrawerGrid'
+
+export type MatrixRowProps = {
+  label: number
+  cells: DrawerGridCell[]
+  cellSize: number
+  borderRadius: number
+  colorMap: Record<number, string>
+  fontSize: number
+}
+
+export const MatrixRow = ({
+  label,
+  cells,
+  cellSize,
+  borderRadius,
+  colorMap,
+  fontSize,
+}: MatrixRowProps) => (
+  <View style={styles.row}>
+    <View style={[styles.labelCell, { width: cellSize, height: cellSize }]}>
+      <Text style={[styles.label, { fontSize }]}>{label}</Text>
+    </View>
+    {cells.map((cell, i) => (
+      <MatrixCell
+        key={i}
+        box={cell.box}
+        isEmpty={cell.isEmpty}
+        cellSize={cellSize}
+        borderRadius={borderRadius}
+        colorMap={colorMap}
+        fontSize={fontSize}
+      />
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: 2,
+  },
+  labelCell: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    color: COLORS.NEUTRAL_7,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+})