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

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

@@ -0,0 +1,96 @@
+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 { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { FluencyOperator } from '../../fluencyTeacher.types'
+import { toAverageLabel } from '../../fluencyTeacher.helpers'
+import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
+import { TableRowAverageProgress } from './TableRowAverageProgress'
+import { OperatorBadge } from './OperatorBadge'
+
+export const AllPupilsTableRow = () => {
+  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}>
+          All pupils
+        </Typography>
+      </View>
+
+      <View style={styles.average}>
+        <TableRowAverageProgress
+          percent={stats.classAverage}
+          label={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 as FluencyOperator]}
+              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',
+  },
+})

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import {
+  CaretDownIcon,
+  CaretUpIcon,
+  COLORS,
+  FONT_FAMILY,
+  SHADOWS,
+  SPACING,
+  StudentsIcon,
+} from '@magmamath/react-native-ui'
+import { SortDefaultIcon } from '../../assets/SortDefaultIcon'
+import type { SortState } from '../../fluencyTeacher.types'
+
+export type AverageSortButtonProps = {
+  sort: SortState
+  onPress: () => void
+}
+
+export const AverageSortButton = ({ sort, onPress }: AverageSortButtonProps) => {
+  const isActive = sort.column === 'average'
+  const color = isActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_7
+
+  const ActiveSortIcon = (() => {
+    return sort.direction === 'desc' ? (
+      <CaretUpIcon size={12} color={color} />
+    ) : (
+      <CaretDownIcon size={12} color={color} />
+    )
+  })()
+
+  return (
+    <Pressable onPress={onPress} style={[styles.button, isActive && styles.buttonActive]}>
+      <View style={styles.iconWrapper}>
+        <StudentsIcon size={16} color={color} />
+      </View>
+      <Text selectable={false} style={[styles.label, { color }]}>
+        Average
+      </Text>
+      {isActive ? ActiveSortIcon : <SortDefaultIcon size={10} color={color} />}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[100],
+    paddingLeft: 6,
+    paddingRight: SPACING[200],
+    paddingVertical: SPACING[100],
+    borderRadius: 6,
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_3,
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[2],
+  },
+  buttonActive: {
+    backgroundColor: COLORS.PRIMARY_YELLOW,
+    borderColor: COLORS.PRIMARY_YELLOW,
+  },
+  iconWrapper: {
+    marginHorizontal: SPACING[100],
+  },
+  label: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontSize: 12,
+    letterSpacing: 0.24,
+    textTransform: 'uppercase',
+  },
+})

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import { Search, SPACING } from '@magmamath/react-native-ui'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+
+export const FluencyTeacherFilters = () => {
+  const { model } = useTeacherFluency()
+  const searchValue = useUnit(model.filters.$search)
+
+  return (
+    <View style={styles.container}>
+      <Search placeholder="Search" onChangeText={model.filters.setSearch} value={searchValue} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: SPACING[400],
+    width: 250,
+  },
+})

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

@@ -0,0 +1,134 @@
+import React from 'react'
+import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native'
+import { useStoreMap, useUnit } from 'effector-react'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { TableRow } from './TableRow'
+import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
+import { TableColumnSortButton } from './TableColumnSortButton'
+import { AllPupilsTableRow } from './AllPupilsTableRow'
+import { AverageSortButton } from './AverageSortButton'
+
+export const FluencyTeacherStudentsTable = () => {
+  const { model } = useTeacherFluency()
+  const { sort, search, isLoading } = useUnit({
+    sort: model.filters.$sort,
+    search: model.filters.$search,
+    isLoading: model.api.getClassSummaryFx.pending,
+  })
+
+  const sortedStudents = useStoreMap({
+    store: model.table.$table,
+    keys: [search, sort] as const,
+    fn: (students, [searchTerm, sortState]) => {
+      const filtered = searchTerm
+        ? students.filter((s) => s.name.toLowerCase().includes(searchTerm.toLowerCase()))
+        : students
+      return [...filtered].sort((a, b) => {
+        const aVal = sortState.column === 'average' ? a.averagePercent : a.scores[sortState.column]
+        const bVal = sortState.column === 'average' ? b.averagePercent : b.scores[sortState.column]
+        return sortState.direction === 'desc' ? bVal - aVal : aVal - bVal
+      })
+    },
+  })
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.row, styles.headerRow]}>
+        <View style={styles.nameCell} />
+
+        <View style={styles.average}>
+          <AverageSortButton sort={sort} onPress={() => model.filters.toggleSort('average')} />
+        </View>
+
+        <View style={styles.operators}>
+          {TABLE_OPERATOR_COLUMNS.map(({ operator, label, symbol, badgeBg, badgeText }) => (
+            <View key={operator} style={styles.operator}>
+              <TableColumnSortButton
+                symbol={symbol}
+                label={label}
+                isActive={sort.column === operator}
+                direction={sort.direction}
+                activeBg={badgeBg}
+                activeText={badgeText}
+                onPress={() => model.filters.toggleSort(operator)}
+              />
+            </View>
+          ))}
+        </View>
+      </View>
+
+      {isLoading ? (
+        <View style={styles.loader}>
+          <ActivityIndicator size="large" color={COLORS.PRIMARY_BLUE} />
+        </View>
+      ) : (
+        <>
+          <AllPupilsTableRow />
+          <FlatList
+            data={sortedStudents}
+            keyExtractor={(student) => student.id}
+            renderItem={({ item: student }) => (
+              <TableRow
+                name={student.name}
+                onPress={() => model.table.setStudentInfoDrawer(student)}
+                averagePercent={student.averagePercent}
+                averageLabel={student.averageLabel}
+                scores={student.scores}
+              />
+            )}
+          />
+        </>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderRadius: BORDER_RADIUS[300],
+    overflow: 'hidden',
+    ...SHADOWS[1],
+  },
+  loader: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[200],
+    gap: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.NEUTRAL_4,
+  },
+  headerRow: {
+    paddingVertical: SPACING[100],
+    backgroundColor: COLORS.NEUTRAL_2,
+  },
+  nameCell: {
+    width: 137,
+    height: 40,
+  },
+  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',
+  },
+})

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+
+export type OperatorBadgeProps = {
+  value: number
+  bgColor: string
+  textColor: string
+}
+
+export const OperatorBadge = ({ value, bgColor, textColor }: OperatorBadgeProps) => (
+  <View style={[styles.badge, { backgroundColor: bgColor }]}>
+    <Typography variant={HeadingVariants.H9} style={[styles.badgeText, { color: textColor }]}>
+      {value}%
+    </Typography>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  badge: {
+    width: 90,
+    paddingVertical: SPACING[200],
+    borderRadius: BORDER_RADIUS[200],
+    alignItems: 'center',
+  },
+  badgeText: {
+    textAlign: 'center',
+  },
+})

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Pressable, StyleSheet, Text } from 'react-native'
+import {
+  CaretDownIcon,
+  CaretUpIcon,
+  COLORS,
+  FONT_FAMILY,
+  SHADOWS,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { SortDefaultIcon } from '../../assets/SortDefaultIcon'
+import type { SortDirection } from '../../fluencyTeacher.types'
+
+export type TableColumnSortButtonProps = {
+  symbol: string
+  label: string
+  isActive: boolean
+  direction: SortDirection
+  activeBg: string
+  activeText: string
+  onPress: () => void
+}
+
+export const TableColumnSortButton = ({
+  symbol,
+  label,
+  isActive,
+  direction,
+  activeBg,
+  activeText,
+  onPress,
+}: TableColumnSortButtonProps) => {
+  const contentColor = isActive ? activeText : COLORS.NEUTRAL_7
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.sortButton, isActive && { backgroundColor: activeBg, borderColor: activeBg }]}
+    >
+      <Text selectable={false} style={[styles.sortButtonSymbol, { color: contentColor }]}>
+        {symbol}
+      </Text>
+      <Text selectable={false} style={[styles.sortButtonLabel, { color: contentColor }]}>
+        {label}
+      </Text>
+      {isActive ? (
+        direction === 'desc' ? (
+          <CaretDownIcon size={12} color={contentColor} />
+        ) : (
+          <CaretUpIcon size={12} color={contentColor} />
+        )
+      ) : (
+        <SortDefaultIcon size={10} color={contentColor} />
+      )}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  sortButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[100],
+    paddingLeft: 6,
+    paddingRight: SPACING[200],
+    paddingVertical: SPACING[100],
+    borderRadius: 6,
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_3,
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[2],
+  },
+  sortButtonSymbol: {
+    width: 12,
+    height: 12,
+    lineHeight: 10,
+    marginHorizontal: SPACING[100],
+    textAlign: 'center',
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontSize: 24,
+  },
+  sortButtonLabel: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontSize: 12,
+    letterSpacing: 0.24,
+    textTransform: 'uppercase',
+  },
+})

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

@@ -0,0 +1,114 @@
+import React, { useRef } from 'react'
+import { Animated, Pressable, StyleSheet, View } from 'react-native'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
+import { OperatorBadge } from './OperatorBadge'
+import { TableRowAverageProgress } from './TableRowAverageProgress'
+import type { StudentOperatorScores } from '../../fluencyTeacher.types'
+
+export type TableRowProps = {
+  name: string
+  scores: StudentOperatorScores
+  averagePercent?: number
+  averageLabel?: string
+  onPress?: () => void
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+export const TableRow = ({
+  name,
+  scores,
+  averagePercent = 0,
+  averageLabel = '',
+  onPress,
+}: TableRowProps) => {
+  const hoverProgress = useRef(new Animated.Value(0)).current
+
+  const fadeIn = () => {
+    Animated.timing(hoverProgress, { toValue: 1, duration: 150, useNativeDriver: false }).start()
+  }
+
+  const fadeOut = () => {
+    Animated.timing(hoverProgress, { toValue: 0, duration: 150, useNativeDriver: false }).start()
+  }
+
+  const backgroundColor = hoverProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [COLORS.NEUTRAL_1, COLORS.NEUTRAL_2],
+  })
+
+  return (
+    <AnimatedPressable
+      onHoverIn={fadeIn}
+      onHoverOut={fadeOut}
+      onPress={onPress}
+      style={[styles.row, { backgroundColor }]}
+    >
+      <View style={styles.name}>
+        <Typography variant={HeadingVariants.H7} style={styles.nameText} numberOfLines={1}>
+          {name}
+        </Typography>
+      </View>
+
+      <View style={styles.average}>
+        <TableRowAverageProgress percent={averagePercent} label={averageLabel} />
+      </View>
+
+      <View style={styles.operators}>
+        {TABLE_OPERATOR_COLUMNS.map(({ operator, badgeBg, badgeText }) => (
+          <View key={operator} style={styles.operator}>
+            <OperatorBadge value={scores[operator]} bgColor={badgeBg} textColor={badgeText} />
+          </View>
+        ))}
+      </View>
+    </AnimatedPressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[200],
+    gap: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    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',
+  },
+})

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import {
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+export type TableRowAverageProgressProps = {
+  percent: number
+  label: string
+}
+
+export const TableRowAverageProgress = ({ percent, label }: TableRowAverageProgressProps) => (
+  <View style={styles.progressTrack}>
+    <View style={[styles.progressFill, { width: `${percent}%` }]} />
+    <View style={styles.progressOverlay}>
+      <Typography variant={HeadingVariants.H9} style={styles.progressPercent}>
+        {percent}%
+      </Typography>
+      <Text style={styles.progressLabel} numberOfLines={1}>
+        {label}
+      </Text>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  progressTrack: {
+    height: 16,
+    borderRadius: 36,
+    backgroundColor: COLORS.NEUTRAL_3,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: 36,
+    backgroundColor: COLORS.YELLOW_4,
+  },
+  progressOverlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: SPACING[200],
+  },
+  progressPercent: {
+    color: COLORS.NEUTRAL_9,
+  },
+  progressLabel: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontSize: 10,
+    color: COLORS.NEUTRAL_9,
+    textTransform: 'uppercase',
+  },
+})

package/src/features/fluency-teacher/context/TeacherFluencyContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react'
+import type { TeacherFluencyModel } from '../model/TeacherFluencyModel'
+
+type TeacherFluencyContextValue = {
+  model: TeacherFluencyModel
+}
+
+const TeacherFluencyContext = createContext<TeacherFluencyContextValue | null>(null)
+
+export const useTeacherFluency = (): TeacherFluencyContextValue => {
+  const value = useContext(TeacherFluencyContext)
+  if (!value) throw new Error('useTeacherFluency must be used within TeacherFluencyProvider')
+  return value
+}
+
+export const TeacherFluencyProvider = TeacherFluencyContext.Provider

package/src/features/fluency-teacher/fluencyTeacher.constants.ts

@@ -0,0 +1,62 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import { FluencyMathOperatorSymbol, FluencyOperator, type OperatorColumnConfig } from './fluencyTeacher.types'
+
+export const TEACHER_FLUENCY_GOAL_MINUTES = 25
+
+export const MATRIX_CELL_COLORS: Record<FluencyOperator, Record<number, string>> = {
+  [FluencyOperator.ADDITION]: {
+    1: COLORS.GREEN_2,
+    2: COLORS.GREEN_3,
+    3: COLORS.PRIMARY_GREEN,
+    4: COLORS.GREEN_6,
+  },
+  [FluencyOperator.SUBTRACTION]: {
+    1: COLORS.ORANGE_2,
+    2: COLORS.ORANGE_3,
+    3: COLORS.PRIMARY_ORANGE,
+    4: COLORS.ORANGE_6,
+  },
+  [FluencyOperator.MULTIPLICATION]: {
+    1: COLORS.BLUE_2,
+    2: COLORS.BLUE_3,
+    3: COLORS.PRIMARY_BLUE,
+    4: COLORS.BLUE_6,
+  },
+  [FluencyOperator.DIVISION]: {
+    1: COLORS.PURPLE_2,
+    2: COLORS.PURPLE_3,
+    3: COLORS.PRIMARY_PURPLE,
+    4: COLORS.PURPLE_6,
+  },
+}
+
+export const TABLE_OPERATOR_COLUMNS: readonly OperatorColumnConfig[] = [
+  {
+    operator: FluencyOperator.ADDITION,
+    label: 'Addition',
+    symbol: FluencyMathOperatorSymbol.ADDITION,
+    badgeBg: COLORS.GREEN_3,
+    badgeText: COLORS.GREEN_8,
+  },
+  {
+    operator: FluencyOperator.SUBTRACTION,
+    label: 'Subtraction',
+    symbol: FluencyMathOperatorSymbol.SUBTRACTION,
+    badgeBg: COLORS.ORANGE_3,
+    badgeText: COLORS.ORANGE_8,
+  },
+  {
+    operator: FluencyOperator.DIVISION,
+    label: 'Division',
+    symbol: FluencyMathOperatorSymbol.DIVISION,
+    badgeBg: COLORS.BLUE_3,
+    badgeText: COLORS.BLUE_8,
+  },
+  {
+    operator: FluencyOperator.MULTIPLICATION,
+    label: 'Multiplication',
+    symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
+    badgeBg: COLORS.PURPLE_2,
+    badgeText: COLORS.PURPLE_8,
+  },
+]