@magmamath/students-features 1.8.0-rc.0-fluency-visuals → 1.8.0

package/dist/module/features/fluency-teacher/components/drawer/DrawerHeader.js

@@ -2,8 +2,9 @@
 
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { Button, ButtonColor, ButtonVariant, COLORS, CrossIcon, FONT_FAMILY, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui';
+import { Button, ButtonColor, ButtonVariant, COLORS, CrossIcon, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui';
 import { useText } from "../../../../i18n/i18n.js";
+import { AverageCell } from "../table/AverageCell.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DrawerHeader = ({
   student,
@@ -12,31 +13,36 @@ export const DrawerHeader = ({
   const t = useText();
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.left,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: HeadingVariants.H9,
-        style: styles.label,
-        children: t('teacher.fluency.studentFluency')
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.name,
-        children: student.name
-      })]
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.name,
+      numberOfLines: 1,
+      children: student.name
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.right,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.masteryLabel,
-        children: t('teacher.fluency.overallMastery')
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: styles.masteryValue,
-        children: [student.averagePercent, "%"]
+      style: styles.mastery,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.masteryRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.masteryLabel,
+          numberOfLines: 1,
+          children: t('teacher.fluency.overallMastery')
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.masteryValue,
+          children: [student.averagePercent, "%"]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.masteryBar,
+        children: /*#__PURE__*/_jsx(AverageCell, {
+          percent: student.averagePercent,
+          height: 22,
+          showPercent: false
+        })
       })]
     }), /*#__PURE__*/_jsx(Button, {
-      variant: ButtonVariant.SECONDARY,
+      variant: ButtonVariant.TERTIARY,
       colorScheme: ButtonColor.WHITE,
       icon: /*#__PURE__*/_jsx(CrossIcon, {
         size: 18,
-        color: COLORS.NEUTRAL_7
+        color: COLORS.NEUTRAL_9
       }),
       onPress: onClose,
       style: {
@@ -49,45 +55,44 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: SPACING[500],
-    paddingHorizontal: SPACING[700],
-    borderTopWidth: 1,
+    gap: SPACING[400],
+    padding: SPACING[400],
     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,
+    flex: 1,
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
     color: COLORS.NEUTRAL_10
   },
-  right: {
+  mastery: {
+    alignItems: 'flex-end'
+  },
+  masteryBar: {
+    width: 150
+  },
+  masteryRow: {
+    flexDirection: 'row',
     alignItems: 'flex-end',
-    marginLeft: 'auto'
+    gap: SPACING[100]
   },
   masteryLabel: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '400',
     fontSize: 13,
+    lineHeight: 26,
     color: COLORS.NEUTRAL_7
   },
   masteryValue: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 28,
-    color: COLORS.GREEN_7
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
+    color: COLORS.PRIMARY_YELLOW
   },
   closeButton: {
-    alignSelf: 'center',
-    marginLeft: SPACING[600]
+    alignSelf: 'center'
   }
 });
 //# sourceMappingURL=DrawerHeader.js.map

package/dist/module/features/fluency-teacher/components/drawer/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","View","Button","ButtonColor","ButtonVariant","COLORS","CrossIcon","FONT_FAMILY","HeadingVariants","SPACING","Typography","useText","jsx","_jsx","jsxs","_jsxs","DrawerHeader","student","onClose","t","style","styles","container","children","left","variant","H9","label","name","right","masteryLabel","masteryValue","averagePercent","SECONDARY","colorScheme","WHITE","icon","size","color","NEUTRAL_7","onPress","closeButton","create","flexDirection","alignItems","paddingVertical","paddingHorizontal","borderTopWidth","borderBottomWidth","borderColor","NEUTRAL_4","marginLeft","GREEN_7","fontFamily","buenosAiresSemiBold","fontWeight","buenosAiresBold","fontSize","NEUTRAL_10","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerHeader.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","Text","View","Button","ButtonColor","ButtonVariant","COLORS","CrossIcon","FONT_FAMILY","SPACING","useText","AverageCell","jsx","_jsx","jsxs","_jsxs","DrawerHeader","student","onClose","t","style","styles","container","children","name","numberOfLines","mastery","masteryRow","masteryLabel","masteryValue","averagePercent","masteryBar","percent","height","showPercent","variant","TERTIARY","colorScheme","WHITE","icon","size","color","NEUTRAL_9","onPress","closeButton","create","flexDirection","alignItems","gap","padding","borderBottomWidth","borderColor","NEUTRAL_4","flex","fontFamily","buenosAiresSemiBold","fontWeight","fontSize","NEUTRAL_10","width","buenosAires","lineHeight","NEUTRAL_7","PRIMARY_YELLOW","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerHeader.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/drawer/DrawerMatrixes.js

@@ -2,48 +2,31 @@
 
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { COLORS, SPACING } from '@magmamath/react-native-ui';
+import { SPACING } from '@magmamath/react-native-ui';
 import { useText } from "../../../../i18n/i18n.js";
+import { useTeacherFluency } from "../../context/TeacherFluencyContext.js";
 import { DrawerOperatorBox } from "./DrawerOperatorBox.js";
-import { FluencyMathOperatorSymbol, FluencyOperator } from "../../fluencyTeacher.constants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OPERATOR_CARD_CONFIG } from "../../fluencyTeacher.constants.js";
+import { getOperatorsForGrade } from "../../fluencyTeacher.helpers.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DrawerMatrixes = () => {
   const t = useText();
-  return /*#__PURE__*/_jsxs(View, {
+  const {
+    grade
+  } = useTeacherFluency();
+  return /*#__PURE__*/_jsx(View, {
     style: styles.grid,
-    children: [/*#__PURE__*/_jsx(DrawerOperatorBox, {
-      title: t('student.fluency.addition'),
-      symbol: FluencyMathOperatorSymbol.ADDITION,
-      iconBg: COLORS.GREEN_1,
-      iconColor: COLORS.GREEN_7,
-      operator: FluencyOperator.ADDITION
-    }), /*#__PURE__*/_jsx(DrawerOperatorBox, {
-      title: t('student.fluency.subtraction'),
-      symbol: FluencyMathOperatorSymbol.SUBTRACTION,
-      iconBg: COLORS.ORANGE_1,
-      iconColor: COLORS.ORANGE_7,
-      operator: FluencyOperator.SUBTRACTION
-    }), /*#__PURE__*/_jsx(DrawerOperatorBox, {
-      title: t('student.fluency.multiplication'),
-      symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
-      iconBg: COLORS.BLUE_1,
-      iconColor: COLORS.BLUE_7,
-      operator: FluencyOperator.MULTIPLICATION
-    }), /*#__PURE__*/_jsx(DrawerOperatorBox, {
-      title: t('student.fluency.division'),
-      symbol: FluencyMathOperatorSymbol.DIVISION,
-      iconBg: COLORS.PURPLE_1,
-      iconColor: COLORS.PURPLE_7,
-      operator: FluencyOperator.DIVISION
-    })]
+    children: getOperatorsForGrade(grade).map(operator => /*#__PURE__*/_jsx(DrawerOperatorBox, {
+      title: t(OPERATOR_CARD_CONFIG[operator].labelKey),
+      operator: operator
+    }, operator))
   });
 };
 const styles = StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: SPACING[300],
-    marginTop: SPACING[300],
+    gap: SPACING[400],
     marginBottom: SPACING[600]
   }
 });

package/dist/module/features/fluency-teacher/components/drawer/DrawerMatrixes.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","COLORS","SPACING","useText","DrawerOperatorBox","FluencyMathOperatorSymbol","FluencyOperator","jsx","_jsx","jsxs","_jsxs","DrawerMatrixes","t","style","styles","grid","children","title","symbol","ADDITION","iconBg","GREEN_1","iconColor","GREEN_7","operator","SUBTRACTION","ORANGE_1","ORANGE_7","MULTIPLICATION","BLUE_1","BLUE_7","DIVISION","PURPLE_1","PURPLE_7","create","flexDirection","flexWrap","gap","marginTop","marginBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerMatrixes.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,MAAM,EAAEC,OAAO,QAAQ,4BAA4B;AAC5D,SAASC,OAAO,QAAQ,0BAAuB;AAC/C,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,yBAAyB,EAAEC,eAAe,QAAQ,mCAAgC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,CAAC,GAAGT,OAAO,CAAC,CAAC;EACnB,oBACEO,KAAA,CAACV,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,gBACvBR,IAAA,CAACJ,iBAAiB;MAChBa,KAAK,EAAEL,CAAC,CAAC,0BAA0B,CAAE;MACrCM,MAAM,EAAEb,yBAAyB,CAACc,QAAS;MAC3CC,MAAM,EAAEnB,MAAM,CAACoB,OAAQ;MACvBC,SAAS,EAAErB,MAAM,CAACsB,OAAQ;MAC1BC,QAAQ,EAAElB,eAAe,CAACa;IAAS,CACpC,CAAC,eACFX,IAAA,CAACJ,iBAAiB;MAChBa,KAAK,EAAEL,CAAC,CAAC,6BAA6B,CAAE;MACxCM,MAAM,EAAEb,yBAAyB,CAACoB,WAAY;MAC9CL,MAAM,EAAEnB,MAAM,CAACyB,QAAS;MACxBJ,SAAS,EAAErB,MAAM,CAAC0B,QAAS;MAC3BH,QAAQ,EAAElB,eAAe,CAACmB;IAAY,CACvC,CAAC,eACFjB,IAAA,CAACJ,iBAAiB;MAChBa,KAAK,EAAEL,CAAC,CAAC,gCAAgC,CAAE;MAC3CM,MAAM,EAAEb,yBAAyB,CAACuB,cAAe;MACjDR,MAAM,EAAEnB,MAAM,CAAC4B,MAAO;MACtBP,SAAS,EAAErB,MAAM,CAAC6B,MAAO;MACzBN,QAAQ,EAAElB,eAAe,CAACsB;IAAe,CAC1C,CAAC,eACFpB,IAAA,CAACJ,iBAAiB;MAChBa,KAAK,EAAEL,CAAC,CAAC,0BAA0B,CAAE;MACrCM,MAAM,EAAEb,yBAAyB,CAAC0B,QAAS;MAC3CX,MAAM,EAAEnB,MAAM,CAAC+B,QAAS;MACxBV,SAAS,EAAErB,MAAM,CAACgC,QAAS;MAC3BT,QAAQ,EAAElB,eAAe,CAACyB;IAAS,CACpC,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAED,MAAMjB,MAAM,GAAGf,UAAU,CAACmC,MAAM,CAAC;EAC/BnB,IAAI,EAAE;IACJoB,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,MAAM;IAChBC,GAAG,EAAEnC,OAAO,CAAC,GAAG,CAAC;IACjBoC,SAAS,EAAEpC,OAAO,CAAC,GAAG,CAAC;IACvBqC,YAAY,EAAErC,OAAO,CAAC,GAAG;EAC3B;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","View","SPACING","useText","useTeacherFluency","DrawerOperatorBox","OPERATOR_CARD_CONFIG","getOperatorsForGrade","jsx","_jsx","DrawerMatrixes","t","grade","style","styles","grid","children","map","operator","title","labelKey","create","flexDirection","flexWrap","gap","marginBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerMatrixes.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,OAAO,QAAQ,4BAA4B;AACpD,SAASC,OAAO,QAAQ,0BAAuB;AAC/C,SAASC,iBAAiB,QAAQ,wCAAqC;AACvE,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,oBAAoB,QAAQ,mCAAgC;AACrE,SAASC,oBAAoB,QAAQ,iCAA8B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEnE,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,CAAC,GAAGR,OAAO,CAAC,CAAC;EACnB,MAAM;IAAES;EAAM,CAAC,GAAGR,iBAAiB,CAAC,CAAC;EACrC,oBACEK,IAAA,CAACR,IAAI;IAACY,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,EACtBT,oBAAoB,CAACK,KAAK,CAAC,CAACK,GAAG,CAAEC,QAAQ,iBACxCT,IAAA,CAACJ,iBAAiB;MAEhBc,KAAK,EAAER,CAAC,CAACL,oBAAoB,CAACY,QAAQ,CAAC,CAACE,QAAQ,CAAE;MAClDF,QAAQ,EAAEA;IAAS,GAFdA,QAGN,CACF;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMJ,MAAM,GAAGd,UAAU,CAACqB,MAAM,CAAC;EAC/BN,IAAI,EAAE;IACJO,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,MAAM;IAChBC,GAAG,EAAEtB,OAAO,CAAC,GAAG,CAAC;IACjBuB,YAAY,EAAEvB,OAAO,CAAC,GAAG;EAC3B;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/drawer/DrawerOperatorBox.js

@@ -7,13 +7,12 @@ import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-na
 import { useText } from "../../../../i18n/i18n.js";
 import { useDrawerMatrix } from "../../hooks/useDrawerMatrix.js";
 import { DrawerMatrix } from "../matrix/DrawerMatrix.js";
+import { MatrixLegend } from "../matrix/MatrixLegend.js";
 import { useTeacherFluency } from "../../context/TeacherFluencyContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OPERATOR_PALETTES } from "../../fluencyTeacher.constants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const DrawerOperatorBox = ({
   title,
-  symbol,
-  iconBg,
-  iconColor,
   operator
 }) => {
   const t = useText();
@@ -27,24 +26,14 @@ export const DrawerOperatorBox = ({
     rows: matrixProps.grid.rows.length
   }) : '';
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
+    style: [styles.container, {
+      borderColor: OPERATOR_PALETTES[operator].boxBorder
+    }],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.header,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.iconBox, {
-          backgroundColor: iconBg
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.symbol, {
-            color: iconColor
-          }],
-          children: symbol
-        })
-      }), /*#__PURE__*/_jsx(Text, {
+      children: [/*#__PURE__*/_jsx(Text, {
         style: styles.title,
         children: title
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.spacer
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.factsLabel,
         children: factsLabel
@@ -57,56 +46,50 @@ export const DrawerOperatorBox = ({
           size: "large",
           color: COLORS.PRIMARY_BLUE
         })
-      }) : /*#__PURE__*/_jsx(DrawerMatrix, {
-        ...matrixProps
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(DrawerMatrix, {
+          ...matrixProps
+        }), matrixProps.grid && /*#__PURE__*/_jsx(MatrixLegend, {
+          operator: operator,
+          grid: matrixProps.grid
+        })]
       })
     })]
   });
 };
 const styles = StyleSheet.create({
   container: {
-    width: 315,
-    height: 315,
+    flexGrow: 1,
+    flexBasis: '45%',
     borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_4,
     borderRadius: BORDER_RADIUS[300],
-    padding: SPACING[400]
+    backgroundColor: COLORS.NEUTRAL_1,
+    padding: SPACING[400],
+    gap: SPACING[300]
   },
   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
+    gap: SPACING[200]
   },
   title: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '700',
-    fontSize: 15,
+    flex: 1,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '400',
+    fontSize: 16,
     color: COLORS.NEUTRAL_10
   },
-  spacer: {
-    flex: 1
-  },
   factsLabel: {
     fontFamily: FONT_FAMILY.buenosAiresSemiBold,
     fontSize: 13,
     fontWeight: '600',
+    textTransform: 'uppercase',
     color: COLORS.NEUTRAL_7
   },
   content: {
-    flex: 1
+    height: 210,
+    flexDirection: 'row',
+    gap: SPACING[200]
   },
   loader: {
     flex: 1,

package/dist/module/features/fluency-teacher/components/drawer/DrawerOperatorBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ActivityIndicator","StyleSheet","Text","View","useUnit","BORDER_RADIUS","COLORS","FONT_FAMILY","SPACING","useText","useDrawerMatrix","DrawerMatrix","useTeacherFluency","jsx","_jsx","jsxs","_jsxs","DrawerOperatorBox","title","symbol","iconBg","iconColor","operator","t","model","isLoading","api","getStudentDetailsFx","pending","matrixProps","factsLabel","grid","cols","colLabels","length","rows","style","styles","container","children","header","iconBox","backgroundColor","color","spacer","content","loader","size","PRIMARY_BLUE","create","width","height","borderWidth","borderColor","NEUTRAL_4","borderRadius","padding","flexDirection","alignItems","gap","marginBottom","justifyContent","fontFamily","buenosAiresBold","fontSize","buenosAiresSemiBold","fontWeight","NEUTRAL_10","flex","NEUTRAL_7"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ActivityIndicator","StyleSheet","Text","View","useUnit","BORDER_RADIUS","COLORS","FONT_FAMILY","SPACING","useText","useDrawerMatrix","DrawerMatrix","MatrixLegend","useTeacherFluency","OPERATOR_PALETTES","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DrawerOperatorBox","title","operator","t","model","isLoading","api","getStudentDetailsFx","pending","matrixProps","factsLabel","grid","cols","colLabels","length","rows","style","styles","container","borderColor","boxBorder","children","header","content","loader","size","color","PRIMARY_BLUE","create","flexGrow","flexBasis","borderWidth","borderRadius","backgroundColor","NEUTRAL_1","padding","gap","flexDirection","alignItems","flex","fontFamily","buenosAires","fontWeight","fontSize","NEUTRAL_10","buenosAiresSemiBold","textTransform","NEUTRAL_7","height","justifyContent"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.js

@@ -2,70 +2,77 @@
 
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui';
+import { BORDER_RADIUS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui';
+import { getOperatorBandColors } from "../../fluencyTeacher.helpers.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DrawerOperatorStatCard = ({
   title,
   value,
   symbol,
-  color
-}) => /*#__PURE__*/_jsxs(View, {
-  style: styles.container,
-  children: [/*#__PURE__*/_jsx(View, {
-    style: [styles.iconContainer, {
-      backgroundColor: color + '26'
+  operator
+}) => {
+  const {
+    background,
+    border,
+    text
+  } = getOperatorBandColors(operator, value);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      backgroundColor: background,
+      borderColor: border
     }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.symbol, {
-        color
-      }],
-      children: symbol
-    })
-  }), /*#__PURE__*/_jsxs(View, {
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.title,
-      children: title
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.titleRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.symbol, {
+          color: text
+        }],
+        children: symbol
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: text
+        }],
+        numberOfLines: 1,
+        children: title
+      })]
     }), /*#__PURE__*/_jsxs(Text, {
-      style: styles.value,
+      style: [styles.value, {
+        color: text
+      }],
       children: [value, "%"]
     })]
-  })]
-});
+  });
+};
 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
+    justifyContent: 'center',
+    gap: SPACING[100],
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[200],
+    borderWidth: 1
   },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    borderRadius: SPACING[200],
+  titleRow: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    gap: SPACING[100]
   },
   symbol: {
+    width: 16,
     fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 28,
-    marginBottom: 2
+    fontSize: 16,
+    textAlign: 'center'
   },
   title: {
+    flexShrink: 1,
     fontFamily: FONT_FAMILY.buenosAires,
     fontWeight: '400',
-    fontSize: 12,
-    color: COLORS.NEUTRAL_7
+    fontSize: 16
   },
   value: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 18,
-    color: COLORS.NEUTRAL_10
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24
   }
 });
 //# sourceMappingURL=DrawerOperatorStatCard.js.map

package/dist/module/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","View","COLORS","FONT_FAMILY","SPACING","jsx","_jsx","jsxs","_jsxs","DrawerOperatorStatCard","title","value","symbol","color","style","styles","container","children","iconContainer","backgroundColor","create","flex","flexDirection","alignItems","gap","padding","borderRadius","borderWidth","borderColor","NEUTRAL_4","NEUTRAL_2","width","height","justifyContent","fontFamily","buenosAiresBold","fontSize","marginBottom","buenosAires","fontWeight","NEUTRAL_7","NEUTRAL_10"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorStatCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,MAAM,EAAEC,WAAW,EAAEC,OAAO,QAAQ,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASzE,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACrCC,KAAK;EACLC,KAAK;EACLC,MAAM;EACNC;AAC2B,CAAC,kBAC5BL,KAAA,CAACP,IAAI;EAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;EAAAC,QAAA,gBAC5BX,IAAA,CAACL,IAAI;IAACa,KAAK,EAAE,CAACC,MAAM,CAACG,aAAa,EAAE;MAAEC,eAAe,EAAEN,KAAK,GAAG;IAAK,CAAC,CAAE;IAAAI,QAAA,eACrEX,IAAA,CAACN,IAAI;MAACc,KAAK,EAAE,CAACC,MAAM,CAACH,MAAM,EAAE;QAAEC;MAAM,CAAC,CAAE;MAAAI,QAAA,EAAEL;IAAM,CAAO;EAAC,CACpD,CAAC,eACPJ,KAAA,CAACP,IAAI;IAAAgB,QAAA,gBACHX,IAAA,CAACN,IAAI;MAACc,KAAK,EAAEC,MAAM,CAACL,KAAM;MAAAO,QAAA,EAAEP;IAAK,CAAO,CAAC,eACzCF,KAAA,CAACR,IAAI;MAACc,KAAK,EAAEC,MAAM,CAACJ,KAAM;MAAAM,QAAA,GAAEN,KAAK,EAAC,GAAC;IAAA,CAAM,CAAC;EAAA,CACtC,CAAC;AAAA,CACH,CACP;AAED,MAAMI,MAAM,GAAGhB,UAAU,CAACqB,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAEpB,OAAO,CAAC,GAAG,CAAC;IACjBqB,OAAO,EAAErB,OAAO,CAAC,GAAG,CAAC;IACrBsB,YAAY,EAAEtB,OAAO,CAAC,GAAG,CAAC;IAC1BuB,WAAW,EAAE,CAAC;IACdC,WAAW,EAAE1B,MAAM,CAAC2B,SAAS;IAC7BV,eAAe,EAAEjB,MAAM,CAAC4B;EAC1B,CAAC;EACDZ,aAAa,EAAE;IACba,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVN,YAAY,EAAEtB,OAAO,CAAC,GAAG,CAAC;IAC1BmB,UAAU,EAAE,QAAQ;IACpBU,cAAc,EAAE;EAClB,CAAC;EACDrB,MAAM,EAAE;IACNsB,UAAU,EAAE/B,WAAW,CAACgC,eAAe;IACvCC,QAAQ,EAAE,EAAE;IACZC,YAAY,EAAE;EAChB,CAAC;EACD3B,KAAK,EAAE;IACLwB,UAAU,EAAE/B,WAAW,CAACmC,WAAW;IACnCC,UAAU,EAAE,KAAK;IACjBH,QAAQ,EAAE,EAAE;IACZvB,KAAK,EAAEX,MAAM,CAACsC;EAChB,CAAC;EACD7B,KAAK,EAAE;IACLuB,UAAU,EAAE/B,WAAW,CAACgC,eAAe;IACvCI,UAAU,EAAE,KAAK;IACjBH,QAAQ,EAAE,EAAE;IACZvB,KAAK,EAAEX,MAAM,CAACuC;EAChB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","Text","View","BORDER_RADIUS","FONT_FAMILY","SPACING","getOperatorBandColors","jsx","_jsx","jsxs","_jsxs","DrawerOperatorStatCard","title","value","symbol","operator","background","border","text","style","styles","container","backgroundColor","borderColor","children","titleRow","color","numberOfLines","create","flex","justifyContent","gap","padding","borderRadius","borderWidth","flexDirection","alignItems","width","fontFamily","buenosAiresBold","fontSize","textAlign","flexShrink","buenosAires","fontWeight","buenosAiresSemiBold"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorStatCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,aAAa,EAAEC,WAAW,EAAEC,OAAO,QAAQ,4BAA4B;AAChF,SAASC,qBAAqB,QAAQ,iCAA8B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAUpE,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACrCC,KAAK;EACLC,KAAK;EACLC,MAAM;EACNC;AAC2B,CAAC,KAAK;EACjC,MAAM;IAAEC,UAAU;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAGZ,qBAAqB,CAACS,QAAQ,EAAEF,KAAK,CAAC;EAC3E,oBACEH,KAAA,CAACR,IAAI;IAACiB,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAEN,UAAU;MAAEO,WAAW,EAAEN;IAAO,CAAC,CAAE;IAAAO,QAAA,gBACpFd,KAAA,CAACR,IAAI;MAACiB,KAAK,EAAEC,MAAM,CAACK,QAAS;MAAAD,QAAA,gBAC3BhB,IAAA,CAACP,IAAI;QAACkB,KAAK,EAAE,CAACC,MAAM,CAACN,MAAM,EAAE;UAAEY,KAAK,EAAER;QAAK,CAAC,CAAE;QAAAM,QAAA,EAAEV;MAAM,CAAO,CAAC,eAC9DN,IAAA,CAACP,IAAI;QAACkB,KAAK,EAAE,CAACC,MAAM,CAACR,KAAK,EAAE;UAAEc,KAAK,EAAER;QAAK,CAAC,CAAE;QAACS,aAAa,EAAE,CAAE;QAAAH,QAAA,EAC5DZ;MAAK,CACF,CAAC;IAAA,CACH,CAAC,eACPF,KAAA,CAACT,IAAI;MAACkB,KAAK,EAAE,CAACC,MAAM,CAACP,KAAK,EAAE;QAAEa,KAAK,EAAER;MAAK,CAAC,CAAE;MAAAM,QAAA,GAAEX,KAAK,EAAC,GAAC;IAAA,CAAM,CAAC;EAAA,CACzD,CAAC;AAEX,CAAC;AAED,MAAMO,MAAM,GAAGpB,UAAU,CAAC4B,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,GAAG,EAAE1B,OAAO,CAAC,GAAG,CAAC;IACjB2B,OAAO,EAAE3B,OAAO,CAAC,GAAG,CAAC;IACrB4B,YAAY,EAAE9B,aAAa,CAAC,GAAG,CAAC;IAChC+B,WAAW,EAAE;EACf,CAAC;EACDT,QAAQ,EAAE;IACRU,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBL,GAAG,EAAE1B,OAAO,CAAC,GAAG;EAClB,CAAC;EACDS,MAAM,EAAE;IACNuB,KAAK,EAAE,EAAE;IACTC,UAAU,EAAElC,WAAW,CAACmC,eAAe;IACvCC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE;EACb,CAAC;EACD7B,KAAK,EAAE;IACL8B,UAAU,EAAE,CAAC;IACbJ,UAAU,EAAElC,WAAW,CAACuC,WAAW;IACnCC,UAAU,EAAE,KAAK;IACjBJ,QAAQ,EAAE;EACZ,CAAC;EACD3B,KAAK,EAAE;IACLyB,UAAU,EAAElC,WAAW,CAACyC,mBAAmB;IAC3CD,UAAU,EAAE,KAAK;IACjBJ,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/drawer/DrawerStats.js

@@ -2,45 +2,35 @@
 
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { COLORS, SPACING } from '@magmamath/react-native-ui';
+import { SPACING } from '@magmamath/react-native-ui';
 import { useText } from "../../../../i18n/i18n.js";
+import { useTeacherFluency } from "../../context/TeacherFluencyContext.js";
 import { DrawerOperatorStatCard } from "./DrawerOperatorStatCard.js";
-import { FluencyMathOperatorSymbol } from "../../fluencyTeacher.constants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OPERATOR_CARD_CONFIG, OPERATOR_TO_COLUMN } from "../../fluencyTeacher.constants.js";
+import { getOperatorsForGrade } from "../../fluencyTeacher.helpers.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DrawerStats = ({
   scores
 }) => {
   const t = useText();
-  return /*#__PURE__*/_jsxs(View, {
+  const {
+    grade
+  } = useTeacherFluency();
+  return /*#__PURE__*/_jsx(View, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(DrawerOperatorStatCard, {
-      title: t('student.fluency.addition'),
-      symbol: FluencyMathOperatorSymbol.ADDITION,
-      color: COLORS.PRIMARY_GREEN,
-      value: scores.addition
-    }), /*#__PURE__*/_jsx(DrawerOperatorStatCard, {
-      title: t('student.fluency.subtraction'),
-      symbol: FluencyMathOperatorSymbol.SUBTRACTION,
-      color: COLORS.PRIMARY_ORANGE,
-      value: scores.subtraction
-    }), /*#__PURE__*/_jsx(DrawerOperatorStatCard, {
-      title: t('student.fluency.multiplication'),
-      symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
-      color: COLORS.PRIMARY_BLUE,
-      value: scores.multiplication
-    }), /*#__PURE__*/_jsx(DrawerOperatorStatCard, {
-      title: t('student.fluency.division'),
-      symbol: FluencyMathOperatorSymbol.DIVISION,
-      color: COLORS.PRIMARY_PURPLE,
-      value: scores.division
-    })]
+    children: getOperatorsForGrade(grade).map(operator => /*#__PURE__*/_jsx(DrawerOperatorStatCard, {
+      title: t(OPERATOR_CARD_CONFIG[operator].labelKey),
+      symbol: OPERATOR_CARD_CONFIG[operator].symbol,
+      operator: operator,
+      value: scores[OPERATOR_TO_COLUMN[operator]]
+    }, operator))
   });
 };
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    gap: SPACING[300],
-    paddingBottom: SPACING[300]
+    gap: SPACING[400],
+    paddingBottom: SPACING[400]
   }
 });
 //# sourceMappingURL=DrawerStats.js.map

package/dist/module/features/fluency-teacher/components/drawer/DrawerStats.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","COLORS","SPACING","useText","DrawerOperatorStatCard","FluencyMathOperatorSymbol","jsx","_jsx","jsxs","_jsxs","DrawerStats","scores","t","style","styles","container","children","title","symbol","ADDITION","color","PRIMARY_GREEN","value","addition","SUBTRACTION","PRIMARY_ORANGE","subtraction","MULTIPLICATION","PRIMARY_BLUE","multiplication","DIVISION","PRIMARY_PURPLE","division","create","flexDirection","gap","paddingBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerStats.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,MAAM,EAAEC,OAAO,QAAQ,4BAA4B;AAC5D,SAASC,OAAO,QAAQ,0BAAuB;AAC/C,SAASC,sBAAsB,QAAQ,6BAA0B;AAGjE,SAASC,yBAAyB,QAAQ,mCAAgC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAM1E,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAMC,CAAC,GAAGT,OAAO,CAAC,CAAC;EACnB,oBACEM,KAAA,CAACT,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5BT,IAAA,CAACH,sBAAsB;MACrBa,KAAK,EAAEL,CAAC,CAAC,0BAA0B,CAAE;MACrCM,MAAM,EAAEb,yBAAyB,CAACc,QAAS;MAC3CC,KAAK,EAAEnB,MAAM,CAACoB,aAAc;MAC5BC,KAAK,EAAEX,MAAM,CAACY;IAAS,CACxB,CAAC,eACFhB,IAAA,CAACH,sBAAsB;MACrBa,KAAK,EAAEL,CAAC,CAAC,6BAA6B,CAAE;MACxCM,MAAM,EAAEb,yBAAyB,CAACmB,WAAY;MAC9CJ,KAAK,EAAEnB,MAAM,CAACwB,cAAe;MAC7BH,KAAK,EAAEX,MAAM,CAACe;IAAY,CAC3B,CAAC,eACFnB,IAAA,CAACH,sBAAsB;MACrBa,KAAK,EAAEL,CAAC,CAAC,gCAAgC,CAAE;MAC3CM,MAAM,EAAEb,yBAAyB,CAACsB,cAAe;MACjDP,KAAK,EAAEnB,MAAM,CAAC2B,YAAa;MAC3BN,KAAK,EAAEX,MAAM,CAACkB;IAAe,CAC9B,CAAC,eACFtB,IAAA,CAACH,sBAAsB;MACrBa,KAAK,EAAEL,CAAC,CAAC,0BAA0B,CAAE;MACrCM,MAAM,EAAEb,yBAAyB,CAACyB,QAAS;MAC3CV,KAAK,EAAEnB,MAAM,CAAC8B,cAAe;MAC7BT,KAAK,EAAEX,MAAM,CAACqB;IAAS,CACxB,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAED,MAAMlB,MAAM,GAAGf,UAAU,CAACkC,MAAM,CAAC;EAC/BlB,SAAS,EAAE;IACTmB,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAEjC,OAAO,CAAC,GAAG,CAAC;IACjBkC,aAAa,EAAElC,OAAO,CAAC,GAAG;EAC5B;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","View","SPACING","useText","useTeacherFluency","DrawerOperatorStatCard","OPERATOR_CARD_CONFIG","OPERATOR_TO_COLUMN","getOperatorsForGrade","jsx","_jsx","DrawerStats","scores","t","grade","style","styles","container","children","map","operator","title","labelKey","symbol","value","create","flexDirection","gap","paddingBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerStats.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,OAAO,QAAQ,4BAA4B;AACpD,SAASC,OAAO,QAAQ,0BAAuB;AAC/C,SAASC,iBAAiB,QAAQ,wCAAqC;AACvE,SAASC,sBAAsB,QAAQ,6BAA0B;AAGjE,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,mCAAgC;AACzF,SAASC,oBAAoB,QAAQ,iCAA8B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMnE,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAMC,CAAC,GAAGV,OAAO,CAAC,CAAC;EACnB,MAAM;IAAEW;EAAM,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACrC,oBACEM,IAAA,CAACT,IAAI;IAACc,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,EAC3BV,oBAAoB,CAACM,KAAK,CAAC,CAACK,GAAG,CAAEC,QAAQ,iBACxCV,IAAA,CAACL,sBAAsB;MAErBgB,KAAK,EAAER,CAAC,CAACP,oBAAoB,CAACc,QAAQ,CAAC,CAACE,QAAQ,CAAE;MAClDC,MAAM,EAAEjB,oBAAoB,CAACc,QAAQ,CAAC,CAACG,MAAO;MAC9CH,QAAQ,EAAEA,QAAS;MACnBI,KAAK,EAAEZ,MAAM,CAACL,kBAAkB,CAACa,QAAQ,CAAC;IAAE,GAJvCA,QAKN,CACF;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMJ,MAAM,GAAGhB,UAAU,CAACyB,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAEzB,OAAO,CAAC,GAAG,CAAC;IACjB0B,aAAa,EAAE1B,OAAO,CAAC,GAAG;EAC5B;AACF,CAAC,CAAC","ignoreList":[]}