From 3457dfd86c4eabfd2b12b3529c5860996af89b5e Mon Sep 17 00:00:00 2001
From: Adithya Cherukuri <adithyacherukuri@gmail.com>
Date: Fri, 22 May 2026 18:12:57 -0400
Subject: [PATCH 1/3] fix: resolve ItemsTable crash and re-apply Consumables
 table usability features

---
 .../BMDashboard/ItemList/ItemListView.jsx     |   1 +
 .../BMDashboard/ItemList/ItemsTable.jsx       | 133 ++++++++++++------
 .../ItemList/RecordsModal.module.css          |   5 +
 .../BMDashboard/ItemList/SelectItem.jsx       |  77 ++++++++--
 4 files changed, 158 insertions(+), 58 deletions(-)

diff --git a/src/components/BMDashboard/ItemList/ItemListView.jsx b/src/components/BMDashboard/ItemList/ItemListView.jsx
index 118146a9f5..53c423260d 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.jsx
+++ b/src/components/BMDashboard/ItemList/ItemListView.jsx
@@ -253,6 +253,7 @@ export function ItemListView({
             UpdateItemModal={UpdateItemModal}
             dynamicColumns={dynamicColumns}
             darkMode={darkMode}
+            itemType={itemType}
             sortConfig={sortConfig}
             onSort={handleSort}
             totalItems={totalItems}
diff --git a/src/components/BMDashboard/ItemList/ItemsTable.jsx b/src/components/BMDashboard/ItemList/ItemsTable.jsx
index 278962e77f..74ce83933b 100644
--- a/src/components/BMDashboard/ItemList/ItemsTable.jsx
+++ b/src/components/BMDashboard/ItemList/ItemsTable.jsx
@@ -1,25 +1,17 @@
 import { useState } from 'react';
-import { Table, Button } from 'reactstrap';
+import { Table, Button, Badge } from 'reactstrap';
 import { BiPencil } from 'react-icons/bi';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortDown, faSort, faSortUp } from '@fortawesome/free-solid-svg-icons';
 import RecordsModal from './RecordsModal';
+import styles from './ItemListView.module.css';
 
 const rowsPerPageOptions = [25, 50, 100];
 
 function generatePageNumbers(current, total) {
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, i) => i + 1);
-  }
-
-  if (current <= 3) {
-    return [1, 2, 3, 4, 5, '...', total];
-  }
-
-  if (current >= total - 2) {
-    return [1, '...', total - 4, total - 3, total - 2, total - 1, total];
-  }
-
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  if (current <= 3) return [1, 2, 3, 4, 5, '...', total];
+  if (current >= total - 2) return [1, '...', total - 4, total - 3, total - 2, total - 1, total];
   return [1, '...', current - 1, current, current + 1, '...', total];
 }
 
@@ -30,6 +22,7 @@ export default function ItemsTable({
   UpdateItemModal,
   dynamicColumns,
   darkMode = false,
+  itemType,
   sortConfig,
   onSort,
   totalItems,
@@ -60,9 +53,8 @@ export default function ItemsTable({
     setRecordType(type);
   };
 
-  const getNestedValue = (obj, path) => {
-    return path.split('.').reduce((acc, part) => (acc ? acc[part] : null), obj);
-  };
+  const getNestedValue = (obj, path) =>
+    path.split('.').reduce((acc, part) => (acc ? acc[part] : null), obj);
 
   const getIconFor = key => {
     if (!sortConfig?.key || sortConfig.key !== key) return faSort;
@@ -77,6 +69,28 @@ export default function ItemsTable({
     Hold: 'hold',
   };
 
+  const numericKeys = ['stockBought', 'stockUsed', 'stockAvailable', 'stockWasted'];
+
+  const headerStyle = (key, isAction = false) => {
+    const base = { verticalAlign: 'middle' };
+    if (numericKeys.includes(key)) base.textAlign = 'right';
+    if (isAction) {
+      base.borderLeft = '2px solid #dee2e6';
+      base.textAlign = 'center';
+    }
+    return base;
+  };
+
+  const cellStyle = (key, isAction = false) => {
+    const base = { verticalAlign: 'middle' };
+    if (numericKeys.includes(key)) base.textAlign = 'right';
+    if (isAction) {
+      base.borderLeft = '2px solid #dee2e6';
+      base.textAlign = 'center';
+    }
+    return base;
+  };
+
   return (
     <>
       <RecordsModal
@@ -93,47 +107,81 @@ export default function ItemsTable({
         <Table className={darkMode ? styles.darkTable : ''}>
           <thead className={styles.stickyThead}>
             <tr>
-              <th onClick={() => onSort?.('project')} className={styles.sortableTh}>
+              <th
+                onClick={() => onSort?.('project')}
+                className={styles.sortableTh}
+                style={{ verticalAlign: 'middle' }}
+              >
                 Project <FontAwesomeIcon icon={getIconFor('project')} size="lg" />
               </th>
-
-              <th onClick={() => onSort?.('name')} className={styles.sortableTh}>
+              <th
+                onClick={() => onSort?.('name')}
+                className={styles.sortableTh}
+                style={{ verticalAlign: 'middle' }}
+              >
                 Name <FontAwesomeIcon icon={getIconFor('name')} size="lg" />
               </th>
-
-              {dynamicColumns.map(({ label }) => {
+              {dynamicColumns.map(({ label, key }) => {
                 const sortKey = dynamicSortKeyByLabel[label];
                 const clickable = Boolean(sortKey);
-
                 return (
                   <th
                     key={label}
                     onClick={clickable ? () => onSort?.(sortKey) : undefined}
                     className={clickable ? styles.sortableTh : undefined}
+                    style={headerStyle(key)}
                   >
                     {label} {clickable && <FontAwesomeIcon icon={getIconFor(sortKey)} size="lg" />}
                   </th>
                 );
               })}
-
-              <th>Usage Record</th>
-              <th>Updates</th>
-              <th>Purchases</th>
+              <th style={headerStyle(null, true)} title="View usage history and charts">
+                Usage Record
+              </th>
+              <th
+                style={{ verticalAlign: 'middle', textAlign: 'center' }}
+                title="View history of manual updates"
+              >
+                Updates
+              </th>
+              <th
+                style={{ verticalAlign: 'middle', textAlign: 'center' }}
+                title="View procurement history"
+              >
+                Purchases
+              </th>
             </tr>
           </thead>
-
           <tbody>
             {filteredItems && filteredItems.length > 0 ? (
               filteredItems.map(el => (
                 <tr key={el._id}>
-                  <td>{el.project?.name}</td>
-                  <td>{el.itemType?.name}</td>
-
-                  {dynamicColumns.map(({ label, key }) => (
-                    <td key={label}>{getNestedValue(el, key)}</td>
-                  ))}
-
-                  <td className={`${styles.itemsCell}`}>
+                  <td style={{ verticalAlign: 'middle' }}>{el.project?.name}</td>
+                  <td style={{ verticalAlign: 'middle' }}>{el.itemType?.name}</td>
+                  {dynamicColumns.map(({ label, key }) => {
+                    const value = getNestedValue(el, key);
+                    if (key === 'stockAvailable' && Number(value) < 10) {
+                      return (
+                        <td key={label} style={cellStyle(key)}>
+                          <Badge
+                            color="danger"
+                            pill
+                            className="me-2"
+                            style={{ marginRight: '8px' }}
+                          >
+                            Low
+                          </Badge>
+                          {value}
+                        </td>
+                      );
+                    }
+                    return (
+                      <td key={label} style={cellStyle(key)}>
+                        {value}
+                      </td>
+                    );
+                  })}
+                  <td className={styles.itemsCell} style={cellStyle(null, true)}>
                     <button
                       type="button"
                       onClick={() => handleEditRecordsClick(el, 'UsageRecord')}
@@ -150,8 +198,10 @@ export default function ItemsTable({
                       View
                     </Button>
                   </td>
-
-                  <td className={`${styles.itemsCell}`}>
+                  <td
+                    className={styles.itemsCell}
+                    style={{ verticalAlign: 'middle', textAlign: 'center' }}
+                  >
                     <button
                       type="button"
                       onClick={() => handleEditRecordsClick(el, 'Update')}
@@ -168,8 +218,7 @@ export default function ItemsTable({
                       View
                     </Button>
                   </td>
-
-                  <td>
+                  <td style={{ verticalAlign: 'middle', textAlign: 'center' }}>
                     <Button
                       color="primary"
                       outline
@@ -206,16 +255,13 @@ export default function ItemsTable({
             ))}
           </select>
         </div>
-
         <div className={styles.rangeInfo}>
           {startRow}-{endRow} of {totalItems}
         </div>
-
         <div className={styles.pageButtons}>
           <button type="button" onClick={() => onPageChange?.(1)} disabled={currentPage === 1}>
             {'<<'}
           </button>
-
           <button
             type="button"
             onClick={() => onPageChange?.(currentPage - 1)}
@@ -223,7 +269,6 @@ export default function ItemsTable({
           >
             {'<'}
           </button>
-
           {generatePageNumbers(currentPage, totalPages).map((p, idx) =>
             typeof p === 'number' ? (
               <button
@@ -241,7 +286,6 @@ export default function ItemsTable({
               </span>
             ),
           )}
-
           <button
             type="button"
             onClick={() => onPageChange?.(currentPage + 1)}
@@ -249,7 +293,6 @@ export default function ItemsTable({
           >
             {'>'}
           </button>
-
           <button
             type="button"
             onClick={() => onPageChange?.(totalPages)}
diff --git a/src/components/BMDashboard/ItemList/RecordsModal.module.css b/src/components/BMDashboard/ItemList/RecordsModal.module.css
index f35ff92ca2..bb8564ee8d 100644
--- a/src/components/BMDashboard/ItemList/RecordsModal.module.css
+++ b/src/components/BMDashboard/ItemList/RecordsModal.module.css
@@ -128,3 +128,8 @@
   color: #e6a800;
   font-weight: bold;
 }
+
+.darkTable .stickyThead th {
+  background-color: #2f4157;
+  border-bottom: 1px solid #3f5269;
+}
diff --git a/src/components/BMDashboard/ItemList/SelectItem.jsx b/src/components/BMDashboard/ItemList/SelectItem.jsx
index 5a501b3eac..3897ea7196 100644
--- a/src/components/BMDashboard/ItemList/SelectItem.jsx
+++ b/src/components/BMDashboard/ItemList/SelectItem.jsx
@@ -5,27 +5,66 @@ export default function SelectItem({
   selectedProject,
   selectedItem,
   setSelectedItem,
+  selectedToolStatus,
+  setSelectedToolStatus,
+  selectedCondition,
+  setSelectedCondition,
   label,
   darkMode,
 }) {
   let itemSet = [];
-  if (items.length) {
-    if (selectedProject === 'all') {
-      itemSet = [...new Set(items.map(m => m.itemType?.name))];
+
+  if (items?.length) {
+    if (label === 'Consumables') {
+      if (selectedProject === 'all') {
+        itemSet = [...new Set(items.filter(m => m.name && m.name !== 'N/A').map(m => m.name))];
+      } else {
+        itemSet = [
+          ...new Set(
+            items
+              .filter(
+                mat => mat.project?.name === selectedProject && mat.name && mat.name !== 'N/A',
+              )
+              .map(m => m.name),
+          ),
+        ];
+      }
+    } else if (label === 'Tool Status') {
+      itemSet = ['Using', 'Available', 'Under Maintenance'];
+    } else if (label === 'Condition') {
+      if (selectedProject === 'all') {
+        itemSet = [...new Set(items.filter(m => m.condition).map(m => m.condition))];
+      } else {
+        itemSet = [
+          ...new Set(
+            items
+              .filter(mat => mat.project?.name === selectedProject && mat.condition)
+              .map(m => m.condition),
+          ),
+        ];
+      }
     } else {
-      itemSet = [
-        ...new Set(
-          items.filter(mat => mat.project?.name === selectedProject).map(m => m.itemType?.name),
-        ),
-      ];
+      if (selectedProject === 'all') {
+        itemSet = [...new Set(items.map(m => m.itemType?.name))];
+      } else {
+        itemSet = [
+          ...new Set(
+            items.filter(mat => mat.project?.name === selectedProject).map(m => m.itemType?.name),
+          ),
+        ];
+      }
     }
   }
 
+  const darkStyle = darkMode
+    ? { backgroundColor: '#1e293b', color: '#e5e7eb', borderColor: '#334155' }
+    : undefined;
+
   return (
     <Form>
       <FormGroup className="select_input">
         <Label
-          htmlFor="select-material"
+          htmlFor="select-item"
           style={{ marginLeft: '10px', color: darkMode ? 'white' : 'inherit' }}
         >
           {label ? `${label}:` : 'Material:'}
@@ -34,11 +73,23 @@ export default function SelectItem({
           id="select-item"
           name="select-item"
           type="select"
-          value={selectedItem}
-          onChange={e => setSelectedItem(e.target.value)}
-          disabled={!items.length}
+          value={
+            label === 'Condition'
+              ? selectedCondition
+              : label === 'Tool Status'
+              ? selectedToolStatus
+              : selectedItem
+          }
+          onChange={e => {
+            const val = e.target.value;
+            if (label === 'Tool Status') setSelectedToolStatus(val);
+            else if (label === 'Condition') setSelectedCondition(val);
+            else setSelectedItem(val);
+          }}
+          disabled={!itemSet.length}
+          style={darkStyle}
         >
-          {items.length ? (
+          {itemSet.length ? (
             <>
               <option value="all">All</option>
               {itemSet.map(name => (

From a73fe8fc3a2e20ac030fa0bfd12acb2d305e7239 Mon Sep 17 00:00:00 2001
From: Adithya Cherukuri <adithyacherukuri@gmail.com>
Date: Mon, 25 May 2026 13:00:22 -0400
Subject: [PATCH 2/3] fix: Sonarqubecloud issues

---
 .../BMDashboard/ItemList/ItemsTable.jsx       |  55 +++++---
 .../BMDashboard/ItemList/SelectItem.jsx       | 122 +++++++++++-------
 2 files changed, 113 insertions(+), 64 deletions(-)

diff --git a/src/components/BMDashboard/ItemList/ItemsTable.jsx b/src/components/BMDashboard/ItemList/ItemsTable.jsx
index 74ce83933b..5f106f8f07 100644
--- a/src/components/BMDashboard/ItemList/ItemsTable.jsx
+++ b/src/components/BMDashboard/ItemList/ItemsTable.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import PropTypes from 'prop-types';
 import { Table, Button, Badge } from 'reactstrap';
 import { BiPencil } from 'react-icons/bi';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -69,21 +70,11 @@ export default function ItemsTable({
     Hold: 'hold',
   };
 
-  const numericKeys = ['stockBought', 'stockUsed', 'stockAvailable', 'stockWasted'];
+  const numericKeys = new Set(['stockBought', 'stockUsed', 'stockAvailable', 'stockWasted']);
 
-  const headerStyle = (key, isAction = false) => {
+  const getColumnStyle = (key, isAction = false) => {
     const base = { verticalAlign: 'middle' };
-    if (numericKeys.includes(key)) base.textAlign = 'right';
-    if (isAction) {
-      base.borderLeft = '2px solid #dee2e6';
-      base.textAlign = 'center';
-    }
-    return base;
-  };
-
-  const cellStyle = (key, isAction = false) => {
-    const base = { verticalAlign: 'middle' };
-    if (numericKeys.includes(key)) base.textAlign = 'right';
+    if (numericKeys.has(key)) base.textAlign = 'right';
     if (isAction) {
       base.borderLeft = '2px solid #dee2e6';
       base.textAlign = 'center';
@@ -129,13 +120,13 @@ export default function ItemsTable({
                     key={label}
                     onClick={clickable ? () => onSort?.(sortKey) : undefined}
                     className={clickable ? styles.sortableTh : undefined}
-                    style={headerStyle(key)}
+                    style={getColumnStyle(key)}
                   >
                     {label} {clickable && <FontAwesomeIcon icon={getIconFor(sortKey)} size="lg" />}
                   </th>
                 );
               })}
-              <th style={headerStyle(null, true)} title="View usage history and charts">
+              <th style={getColumnStyle(null, true)} title="View usage history and charts">
                 Usage Record
               </th>
               <th
@@ -162,7 +153,7 @@ export default function ItemsTable({
                     const value = getNestedValue(el, key);
                     if (key === 'stockAvailable' && Number(value) < 10) {
                       return (
-                        <td key={label} style={cellStyle(key)}>
+                        <td key={label} style={getColumnStyle(key)}>
                           <Badge
                             color="danger"
                             pill
@@ -176,12 +167,12 @@ export default function ItemsTable({
                       );
                     }
                     return (
-                      <td key={label} style={cellStyle(key)}>
+                      <td key={label} style={getColumnStyle(key)}>
                         {value}
                       </td>
                     );
                   })}
-                  <td className={styles.itemsCell} style={cellStyle(null, true)}>
+                  <td className={styles.itemsCell} style={getColumnStyle(null, true)}>
                     <button
                       type="button"
                       onClick={() => handleEditRecordsClick(el, 'UsageRecord')}
@@ -305,3 +296,31 @@ export default function ItemsTable({
     </>
   );
 }
+
+ItemsTable.propTypes = {
+  selectedProject: PropTypes.string,
+  selectedItem: PropTypes.string,
+  filteredItems: PropTypes.arrayOf(PropTypes.object),
+  UpdateItemModal: PropTypes.elementType,
+  dynamicColumns: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      key: PropTypes.string,
+    }),
+  ).isRequired,
+  darkMode: PropTypes.bool,
+  itemType: PropTypes.string,
+  sortConfig: PropTypes.shape({
+    key: PropTypes.string,
+    direction: PropTypes.string,
+  }),
+  onSort: PropTypes.func,
+  totalItems: PropTypes.number,
+  currentPage: PropTypes.number,
+  totalPages: PropTypes.number,
+  rowsPerPage: PropTypes.number,
+  startRow: PropTypes.number,
+  endRow: PropTypes.number,
+  onPageChange: PropTypes.func,
+  onRowsPerPageChange: PropTypes.func,
+};
diff --git a/src/components/BMDashboard/ItemList/SelectItem.jsx b/src/components/BMDashboard/ItemList/SelectItem.jsx
index 3897ea7196..f0634dcc49 100644
--- a/src/components/BMDashboard/ItemList/SelectItem.jsx
+++ b/src/components/BMDashboard/ItemList/SelectItem.jsx
@@ -1,5 +1,43 @@
+import PropTypes from 'prop-types';
 import { Form, FormGroup, Label, Input } from 'reactstrap';
 
+const getConsumablesSet = (items, selectedProject) => {
+  if (selectedProject === 'all') {
+    return [...new Set(items.filter(m => m.name && m.name !== 'N/A').map(m => m.name))];
+  }
+  return [
+    ...new Set(
+      items
+        .filter(mat => mat.project?.name === selectedProject && mat.name && mat.name !== 'N/A')
+        .map(m => m.name),
+    ),
+  ];
+};
+
+const getConditionSet = (items, selectedProject) => {
+  if (selectedProject === 'all') {
+    return [...new Set(items.filter(m => m.condition).map(m => m.condition))];
+  }
+  return [
+    ...new Set(
+      items
+        .filter(mat => mat.project?.name === selectedProject && mat.condition)
+        .map(m => m.condition),
+    ),
+  ];
+};
+
+const getDefaultSet = (items, selectedProject) => {
+  if (selectedProject === 'all') {
+    return [...new Set(items.map(m => m.itemType?.name))];
+  }
+  return [
+    ...new Set(
+      items.filter(mat => mat.project?.name === selectedProject).map(m => m.itemType?.name),
+    ),
+  ];
+};
+
 export default function SelectItem({
   items,
   selectedProject,
@@ -16,43 +54,13 @@ export default function SelectItem({
 
   if (items?.length) {
     if (label === 'Consumables') {
-      if (selectedProject === 'all') {
-        itemSet = [...new Set(items.filter(m => m.name && m.name !== 'N/A').map(m => m.name))];
-      } else {
-        itemSet = [
-          ...new Set(
-            items
-              .filter(
-                mat => mat.project?.name === selectedProject && mat.name && mat.name !== 'N/A',
-              )
-              .map(m => m.name),
-          ),
-        ];
-      }
+      itemSet = getConsumablesSet(items, selectedProject);
     } else if (label === 'Tool Status') {
       itemSet = ['Using', 'Available', 'Under Maintenance'];
     } else if (label === 'Condition') {
-      if (selectedProject === 'all') {
-        itemSet = [...new Set(items.filter(m => m.condition).map(m => m.condition))];
-      } else {
-        itemSet = [
-          ...new Set(
-            items
-              .filter(mat => mat.project?.name === selectedProject && mat.condition)
-              .map(m => m.condition),
-          ),
-        ];
-      }
+      itemSet = getConditionSet(items, selectedProject);
     } else {
-      if (selectedProject === 'all') {
-        itemSet = [...new Set(items.map(m => m.itemType?.name))];
-      } else {
-        itemSet = [
-          ...new Set(
-            items.filter(mat => mat.project?.name === selectedProject).map(m => m.itemType?.name),
-          ),
-        ];
-      }
+      itemSet = getDefaultSet(items, selectedProject);
     }
   }
 
@@ -60,6 +68,19 @@ export default function SelectItem({
     ? { backgroundColor: '#1e293b', color: '#e5e7eb', borderColor: '#334155' }
     : undefined;
 
+  const getSelectValue = () => {
+    if (label === 'Condition') return selectedCondition;
+    if (label === 'Tool Status') return selectedToolStatus;
+    return selectedItem;
+  };
+
+  const handleSelectChange = e => {
+    const val = e.target.value;
+    if (label === 'Tool Status') setSelectedToolStatus(val);
+    else if (label === 'Condition') setSelectedCondition(val);
+    else setSelectedItem(val);
+  };
+
   return (
     <Form>
       <FormGroup className="select_input">
@@ -73,19 +94,8 @@ export default function SelectItem({
           id="select-item"
           name="select-item"
           type="select"
-          value={
-            label === 'Condition'
-              ? selectedCondition
-              : label === 'Tool Status'
-              ? selectedToolStatus
-              : selectedItem
-          }
-          onChange={e => {
-            const val = e.target.value;
-            if (label === 'Tool Status') setSelectedToolStatus(val);
-            else if (label === 'Condition') setSelectedCondition(val);
-            else setSelectedItem(val);
-          }}
+          value={getSelectValue() || ''}
+          onChange={handleSelectChange}
           disabled={!itemSet.length}
           style={darkStyle}
         >
@@ -106,3 +116,23 @@ export default function SelectItem({
     </Form>
   );
 }
+
+SelectItem.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      condition: PropTypes.string,
+      project: PropTypes.shape({ name: PropTypes.string }),
+      itemType: PropTypes.shape({ name: PropTypes.string }),
+    }),
+  ).isRequired,
+  selectedProject: PropTypes.string,
+  selectedItem: PropTypes.string,
+  setSelectedItem: PropTypes.func,
+  selectedToolStatus: PropTypes.string,
+  setSelectedToolStatus: PropTypes.func,
+  selectedCondition: PropTypes.string,
+  setSelectedCondition: PropTypes.func,
+  label: PropTypes.string,
+  darkMode: PropTypes.bool,
+};

From fb844a9797e67d19fbd9cf81151857e4c0bb4423 Mon Sep 17 00:00:00 2001
From: Adithya Cherukuri <adithyacherukuri@gmail.com>
Date: Sat, 6 Jun 2026 16:48:00 -0400
Subject: [PATCH 3/3] fix: reviewer changes

---
 .../BMDashboard/ItemList/ItemListView.jsx     | 24 ++++++++++++-----
 .../BMDashboard/ItemList/ItemsTable.jsx       | 27 ++++++++++++-------
 .../BMDashboard/ItemList/SelectItem.jsx       |  4 +--
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/components/BMDashboard/ItemList/ItemListView.jsx b/src/components/BMDashboard/ItemList/ItemListView.jsx
index 53c423260d..677ae90af4 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.jsx
+++ b/src/components/BMDashboard/ItemList/ItemListView.jsx
@@ -19,7 +19,7 @@ export function ItemListView({
   children,
 }) {
   const darkMode = useSelector(state => state.theme.darkMode);
-  const [filteredItems, setFilteredItems] = useState(items);
+  const [filteredItems, setFilteredItems] = useState(items || []);
   const [selectedProject, setSelectedProject] = useState('all');
   const [selectedItem, setSelectedItem] = useState('all');
   const [isError, setIsError] = useState(false);
@@ -55,7 +55,7 @@ export function ItemListView({
   }, [selectedProject, selectedItem, items]);
 
   useEffect(() => {
-    setIsError(Object.entries(errors).length > 0);
+    setIsError(errors ? Object.keys(errors).length > 0 : false);
   }, [errors]);
 
   useEffect(() => {
@@ -204,13 +204,25 @@ export function ItemListView({
           )}
 
           <div className={`${styles.buttonsRow}`}>
-            <button type="button" className={`${styles.btnPrimary}`}>
+            <button
+              type="button"
+              className={`${styles.btnPrimary}`}
+              onClick={() => console.log('Add Material clicked')}
+            >
               Add Material
             </button>
-            <button type="button" className={`${styles.btnPrimary}`}>
+            <button
+              type="button"
+              className={`${styles.btnPrimary}`}
+              onClick={() => console.log('Edit Name/Measurement clicked')}
+            >
               Edit Name/Measurement
             </button>
-            <button type="button" className={`${styles.btnPrimary}`}>
+            <button
+              type="button"
+              className={`${styles.btnPrimary}`}
+              onClick={() => console.log('View Update History clicked')}
+            >
               View Update History
             </button>
           </div>
@@ -294,7 +306,7 @@ ItemListView.propTypes = {
   errors: PropTypes.shape({
     message: PropTypes.string,
   }),
-  UpdateItemModal: PropTypes.elementType.isRequired,
+  UpdateItemModal: PropTypes.elementType,
   dynamicColumns: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string.isRequired,
diff --git a/src/components/BMDashboard/ItemList/ItemsTable.jsx b/src/components/BMDashboard/ItemList/ItemsTable.jsx
index 5f106f8f07..a880ebadbd 100644
--- a/src/components/BMDashboard/ItemList/ItemsTable.jsx
+++ b/src/components/BMDashboard/ItemList/ItemsTable.jsx
@@ -55,7 +55,7 @@ export default function ItemsTable({
   };
 
   const getNestedValue = (obj, path) =>
-    path.split('.').reduce((acc, part) => (acc ? acc[part] : null), obj);
+    path ? path.split('.').reduce((acc, part) => (acc ? acc[part] : null), obj) : null;
 
   const getIconFor = key => {
     if (!sortConfig?.key || sortConfig.key !== key) return faSort;
@@ -74,7 +74,7 @@ export default function ItemsTable({
 
   const getColumnStyle = (key, isAction = false) => {
     const base = { verticalAlign: 'middle' };
-    if (numericKeys.has(key)) base.textAlign = 'right';
+    if (key && numericKeys.has(key)) base.textAlign = 'right';
     if (isAction) {
       base.borderLeft = '2px solid #dee2e6';
       base.textAlign = 'center';
@@ -92,7 +92,9 @@ export default function ItemsTable({
         recordType={recordType}
         itemType={itemType}
       />
-      <UpdateItemModal modal={updateModal} setModal={setUpdateModal} record={updateRecord} />
+      {UpdateItemModal && (
+        <UpdateItemModal modal={updateModal} setModal={setUpdateModal} record={updateRecord} />
+      )}
 
       <div className={`${styles.itemsTableContainer} ${darkMode ? styles.darkTableWrapper : ''}`}>
         <Table className={darkMode ? styles.darkTable : ''}>
@@ -112,12 +114,12 @@ export default function ItemsTable({
               >
                 Name <FontAwesomeIcon icon={getIconFor('name')} size="lg" />
               </th>
-              {dynamicColumns.map(({ label, key }) => {
+              {(dynamicColumns || []).map(({ label, key }) => {
                 const sortKey = dynamicSortKeyByLabel[label];
                 const clickable = Boolean(sortKey);
                 return (
                   <th
-                    key={label}
+                    key={label || key}
                     onClick={clickable ? () => onSort?.(sortKey) : undefined}
                     className={clickable ? styles.sortableTh : undefined}
                     style={getColumnStyle(key)}
@@ -149,11 +151,16 @@ export default function ItemsTable({
                 <tr key={el._id}>
                   <td style={{ verticalAlign: 'middle' }}>{el.project?.name}</td>
                   <td style={{ verticalAlign: 'middle' }}>{el.itemType?.name}</td>
-                  {dynamicColumns.map(({ label, key }) => {
+                  {(dynamicColumns || []).map(({ label, key }) => {
                     const value = getNestedValue(el, key);
-                    if (key === 'stockAvailable' && Number(value) < 10) {
+                    if (
+                      key === 'stockAvailable' &&
+                      value !== null &&
+                      value !== undefined &&
+                      Number(value) < 10
+                    ) {
                       return (
-                        <td key={label} style={getColumnStyle(key)}>
+                        <td key={label || key} style={getColumnStyle(key)}>
                           <Badge
                             color="danger"
                             pill
@@ -167,7 +174,7 @@ export default function ItemsTable({
                       );
                     }
                     return (
-                      <td key={label} style={getColumnStyle(key)}>
+                      <td key={label || key} style={getColumnStyle(key)}>
                         {value}
                       </td>
                     );
@@ -223,7 +230,7 @@ export default function ItemsTable({
               ))
             ) : (
               <tr>
-                <td colSpan={dynamicColumns.length + 5} style={{ textAlign: 'center' }}>
+                <td colSpan={(dynamicColumns?.length || 0) + 5} style={{ textAlign: 'center' }}>
                   No items data
                 </td>
               </tr>
diff --git a/src/components/BMDashboard/ItemList/SelectItem.jsx b/src/components/BMDashboard/ItemList/SelectItem.jsx
index f0634dcc49..93527c1e30 100644
--- a/src/components/BMDashboard/ItemList/SelectItem.jsx
+++ b/src/components/BMDashboard/ItemList/SelectItem.jsx
@@ -52,7 +52,7 @@ export default function SelectItem({
 }) {
   let itemSet = [];
 
-  if (items?.length) {
+  if (items && items.length > 0) {
     if (label === 'Consumables') {
       itemSet = getConsumablesSet(items, selectedProject);
     } else if (label === 'Tool Status') {
@@ -99,7 +99,7 @@ export default function SelectItem({
           disabled={!itemSet.length}
           style={darkStyle}
         >
-          {itemSet.length ? (
+          {itemSet.length > 0 ? (
             <>
               <option value="all">All</option>
               {itemSet.map(name => (