Sireesha taking over for Linh - Add multi-select and bulk actions to Materials table

.husky/pre-commit

@@ -3,7 +3,7 @@
 export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 # Use Node 20 if available (or install if needed)
-if [ -f .nvmrc ]; then
+if command -v nvm >/dev/null 2>&1 && [ -f .nvmrc ]; then
   nvm use 20 2>/dev/null || nvm install 20 && nvm use 20
 fi
 

src/actions/bmdashboard/materialsActions.js

@@ -158,6 +158,23 @@ export const postMaterialUpdateBulk = payload => {
   };
 };
 
+export const postMaterialsBulkAction = async payload => {
+  try {
+    const res = await axios.post(ENDPOINTS.BM_MATERIALS_BULK_ACTIONS, payload);
+    return res.data;
+  } catch (err) {
+    // The backend sends error bodies as plain strings (e.g. 'Invalid bulk action.')
+    // as well as { message } objects, so normalise both into a single Error.
+    const resData = err.response?.data;
+    const message =
+      (typeof resData === 'string' && resData) ||
+      resData?.message ||
+      err.message ||
+      'Bulk action request failed.';
+    throw new Error(message);
+  }
+};
+
 export const purchaseMaterial = async body => {
   return axios
     .post(ENDPOINTS.BM_MATERIALS, body)

src/components/BMDashboard/ItemList/ItemListView.module.css

@@ -213,6 +213,10 @@
   display: flex;
   align-items: center;
   gap: 6px;
+
+  /* Wrap instead of overflowing so the next/last-page buttons stay reachable on narrow screens. */
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .pageButtons button {
@@ -245,7 +249,7 @@
   color: #e8edf4;
   background-color: #0d1117 !important;
 
 /*   color: #fff !important; */
   min-height: 100vh;
   padding-bottom: 2rem;
 }
@@ -426,7 +430,7 @@
 
 .darkDatePicker :global(.react-datepicker__time-list-item--selected) {
   background-color: #468ef9 !important;
   color: #fff !important;
 }
 
 .darkDatePickerPopper .react-datepicker__triangle {
@@ -466,7 +470,7 @@
 .lightDatePicker .react-datepicker__day--keyboard-selected,
 .lightDatePicker .react-datepicker__time-list-item--selected {
   background-color: #468ef9 !important;
   color: #fff !important;
 }
 
 .lightDatePicker .react-datepicker__time-container {
@@ -567,3 +571,152 @@
     min-width: 0;
   }
 }
+
+.bulkActionsContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 10px 15px;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.bulkActionsButton {
+  background-color: #1565c0;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.bulkActionsButton:hover {
+  background-color: #0d4ea8;
+}
+
+.bulkActionsButton:disabled {
+  background-color: #9aa6b2;
+  cursor: not-allowed;
+}
+
+.selectedCount {
+  font-weight: bold;
+  color: #495057;
+}
+
+.selectedRow {
+  background-color: #e3f2fd !important;
+}
+
+.selectedRow:hover {
+  background-color: #bbdefb !important;
+}
+
+.bulkStatusCell {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.bulkTagHold,
+.bulkTagReviewed,
+.bulkTagNote,
+.bulkTagNone {
+  font-size: 0.72rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.bulkTagHold {
+  background: #fff4e5;
+  color: #a44900;
+  border: 1px solid #ffcf99;
+}
+
+.bulkTagReviewed {
+  background: #e8f7ef;
+  color: #106c3f;
+  border: 1px solid #b8e6cb;
+}
+
+.bulkTagNote {
+  background: #eaf1ff;
+  color: #1f4ba8;
+  border: 1px solid #c5d6ff;
+}
+
+.bulkTagNone {
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #d8e0e8;
+}
+
+.darkBulkActions {
+  background-color: #2f4157;
+  border: 1px solid #3f5269;
+  color: #e8edf4;
+}
+
+.darkBulkActions .selectedCount {
+  color: #e8edf4;
+}
+
+.darkTable .selectedRow {
+  background-color: #3f5269 !important;
+}
+
+.darkTable .selectedRow:hover {
+  background-color: #4a5f7a !important;
+}
+
+.darkTable .bulkTagHold {
+  background: #5a3a12;
+  color: #ffd8a6;
+  border-color: #7a4b1a;
+}
+
+.darkTable .bulkTagReviewed {
+  background: #0f4a34;
+  color: #b7f7d7;
+  border-color: #166848;
+}
+
+.darkTable .bulkTagNote {
+  background: #203a69;
+  color: #d3e3ff;
+  border-color: #2d4f89;
+}
+
+.darkTable .bulkTagNone {
+  background: #334155;
+  color: #d1dae7;
+  border-color: #41556f;
+}
+
+/* Keep the Bulk Actions dropdown menu dark; otherwise reactstrap renders a light
+   menu with a light-gray hover that clashes with the dark toolbar. */
+.darkBulkActions :global(.dropdown-menu) {
+  background-color: #2f4157;
+  border: 1px solid #3f5269;
+}
+
+.darkBulkActions :global(.dropdown-item) {
+  color: #e8edf4;
+}
+
+.darkBulkActions :global(.dropdown-item:hover),
+.darkBulkActions :global(.dropdown-item:focus) {
+  background-color: #3f5269;
+  color: #fff;
+}
+
+.darkBulkActions :global(.dropdown-divider) {
+  border-top-color: #3f5269;
+}