Merge pull request #4903 from OneCommunityGlobal/adithya_materials_inventory_health

Adithya materials inventory health

Author: one-community

src/components/BMDashboard/ItemList/ItemListView.jsx

@@ -10,7 +10,14 @@ import ItemsTable from './ItemsTable';
 import UpdateHistoryModal from '../UpdateHistory/UpdateHistoryModal';
 import styles from './ItemListView.module.css';
 
-export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamicColumns }) {
+export function ItemListView({
+  itemType,
+  items,
+  errors,
+  UpdateItemModal,
+  dynamicColumns,
+  children,
+}) {
   const [filteredItems, setFilteredItems] = useState(items);
   const [selectedProject, setSelectedProject] = useState('all');
   const [selectedItem, setSelectedItem] = useState('all');
@@ -66,10 +73,11 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
     <main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
       <h3>{itemType}</h3>
       <section>
-        <span>
+        <div
+          style={{ display: 'flex', flexDirection: 'column', gap: '15px', marginBottom: '20px' }}
+        >
           {items && (
             <div className={`${styles.selectInput}`}>
-              {/* Wrap the Time label and Datepicker in a flex group */}
               <div className={`${styles.filterGroup}`}>
                 <label htmlFor="itemListTime">Time:</label>
                 <DatePicker
@@ -88,20 +96,29 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
                   }
                 />
               </div>
-              <SelectForm
-                items={items}
-                setSelectedProject={setSelectedProject}
-                setSelectedItem={setSelectedItem}
-              />
-              <SelectItem
-                items={items}
-                selectedProject={selectedProject}
-                selectedItem={selectedItem}
-                setSelectedItem={setSelectedItem}
-                label={itemType}
-              />
+
+              <div className={`${styles.filterGroup}`}>
+                <SelectForm
+                  items={items}
+                  setSelectedProject={setSelectedProject}
+                  setSelectedItem={setSelectedItem}
+                />
+              </div>
+
+              {itemType !== 'Materials' && (
+                <div className={`${styles.filterGroup}`}>
+                  <SelectItem
+                    items={items}
+                    selectedProject={selectedProject}
+                    selectedItem={selectedItem}
+                    setSelectedItem={setSelectedItem}
+                    label={itemType}
+                  />
+                </div>
+              )}
             </div>
           )}
+
           <div className={`${styles.buttonsRow}`}>
             <button type="button" className={`${styles.btnPrimary}`}>
               Add Material
@@ -117,7 +134,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
               View Update History
             </button>
           </div>
-        </span>
+        </div>
 
         <UpdateHistoryModal
           isOpen={updateHistoryModalOpen}
@@ -126,6 +143,25 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
           selectedProject={selectedProject}
         />
 
+        {children && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: '15px',
+              flexWrap: 'wrap',
+              gap: '15px',
+              backgroundColor: darkMode ? '#2d2d2d' : '#f8f9fa',
+              padding: '12px 15px',
+              borderRadius: '6px',
+              border: darkMode ? '1px solid #444' : '1px solid #dee2e6',
+            }}
+          >
+            {children}
+          </div>
+        )}
+
         {filteredItems && (
           <ItemsTable
             selectedProject={selectedProject}
@@ -171,10 +207,12 @@ ItemListView.propTypes = {
       key: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  children: PropTypes.node,
 };
 
 ItemListView.defaultProps = {
   errors: {},
+  children: null,
 };
 
 export default ItemListView;

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

@@ -53,26 +53,27 @@ table td {
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  gap: 30px; 
+  gap: 30px;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto 20px auto;
   overflow: visible;
 }
 
 .filterGroup,
-.selectInput > div,
-.selectInput > form {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.filterGroup > div,
+.filterGroup > form {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 10px !important;
 }
 
 .selectInput label {
   font-weight: bold;
   text-align: center;
   white-space: nowrap;
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 
 .selectInput input,
@@ -84,12 +85,11 @@ table td {
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 
 .selectInput input[type='text'] {
   padding: 5px;
-  margin-bottom: 0;
 }
 .btnPrimary {
   background-color: #468ef9;