@magmamath/students-features 1.5.0 → 1.5.1

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

@@ -0,0 +1,132 @@
+import type { ButtonColor, SelectOptionColor } from '@magmamath/react-native-ui'
+import type {
+  AttemptStatus,
+  FluencyMasteryLevel,
+  FluencyMode,
+  MatrixConfig,
+} from './fluency.constants'
+import type { TranslationKey } from '../../../i18n/i18n'
+
+export type LegendItem = {
+  label: string
+  color: string
+  withBorder?: boolean
+}
+
+export type FluencyColorPalette = {
+  shades: readonly [string, string, string, string]
+  button: ButtonColor
+  select: SelectOptionColor
+}
+
+export type FluencyModePreset = {
+  buttonColor: ButtonColor
+  symbol: string
+  accentColor: string
+  header: {
+    streakColor: { gained: string; todayBorder: string }
+  }
+  matrix: {
+    operatorLabel: TranslationKey
+    levelColors: Record<FluencyMasteryLevel, string>
+  }
+}
+
+export type FluencyModeConfig = {
+  mode: FluencyMode
+  label: TranslationKey
+  symbol: string
+  select: SelectOptionColor
+  preset: FluencyModePreset
+}
+
+export type GetMatrixPayload = {
+  grade: number
+}
+
+export type FluencyAttemptItem = {
+  factId: string
+  status: AttemptStatus
+  startedAt: string
+  timeToSolve: number
+  boxAfter: number
+}
+
+export type FluencyAttemptPayload = {
+  grade: number
+  attempts: FluencyAttemptItem[]
+  matrixConfig?: MatrixConfig
+}
+
+export type FluencyModelProps = {
+  api: {
+    getMatrix: (payload: GetMatrixPayload) => Promise<GetMatrixResponse>
+    getWeeklyStats: () => Promise<GetWeeklyStatsResponse>
+    postAttempt: (payload: FluencyAttemptPayload) => Promise<void>
+  }
+}
+
+export type FluencyConfig = {
+  grade: number
+  name: string
+}
+
+export type FluencyModelGateProps = {
+  config: FluencyConfig
+}
+
+type FactPosition = {
+  column: number
+  row: number
+}
+
+export type Fact = {
+  attemptsCount: number
+  averageTimeMs: number | null
+  box: FluencyMasteryLevel | null
+  correctCount: number
+  difficulty: number
+  lastAttemptedAt: string | null
+  lastSolvedAt: string | null
+  numbers: readonly [number, number]
+  position: FactPosition
+  streak: number
+}
+
+type Operator = 'addition' | 'subtraction' | 'multiplication' | 'division'
+
+type Operation = {
+  completionRate: number
+  grade: number | null
+  facts: Record<string, Fact>
+}
+
+export type GetMatrixResponse = {
+  studentId: string
+  operations: Record<Operator, Operation>
+}
+
+export type GetWeeklyStatsResponse = {
+  daysPracticed: number
+  daysWithoutPractice: number
+  practicedDates: string[]
+  weekStart: string
+}
+
+export type GridCell = {
+  isHeader: boolean
+  isEmpty: boolean
+  label: number | null
+  box: FluencyMasteryLevel | null
+  numbers: readonly [number, number] | null // null for header cells
+}
+
+export type MatrixGrid = GridCell[][]
+
+export type FlashcardLayout = {
+  card: { width: number; height: number; radius: number }
+  answer: { width: number; height: number; radius: number }
+  fontSize: number
+  position: { right: number; top: number; zIndex: number }
+  rotation: string
+}

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

@@ -0,0 +1,25 @@
+import { FluencyMode } from './fluency.constants'
+import type { PickerParams } from './fluencySolving.types'
+
+const HOUR_MS = 60 * 60 * 1000
+const BOX_1_INTERVAL = 4 * HOUR_MS
+const BOX_2_INTERVAL = 36 * HOUR_MS // 1.5 days
+const BOX_3_INTERVAL = 144 * HOUR_MS // 6 days
+const BOX_4_INTERVAL = 672 * HOUR_MS // 4 weeks
+const BOX_5_INTERVAL = 2016 * HOUR_MS // 12 weeks
+
+export const DEFAULT_PICKER_PARAMS: PickerParams = {
+  wDue: 0.05,
+  wWeak: 0.35,
+  wEase: 0.3,
+  wRand: 0.02,
+  numBoxes: 5,
+  boxIntervals: [0, BOX_1_INTERVAL, BOX_2_INTERVAL, BOX_3_INTERVAL, BOX_4_INTERVAL, BOX_5_INTERVAL],
+}
+
+export const MODE_ANSWER_EVAL_FORMULA: Record<FluencyMode, (a: number, b: number) => number> = {
+  [FluencyMode.ADDITION]: (a, b) => a + b,
+  [FluencyMode.SUBTRACTION]: (a, b) => a - b,
+  [FluencyMode.MULTIPLICATION]: (a, b) => a * b,
+  [FluencyMode.DIVISION]: (a, b) => a / b,
+}

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

@@ -0,0 +1,102 @@
+import { AttemptStatus, FluencyMode } from './fluency.constants'
+import type { Fact } from './fluency.types'
+import { DEFAULT_PICKER_PARAMS, MODE_ANSWER_EVAL_FORMULA } from './fluencySolving.constants'
+import type { PickerParams, QuestionOutcome, SolvingFact } from './fluencySolving.types'
+
+export function toSolvingFacts(factMap: Record<string, Fact>, mode: FluencyMode): SolvingFact[] {
+  return Object.entries(factMap).map(([id, fact]) => {
+    const [a, b] = fact.numbers
+    const answer = MODE_ANSWER_EVAL_FORMULA[mode](a, b)
+    const box = fact.box ?? 0
+    return {
+      id,
+      mode,
+      numbers: fact.numbers,
+      answer,
+      difficulty: fact.difficulty,
+      box,
+      lastSeenMs: fact.lastAttemptedAt ? new Date(fact.lastAttemptedAt).getTime() : null,
+      sessionStartBox: box,
+      hasFailedThisSession: false,
+      attemptsCount: fact.attemptsCount,
+      correctCount: fact.correctCount,
+    }
+  })
+}
+
+function computePriority(
+  fact: SolvingFact,
+  now: number,
+  params: PickerParams,
+  maxDifficulty: number,
+): number {
+  const interval = Math.max(0.001, params.boxIntervals[Math.max(1, fact.box)])
+  const overdueness =
+    fact.lastSeenMs === null ? 1.0 : Math.min(1, (now - fact.lastSeenMs) / (2 * interval))
+  const weakness = (params.numBoxes - fact.box) / params.numBoxes
+  const ease = (1 - fact.difficulty / Math.max(0.1, maxDifficulty)) * weakness
+  return (
+    params.wDue * overdueness +
+    params.wWeak * weakness +
+    params.wEase * ease +
+    params.wRand * Math.random()
+  )
+}
+
+export function selectNextFact(
+  facts: SolvingFact[],
+  now: number,
+  params: PickerParams = DEFAULT_PICKER_PARAMS,
+): SolvingFact | null {
+  if (facts.length === 0) return null
+  const pool = facts
+  const maxDifficulty = pool.reduce((m, f) => Math.max(m, f.difficulty), 1)
+  let best = pool[0]
+  let bestScore = -Infinity
+  for (const f of pool) {
+    const score = computePriority(f, now, params, maxDifficulty)
+    if (score > bestScore) {
+      bestScore = score
+      best = f
+    }
+  }
+  return best
+}
+
+export const formatSessionDuration = (ms: number): string => {
+  const totalSeconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+export const calculateMaxStreak = (outcomes: QuestionOutcome[]): number =>
+  outcomes.reduce(
+    (acc, outcome) => {
+      const current = outcome.status === AttemptStatus.CORRECT ? acc.current + 1 : 0
+      return { max: Math.max(acc.max, current), current }
+    },
+    { max: 0, current: 0 },
+  ).max
+
+type BoxTransitionParams = {
+  currentBox: number
+  isCorrect: boolean
+  isFast: boolean
+  sessionStartBox: number
+  hasFailedThisSession: boolean
+}
+
+export function calculateNextBox({
+  currentBox,
+  isCorrect,
+  isFast,
+  sessionStartBox,
+  hasFailedThisSession,
+}: BoxTransitionParams): number {
+  if (!isCorrect) return Math.max(1, currentBox - 1)
+  if (!isFast) return currentBox === 0 ? 1 : currentBox
+  if (hasFailedThisSession) return Math.min(currentBox + 1, sessionStartBox)
+  if (currentBox >= sessionStartBox + 1) return currentBox
+  return Math.min(currentBox + 1, 4)
+}

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