@magmamath/students-features 1.3.26-rc.2 → 1.3.26-rc.20

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

@@ -0,0 +1,81 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import type { TranslationKey } from '../../i18n/i18n'
+import type {
+  ClassFluencySummaryResponse,
+  ClassFluencyStats,
+  ClassOperatorAverages,
+  FluencyStudent,
+  StudentResult,
+} from './fluencyTeacher.types'
+
+export const getCellColor = (box: number | null, colorMap: Record<number, string>): string =>
+  box ? (colorMap[box] ?? COLORS.NEUTRAL_2) : COLORS.NEUTRAL_2
+
+export const toAverageLabel = (overallPercent: number): TranslationKey => {
+  if (overallPercent >= 0.9) return 'teacher.fluency.progressFluent'
+  if (overallPercent >= 0.65) return 'teacher.fluency.progressProficient'
+  if (overallPercent >= 0.35) return 'teacher.fluency.progressDeveloping'
+  if (overallPercent >= 0.05) return 'teacher.fluency.progressLearning'
+  return 'teacher.fluency.progressNotStarted'
+}
+
+const toPercent = (decimal: number): number => Math.round(decimal * 100)
+
+type BuildStudentsFluencyTableProps = {
+  students: FluencyStudent[]
+  response: ClassFluencySummaryResponse
+}
+
+const buildOperatorAverages = (response: ClassFluencySummaryResponse): ClassOperatorAverages => {
+  const count = response.students.length
+  if (count === 0) return { addition: 0, subtraction: 0, multiplication: 0, division: 0 }
+
+  const sums = response.students.reduce(
+    (acc, row) => ({
+      addition: acc.addition + row.byOperator.addition,
+      subtraction: acc.subtraction + row.byOperator.subtraction,
+      multiplication: acc.multiplication + row.byOperator.multiplication,
+      division: acc.division + row.byOperator.division,
+    }),
+    { addition: 0, subtraction: 0, multiplication: 0, division: 0 },
+  )
+
+  return {
+    addition: toPercent(sums.addition / count),
+    subtraction: toPercent(sums.subtraction / count),
+    multiplication: toPercent(sums.multiplication / count),
+    division: toPercent(sums.division / count),
+  }
+}
+
+export const buildClassAverageStats = (
+  response: ClassFluencySummaryResponse,
+): ClassFluencyStats => ({
+  ...response,
+  classAverage: toPercent(response.classAverage),
+  operatorAverages: buildOperatorAverages(response),
+})
+
+export const buildStudentsFluencyTable = ({
+  students,
+  response,
+}: BuildStudentsFluencyTableProps) => {
+  return response.students
+    .map((row) => {
+      const student = students.find(({ id }) => id === row.studentId)
+      if (!student) return null
+      return {
+        id: row.studentId,
+        name: student.name,
+        averagePercent: toPercent(row.overallPercent),
+        averageLabel: toAverageLabel(row.overallPercent),
+        scores: {
+          addition: toPercent(row.byOperator.addition),
+          subtraction: toPercent(row.byOperator.subtraction),
+          multiplication: toPercent(row.byOperator.multiplication),
+          division: toPercent(row.byOperator.division),
+        },
+      }
+    })
+    .filter((item): item is StudentResult => item !== null) as StudentResult[]
+}

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

@@ -0,0 +1,117 @@
+import type { TranslationKey } from '../../i18n/i18n'
+import { FluencyOperator, FluencyOperatorColumn, FluencyTableColumn } from './fluencyTeacher.constants'
+import { SortingDirection } from '../../shared/common.constants'
+
+type FactId = string
+
+type FactPosition = {
+  column: number
+  row: number
+}
+
+type FactState = {
+  box: number
+  lastAttemptedAt: string | null
+  lastSolvedAt: string | null
+  attemptsCount: number
+  correctCount: number
+  averageTimeMs: number | null
+  numbers: [number, number]
+  position: FactPosition
+  streak: number
+}
+
+type ClassFluencyOperationView = {
+  facts: Record<FactId, FactState>
+}
+
+type TeacherFluencyTableRow = {
+  studentId: string
+  overallPercent: number
+  byOperator: {
+    addition: number
+    subtraction: number
+    multiplication: number
+    division: number
+  }
+  lastAttemptedAt: string | null
+  weeklyTimeMs: number
+}
+
+type TeacherFluencyHardestFact = {
+  factId: string
+  operator: FluencyOperator
+  correctRate: number
+  attemptCount: number
+  strugglingStudentIds: string[]
+  numbers: [number, number]
+}
+
+export type FluencyStudent = {
+  id: string
+  name: string
+}
+
+export type ClassFluencySummaryPayload = {
+  studentIds: string[]
+}
+
+export type ClassFluencySummaryResponse = {
+  classAverage: number
+  students: TeacherFluencyTableRow[]
+  hardestFacts: TeacherFluencyHardestFact[]
+}
+
+export type ClassOperatorAverages = Record<FluencyOperatorColumn, number>
+
+export type ClassFluencyStats = ClassFluencySummaryResponse & {
+  operatorAverages: ClassOperatorAverages
+}
+
+export type StudFluencyDetailsResponse = {
+  operations: Record<FluencyOperator, ClassFluencyOperationView>
+}
+
+export type StudFluencyDetailsPayload = {
+  studentId: string
+  grade: number
+}
+
+export type SortState = {
+  column: FluencyTableColumn
+  direction: SortingDirection
+}
+
+export type StudentOperatorScores = Record<FluencyOperatorColumn, number>
+
+export type StudentResult = {
+  id: string
+  name: string
+  averagePercent: number
+  averageLabel: TranslationKey
+  scores: StudentOperatorScores
+}
+
+export type StudentDrawerInfo = StudentResult & {
+  details: StudFluencyDetailsResponse | null
+}
+
+export type OperatorColumnConfig = {
+  operator: FluencyOperatorColumn
+  labelKey: TranslationKey
+  symbol: string
+  badgeBg: string
+  badgeText: string
+}
+
+export type TeacherFluencyGateProps = {
+  students: FluencyStudent[]
+  grade: number
+}
+
+export type TeacherFluencyModelProps = {
+  api: {
+    getClassSummary: (payload: ClassFluencySummaryPayload) => Promise<ClassFluencySummaryResponse>
+    getStudentDetails: (payload: StudFluencyDetailsPayload) => Promise<StudFluencyDetailsResponse>
+  }
+}

package/src/features/fluency-teacher/hooks/useDrawerGrid.ts

@@ -0,0 +1,58 @@
+import { useMemo } from 'react'
+import { useUnit } from 'effector-react'
+import { useTeacherFluency } from '../context/TeacherFluencyContext'
+import { FluencyOperator } from '../fluencyTeacher.constants'
+
+export type DrawerGridCell = { box: number | null; isEmpty: boolean }
+export type DrawerGridRow = { label: number; cells: DrawerGridCell[] }
+export type DrawerGrid = { colLabels: number[]; rows: DrawerGridRow[] }
+
+export const useDrawerGrid = (operator: FluencyOperator): DrawerGrid | null => {
+  const { model } = useTeacherFluency()
+  const drawerInfo = useUnit(model.table.$studentInfoDrawer)
+
+  return useMemo(() => {
+    const factRecord = drawerInfo?.details?.operations[operator]?.facts ?? {}
+    const factList = Object.values(factRecord)
+
+    if (!factList.length) return null
+
+    const isDivision = operator === FluencyOperator.DIVISION
+    const isSubtraction = operator === FluencyOperator.SUBTRACTION
+    const isCommutative =
+      operator === FluencyOperator.ADDITION || operator === FluencyOperator.MULTIPLICATION
+
+    const maxRow = Math.max(...factList.map((f) => f.position.row))
+    const maxCol = Math.max(...factList.map((f) => f.position.column))
+
+    const factAt = (row: number, col: number) =>
+      factList.find((f) => f.position.row === row && f.position.column === col)
+
+    const colLabels = isDivision
+      ? Array.from({ length: maxCol }, (_, i) => i + 1)
+      : Array.from({ length: maxCol + 1 }, (_, i) => i)
+
+    const maxMinuend = isSubtraction ? Math.max(...factList.map((f) => f.numbers[0])) : maxRow
+    const rowNums = Array.from({ length: maxMinuend + 1 }, (_, i) => i)
+
+    const rows = rowNums.map((rowNum) => ({
+      label: rowNum,
+      cells: colLabels.map((colLabel) => {
+        if (isSubtraction && colLabel > rowNum) return { box: null, isEmpty: true }
+
+        const fact = isSubtraction ? factAt(rowNum - colLabel, colLabel) : factAt(rowNum, colLabel)
+        const mirrorFact = isCommutative ? factAt(colLabel, rowNum) : null
+        const primaryBox = fact?.box ?? null
+        const mirrorBox = mirrorFact?.box ?? null
+        const box =
+          primaryBox !== null && mirrorBox !== null
+            ? Math.max(primaryBox, mirrorBox)
+            : (primaryBox ?? mirrorBox)
+
+        return { box, isEmpty: false }
+      }),
+    }))
+
+    return { colLabels, rows }
+  }, [drawerInfo, operator])
+}

package/src/features/fluency-teacher/hooks/useDrawerMatrix.ts

@@ -0,0 +1,44 @@
+import { useMemo, useState } from 'react'
+import type { LayoutChangeEvent } from 'react-native'
+import { FluencyOperator, MATRIX_CELL_COLORS } from '../fluencyTeacher.constants'
+import { useDrawerGrid, type DrawerGrid } from './useDrawerGrid'
+
+const MATRIX_CELL_GAP = 2
+
+type DrawerMatrixLayout = {
+  grid: DrawerGrid | null
+  cellSize: number
+  fontSize: number
+  borderRadius: number
+  cellColorMap: Record<number, string>
+  onLayout: (e: LayoutChangeEvent) => void
+}
+
+export const useDrawerMatrix = (operator: FluencyOperator): DrawerMatrixLayout => {
+  const grid = useDrawerGrid(operator)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState(0)
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width)
+    setContainerHeight(e.nativeEvent.layout.height)
+  }
+
+  const cellSize = useMemo(() => {
+    if (!grid || !containerWidth || !containerHeight) return 0
+    const totalCols = grid.colLabels.length + 1
+    const totalRows = grid.rows.length + 1
+    const cellW = Math.floor((containerWidth - MATRIX_CELL_GAP * (totalCols - 1)) / totalCols)
+    const cellH = Math.floor((containerHeight - MATRIX_CELL_GAP * (totalRows - 1)) / totalRows)
+    return Math.min(cellW, cellH)
+  }, [grid, containerWidth, containerHeight])
+
+  return {
+    grid,
+    cellSize,
+    fontSize: Math.max(8, Math.floor(cellSize * 0.55)),
+    borderRadius: Math.max(2, Math.floor(cellSize * 0.25)),
+    cellColorMap: MATRIX_CELL_COLORS[operator],
+    onLayout,
+  }
+}

package/src/features/fluency-teacher/index.ts

@@ -0,0 +1,2 @@
+export { TeacherFluencyModel } from './model/TeacherFluencyModel'
+export { FluencyTeacher } from './components/FluencyTeacher'

package/src/features/fluency-teacher/model/TeacherFluencyApiModel.ts

@@ -0,0 +1,18 @@
+import { createEffect, Effect } from 'effector'
+import type {
+  TeacherFluencyModelProps,
+  ClassFluencySummaryPayload,
+  ClassFluencySummaryResponse,
+  StudFluencyDetailsPayload,
+  StudFluencyDetailsResponse,
+} from '../fluencyTeacher.types'
+
+export class TeacherFluencyApiModel {
+  public readonly getClassSummaryFx: Effect<ClassFluencySummaryPayload, ClassFluencySummaryResponse>
+  public readonly getStudentDetailsFx: Effect<StudFluencyDetailsPayload, StudFluencyDetailsResponse>
+
+  constructor(api: TeacherFluencyModelProps['api']) {
+    this.getClassSummaryFx = createEffect(api.getClassSummary)
+    this.getStudentDetailsFx = createEffect(api.getStudentDetails)
+  }
+}

package/src/features/fluency-teacher/model/TeacherFluencyFiltersModel.ts

@@ -0,0 +1,20 @@
+import { createEvent, createStore, restore } from 'effector'
+import type { SortState } from '../fluencyTeacher.types'
+import { SortingDirection } from '../../../shared/common.constants'
+import { FluencyTableColumn } from '../fluencyTeacher.constants'
+
+export class TeacherFluencyFiltersModel {
+  public readonly setSearch = createEvent<string>()
+  public readonly $search = restore(this.setSearch, '')
+
+  public readonly toggleSort = createEvent<FluencyTableColumn>()
+  public readonly $sort = createStore<SortState>({
+    column: FluencyTableColumn.AVERAGE,
+    direction: SortingDirection.DESC,
+  }).on(this.toggleSort, (state, column) => {
+    if (state.column !== column) return { column, direction: SortingDirection.DESC }
+    const direction =
+      state.direction === SortingDirection.DESC ? SortingDirection.ASC : SortingDirection.DESC
+    return { column, direction }
+  })
+}

package/src/features/fluency-teacher/model/TeacherFluencyModel.ts

@@ -0,0 +1,45 @@
+import { sample } from 'effector'
+import { createGate } from 'effector-react'
+import { TeacherFluencyApiModel } from './TeacherFluencyApiModel'
+import { TeacherFluencyFiltersModel } from './TeacherFluencyFiltersModel'
+import { TeacherFluencyTableModel } from './TeacherFluencyTableModel'
+import type { TeacherFluencyGateProps, TeacherFluencyModelProps } from '../fluencyTeacher.types'
+
+export class TeacherFluencyModel {
+  public readonly gate = createGate<TeacherFluencyGateProps>()
+
+  public readonly api: TeacherFluencyApiModel
+  public readonly filters: TeacherFluencyFiltersModel
+  public readonly table: TeacherFluencyTableModel
+
+  constructor({ api }: TeacherFluencyModelProps) {
+    this.api = new TeacherFluencyApiModel(api)
+    this.filters = new TeacherFluencyFiltersModel()
+    this.table = new TeacherFluencyTableModel(this.api, this.filters)
+    this.init()
+  }
+
+  private init() {
+    sample({
+      clock: this.gate.state,
+      filter: (props) => props.students.length === 0,
+      target: this.table.reset,
+    })
+
+    sample({
+      clock: this.gate.state,
+      source: this.table.initFx.pending,
+      filter: (isPending, props) => !isPending && props.students.length > 0,
+      fn: (_, props) => props,
+      target: this.table.initFx,
+    })
+
+    sample({
+      clock: this.table.setStudentInfoDrawer,
+      source: this.gate.state,
+      filter: (_, student) => student !== null,
+      fn: (gateProps, student) => ({ studentId: student!.id, grade: gateProps.grade }),
+      target: this.api.getStudentDetailsFx,
+    })
+  }
+}

package/src/features/fluency-teacher/model/TeacherFluencyTableModel.ts

@@ -0,0 +1,70 @@
+import { createEvent, createStore, createEffect, combine } from 'effector'
+import { spread } from 'patronum'
+import { TeacherFluencyApiModel } from './TeacherFluencyApiModel'
+import { buildClassAverageStats, buildStudentsFluencyTable } from '../fluencyTeacher.helpers'
+import type {
+  ClassFluencyStats,
+  StudentDrawerInfo,
+  StudentResult,
+  TeacherFluencyGateProps,
+} from '../fluencyTeacher.types'
+import { TeacherFluencyFiltersModel } from './TeacherFluencyFiltersModel'
+import { FluencyTableColumn } from '../fluencyTeacher.constants'
+import { SortingDirection } from '../../../shared/common.constants'
+
+export class TeacherFluencyTableModel {
+  public readonly reset = createEvent()
+
+  public readonly $stats = createStore<ClassFluencyStats | null>(null).reset(this.reset)
+  public readonly $table = createStore<StudentResult[]>([]).reset(this.reset)
+  public readonly $filteredTable
+
+  public readonly setStudentInfoDrawer = createEvent<StudentResult | null>()
+  public readonly $studentInfoDrawer = createStore<StudentDrawerInfo | null>(null)
+    .reset(this.reset)
+    .on(this.setStudentInfoDrawer, (_, student) => (student ? { ...student, details: null } : null))
+
+  public readonly initFx = createEffect(async (props: TeacherFluencyGateProps) => {
+    const response = await this.api.getClassSummaryFx({
+      studentIds: props.students.map(({ id }) => id),
+    })
+    return {
+      stats: buildClassAverageStats(response),
+      table: buildStudentsFluencyTable({ response, students: props.students }),
+    }
+  })
+
+  constructor(
+    private readonly api: TeacherFluencyApiModel,
+    private readonly filters: TeacherFluencyFiltersModel,
+  ) {
+    spread({
+      source: this.initFx.doneData,
+      targets: {
+        stats: this.$stats,
+        table: this.$table,
+      },
+    })
+
+    this.$studentInfoDrawer.on(this.api.getStudentDetailsFx.doneData, (state, details) =>
+      state ? { ...state, details } : null,
+    )
+
+    this.$filteredTable = combine(
+      this.$table,
+      this.filters.$search,
+      this.filters.$sort,
+      (students, search, sort) => {
+        const filtered = search
+          ? students.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
+          : students
+
+        return [...filtered].sort((a, b) => {
+          const aVal = sort.column === FluencyTableColumn.AVERAGE ? a.averagePercent : a.scores[sort.column]
+          const bVal = sort.column === FluencyTableColumn.AVERAGE ? b.averagePercent : b.scores[sort.column]
+          return sort.direction === SortingDirection.DESC ? bVal - aVal : aVal - bVal
+        })
+      },
+    )
+  }
+}

package/src/features/keyboard/components/AlgebraLayout/AlgebraLayout.tsx

@@ -5,6 +5,7 @@ import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
 import { IntegralABIcon } from '../../../../shared/icons/IntegralABIcon'
 import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
 import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
+import { TEST_IDS } from '@magmamath/students-qa'
 
 const ALGEBRA_CONFIG: SwitchableLayoutConfig = {
   secondaryKeyboardType: KeyboardType.AlgebraAdvanced,
@@ -17,5 +18,11 @@ const ALGEBRA_CONFIG: SwitchableLayoutConfig = {
 }
 
 export const AlgebraLayout = (props: KeyboardLayoutProps) => {
-  return <SwitchableLayout {...props} config={ALGEBRA_CONFIG} />
+  return (
+    <SwitchableLayout
+      {...props}
+      config={ALGEBRA_CONFIG}
+      testID={TEST_IDS.KEYBOARD_ALGEBRA_LAYOUT}
+    />
+  )
 }

package/src/features/keyboard/components/GeometryLayout/GeometryLayout.tsx

@@ -5,6 +5,7 @@ import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
 import { GeometryIcon } from '../../../../shared/icons/GeometryIcon'
 import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
 import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
+import { TEST_IDS } from '@magmamath/students-qa'
 
 const GEOMETRY_CONFIG: SwitchableLayoutConfig = {
   secondaryKeyboardType: KeyboardType.Geometry,
@@ -17,5 +18,11 @@ const GEOMETRY_CONFIG: SwitchableLayoutConfig = {
 }
 
 export const GeometryLayout = (props: KeyboardLayoutProps) => {
-  return <SwitchableLayout {...props} config={GEOMETRY_CONFIG} />
+  return (
+    <SwitchableLayout
+      {...props}
+      config={GEOMETRY_CONFIG}
+      testID={TEST_IDS.KEYBOARD_GEOMETRY_LAYOUT}
+    />
+  )
 }

package/src/features/keyboard/components/SwitchableLayout/SwitchableLayout.tsx

@@ -8,6 +8,7 @@ import {
   SelectOptionSize,
   SPACING,
 } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
 import { KeyboardType } from '../../types/types'
 import { SelectedLayout, SwitchableLayoutProps } from './types'
 import { getMainKeyboardGroup } from '../../helpers'
@@ -18,6 +19,7 @@ export const SwitchableLayout = ({
   onLayoutChange,
   keys,
   config,
+  testID,
   ...props
 }: SwitchableLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
@@ -63,7 +65,7 @@ export const SwitchableLayout = ({
   const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={testID}>
       {isDesktop && (
         <SelectGroup
           numOfRows={2}
@@ -79,7 +81,15 @@ export const SwitchableLayout = ({
           ]}
         />
       )}
-      <KeysList keys={currentKeys} numOfRows={3} {...props} />
+      <View
+        testID={
+          selectedLayout === SelectedLayout.BASIC
+            ? TEST_IDS.KEYBOARD_KEYS_BASIC
+            : TEST_IDS.KEYBOARD_KEYS_SECONDARY
+        }
+      >
+        <KeysList keys={currentKeys} numOfRows={3} {...props} />
+      </View>
     </View>
   )
 }

package/src/features/keyboard/components/SwitchableLayout/helpers.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { TEST_IDS } from '@magmamath/students-qa'
 import { SelectedLayout, LayoutOption } from './types'
 
 type GetSelectOptionsProps = {
@@ -21,11 +22,13 @@ export function getSelectOptions({
       key: SelectedLayout.BASIC,
       title: BasicIcon(selectedLayout === SelectedLayout.BASIC),
       onPressIn: onBasicPressIn,
+      testID: TEST_IDS.KEYBOARD_LAYOUT_SWITCH_BASIC,
     },
     {
       key: SelectedLayout.SECONDARY,
       title: SecondaryIcon(selectedLayout === SelectedLayout.SECONDARY),
       onPressIn: onSecondaryPressIn,
+      testID: TEST_IDS.KEYBOARD_LAYOUT_SWITCH_SECONDARY,
     },
   ]
 }

package/src/features/keyboard/components/SwitchableLayout/types.ts

@@ -11,6 +11,7 @@ export type LayoutOption = {
   key: SelectedLayout
   title: ReactNode
   onPressIn: () => void
+  testID?: string
 }
 
 export type SwitchableLayoutConfig = {
@@ -21,4 +22,5 @@ export type SwitchableLayoutConfig = {
 
 export type SwitchableLayoutProps = KeyboardLayoutProps & {
   config: SwitchableLayoutConfig
+  testID?: string
 }

package/src/features/keyboard/constants/groups/currency.constants.ts

@@ -17,4 +17,7 @@ export const KEYBOARD_CURRENCY: Record<string, KeyboardGroup> = {
   ZLOTY_GROSZ: {
     keys: [MATH_CURRENCY_UNITS.ZLOTY, MATH_CURRENCY_UNITS.GROSZ],
   },
+  FRANC_RAPPEN: {
+    keys: [MATH_CURRENCY_UNITS.FRANC, MATH_CURRENCY_UNITS.RAPPEN],
+  },
 }

package/src/features/keyboard/constants/keyboard.helpers.ts

@@ -100,6 +100,7 @@ const CURRENCY_MAP: Record<KeyboardCurrencyVariant, KeyboardGroup> = {
   [KeyboardCurrencyVariant.KRONE_EURO_POUND]: KEYBOARD_CURRENCY.KRONE_EURO_POUND,
   [KeyboardCurrencyVariant.EURO_DOLLAR_POUND]: KEYBOARD_CURRENCY.EURO_DOLLAR_POUND,
   [KeyboardCurrencyVariant.ZLOTY_GROSZ]: KEYBOARD_CURRENCY.ZLOTY_GROSZ,
+  [KeyboardCurrencyVariant.FRANC_RAPPEN]: KEYBOARD_CURRENCY.FRANC_RAPPEN,
 }
 
 const TIME_MAP: Record<KeyboardTimeVariant, KeyboardGroup> = {

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -10,6 +10,8 @@ import { PesoIcon } from '../../../../shared/icons/keyboard/PesoIcon'
 import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon'
 import { ZlotyIcon } from '../../../../shared/icons/keyboard/ZlotyIcon'
 import { GroszIcon } from '../../../../shared/icons/keyboard/GroszIcon'
+import { FrancIcon } from '../../../../shared/icons/keyboard/FrancIcon'
+import { RappenIcon } from '../../../../shared/icons/keyboard/RappenIcon'
 
 export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
   KRONE: {
@@ -58,6 +60,16 @@ export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
     mathliveValue: '\\mathrm{gr}',
     katexValue: 'gr',
   },
+  FRANC: {
+    icon: <FrancIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{Fr}',
+    katexValue: 'Fr',
+  },
+  RAPPEN: {
+    icon: <RappenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{Rp}',
+    katexValue: 'Rp',
+  },
 } as const
 
 export const MATH_LENGTH_UNITS: MathOperatorsGroup = {

package/src/features/pmProgress/components/content/PmContent.tsx

@@ -7,7 +7,6 @@ import { PmDomainList } from '../list/PmDomainList'
 import { PmInsights } from '../insights/PmInsights'
 import { PmStatusOverlay } from '../locked/PmStatusOverlay'
 import { usePmProgress } from '../../context/PmProgressContext'
-import { PmProgressStatus } from '@magmamath/students-features'
 
 export const PmProgressContent = () => {
   const { model } = usePmProgress()

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -15,14 +15,14 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
-import { isWeb } from '../../../../shared/common.constants'
+import { BURGER_MENU_BREAKPOINT, isWeb } from '../../../../shared/common.constants'
 import { useStoreMap, useUnit } from 'effector-react'
 import { usePmProgress } from '../../context/PmProgressContext'
 import { formatGradeLabel } from '../../shared/pmProgress.helpers'
 import { MenuIcon } from '../../../../shared/icons/MenuIcon'
 import { TEST_IDS } from '@magmamath/students-qa'
 import { NextUp } from './NextUp'
-import { BURGER_MENU_BREAKPOINT, MENU_MAX_HEIGHT } from '@magmamath/students-features'
+import { MENU_MAX_HEIGHT } from '../../shared/pmProgress.constants'
 import { useText } from '../../../../i18n/i18n'
 
 const menuItemProps: MenuItemProps = {

package/src/features/pmProgress/components/locked/PmStatusOverlay.tsx

@@ -1,6 +1,13 @@
 import React, { ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, ErrorIcon, HeadingVariants, LockIcon, SPACING, Typography, } from '@magmamath/react-native-ui'
+import {
+  COLORS,
+  ErrorIcon,
+  HeadingVariants,
+  LockIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
 import { PmProgressStatus } from '../../shared/pmProgress.constants'
 import { TranslationKey, useText } from '../../../../i18n/i18n'