mario-teacher-student-client 2.1.126-admin → 2.1.128-admin

package/dist/containers/MyStudent/components/NewOverview/TopLearningStrategies/hooks/useLearningStrategies.d.ts

@@ -1,12 +1,12 @@
-declare const useLearningStrategies: (studentId: any) => {
+declare const useLearningStrategies: (studentId: any, filterDateChart: any) => {
     filtersLearningStrategiesData: {
         searchString: string;
         currentPage: number;
         pageSize: number;
         sortBy: string;
         sortOrder: string;
-        startDate: null;
-        endDate: null;
+        startDate: any;
+        endDate: any;
     };
     changeFiltersLearningStrategiesData: (updatedFilters: any) => void;
     learningStrategiesData: any;

package/dist/containers/MyStudent/hooks/useOverview.d.ts

@@ -26,8 +26,8 @@ declare const useOverview: (studentId: number) => {
         pageSize: number;
         sortBy: string;
         sortOrder: string;
-        startDate: null;
-        endDate: null;
+        startDate: any;
+        endDate: any;
     };
     changeFiltersLearningStrategiesData: (updatedFilters: any) => void;
     handleActiveColumnOneToOne: (index: any) => void;

package/dist/containers/PLP/hooks/usePlpPage.d.ts

@@ -25,8 +25,8 @@ declare const usePlpPage: () => {
         pageSize: number;
         sortBy: string;
         sortOrder: string;
-        startDate: null;
-        endDate: null;
+        startDate: any;
+        endDate: any;
     };
     changeFiltersLearningStrategiesData: (updatedFilters: any) => void;
     handleActiveColumnOneToOne: (index: any) => void;

package/dist/index.css

@@ -5120,9 +5120,9 @@ h2._1OAmb {
 
 ._2qL5J {
   display: flex;
-  padding-bottom: 10px;
+  padding-bottom: 26px;
   padding-right: 20px;
-  justify-content: flex-end; }
+  justify-content: space-between; }
 
 ._3d2hF ._zL0pN {
   display: flex;
@@ -5133,7 +5133,7 @@ h2._1OAmb {
     margin-right: 20px; }
     ._3d2hF ._zL0pN ._1kI5l ._30FUT, ._3d2hF ._zL0pN ._3keyG ._30FUT {
       margin-bottom: 0 !important;
-      font-size: 18px;
+      font-size: 15px;
       margin-right: 10px;
       color: #242424; }
 
@@ -6136,7 +6136,6 @@ h2._1OAmb {
 ._2Q5K5 {
   display: flex;
   justify-content: flex-end;
-  width: 100%;
   padding: 0 15px; }
 
 @font-face {
@@ -6286,15 +6285,16 @@ h2._1OAmb {
       padding-right: 20px;
       width: 336px; } }
 
-._3Saaw thead {
-  border-top: 1px solid #e8e8e8; }
-
-._3Saaw td,
-._3Saaw th {
-  border-right: 1px solid #e8e8e8; }
-  ._3Saaw td:last-child,
-  ._3Saaw th:last-child {
-    border-right: none; }
+._3Saaw {
+  width: 700px !important; }
+  ._3Saaw thead {
+    border-top: 1px solid #e8e8e8; }
+  ._3Saaw td,
+  ._3Saaw th {
+    border-right: 1px solid #e8e8e8; }
+    ._3Saaw td:last-child,
+    ._3Saaw th:last-child {
+      border-right: none; }
 
 ._i-ZXZ {
   font-size: 14px !important;
@@ -14402,6 +14402,14 @@ h4._3lNz0 {
 ._3u2Hp {
   padding: 30px; }
 
+._3yRVo {
+  font-size: 16px !important;
+  font-weight: bold; }
+
+._3M1fw {
+  display: flex;
+  align-items: center; }
+
 @font-face {
   font-family: "Lato-Regular";
   src: url("/fonts/Lato-Regular.ttf");

package/dist/index.js

@@ -4132,10 +4132,10 @@ var checkIsStartedSession = function checkIsStartedSession(sessionId) {
     }
   });
 };
-var checkIsConferenceStarted = function checkIsConferenceStarted(sessionId) {
+var checkIsConferenceStarted = function checkIsConferenceStarted(conferenceId) {
   return marioCore.api.get(TEACHER_URL$1 + "/current/check-session-conference", {
     params: {
-      sessionId: sessionId
+      conferenceId: conferenceId
     }
   });
 };
@@ -18407,7 +18407,7 @@ var OverviewLeft = function OverviewLeft(props) {
 
   var openEdit = function openEdit() {
     var url = "/student-detail/profile/" + studentId + "/update";
-    !isAdmin && history.push(url);
+    !isEduTeacher && !isAdmin && history.push(url);
   };
 
   return React__default.createElement("div", {
@@ -19372,7 +19372,7 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
     xaxis: {
       categories: months,
       labels: {
-        show: true,
+        show: months.length > 0 ? true : false,
         style: {
           colors: ["#808080"],
           fontSize: "16px",
@@ -19380,6 +19380,9 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
           fontWeight: 400,
           cssClass: "apexcharts-yaxis-label"
         }
+      },
+      axisTicks: {
+        show: months.length > 0 ? true : false
       }
     },
     yaxis: {
@@ -19462,14 +19465,14 @@ var convertToSeriesColumnChartAndPercentConference = function convertToSeriesCol
 };
 var convertToAvg = function convertToAvg(dataCharts, data, months) {
   var result = dataCharts.map(function (dataName) {
-    return Number((data.map(function (i) {
+    return Number(data.map(function (i) {
       var questionItem = i.resultQuestion.find(function (question) {
         return question.questionText.includes(dataName);
       });
       return !!questionItem ? questionItem.avgOfStudentChoice : 0;
     }).reduce(function (acc, curr) {
       return acc + curr;
-    }, 0) / (months === null || months === void 0 ? void 0 : months.length)).toFixed(2));
+    }, 0) / (months === null || months === void 0 ? void 0 : months.length));
   });
   return result;
 };
@@ -20109,7 +20112,7 @@ var useTopLearningStrategies = function useTopLearningStrategies(studentId, filt
   };
 };
 
-var useLearningStrategies = function useLearningStrategies(studentId) {
+var useLearningStrategies = function useLearningStrategies(studentId, filterDateChart) {
   var dispatch = reactRedux.useDispatch();
 
   var _useState = React.useState(),
@@ -20122,8 +20125,8 @@ var useLearningStrategies = function useLearningStrategies(studentId) {
     pageSize: 10,
     sortBy: "Strategies",
     sortOrder: "ASC",
-    startDate: null,
-    endDate: null
+    startDate: filterDateChart === null || filterDateChart === void 0 ? void 0 : filterDateChart.startDate,
+    endDate: filterDateChart === null || filterDateChart === void 0 ? void 0 : filterDateChart.endDate
   }),
       filtersLearningStrategiesData = _useState2[0],
       setFilters = _useState2[1];
@@ -20403,7 +20406,7 @@ var useOverview = function useOverview(studentId) {
       labelName = _useTopLearningStrate.labelName,
       usageCountList = _useTopLearningStrate.usageCountList;
 
-  var _useLearningStrategie = useLearningStrategies(studentId),
+  var _useLearningStrategie = useLearningStrategies(studentId, filterDateChart),
       learningStrategiesData = _useLearningStrategie.learningStrategiesData,
       filtersLearningStrategiesData = _useLearningStrategie.filtersLearningStrategiesData,
       changeFiltersLearningStrategiesData = _useLearningStrategie.changeFiltersLearningStrategiesData,
@@ -28932,27 +28935,10 @@ var LearningStrategyDialog = function LearningStrategyDialog(props) {
       getLearningStrategiesData = props.getLearningStrategiesData,
       changeFilters = props.changeFilters,
       learningStrategiesData = props.learningStrategiesData,
-      filters = props.filters,
-      isPlp = props.isPlp;
+      filters = props.filters;
   var inputSearch = React.useRef(null);
   var classes = useStyles$b();
 
-  var handleChangeStartDate = function handleChangeStartDate(date) {
-    if (!date) return;
-    changeFilters({
-      startDate: date.valueOf(),
-      currentPage: 1
-    });
-  };
-
-  var handleChangeEndDate = function handleChangeEndDate(date) {
-    if (!date) return;
-    changeFilters({
-      endDate: date.valueOf(),
-      currentPage: 1
-    });
-  };
-
   var handleSort = function handleSort(e) {
     changeFilters({
       sortOrder: (filters === null || filters === void 0 ? void 0 : filters.sortOrder) === "DESC" ? "ASC" : "DESC",
@@ -28988,7 +28974,7 @@ var LearningStrategyDialog = function LearningStrategyDialog(props) {
   };
 
   React.useEffect(function () {
-    !isPlp && (getLearningStrategiesData === null || getLearningStrategiesData === void 0 ? void 0 : getLearningStrategiesData());
+    getLearningStrategiesData === null || getLearningStrategiesData === void 0 ? void 0 : getLearningStrategiesData();
   }, [filters]);
   return React__default.createElement(core.Dialog, {
     onClose: function onClose() {
@@ -29014,38 +29000,6 @@ var LearningStrategyDialog = function LearningStrategyDialog(props) {
     item: true,
     className: "" + styles$a["gr-action"]
   }, React__default.createElement(core.Grid, {
-    className: "" + styles$a["gr-date-time"]
-  }, React__default.createElement(pickers.MuiPickersUtilsProvider, {
-    utils: MomentUtils
-  }, React__default.createElement(pickers.KeyboardDatePicker, {
-    inputVariant: "outlined",
-    format: "Do MMM YYYY",
-    id: "date-picker-inline",
-    label: "From",
-    className: "" + styles$a["date-time"],
-    value: filters === null || filters === void 0 ? void 0 : filters.startDate,
-    onChange: function onChange(e) {
-      return handleChangeStartDate(e);
-    },
-    KeyboardButtonProps: {
-      "aria-label": "change date"
-    },
-    maxDate: (filters === null || filters === void 0 ? void 0 : filters.endDate) || ""
-  }), React__default.createElement(pickers.KeyboardDatePicker, {
-    minDate: (filters === null || filters === void 0 ? void 0 : filters.startDate) || "",
-    inputVariant: "outlined",
-    format: "Do MMM YYYY",
-    id: "time-picker",
-    label: "To",
-    className: "" + styles$a["date-time"],
-    value: filters === null || filters === void 0 ? void 0 : filters.endDate,
-    onChange: function onChange(e) {
-      return handleChangeEndDate(e);
-    },
-    KeyboardButtonProps: {
-      "aria-label": "change date"
-    }
-  }))), React__default.createElement(core.Grid, {
     className: "" + styles$a["search-input"]
   }, React__default.createElement(core.Grid, {
     className: "" + styles$a["search-input-icon"]
@@ -29147,6 +29101,14 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
       open = _useState[0],
       setOpen = _useState[1];
 
+  var _useState2 = React.useState(false),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var handleChange = function handleChange() {
+    setExpanded(!expanded);
+  };
+
   var handleToggleDialog = function handleToggleDialog() {
     setOpen(!open);
   };
@@ -29188,8 +29150,12 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
     changeFilters: changeFiltersLearningStrategiesData,
     getLearningStrategiesData: getLearningStrategiesData,
     isPlp: isPlp
-  }), React__default.createElement(core.Accordion, null, React__default.createElement(core.AccordionSummary, {
-    expandIcon: React__default.createElement(ExpandMoreIcon, null),
+  }), React__default.createElement(core.Accordion, {
+    expanded: expanded
+  }, React__default.createElement(core.AccordionSummary, {
+    expandIcon: React__default.createElement(ExpandMoreIcon, {
+      onClick: handleChange
+    }),
     "aria-controls": "panel1a-content",
     id: "panel1a-header"
   }, React__default.createElement("div", {
@@ -29198,7 +29164,7 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
     className: "" + styles$9["block-header-name"]
   }, React__default.createElement("p", {
     className: "" + styles$9["title-chart"]
-  }, "Top Learning Strategies"), !isPlp && React__default.createElement("div", {
+  }, "Top Learning Strategies"), React__default.createElement("div", {
     className: "" + styles$9["expand-option"]
   }, React__default.createElement(core.IconButton, {
     onClick: handleClick,
@@ -29233,6 +29199,15 @@ var TopLearningStrategy = function TopLearningStrategy(_ref) {
 var BubbleChartCustom = function BubbleChartCustom(_ref) {
   var data = _ref.data,
       isPlp = _ref.isPlp;
+
+  var _React$useState = React__default.useState(true),
+      expanded = _React$useState[0],
+      setExpanded = _React$useState[1];
+
+  var handleChange = function handleChange() {
+    setExpanded(!expanded);
+  };
+
   var history = reactRouterDom.useHistory();
 
   var redirectStudentOverview = function redirectStudentOverview(studentId) {
@@ -29249,9 +29224,11 @@ var BubbleChartCustom = function BubbleChartCustom(_ref) {
   return React__default.createElement("div", {
     className: "" + styles$9["size-100"]
   }, React__default.createElement(core.Accordion, {
-    defaultExpanded: true
+    expanded: expanded
   }, React__default.createElement(core.AccordionSummary, {
-    expandIcon: React__default.createElement(ExpandMoreIcon, null),
+    expandIcon: React__default.createElement(ExpandMoreIcon, {
+      onClick: handleChange
+    }),
     "aria-controls": "panel1a-content",
     id: "panel1a-header"
   }, React__default.createElement("div", {
@@ -29418,7 +29395,7 @@ var ChoiceChartType = function ChoiceChartType(_ref) {
       typeChart = _ref$typeChart === void 0 ? [TYPECHART.BAR] : _ref$typeChart,
       options = _ref.options;
   return React__default.createElement("div", {
-    className: "d-flex align-items-center d-inline-block pr-4"
+    className: "d-flex align-items-center d-inline-block"
   }, React__default.createElement("div", {
     className: "d-flex align-items-center px-2 " + styles$9["checkbox-chart"]
   }, React__default.createElement("div", {
@@ -29442,7 +29419,7 @@ var ChoiceChartType = function ChoiceChartType(_ref) {
       cursor: "pointer"
     }
   }, "Ridge charts"))), React__default.createElement("div", {
-    className: "d-inline-block px-2  " + styles$9["checkbox-chart"]
+    className: "d-inline-block " + styles$9["checkbox-chart"]
   }, React__default.createElement("div", {
     className: "pr-4 d-flex align-items-center",
     onClick: function onClick() {
@@ -29482,6 +29459,15 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
       isHiddenLabel = _ref.isHiddenLabel,
       _ref$isClassReflectio = _ref.isClassReflectionChart,
       isClassReflectionChart = _ref$isClassReflectio === void 0 ? false : _ref$isClassReflectio;
+
+  var _React$useState = React__default.useState(false),
+      expanded = _React$useState[0],
+      setExpanded = _React$useState[1];
+
+  var handleChange = function handleChange() {
+    setExpanded(!expanded);
+  };
+
   if (!data) return React__default.createElement("div", {
     className: "flex justify-content-center align-items-center",
     style: {
@@ -29491,8 +29477,12 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
   return React__default.createElement("div", {
     key: name,
     className: " " + styles$9["size-100"]
-  }, React__default.createElement(core.Accordion, null, React__default.createElement(core.AccordionSummary, {
-    expandIcon: React__default.createElement(ExpandMoreIcon, null),
+  }, React__default.createElement(core.Accordion, {
+    expanded: expanded
+  }, React__default.createElement(core.AccordionSummary, {
+    expandIcon: React__default.createElement(ExpandMoreIcon, {
+      onClick: handleChange
+    }),
     "aria-controls": "panel1a-content",
     id: "panel1a-header",
     style: {
@@ -29502,15 +29492,13 @@ var ColumnChartAndPercent = function ColumnChartAndPercent(_ref) {
     className: "" + styles$9["block-header-chart"]
   }, React__default.createElement("p", {
     className: "" + styles$9["title-chart"]
-  }, name))), React__default.createElement(core.AccordionDetails, null, React__default.createElement("div", {
-    className: "" + styles$9["column-chart-percent"]
-  }, React__default.createElement("div", {
-    className: "" + styles$9["filter-date"]
-  }, React__default.createElement(ChoiceChartType, {
+  }, name), expanded && React__default.createElement(ChoiceChartType, {
     onChangeChart: onChangeChart,
     options: optionType,
     typeChart: typeChart
-  })), !isHiddenLabel && React__default.createElement("div", {
+  }))), React__default.createElement(core.AccordionDetails, null, React__default.createElement("div", {
+    className: "" + styles$9["column-chart-percent"]
+  }, !isHiddenLabel && React__default.createElement("div", {
     className: "" + styles$9["listItem"]
   }, data.map(function (month, index) {
     return React__default.createElement("div", {
@@ -29916,7 +29904,7 @@ var Overview = function Overview(props) {
   }, React__default.createElement("div", {
     className: "" + styles$7["date-time-box"]
   }, React__default.createElement("div", {
-    className: "" + styles$7["date-time-start"]
+    className: styles$7["date-time-start"] + " date-picker-overview"
   }, React__default.createElement("p", {
     className: "" + styles$7["text"]
   }, "From"), React__default.createElement(pickers.KeyboardDatePicker, {
@@ -29931,14 +29919,15 @@ var Overview = function Overview(props) {
     KeyboardButtonProps: {
       "aria-label": "change date"
     },
-    minDate: filterDateChart.startDate,
+    minDate: moment(filterDateChart.endDate).subtract(4, 'months').valueOf(),
     maxDate: filterDateChart.endDate
   })), React__default.createElement("div", {
-    className: "" + styles$7["date-time-end"]
+    className: styles$7["date-time-end"] + " date-picker-overview"
   }, React__default.createElement("p", {
     className: "" + styles$7["text"]
   }, "To"), React__default.createElement(pickers.KeyboardDatePicker, {
     minDate: filterDateChart.startDate || null,
+    maxDate: moment(filterDateChart.startDate).add(4, 'months').valueOf(),
     inputVariant: "outlined",
     format: "Do MMM YYYY",
     id: "time-picker",
@@ -31231,7 +31220,7 @@ var Conferences = function Conferences() {
   var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   var open = React.useCallback(function (row) {
     var studentId = row.studentId;
-    var url = !row.isDone ? "/start-conference/" + studentId + "/" + row.id + "/conferenceRubric" : "/result-conference/" + studentId + "/" + row.id + "/conferenceRubric";
+    var url = !row.isTeacherDone ? "/start-conference/" + studentId + "/" + row.id + "/conferenceRubric" : "/result-conference/" + studentId + "/" + row.id + "/conferenceRubric";
     history.push(url);
   }, [isTeacher]);
   return React__default.createElement(core.Grid, {
@@ -31421,7 +31410,7 @@ var Conferences = function Conferences() {
     }, !!row.gradeLevel && (row === null || row === void 0 ? void 0 : row.gradeLevel)), React__default.createElement(core.TableCell, {
       align: "left",
       className: "" + styles$c["row_grade"]
-    }, row !== null && row !== void 0 && row.isDone ? React__default.createElement("div", {
+    }, row !== null && row !== void 0 && row.isTeacherDone ? React__default.createElement("div", {
       className: styles$c["done"] + " " + styles$c["request"]
     }, "Done") : React__default.createElement("div", {
       className: styles$c["missed"] + " " + styles$c["request"]
@@ -31430,7 +31419,7 @@ var Conferences = function Conferences() {
       className: "" + styles$c["row_type"]
     }, React__default.createElement("div", {
       className: styles$c["duration"] + " " + styles$c["request"]
-    }, !!row.finalScore ? row === null || row === void 0 ? void 0 : row.finalScore : ""), !row.isEditConference && !row.isDone && React__default.createElement(core.Button, {
+    }, !!row.finalScore ? row === null || row === void 0 ? void 0 : row.finalScore : ""), !row.isEditConference && !row.isTeacherDone && React__default.createElement(core.Button, {
       variant: "contained",
       color: "primary",
       disableElevation: true,
@@ -40383,7 +40372,7 @@ var BookSessionConferences = function BookSessionConferences() {
   };
 
   React.useEffect(function () {
-    document.title = "Book conferences";
+    document.title = "Book conference";
   });
   var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   return React__default.createElement(core.Grid, null, screenWidth > 600 ? React__default.createElement(core.Grid, {
@@ -40471,7 +40460,7 @@ var BookSessionConferences = function BookSessionConferences() {
       fontSize: "18px",
       fontWeight: 500
     }
-  }, "Book Conferences"), React__default.createElement(InsertInvitationIcon, null)))))), React__default.createElement(core.Grid, {
+  }, "Book Conference"), React__default.createElement(InsertInvitationIcon, null)))))), React__default.createElement(core.Grid, {
     item: true,
     xs: 1,
     style: {
@@ -40653,7 +40642,7 @@ var BookSessionConferences = function BookSessionConferences() {
       fontSize: "18px",
       fontWeight: 500
     }
-  }, "BOOK CONFERENCES"), React__default.createElement("i", {
+  }, "BOOK CONFERENCE"), React__default.createElement("i", {
     className: "fas fa-calendar-day",
     style: {
       fontSize: 18
@@ -59668,7 +59657,7 @@ var usePlpPage = function usePlpPage() {
       labelName = _useTopLearningStrate.labelName,
       usageCountList = _useTopLearningStrate.usageCountList;
 
-  var _useLearningStrategie = useLearningStrategies(student === null || student === void 0 ? void 0 : student.studentId),
+  var _useLearningStrategie = useLearningStrategies(student === null || student === void 0 ? void 0 : student.studentId, filterDate),
       learningStrategiesData = _useLearningStrategie.learningStrategiesData,
       filtersLearningStrategiesData = _useLearningStrategie.filtersLearningStrategiesData,
       changeFiltersLearningStrategiesData = _useLearningStrategie.changeFiltersLearningStrategiesData,
@@ -61816,7 +61805,7 @@ var useStudentList$2 = function useStudentList() {
   };
 };
 
-var styles$L = {"search-input":"_mB4S_","search-input-icon":"_2dOCb","inputInput":"_3LZHP","block-search":"_3ETqf","block-header":"_28w_g","header-content":"_MM65j","table-border":"_2l3wP","table-row":"_NhhUt","row_type":"_rp-5t","duration":"_3I1fi","request":"_2-rzs","avatar_user":"_1FxvF","table-cell":"_3flzL","list-student-desktop":"_2hSN6","list-student-mobile":"_1Uabb","item-right":"_3AfFZ","item":"_3pZDy","box-info":"_3osaq","item-name":"_cuqGm","box-edu":"_2r6Xx","box-container":"_3u2Hp"};
+var styles$L = {"search-input":"_mB4S_","search-input-icon":"_2dOCb","inputInput":"_3LZHP","block-search":"_3ETqf","block-header":"_28w_g","header-content":"_MM65j","table-border":"_2l3wP","table-row":"_NhhUt","row_type":"_rp-5t","duration":"_3I1fi","request":"_2-rzs","avatar_user":"_1FxvF","table-cell":"_3flzL","list-student-desktop":"_2hSN6","list-student-mobile":"_1Uabb","item-right":"_3AfFZ","item":"_3pZDy","box-info":"_3osaq","item-name":"_cuqGm","box-edu":"_2r6Xx","box-container":"_3u2Hp","student_name":"_3yRVo","box_name":"_3M1fw"};
 
 var DEFAULT_USER_AVATAR$t = "/images/image-default.png";
 var ListStudent = function ListStudent() {
@@ -61946,11 +61935,15 @@ var ListStudent = function ListStudent() {
       scope: "row",
       height: 80,
       className: "" + styles$L["row_name"]
+    }, React__default.createElement("div", {
+      className: "" + styles$L["box_name"]
     }, React__default.createElement("img", {
       src: !!(row !== null && row !== void 0 && row.profileImageFileName) ? marioCore.getFileUrl(row === null || row === void 0 ? void 0 : row.profileImageFileName) : DEFAULT_USER_AVATAR$t,
       alt: "",
       className: "" + styles$L["avatar_user"]
-    }), row.fullName), React__default.createElement(core.TableCell, {
+    }), React__default.createElement(core.Typography, {
+      className: "" + styles$L["student_name"]
+    }, row.fullName))), React__default.createElement(core.TableCell, {
       component: "th",
       scope: "row",
       height: 80,