Frontend Release to Main [4.96]

.husky/pre-push

@@ -25,6 +25,12 @@ if [ -z "$changed_files" ]; then
   exit 0
 fi
 
+# Skip checks if any outgoing commit is a merge commit
+if git log @{upstream}..HEAD --merges --oneline | grep -q .; then
+  echo "ℹ️  Outgoing commits include a merge commit. Skipping lint/test checks."
+  exit 0
+fi
+
 if ! printf '%s\n' "$changed_files" | grep -qvE '^\.husky/'; then
   echo "ℹ️  Only Husky hook changes detected. Skipping full test and lint checks."
   exit 0

.stylelintrc

@@ -6,12 +6,22 @@
     "node_modules/**/*.css"
   ],
   "rules": {
-    "no-duplicate-selectors": true,
+    "no-duplicate-selectors": [true, {
+      "disallowInList": false
+    }],
     "selector-pseudo-class-no-unknown": [
       true,
       { "ignorePseudoClasses": ["global", "local"] }
     ],
     "selector-class-pattern": null,
     "selector-id-pattern": null
-  }
-}
+  },
+  "overrides": [
+    {
+      "files": ["**/*.module.css"],
+      "rules": {
+        "no-duplicate-selectors": null
+      }
+    }
+  ]
+}

package.json

@@ -8,8 +8,9 @@
   },
   "private": true,
   "dependencies": {
-    "@ant-design/charts": "^2.6.4", 
+    "@ant-design/charts": "^2.6.4",
     "@ant-design/icons": "^6.0.1",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
     "@babel/runtime": "^7.27.6",
     "@babel/runtime-corejs3": "^7.27.6",
     "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
@@ -32,7 +33,7 @@
     "@tanstack/react-query": "^5.91.0",
     "@tinymce/miniature": "^6.0.0",
     "@tinymce/tinymce-react": "^6.1.0",
-    "ajv": "^8.18.0",
+    "ajv": "^8.0.0",
     "ajv-keywords": "^5.1.0",
     "ant-design": "^1.0.0",
     "antd": "^5.29.3",
@@ -54,8 +55,8 @@
     "date-fns": "^2.14.0",
     "date-fns-tz": "^2.0.1",
     "dayjs": "^1.11.13",
-    "diff": "^8.0.3",
-    "dompurify": "^3.3.2",
+    "diff": "^5.0.0",
+    "dompurify": "^3.2.5",
     "elliptic": "^6.6.1",
     "font-awesome": "^4.7.0",
     "fs-extra": "^11.3.0",
@@ -133,7 +134,8 @@
     "util": "^0.12.5",
     "uuid": "^9.0.1",
     "validator": "^13.15.26",
-    "webpack": "^5.104.1"
+    "webpack": "^5.104.1",
+    "xlsx": "^0.18.5"
   },
   "resolutions": {
     "react": "18.3.1",
@@ -164,7 +166,6 @@
     "@babel/core": "^7.28.0",
     "@babel/eslint-parser": "^7.28.0",
     "@babel/helper-validator-identifier": "^7.12.11",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
     "@babel/plugin-transform-optional-chaining": "^7.27.1",
     "@babel/plugin-transform-private-property-in-object": "^7.21.11",
@@ -180,13 +181,10 @@
     "@types/html-to-pdfmake": "^2.4.4",
     "@types/pdfmake": "^0.2.11",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
-    "@typescript-eslint/parser": "^8.44.1",
     "@vitejs/plugin-react": "^4.5.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "babel-jest": "^29.7.0",
-    "baseline-browser-mapping": "^2.9.17",
     "cross-env": "^5.2.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^5.1.0",
@@ -198,12 +196,10 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-testing-library": "^7.11.0",
     "eslint-plugin-vitest": "^0.5.4",
-    "husky": "^9.1.7",
-    "jest-environment-jsdom": "^30.0.5",
+    "husky": "^7.0.4",
     "joi-browser": "^13.4.0",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.1.5",
-    "mdn-data": "^2.26.0",
     "msw": "^2.10.4",
     "prettier": "^1.19.1",
     "redux-mock-store": "^1.5.4",
@@ -221,8 +217,5 @@
       "prettier --write"
     ],
     "**/*.{css,scss,sass}": "stylelint"
-  },
-  "optionalDependencies": {
-    "@rollup/rollup-darwin-arm64": "^4.54.0"
   }
 }

public/index.css → public/index.module.css

@@ -409,7 +409,7 @@ body .email-template-list .action-btn.info-btn {
 /* Fix edit button - orange */
 body .email-template-list .action-btn.edit-btn {
   background-color: #fd7e14 !important;
-  color: #ffffff !important;
+  color: #000 !important;
   border-color: #fd7e14 !important;
 }
 

src/App.module.css

@@ -24,13 +24,7 @@ button {
   background-color: #fff;
 }
 
-html {
-  background-color: #1a1d23 !important;
-}
 
-body {
-  background-color: #1a1d23 !important;
-}
 
 /* Dark mode override for #root */
 body.dark-mode #root,
@@ -301,4 +295,14 @@ body.dark-mode .text-light {
 /* Override ANY inline styles */
 body.dark-mode [style*="background"] {
   background-color: #1a1d23 !important;
+}
+
+tr.dark-leaderboard-row:hover,
+tr.dark-leaderboard-row:hover td,
+tr.dark-leaderboard-row:hover th,
+tr.dark-leaderboard-row:hover span,
+tr.dark-leaderboard-row:hover p,
+tr.dark-leaderboard-row:hover a {
+  background-color: #fff !important;
+  color: #000 !important;
 }

src/actions/bmdashboard/lessonsAction.js

@@ -45,13 +45,20 @@ export const setLessons = payload => {
   };
 };
 
+// A valid MongoDB ObjectId is a 24-character hex string. Lesson author/project
+// fields sometimes hold display names (e.g. "James", "project 1") instead of
+// real references; skip those so we don't fire doomed 404/500/400 requests.
+const isObjectId = id => typeof id === 'string' && /^[0-9a-fA-F]{24}$/.test(id);
+
 export const fetchBMLessons = () => {
   return async dispatch => {
     try {
       const response = await axios.get(ENDPOINTS.BM_LESSONS);
       const lessons = response.data;
-      const authorIds = [...new Set(lessons.map(lesson => lesson.author))];
-      const projectIds = [...new Set(lessons.map(lesson => lesson.relatedProject))];
+      const authorIds = [...new Set(lessons.map(lesson => lesson.author).filter(isObjectId))];
+      const projectIds = [
+        ...new Set(lessons.map(lesson => lesson.relatedProject).filter(isObjectId)),
+      ];
 
       // Keep the more robust approach from honglin-lesson-list-buttons branch
       const [authorProfiles, projectDetails] = await Promise.all([
@@ -129,10 +136,11 @@ export const fetchSingleBMLesson = lessonId => {
       const response = await axios.get(url);
       const lesson = response.data;
 
-      // Fetch user profile and project details concurrently
+      // Fetch user profile and project details concurrently, but only when the
+      // stored values are real ObjectIds (not display names like "project 1").
       const [projectDetails, userProfile] = await Promise.all([
-        dispatch(fetchProjectById(lesson.relatedProject)),
-        dispatch(getUserProfile(lesson.author)),
+        isObjectId(lesson.relatedProject) ? dispatch(fetchProjectById(lesson.relatedProject)) : null,
+        isObjectId(lesson.author) ? dispatch(getUserProfile(lesson.author)) : null,
       ]);
 
       // Update the lesson with author and project details

src/actions/warnings.js

@@ -9,6 +9,7 @@ import {
   postNewWarning as postNewWarningAction,
   deleteWarningDescription as deleteWarningDescriptionAction,
   updateWarningDescription as updateWarningDescriptionAction,
+  reorderWarningDescriptions as reorderWarningDescriptionsAction,
   editWarningDescription as editWarningDescriptionAction,
 } from '../constants/warning';
 
@@ -163,3 +164,18 @@ export const updateWarningDescription = warningDescriptionId => {
     }
   };
 };
+
+export const reorderWarningDescriptions = warningDescriptions => {
+  const url = ENDPOINTS.REORDER_WARNING_DESCRIPTIONS(warningDescriptions);
+
+  return async dispatch => {
+    try {
+      const res = await axios.put(url, { warningDescriptions });
+      const response = await dispatch(reorderWarningDescriptionsAction(res.data));
+
+      return response.payload;
+    } catch (error) {
+      return { error: error.message };
+    }
+  };
+};

src/components/BMDashboard/Issue/Issue.jsx

@@ -5,6 +5,7 @@ import { useHistory, useParams } from 'react-router-dom';
 import axios from 'axios';
 import { ENDPOINTS } from '../../../utils/URL';
 import styles from './Issue.module.css';
+import { useSelector } from 'react-redux';
 
 function Issue() {
   const ISSUE_FORM_HEADER = 'ISSUE LOG';
@@ -41,6 +42,8 @@ function Issue() {
 
   const otherOption = ['Other'];
 
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   const [formData, setFormData] = useState({
     issueDate: '',
     dropdown: defaultOption,
@@ -222,7 +225,9 @@ function Issue() {
   }, []);
 
   return (
-    <div className={`${styles.issueFormContainer}`}>
+    <div
+      className={darkMode ? `${styles.darkModeIssueFormContainer}` : `${styles.issueFormContainer}`}
+    >
       <h4 className={`${styles.issueTitleText}`}>{ISSUE_FORM_HEADER}</h4>
       <Form>
         <FormGroup>

src/components/BMDashboard/Issue/Issue.module.css

@@ -1,7 +1,13 @@
 /* stylelint-disable  */
 .issueFormContainer {
   margin: 0 auto;
-  max-width: 625px;
+  width: 100%;
+  padding: 5px;
+  background-color: white;
+}
+
+.darkModeIssueFormContainer{
+  color: white;
 }
 
 .redText {