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

package/dist/typescript/module/features/pmProgress/components/locked/PmStatusOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PmStatusOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/pmProgress/components/locked/PmStatusOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAyBpE,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,gBAAgB,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,eAAe,eAAgB,oBAAoB,6BAuB/D,CAAA"}
+{"version":3,"file":"PmStatusOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/pmProgress/components/locked/PmStatusOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAUxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAyBpE,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,gBAAgB,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,eAAe,eAAgB,oBAAoB,6BAuB/D,CAAA"}

package/dist/typescript/module/features/pmProgress/components/standard/StandardTag.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { PmProgressModel } from '@magmamath/students-features';
+import { PmProgressModel } from '../../model/PmProgressModel';
 type StandardTagProps = {
     model: PmProgressModel;
     skillId: string;

package/dist/typescript/module/features/pmProgress/components/standard/StandardTag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandardTag.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/pmProgress/components/standard/StandardTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAiH9D,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,eAAe,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,WAAW,8BAA+B,gBAAgB,6BAqCtE,CAAA"}
+{"version":3,"file":"StandardTag.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/pmProgress/components/standard/StandardTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAiH7D,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,eAAe,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,WAAW,8BAA+B,gBAAgB,6BAqCtE,CAAA"}

package/dist/typescript/module/features/pmProgress/context/PmProgressContext.d.ts

@@ -1,5 +1,5 @@
 import { PmProgressModel } from '../model/PmProgressModel';
-import { Skill, GradeLabelsMap } from '@magmamath/students-features';
+import { Skill, GradeLabelsMap } from '../shared/pmProgress.types';
 export type PmProgressContextValue = {
     model: PmProgressModel;
     customGradeLabels?: GradeLabelsMap;

package/dist/typescript/module/features/pmProgress/context/PmProgressContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PmProgressContext.d.ts","sourceRoot":"","sources":["../../../../../../src/features/pmProgress/context/PmProgressContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAEpE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAA;IACtB,iBAAiB,CAAC,EAAE,cAAc,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,4BAA4B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAID,wBAAgB,aAAa,IAAI,sBAAsB,CAMtD;AAED,eAAO,MAAM,kBAAkB,yDAA6B,CAAA"}
+{"version":3,"file":"PmProgressContext.d.ts","sourceRoot":"","sources":["../../../../../../src/features/pmProgress/context/PmProgressContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAElE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAA;IACtB,iBAAiB,CAAC,EAAE,cAAc,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,4BAA4B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAID,wBAAgB,aAAa,IAAI,sBAAsB,CAMtD;AAED,eAAO,MAAM,kBAAkB,yDAA6B,CAAA"}

package/dist/typescript/module/index.d.ts

@@ -15,4 +15,5 @@ export * from './features/voice';
 export * from './features/featureUsage';
 export * from './features/uiMode';
 export * from './features/fluency';
+export * from './features/fluency-teacher';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.26-rc.12",
+  "version": "1.3.26-rc.13",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

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'

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

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