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

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

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { Pressable, View, Text, StyleSheet } from 'react-native'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-import { getMasteryLevelByBox } from '../../../fluency.helpers'
 import { FluencyMasteryLevel } from '../../../fluency.constants'
 import { StarFillIcon } from '../../../assets/StarFillIcon'
 import { CellTooltip } from './CellTooltip'
@@ -22,17 +21,8 @@ export const MatrixCell = ({
   levelColors,
   tooltipLabel,
 }: MatrixCellProps) => {
-  if (isEmpty) {
-    return (
-      <View style={styles.wrapper}>
-        <View style={[styles.cell, styles.emptyCell]}>
-          <Text style={styles.emptyCellText}>−</Text>
-        </View>
-      </View>
-    )
-  }
   const [isActive, setIsActive] = useState(false)
-  const masteryLevel = box ? getMasteryLevelByBox(box) : null
+  const masteryLevel = box || null
   const isMastered = masteryLevel === FluencyMasteryLevel.MASTERED
 
   const bgColor = (() => {
@@ -46,6 +36,16 @@ export const MatrixCell = ({
   const activate = () => setIsActive(true)
   const deactivate = () => setIsActive(false)
 
+  if (isEmpty) {
+    return (
+      <View style={styles.wrapper}>
+        <View style={[styles.cell, styles.emptyCell]}>
+          <Text style={styles.emptyCellText}>−</Text>
+        </View>
+      </View>
+    )
+  }
+
   return (
     <View style={[styles.wrapper, showTooltip && styles.wrapperActive]}>
       {showTooltip && (

package/src/features/fluency/components/session-results/FluencySessionResults.tsx

@@ -14,7 +14,7 @@ import {
   TimerIcon,
 } from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
-import { CloseIcon } from '@magmamath/students-features'
+import { CloseIcon } from '@magmamath/students-features' // TODO:
 import { useText } from '../../../../i18n/i18n'
 import { useFluency } from '../../context/FluencyContext'
 import { AttemptStatus } from '../../fluency.constants'
@@ -114,6 +114,7 @@ export const FluencySessionResults = ({
               variant={ButtonVariant.PRIMARY}
               size={ButtonSize.LARGE}
               colorScheme={ButtonColor.YELLOW}
+              style={{ text: styles.buttonText }}
               raiseLevel={6}
             >
               {t('student.fluency.claimProgress')}
@@ -187,4 +188,7 @@ const styles = StyleSheet.create({
   claimProgressButtonContainer: {
     alignItems: 'center',
   },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
 })

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

@@ -2,7 +2,6 @@ import { ButtonColor, COLORS, SelectOptionColor } from '@magmamath/react-native-
 import { createFluencyMode } from './fluency.helpers'
 import type { FluencyColorPalette, FluencyModeConfig, FluencyModePreset } from './fluency.types'
 
-export const FALLBACK_MATRIX_SIZE = 21
 export const MAX_INPUT_LENGTH = 3
 export const SESSION_LENGTH = 20
 export const TIME_THRESHOLD_MS = 4000
@@ -16,10 +15,11 @@ export enum FluencyMode {
 }
 
 export enum FluencyMasteryLevel {
-  LEARNING = 'learning',
-  GROWING = 'growing',
-  STRONG = 'strong',
-  MASTERED = 'mastered',
+  NOT_STARTED = 0,
+  LEARNING = 1,
+  GROWING = 2,
+  STRONG = 3,
+  MASTERED = 4,
 }
 
 export enum FluencyColorFamily {

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

@@ -1,3 +1,4 @@
+import { COLORS } from '@magmamath/react-native-ui'
 import {
   FluencyColorFamily,
   FluencyMasteryLevel,
@@ -7,14 +8,6 @@ import {
 import type { FluencyModeConfig, GetMatrixResponse, GridCell, MatrixGrid } from './fluency.types'
 import type { TranslationKey } from '../../i18n/i18n'
 
-export const getMasteryLevelByBox = (box: number): FluencyMasteryLevel | null => {
-  if (box === 5) return FluencyMasteryLevel.MASTERED
-  if (box === 4) return FluencyMasteryLevel.STRONG
-  if (box === 3) return FluencyMasteryLevel.GROWING
-  if (box === 2) return FluencyMasteryLevel.LEARNING
-  return null
-}
-
 type CreateFluencyModeParams = {
   mode: FluencyMode
   label: TranslationKey
@@ -45,7 +38,13 @@ export const createFluencyMode = ({
       },
       matrix: {
         operatorLabel: label,
-        levelColors: { learning, growing, strong, mastered },
+        levelColors: {
+          [FluencyMasteryLevel.NOT_STARTED]: COLORS.NEUTRAL_2,
+          [FluencyMasteryLevel.LEARNING]: learning,
+          [FluencyMasteryLevel.GROWING]: growing,
+          [FluencyMasteryLevel.STRONG]: strong,
+          [FluencyMasteryLevel.MASTERED]: mastered,
+        },
       },
     },
   }

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

@@ -85,7 +85,7 @@ type FactPosition = {
 export type Fact = {
   attemptsCount: number
   averageTimeMs: number | null
-  box: number | null
+  box: FluencyMasteryLevel | null
   correctCount: number
   difficulty: number
   lastAttemptedAt: string | null
@@ -119,7 +119,7 @@ export type GridCell = {
   isHeader: boolean
   isEmpty: boolean
   label: number | null
-  box: number | null
+  box: FluencyMasteryLevel | null
   numbers: readonly [number, number] | null  // null for header cells
 }
 

package/src/features/fluency/model/FluencySolvingModel.ts

@@ -15,10 +15,9 @@ import type {
   QuestionOutcome,
   SolvingFact,
 } from '../components/fluency-solving/fluencySolving.types'
-import type { FluencyAttemptItem } from '../fluency.types'
+import type { FluencyAttemptItem, GetMatrixResponse } from '../fluency.types'
 import type { FluencyMatrixModel } from './FluencyMatrixModel'
 import { createAction } from 'effector-action'
-import { GetMatrixResponse } from '@magmamath/students-features'
 
 export class FluencySolvingModel {
   public readonly reset = createEvent()

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,38 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  InfoIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+export const FluencyTeacherFooter = () => (
+  <View style={styles.footer}>
+    <View style={styles.hint}>
+      <InfoIcon size={13} color={COLORS.NEUTRAL_7} />
+      <Typography variant={HeadingVariants.H10} style={styles.text}>
+        Click a student row to see their full fluency breakdown.
+      </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,87 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import {
+  Button,
+  ButtonColor,
+  COLORS,
+  CrossIcon,
+  FONT_FAMILY,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+import type { StudentResult } from '../../fluencyTeacher.types'
+
+type DrawerHeaderProps = {
+  student: StudentResult
+  onClose: () => void
+}
+
+export const DrawerHeader = ({ student, onClose }: DrawerHeaderProps) => (
+  <View style={styles.container}>
+    <View style={styles.left}>
+      <Typography variant={HeadingVariants.H9} style={styles.label}>
+        Student Fluency
+      </Typography>
+      <Text style={styles.name}>{student.name}</Text>
+    </View>
+    <View style={styles.right}>
+      <Text style={styles.masteryLabel}>Overall mastery</Text>
+      <Text style={styles.masteryValue}>{student.averagePercent}%</Text>
+    </View>
+    <Button
+      variant="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,53 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+
+const MASTERY_LEVELS = [
+  { label: 'Not started', color: COLORS.NEUTRAL_3 },
+  { label: 'Learning', color: COLORS.GREEN_2 },
+  { label: 'Growing', color: COLORS.GREEN_3 },
+  { label: 'Strong', color: COLORS.GREEN_4 },
+  { label: 'Mastered', color: COLORS.GREEN_7 },
+]
+
+export const DrawerMasteryLegend = () => (
+  <View style={styles.container}>
+    {MASTERY_LEVELS.map((item) => (
+      <View key={item.label} style={styles.item}>
+        <View style={[styles.swatch, { backgroundColor: item.color }]} />
+        <Text style={styles.label}>{item.label}</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,48 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { DrawerOperatorBox } from './DrawerOperatorBox'
+import { FluencyMathOperatorSymbol, FluencyOperator } from '../../fluencyTeacher.types'
+
+export const DrawerMatrixes = () => (
+  <View style={styles.grid}>
+    <DrawerOperatorBox
+      title="Addition"
+      symbol={FluencyMathOperatorSymbol.ADDITION}
+      iconBg={COLORS.GREEN_1}
+      iconColor={COLORS.GREEN_7}
+      operator={FluencyOperator.ADDITION}
+    />
+    <DrawerOperatorBox
+      title="Subtraction"
+      symbol={FluencyMathOperatorSymbol.SUBTRACTION}
+      iconBg={COLORS.ORANGE_1}
+      iconColor={COLORS.ORANGE_7}
+      operator={FluencyOperator.SUBTRACTION}
+    />
+    <DrawerOperatorBox
+      title="Multiplication"
+      symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
+      iconBg={COLORS.BLUE_1}
+      iconColor={COLORS.BLUE_7}
+      operator={FluencyOperator.MULTIPLICATION}
+    />
+    <DrawerOperatorBox
+      title="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,99 @@
+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 { useDrawerMatrix } from '../../hooks/useDrawerMatrix'
+import { DrawerMatrix } from '../matrix/DrawerMatrix'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import type { FluencyOperator } from '../../fluencyTeacher.types'
+
+type DrawerOperatorBoxProps = {
+  title: string
+  symbol: string
+  iconBg: string
+  iconColor: string
+  operator: FluencyOperator
+}
+
+export const DrawerOperatorBox = ({ title, symbol, iconBg, iconColor, operator }: DrawerOperatorBoxProps) => {
+  const { model } = useTeacherFluency()
+  const isLoading = useUnit(model.api.getStudentDetailsFx.pending)
+  const matrixProps = useDrawerMatrix(operator)
+  const factsLabel = matrixProps.grid
+    ? `${matrixProps.grid.colLabels.length}×${matrixProps.grid.rows.length} facts`
+    : ''
+
+  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,47 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { DrawerOperatorStatCard } from './DrawerOperatorStatCard'
+import type { StudentOperatorScores } from '../../fluencyTeacher.types'
+import { FluencyMathOperatorSymbol } from '../../fluencyTeacher.types'
+
+type DrawerStatsProps = {
+  scores: StudentOperatorScores
+}
+
+export const DrawerStats = ({ scores }: DrawerStatsProps) => (
+  <View style={styles.container}>
+    <DrawerOperatorStatCard
+      title="Addition"
+      symbol={FluencyMathOperatorSymbol.ADDITION}
+      color={COLORS.PRIMARY_GREEN}
+      value={scores.addition}
+    />
+    <DrawerOperatorStatCard
+      title="Subtraction"
+      symbol={FluencyMathOperatorSymbol.SUBTRACTION}
+      color={COLORS.PRIMARY_ORANGE}
+      value={scores.subtraction}
+    />
+    <DrawerOperatorStatCard
+      title="Multiplication"
+      symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
+      color={COLORS.PRIMARY_BLUE}
+      value={scores.multiplication}
+    />
+    <DrawerOperatorStatCard
+      title="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],
+  },
+})