uha optimize darkmode fix

src/components/BMDashboard/ItemList/ItemListView.jsx

@@ -1,21 +1,20 @@
 import { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
+import { useSelector } from 'react-redux';
+
 import BMError from '../shared/BMError';
 import SelectForm from './SelectForm';
 import SelectItem from './SelectItem';
 import ItemsTable from './ItemsTable';
+
 import styles from './ItemListView.module.css';
 
 export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamicColumns }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
   const [filteredItems, setFilteredItems] = useState(items);
   const [selectedProject, setSelectedProject] = useState('all');
   const [selectedItem, setSelectedItem] = useState('all');
   const [isError, setIsError] = useState(false);
-  const [selectedTime, setSelectedTime] = useState(new Date());
-  const darkMode = useSelector(state => state.theme.darkMode);
 
   useEffect(() => {
     if (items) setFilteredItems([...items]);
@@ -24,6 +23,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
   useEffect(() => {
     let filterItems;
     if (!items) return;
+
     if (selectedProject === 'all' && selectedItem === 'all') {
       setFilteredItems([...items]);
     } else if (selectedProject !== 'all' && selectedItem === 'all') {
@@ -46,64 +46,41 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
 
   if (isError) {
     return (
-      <main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
-        <h2>
-          {itemType}
-          {' List'}
-        </h2>
+      <main className={`${styles.items_list_container} ${darkMode ? 'dark-mode dm-text' : ''}`}>
+        <h2 className={darkMode ? 'dm-text' : ''}>{itemType} List</h2>
         <BMError errors={errors} />
       </main>
     );
   }
 
   return (
-    <main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
-      <h3>{itemType}</h3>
-      <section>
-        <span>
+    <main className={`${styles.items_list_container} ${darkMode ? 'dark-mode dm-text' : ''}`}>
+      <h3 className={darkMode ? 'dm-text dm-heading' : ''}>{itemType}</h3>
+
+      <section className={darkMode ? 'dm-bg dm-border dm-section-solid' : ''}>
+        <span
+          style={{ display: 'flex', margin: '5px' }}
+          className={darkMode ? 'dm-bg dm-filter-contrast dm-border dm-text' : ''}
+        >
           {items && (
-            <div className={`${styles.selectInput}`}>
-              <label htmlFor="itemListTime">Time:</label>
-              <DatePicker
-                selected={selectedTime}
-                onChange={date => setSelectedTime(date)}
-                showTimeSelect
-                timeFormat="HH:mm"
-                timeIntervals={15}
-                dateFormat="yyyy-MM-dd HH:mm:ss"
-                placeholderText="Select date and time"
-                inputId="itemListTime" // This is the key line
-                className={darkMode ? styles.darkDatePickerInput : styles.lightDatePickerInput}
-                calendarClassName={darkMode ? styles.darkDatePicker : styles.lightDatePicker}
-                popperClassName={
-                  darkMode ? styles.darkDatePickerPopper : styles.lightDatePickerPopper
-                }
-              />
+            <>
               <SelectForm
                 items={items}
                 setSelectedProject={setSelectedProject}
                 setSelectedItem={setSelectedItem}
+                darkMode={darkMode}
               />
               <SelectItem
                 items={items}
                 selectedProject={selectedProject}
                 selectedItem={selectedItem}
                 setSelectedItem={setSelectedItem}
+                darkMode={darkMode}
               />
-            </div>
+            </>
           )}
-          <div className={`${styles.buttonsRow}`}>
-            <button type="button" className={`${styles.btnPrimary}`}>
-              Add Material
-            </button>
-            <button type="button" className={`${styles.btnPrimary}`}>
-              Edit Name/Measurement
-            </button>
-            <button type="button" className={`${styles.btnPrimary}`}>
-              View Update History
-            </button>
-          </div>
         </span>
+
         {filteredItems && (
           <ItemsTable
             selectedProject={selectedProject}
@@ -122,32 +99,13 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
 ItemListView.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      itemType: PropTypes.shape({
-        name: PropTypes.string,
-        unit: PropTypes.string,
-      }),
-      project: PropTypes.shape({
-        _id: PropTypes.string,
-        name: PropTypes.string,
-      }),
-      stockAvailable: PropTypes.number,
-      stockBought: PropTypes.number,
-      stockUsed: PropTypes.number,
-      stockWasted: PropTypes.number,
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string,
     }),
   ).isRequired,
   errors: PropTypes.shape({
     message: PropTypes.string,
   }),
-  itemType: PropTypes.string.isRequired,
-  UpdateItemModal: PropTypes.elementType.isRequired,
-  dynamicColumns: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      key: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
 };
 
 ItemListView.defaultProps = {