@magmamath/students-features 1.4.1 → 1.4.2

package/src/features/fluency-teacher/components/header/AverageTimePerStudent.tsx

@@ -0,0 +1,122 @@
+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 { useText } from '../../../../i18n/i18n'
+import { TEACHER_FLUENCY_GOAL_MINUTES } from '../../fluencyTeacher.constants'
+
+export const AverageTimePerStudent = () => {
+  const t = useText()
+  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}>
+            {t('teacher.fluency.avgTimeTitle')}
+          </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}>
+              {t('teacher.fluency.minGoal', { goal: TEACHER_FLUENCY_GOAL_MINUTES })}
+            </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,33 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+// import { AverageTimePerStudent } from './AverageTimePerStudent'
+// import { TopHardestFacts } from './TopHardestFacts'
+
+export const FluencyTeacherHeader = () => {
+  const t = useText()
+  return (
+    <View style={styles.container} testID="teacher-fluency-header">
+      <Typography variant={HeadingVariants.H2} style={styles.title}>
+        {t('teacher.fluency.factFluency')}
+      </Typography>
+
+      {/* TODO: it is ready code but commented out on purpose */}
+      {/*<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.constants'
+
+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,100 @@
+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 { useText } from '../../../../i18n/i18n'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { HardestFact } from './HardestFact'
+
+export const TopHardestFacts = () => {
+  const t = useText()
+  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}>
+            {t('teacher.fluency.hardestFactsTitle')}
+          </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}>
+              {t('teacher.fluency.hardestFactsEmpty')}
+            </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,69 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import type { LayoutChangeEvent } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+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) => {
+  const t = useText()
+  return (
+    <View style={styles.container} onLayout={onLayout}>
+      {!grid ? (
+        <Text style={styles.emptyText}>{t('teacher.fluency.noFactsPracticed')}</Text>
+      ) : (
+        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,
+  },
+  emptyText: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontSize: 13,
+    color: COLORS.NEUTRAL_6,
+    textAlign: 'center',
+  },
+})

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

package/src/features/fluency-teacher/components/table/AllPupilsTableRow.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  HeadingVariants,
+  SPACING,
+  StudentsIcon,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { useText } from '../../../../i18n/i18n'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { toAverageLabel } from '../../fluencyTeacher.helpers'
+import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
+import { TableRowAverageProgress } from './TableRowAverageProgress'
+import { OperatorBadge } from './OperatorBadge'
+
+export const AllPupilsTableRow = () => {
+  const t = useText()
+  const { model } = useTeacherFluency()
+  const stats = useUnit(model.table.$stats)
+
+  if (!stats) return null
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.name}>
+        <View style={styles.icon}>
+          <StudentsIcon size={25} color={COLORS.NEUTRAL_7} />
+        </View>
+        <Typography variant={HeadingVariants.H7} style={styles.nameText} numberOfLines={1}>
+          {t('teacher.fluency.allPupils')}
+        </Typography>
+      </View>
+
+      <View style={styles.average}>
+        <TableRowAverageProgress
+          percent={stats.classAverage}
+          label={t(toAverageLabel(stats.classAverage / 100))}
+        />
+      </View>
+
+      <View style={styles.operators}>
+        {TABLE_OPERATOR_COLUMNS.map(({ operator, badgeBg, badgeText }) => (
+          <View key={operator} style={styles.operator}>
+            <OperatorBadge
+              value={stats.operatorAverages[operator]}
+              bgColor={badgeBg}
+              textColor={badgeText}
+            />
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[200],
+    gap: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.NEUTRAL_4,
+  },
+  name: {
+    width: 137,
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  icon: {
+    width: 25,
+    height: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  nameText: {
+    width: 100,
+    color: COLORS.NEUTRAL_9,
+  },
+  average: {
+    width: 145,
+    height: 40,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+  },
+  operators: {
+    flex: 1,
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SPACING[800],
+  },
+  operator: {
+    flex: 1,
+    alignItems: 'center',
+  },
+})