@magmamath/students-features 1.5.0 → 1.5.1

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

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

@@ -0,0 +1,76 @@
+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 { useText } from '../../../../i18n/i18n'
+import { SortDefaultIcon } from '../../assets/SortDefaultIcon'
+import type { SortState } from '../../fluencyTeacher.types'
+import { SortingDirection } from '../../../../shared/common.constants'
+import { FluencyTableColumn } from '../../fluencyTeacher.constants'
+
+export type AverageSortButtonProps = {
+  sort: SortState
+  onPress: () => void
+}
+
+export const AverageSortButton = ({ sort, onPress }: AverageSortButtonProps) => {
+  const t = useText()
+  const isActive = sort.column === FluencyTableColumn.AVERAGE
+  const color = isActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_7
+
+  const ActiveSortIcon = (() => {
+    return sort.direction === SortingDirection.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 }]}>
+        {t('teacher.fluency.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,29 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import { Search, SPACING } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+
+export const FluencyTeacherFilters = () => {
+  const t = useText()
+  const { model } = useTeacherFluency()
+  const searchValue = useUnit(model.filters.$search)
+
+  return (
+    <View style={styles.container}>
+      <Search
+        placeholder={t('teacher.fluency.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,159 @@
+import React from 'react'
+import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { TableRow } from './TableRow'
+import { FluencyTableColumn, TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
+import { TableColumnSortButton } from './TableColumnSortButton'
+import { AllPupilsTableRow } from './AllPupilsTableRow'
+import { AverageSortButton } from './AverageSortButton'
+
+export const FluencyTeacherStudentsTable = () => {
+  const t = useText()
+  const { model } = useTeacherFluency()
+  const { sort, isLoading, table, filteredTable } = useUnit({
+    sort: model.filters.$sort,
+    table: model.table.$table,
+    filteredTable: model.table.$filteredTable,
+    isLoading: model.api.getClassSummaryFx.pending,
+  })
+
+  const hasStudents = table.length > 0
+
+  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(FluencyTableColumn.AVERAGE)}
+          />
+        </View>
+
+        <View style={styles.operators}>
+          {TABLE_OPERATOR_COLUMNS.map(({ operator, labelKey, symbol, badgeBg, badgeText }) => (
+            <View key={operator} style={styles.operator}>
+              <TableColumnSortButton
+                symbol={symbol}
+                label={t(labelKey)}
+                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={filteredTable}
+            keyExtractor={(student) => student.id}
+            renderItem={({ item: student }) => (
+              <TableRow
+                name={student.name}
+                onPress={() => model.table.setStudentInfoDrawer(student)}
+                averagePercent={student.averagePercent}
+                averageLabel={t(student.averageLabel)}
+                scores={student.scores}
+              />
+            )}
+            contentContainerStyle={filteredTable.length === 0 ? styles.emptyContainer : undefined}
+            ListEmptyComponent={
+              <View style={styles.emptyState}>
+                <Typography variant={HeadingVariants.H9} style={styles.emptyText}>
+                  {hasStudents
+                    ? t('teacher.fluency.noStudentsFound')
+                    : t('teacher.fluency.noStudents')}
+                </Typography>
+              </View>
+            }
+          />
+        </>
+      )}
+    </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',
+  },
+  emptyContainer: {
+    flexGrow: 1,
+  },
+  emptyState: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '400',
+    fontSize: 32,
+    color: COLORS.NEUTRAL_9,
+  },
+})

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 { SortingDirection } from '../../../../shared/common.constants'
+
+export type TableColumnSortButtonProps = {
+  symbol: string
+  label: string
+  isActive: boolean
+  direction: SortingDirection
+  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 === SortingDirection.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',
+  },
+})