Sai Sandeep taking over for Xinyi - fix: project and tool filters

package.json

@@ -94,7 +94,7 @@
     "react-chartjs-2": "^5.3.0",
     "react-circular-progressbar": "^2.1.0",
     "react-collapsible": "^2.10.0",
-    "react-datepicker": "^4.8.0",
+    "react-datepicker": "^4.25.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-icons": "^4.12.0",
@@ -180,6 +180,7 @@
     "@testing-library/user-event": "^12.0.14",
     "@types/html-to-pdfmake": "^2.4.4",
     "@types/pdfmake": "^0.2.11",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.5.0",
     "@vitest/coverage-v8": "^3.2.4",

src/components/BMDashboard/ItemList/ItemListView.jsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -10,18 +9,10 @@ import SelectItem from './SelectItem';
 import ItemsTable from './ItemsTable';
 import styles from './ItemListView.module.css';
 
-export function ItemListView({
-  itemType,
-  items,
-  errors,
-  UpdateItemModal,
-  dynamicColumns,
-  children,
-}) {
-  const darkMode = useSelector(state => state.theme.darkMode);
-  const [filteredItems, setFilteredItems] = useState(items || []);
-  const [selectedProject, setSelectedProject] = useState('all');
-  const [selectedItem, setSelectedItem] = useState('all');
+export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamicColumns }) {
+  const [filteredItems, setFilteredItems] = useState([]);
+  const [selectedProject, setSelectedProject] = useState([]); // Array of strings
+  const [selectedItem, setSelectedItem] = useState([]); // Array of strings
   const [isError, setIsError] = useState(false);
   const [selectedTime, setSelectedTime] = useState(new Date());
 
@@ -30,32 +21,37 @@ export function ItemListView({
   const [currentPage, setCurrentPage] = useState(1);
   const [rowsPerPage, setRowsPerPage] = useState(25);
 
+  // Sync initial items load
   useEffect(() => {
     if (items) setFilteredItems([...items]);
   }, [items]);
 
+  // Unified Filtering Logic (Treats empty arrays as 'unfiltered/show all')
   useEffect(() => {
-    let filterItems;
     if (!items) return;
 
-    if (selectedProject === 'all' && selectedItem === 'all') {
-      setFilteredItems([...items]);
-    } else if (selectedProject !== 'all' && selectedItem === 'all') {
-      filterItems = items.filter(item => item.project?.name === selectedProject);
-      setFilteredItems([...filterItems]);
-    } else if (selectedProject === 'all' && selectedItem !== 'all') {
-      filterItems = items.filter(item => item.itemType?.name === selectedItem);
-      setFilteredItems([...filterItems]);
-    } else {
-      filterItems = items.filter(
-        item => item.project?.name === selectedProject && item.itemType?.name === selectedItem,
+    const hasProjectFilter = selectedProject.length > 0;
+    const hasItemFilter = selectedItem.length > 0;
+
+    let matchedItems = items;
+
+    if (hasProjectFilter && !hasItemFilter) {
+      matchedItems = items.filter(item => selectedProject.includes(item.project?.name));
+    } else if (!hasProjectFilter && hasItemFilter) {
+      matchedItems = items.filter(item => selectedItem.includes(item.itemType?.name));
+    } else if (hasProjectFilter && hasItemFilter) {
+      matchedItems = items.filter(
+        item =>
+          selectedProject.includes(item.project?.name) &&
+          selectedItem.includes(item.itemType?.name),
       );
-      setFilteredItems([...filterItems]);
     }
+
+    setFilteredItems(matchedItems);
   }, [selectedProject, selectedItem, items]);
 
   useEffect(() => {
-    setIsError(errors ? Object.keys(errors).length > 0 : false);
+    setIsError(Object.entries(errors || {}).length > 0);
   }, [errors]);
 
   useEffect(() => {
@@ -152,10 +148,7 @@ export function ItemListView({
   if (isError) {
     return (
       <main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
-        <h2>
-          {itemType}
-          {' List'}
-        </h2>
+        <h2>{itemType} List</h2>
         <BMError errors={errors} />
       </main>
     );
@@ -197,8 +190,7 @@ export function ItemListView({
                 selectedProject={selectedProject}
                 selectedItem={selectedItem}
                 setSelectedItem={setSelectedItem}
-                label={itemType === 'Materials' ? 'Material' : itemType}
-                darkMode={darkMode}
+                label={itemType}
               />
             </div>
           )}
@@ -313,12 +305,10 @@ ItemListView.propTypes = {
       key: PropTypes.string.isRequired,
     }),
   ).isRequired,
-  children: PropTypes.node,
 };
 
 ItemListView.defaultProps = {
   errors: {},
-  children: null,
 };
 
 export default ItemListView;