@magmamath/students-features 1.6.4 → 1.7.0-rc.0

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

@@ -1,102 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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],
-  },
-})